/* ==========================================================================
   header.css — gedeelde koptekst: merk, hoofdnav, "Over"-disclosure,
   taalwissel, thema-toggle en de mobiele hamburger.

   Wordt door alle pagina's geladen via <link rel="stylesheet"
   href="/assets/header.css"> vóór het pagina-eigen <style>-blok.

   Leunt op de design tokens (--color-*, --dur, --radius-*, --font-display)
   die elke pagina in haar eigen :root definieert. Die tokens staan hier
   bewust niet in: dit bestand beschrijft alleen de header.

   Wijzig de header UITSLUITEND hier — niet in de losse pagina's. Anders
   loopt de header per pagina weer uiteen, en dat is precies wat dit
   bestand voorkomt.
   ========================================================================== */

/* De header blijft bij het scrollen bovenaan staan. Anker-links moeten daar
   onderdoor kunnen mikken, dus houdt de pagina ruimte vrij bij het springen. */
html { scroll-padding-top: 6rem; }

/* De header staat als los blok direct in de <body>, NIET in een .wrap. Dat is
   geen stijlkeuze maar een voorwaarde: een sticky element plakt alleen binnen
   zijn eigen ouder. Zat de header in de eerste .wrap — die vlak na de hero
   dicht gaat — dan schoof hij daar gewoon mee het beeld uit. De .headerbar
   hieronder doet het werk van de .wrap: hij houdt de inhoud op de contentkolom. */
header.site {
  position: sticky; top: 0; z-index: 30;
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-border);

  /* De schaduw die verschijnt zodra de pagina gescrold is. In het donkere
     thema moet hij zwaarder zijn, anders zie je hem niet op de navy achtergrond. */
  --header-schaduw: 0 6px 20px rgb(0 0 0 / .10);
}
[data-theme="dark"] header.site { --header-schaduw: 0 6px 20px rgb(0 0 0 / .45); }

/* de rij zelf: merk links, nav en knoppen rechts, uitgelijnd op de contentkolom */
.headerbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 1.25rem 0; flex-wrap: wrap;
}

/* Op desktop MOET de header één rij blijven. `flex-wrap: wrap` breekt eerder
   dan dat het krimpt: past de nav er net niet bij, dan klapt niet de nav maar
   de laatste flex-regel (taalwissel + thema-toggle, order 5 en 6) naar een
   tweede rij onder het menu. Met nowrap krimpt de nav in plaats daarvan en
   blijven de knoppen waar ze horen. De wrap blijft wél aan onder 1160px:
   daar heeft de uitgeklapte nav juist een eigen regel nodig (flex-basis: 100%).
   Houd de labels in de nav kort — zie de andere pagina's — anders gaat de nav
   zelf over twee regels lopen. */
@media (min-width: 1160px) {
  .headerbar { flex-wrap: nowrap; }
}

/* Schaduw-bij-scrollen zonder JavaScript: een scroll-driven animation op de
   documentscroll. Die animatie staat op ::before en niet op de header zelf,
   want de pagina's zetten via .reveal al een `animation` op header.site — die
   zou de onze overschrijven. Browsers zonder ondersteuning krijgen simpelweg
   een plakkende header zonder schaduw; de lijn eronder scheidt dan. */
header.site::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  header.site::before {
    animation: header-schaduw linear both;
    animation-timeline: scroll(root block);
    animation-range: 0 4rem;
  }
  @keyframes header-schaduw {
    from { box-shadow: 0 0 0 rgb(0 0 0 / 0); }
    to   { box-shadow: var(--header-schaduw); }
  }
}

/* merk linksboven — <a> op subpagina's, <span> op de homepage */
.mark {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: .01em; text-transform: uppercase; color: var(--color-navy-text);
  text-decoration: none;
}
.mark svg { color: var(--color-blue); }

/* hoofdnav */
header.site nav { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
header.site nav a {
  font-weight: 700; font-size: .8rem; color: var(--color-blue-dark);
  text-decoration: underline; text-decoration-color: var(--color-baby-blue);
  text-underline-offset: 3px;
  transition: color var(--dur), text-decoration-color var(--dur);
}
header.site nav a:hover { color: var(--color-blue-hover); text-decoration-color: currentColor; }
header.site nav a[aria-current="page"] { color: var(--color-navy-text); text-decoration-color: var(--color-blue); }

/* --- Over-groep: disclosure in de hoofdnav --- */
.nav-group { position: relative; display: flex; align-items: center; }
.navhead { display: none; }
.navparent {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: inherit; font-weight: 700; font-size: .8rem;
  color: var(--color-blue-dark);
  background: none; border: 0; padding: 0; cursor: pointer;
  transition: color var(--dur);
}
.navparent:hover { color: var(--color-blue-hover); }
.navparent:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; }
.navparent .chev { transition: transform var(--dur); }
.navparent[aria-expanded="true"] .chev { transform: rotate(180deg); }
.navsub {
  display: none; position: absolute; top: calc(100% + .5rem); left: 0; z-index: 20;
  flex-direction: column; gap: .75rem; min-width: 12rem; padding: .9rem 1rem;
  background: var(--color-paper); border: 1px solid var(--color-border);
  border-radius: var(--radius-m); box-shadow: 0 8px 24px rgb(0 0 0 / .10);
}
.navparent[aria-expanded="true"] + .navsub { display: flex; }
.navsub a {
  font-weight: 700; font-size: .8rem; color: var(--color-blue-dark);
  text-decoration: underline; text-decoration-color: var(--color-baby-blue);
  text-underline-offset: 3px;
  transition: color var(--dur), text-decoration-color var(--dur);
}
.navsub a:hover { color: var(--color-blue-hover); text-decoration-color: currentColor; }
.navsub a[aria-current="page"] { color: var(--color-navy-text); text-decoration-color: var(--color-blue); }
@media (prefers-reduced-motion: reduce) {
  .navparent .chev { transition: none; }
}

/* taalwissel — compacte pill. `order` (niet de DOM-volgorde) bepaalt de
   plek: order 5 zet de pill rechts van de nav, uiterst rechts in de header. */
.lang {
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--color-blue-dark); text-decoration: none;
  border: 1px solid var(--color-border); border-radius: var(--radius-round);
  padding: .25rem .6rem; flex: none; order: 5; margin-left: 0;
  transition: border-color var(--dur), color var(--dur);
}
.lang:hover { border-color: var(--color-blue); color: var(--color-blue-hover); }
.lang:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; }

/* thema-toggle — naast de taalwissel, vaste plek rechts */
.themetoggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; flex: none; order: 6; margin-left: 0;
  background: none; border: 1px solid var(--color-border); border-radius: var(--radius-round);
  color: var(--color-navy-text); cursor: pointer;
  transition: border-color var(--dur), color var(--dur);
}
.themetoggle:hover { border-color: var(--color-blue); color: var(--color-blue-dark); }
.themetoggle:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; }
.themetoggle .icoon-zon { display: none; }
[data-theme="dark"] .themetoggle .icoon-maan { display: none; }
[data-theme="dark"] .themetoggle .icoon-zon { display: block; }

/* mobiele nav — hamburger onder 1160px */
.navtoggle {
  display: none; align-items: center; justify-content: center;
  width: 2.75rem; height: 2.75rem; flex: none;
  background: none; border: 1px solid var(--color-border); border-radius: var(--radius-m);
  color: var(--color-navy-text); cursor: pointer;
  transition: border-color var(--dur), color var(--dur);
}
.navtoggle:hover { border-color: var(--color-blue); color: var(--color-blue-dark); }
.navtoggle:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; }
.navtoggle .icoon-dicht { display: none; }
header.site.nav-open .navtoggle .icoon-open { display: none; }
header.site.nav-open .navtoggle .icoon-dicht { display: block; }

@media (max-width: 1159px) {
  .navtoggle { display: inline-flex; }
  .nav-group { display: block; }
  .navparent { display: none; }
  .navhead {
    display: block; padding: .7rem 0; font-weight: 700; font-size: .8rem;
    text-transform: uppercase; letter-spacing: .06em; color: var(--color-navy-text);
  }
  .navsub {
    display: flex; position: static; gap: 0; min-width: 0; padding: 0 0 0 1rem;
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }
  header.site nav {
    display: none; flex-basis: 100%; flex-direction: column; align-items: stretch;
    gap: 0; padding: .35rem 0 .75rem; margin-top: .5rem;
    border-top: 1px solid var(--color-border);
  }
  /* De header plakt, dus een uitgeklapte nav mag het scherm niet uit groeien:
     wat niet past, scrollt binnen de nav zelf. */
  header.site.nav-open nav {
    display: flex;
    max-height: calc(100dvh - 6rem); overflow-y: auto; overscroll-behavior: contain;
  }
  header.site nav a {
    display: block; width: 100%; padding: .7rem 0; font-size: 1rem;
  }
  .lang { order: 0; margin-left: auto; }
  .themetoggle { order: 0; margin-left: 0; }
}
