.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 251, 247, 0.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(13, 92, 73, 0.14);
}

/* De cookiebanner (css/cookie.css) heeft z-index 1000/1001; zonder dit
   verdwijnt het onderste deel van het opengeklapte mobiele paneel erachter. */
.site-header.is-open { z-index: 1002; }

.site-header nav {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 18px var(--section-pad-h);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* Logo */
.nav-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: auto;
  color: inherit;
}
.nav-logo:hover { color: inherit; }
.nav-logo img   { height: 48px; width: auto; }

.nav-logo-text  { display: flex; flex-direction: column; line-height: 1.05; }
.nav-logo-name  { font-family: var(--font-serif); font-size: 23px; color: var(--c-green-deep); letter-spacing: 0.01em; }
.nav-logo-sub   { font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: #6C8177; font-weight: 600; padding-left: 3px; }

/* Menu — op desktop gewoon de rij die hier altijd stond, op mobiel een
   uitklapbaar paneel (zie css/mobile.css). */
.nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

/* Nav links */
.nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  font-size: 15.5px;
  font-weight: 600;
}
.nav-links a       { color: var(--c-green-mid); }
.nav-links a:hover { color: var(--c-orange); }

/* Verticale ruimte rond elke link. inline-flex en niet inline: bij een
   inline-element telt verticale padding niet mee voor de hoogte, en dan
   zou "Aanbod" (dat door zijn pijltje wél een flexbox is) een stukje
   lager staan dan de rest. Zo zijn alle items even hoog én houdt de
   muis contact met het item terwijl hij naar het paneel zakt. */
.nav-links a {
  display: inline-flex;
  align-items: center;
  padding: 13px 0;
}

/* Menuknop — standaard verborgen, css/mobile.css zet hem aan */
.nav-toggle { display: none; }

/* ─────────────────────────────────────────
   Uitklapmenu onder "Aanbod"

   Op desktop schuift het paneel open zodra de muis op het menu-item
   staat (of iemand er met de tab-toets in belandt: :focus-within). Op
   mobiel is er geen hover; daar wordt hetzelfde lijstje opengeklapt
   met het knopje ernaast — zie css/mobile.css en js/nav.js.
───────────────────────────────────────── */
.nav-item-sub { position: relative; }

.nav-item-sub > a { gap: 5px; }

.nav-caret { flex: 0 0 auto; transition: transform 0.15s; }
.nav-item-sub:hover > a .nav-caret,
.nav-item-sub:focus-within > a .nav-caret { transform: rotate(180deg); }

/* Het knopje is er alleen voor mobiel */
.nav-sub-toggle { display: none; }

.nav-sub {
  position: absolute;
  /* Zo begint het paneel precies op de onderrand van de koptekst, in
     plaats van er middenin. De strook ertussen wordt overbrugd door
     .nav-sub::before hieronder, anders valt de hover weg zodra de muis
     de link verlaat. */
  top: calc(100% + 21px);
  left: -18px;
  z-index: 1;
  min-width: 272px;
  /* De namen zijn lang; op desktop is er ruimte genoeg om ze op één
     regel te houden (op mobiel mogen ze wel afbreken, zie mobile.css). */
  white-space: nowrap;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--c-cream);
  border: 1px solid rgba(13, 92, 73, 0.14);
  border-radius: 16px;
  box-shadow: 0 18px 34px rgba(8, 76, 59, 0.13);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s;
}

/* De muis gaat van de link naar het paneel dwars door de lege ruimte
   ertussen; deze onzichtbare strook houdt de hover daar vast. */
.nav-sub::before {
  content: "";
  position: absolute;
  top: -21px;
  left: 0;
  right: 0;
  height: 21px;
}

.nav-item-sub:hover > .nav-sub,
.nav-item-sub:focus-within > .nav-sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}

.nav-sub a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--c-green-mid);
  transition: background 0.15s, color 0.15s;
}
.nav-sub a:hover,
.nav-sub a:focus-visible {
  background: var(--c-green-light);
  color: var(--c-orange);
}

@media (prefers-reduced-motion: reduce) {
  .nav-sub    { transition: none; }
  .nav-caret  { transition: none; }
}