/* Knoppen naar de prijsconfigurator: de vaste CTA in de kop (Kop.astro)
   en de varianten van ConfiguratorKnop.astro. Kleuren uit de huisstijl. */

/* Vaste CTA in de hoofdnavigatie: altijd zichtbaar, ook op mobiel naast het menu. */
header nav.navbar .nav-cta {
  flex: none;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 22.5px 0 7.5px;
  padding: 14px 22px;
  background: #BF9F7E;
  color: #ffffff;
  border-radius: 5px;
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .25);
  transition: background .3s, color .3s;
}
header nav.navbar .nav-cta:hover,
header nav.navbar .nav-cta:focus-visible {
  background: #ffffff;
  color: #2b3230;
  text-decoration: none;
}
header nav.navbar .nav-cta:focus-visible { outline: 2px solid #BF9F7E; outline-offset: 2px; }
header nav.navbar .nav-cta i { font-size: 12px; }

/* Tussen 992 en 1300px is de balk krap: menu iets compacter. */
@media (min-width: 992px) and (max-width: 1299.98px) {
  header nav.navbar.navbar-main .navbar-nav > .nav-item > .nav-link { padding-left: 11px; padding-right: 11px; }
  header nav.navbar.navbar-main .navbar-nav > .nav-item.dropdown > .nav-link { padding-right: 34px; }
  header nav.navbar .nav-cta { margin-right: 15px; padding: 12px 16px; font-size: 14px; }
}
/* Mobiel: het menu klapt in, de CTA blijft naast de hamburger staan. */
@media (max-width: 991.98px) {
  header nav.navbar .nav-cta { margin: 0 12px 0 auto; padding: 11px 16px; font-size: 14px; }
}
@media (max-width: 400px) {
  header nav.navbar .nav-cta { padding: 10px 12px; font-size: 13px; }
  header nav.navbar .nav-cta i { display: none; }
}

/* Omlijnde varianten van de themaknop .btn */
.btn.btn-configurator--lijn,
.btn.btn-configurator--lijn-donker {
  background: transparent;
  box-shadow: none;
  padding: 21.5px 36.5px;
}
.btn.btn-configurator--lijn { border: 1px solid rgba(255, 255, 255, .8); color: #ffffff; }
.btn.btn-configurator--lijn:hover { border-color: #BF9F7E; }
.btn.btn-configurator--lijn:before { background: #BF9F7E; }
.btn.btn-configurator--lijn-donker { border: 1px solid #2b3230; color: #2b3230; }
.btn.btn-configurator--lijn-donker:after { color: inherit; }
.btn.btn-configurator--lijn-donker:hover { color: #ffffff; }

/* Twee knoppen onder elkaar (bv. brochure en configurator), even breed */
.knoppen { display: inline-flex; flex-direction: column; align-items: stretch; gap: 15px; margin-top: 30px; max-width: 100%; }
.knoppen .btn, .knoppen .btn + .btn, .knoppen .btn:last-child { margin: 0 !important; }
.knoppen p { margin: 0; }
/* Naast elkaar (bv. Lees verder en configurator in een hero); op smalle schermen onder elkaar */
.knoppen.knoppen--rij { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 15px; }