/* ==========================================================================
   Header
   --------------------------------------------------------------------------
   Twee verschijningsvormen via data-theme:
   - light  standaard en zonder JavaScript: lichte scrim, donkere tekst
   - dark   boven secties met data-header="dark": transparant, witte tekst.
            Alleen met JavaScript (.js); zonder blijft de header licht, ook
            als de pagina hem met data-theme="dark" laat beginnen.
   Op mobiel opent de menuknop de navigatie als volledig scherm; dat
   gedrag bestaat alleen met JavaScript (html.js). Zonder JavaScript staat
   het menu als rij links onder het logo.
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  border-bottom: var(--border-width) solid transparent;
  transition:
    background-color var(--dur-3) var(--ease-plain),
    border-color var(--dur-3) var(--ease-plain),
    color var(--dur-3) var(--ease-plain);
}

.site-header[data-theme="light"],
.no-js .site-header {
  color: var(--fg-1);
  background: var(--scrim-header-light);
  -webkit-backdrop-filter: var(--blur-header);
  backdrop-filter: var(--blur-header);
  border-bottom-color: var(--border);
  --logo-color: var(--petrol-700); /* groen logo boven lichte secties */
  --logo-mark-color: var(--petrol-700);
  --btn-ghost-border: var(--border-ghost-light);
  --btn-ghost-hover: var(--hover-on-light);
  --submenu-bg: var(--paper);
  --submenu-border: var(--border);
  --submenu-line: var(--accent);
}

/* Open menu: altijd de donkere vorm, want het menuvlak is petrol. Zonder
   backdrop-filter, anders wordt de header het containing block van het
   fixed menuvlak en valt dat niet meer over het hele scherm. */
.js .site-header[data-theme="dark"],
.site-header.is-menu-open {
  color: var(--on-dark-1);
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  --logo-color: currentColor; /* wit logo boven donkere secties */
  --logo-mark-color: currentColor;
  --btn-ghost-border: var(--border-on-dark);
  --btn-ghost-hover: var(--hover-on-dark);
  --submenu-bg: var(--bg-inverse);
  --submenu-border: var(--line-on-dark);
  --submenu-line: var(--on-dark-accent);
}

/* Mobiel, gescrold boven een donkere sectie: effen petrol in plaats van
   transparant, zodat tekst niet door de header heen leest. Bovenaan de
   pagina blijft hij transparant over de hero. */
@media (max-width: 47.99em) {
  .js .site-header.is-scrolled[data-theme="dark"]:not(.is-menu-open) {
    background: var(--bg-inverse);
    border-bottom-color: var(--line-on-dark);
  }
}

/* Petrol-outline valt weg op donker. */
.js .site-header[data-theme="dark"] :focus-visible,
.site-header.is-menu-open :focus-visible {
  outline-color: var(--on-dark-1);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--space-4);
  min-height: calc(var(--header-h) - var(--border-width)); /* rand hoort bij de hoogte */
  padding-inline: var(--shell-pad);
}

/* Logo en knoppen boven het fixed menuvlak (zelfde stacking context). */
.site-header .logo,
.site-header__actions {
  position: relative;
  z-index: 1;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* Contactknop is op mobiel compacter (ontwerp: 10/14px, 11px). */
.site-header__contact {
  gap: var(--space-2);
  padding: 0.625rem 0.875rem;
  font-size: var(--fs-micro);
}

/* --------------------------------------------------------------------------
   Navigatie — basis (zonder JavaScript op mobiel: rij links onder het logo)
   -------------------------------------------------------------------------- */

.site-nav {
  order: 1;
  flex-basis: 100%;
  padding-bottom: var(--space-3);
  /* Wachttijd voor een submenu sluit als de muis het kopje verlaat, zodat
     een schuine beweging naar het paneel het niet dichtklapt. */
  --submenu-grace: 150ms;
}

.site-nav ul {
  padding: 0;
  list-style: none;
}

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-6);
}

.site-nav__list > li {
  position: relative;
  display: flex;
  align-items: center;
}

.site-nav a {
  color: inherit;
  text-decoration: none;
  transition:
    opacity var(--dur-2) var(--ease-plain),
    background-color var(--dur-2) var(--ease-plain);
}

.site-nav a:hover {
  color: inherit;
}

/* Kopjes */
.site-nav__list > li > a {
  position: relative;
  display: inline-block;
  padding: var(--space-2) 0.125rem; /* 8px 2px: klikvlak zoals in het ontwerp */
  font-size: var(--fs-ui);
  letter-spacing: var(--tr-ui);
  opacity: 0.82;
}

.site-nav__list > li > a:hover,
.site-nav__list > li > a[aria-current="page"],
.site-nav__list > .current-menu-ancestor > a {
  opacity: 1;
}

/* Actief kopje (of een van zijn subpagina's): 1px lijn eronder. */
.site-nav__list > li > a[aria-current="page"]::after,
.site-nav__list > .current-menu-ancestor > a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: var(--border-width);
  background: currentColor;
}

/* Uitklapknop achter een kopje; alleen met JavaScript. */
.site-nav__sub-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--space-6);
  height: var(--space-6);
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
  opacity: 0.82;
  cursor: pointer;
}

.js .site-nav__sub-toggle {
  display: inline-flex;
}

.site-nav__sub-toggle:hover {
  opacity: 1;
}

/* Chevron als SVG-masker (zelfde aanpak als .arrow in button.css). */
.site-nav__chevron {
  width: 0.625rem;  /* 10px */
  height: 0.625rem;
  background-color: currentColor;
  -webkit-mask: var(--chevron-shape) center / contain no-repeat;
  mask: var(--chevron-shape) center / contain no-repeat;
  transition: transform var(--dur-3) var(--ease-soft);
  --chevron-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' fill='none' stroke='black' stroke-width='1'%3E%3Cpath d='M1 3.5l4 4 4-4'/%3E%3C/svg%3E");
}

/* Chevron wijst omhoog zolang het paneel open is, ook bij hover. */
.site-nav__sub-toggle[aria-expanded="true"] .site-nav__chevron,
.site-nav__list > li:hover > .site-nav__sub-toggle .site-nav__chevron {
  transform: rotate(180deg);
}

/* Submenu als paneel onder het kopje. Het ontvouwt van boven naar beneden
   (clip-path); daarna tekent een petrol lijn zich over de bovenrand en komen
   de links na elkaar binnen. */
.site-nav .sub-menu {
  /* Knipranden. Boven: ruimte voor de hover-brug (::before). Zijkant en
     onder: ruimte voor de schaduw, die anders mee wordt afgeknipt. */
  --unfold-top: calc(-1 * (var(--space-3) + var(--border-width)));
  --unfold-side: calc(-1 * var(--space-6));
  --unfold-bottom: calc(-1 * var(--space-10));
  position: absolute;
  top: 100%;
  left: calc(-1 * var(--space-5)); /* tekst van paneel en kopje op één lijn */
  z-index: 1;
  min-width: 15rem;
  margin-top: var(--space-3);
  padding-block: var(--space-3);
  background: var(--submenu-bg);
  border: var(--border-width) solid var(--submenu-border);
  border-radius: var(--radius-xs);
  box-shadow: var(--shadow-md);
  visibility: hidden;
  opacity: 0;
  clip-path: inset(var(--unfold-top) var(--unfold-side) 100% var(--unfold-side));
  transition:
    clip-path var(--dur-3) var(--ease-in-out) var(--submenu-grace),
    opacity var(--dur-2) var(--ease-plain) var(--submenu-grace),
    visibility 0s linear calc(var(--dur-3) + var(--submenu-grace));
}

/* Brug over de marge, zodat hover niet wegvalt tussen kopje en paneel. */
.site-nav .sub-menu::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 100%;
  height: calc(var(--space-3) + var(--border-width));
}

/* Petrol lijn over de bovenrand; tekent zich van links naar rechts. */
.site-nav .sub-menu::after {
  content: "";
  position: absolute;
  top: calc(-1 * var(--border-width));
  inset-inline: calc(-1 * var(--border-width));
  height: var(--border-width-accent);
  background: var(--submenu-line, var(--accent));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--dur-2) var(--ease-plain) var(--submenu-grace);
}

/* Links: beginnen iets lager en transparant (zelfde beweging als reveal). */
.site-nav .sub-menu > li {
  position: relative;
  opacity: 0;
  transform: translateY(var(--space-2));
  transition:
    opacity var(--dur-2) var(--ease-plain) var(--submenu-grace),
    transform var(--dur-2) var(--ease-out) var(--submenu-grace);
}

/* Volgorde: eerst ontvouwen, dan de lijn (stap 1), dan de links (stap 2+). */
.site-nav .sub-menu > li:nth-child(1) { --i: 2; }
.site-nav .sub-menu > li:nth-child(2) { --i: 3; }
.site-nav .sub-menu > li:nth-child(3) { --i: 4; }
.site-nav .sub-menu > li:nth-child(4) { --i: 5; }
.site-nav .sub-menu > li:nth-child(5) { --i: 6; }
.site-nav .sub-menu > li:nth-child(n + 6) { --i: 7; }

/* Open: bij hover, via de knop, of zonder JavaScript bij focus. */
:is(.site-nav__list > li:hover, .site-nav__list > li.is-open, .no-js .site-nav__list > li:focus-within) > .sub-menu {
  visibility: visible;
  opacity: 1;
  clip-path: inset(var(--unfold-top) var(--unfold-side) var(--unfold-bottom) var(--unfold-side));
  transition:
    clip-path var(--dur-3) var(--ease-in-out),
    opacity var(--dur-2) var(--ease-plain);
}

:is(.site-nav__list > li:hover, .site-nav__list > li.is-open, .no-js .site-nav__list > li:focus-within) > .sub-menu::after {
  transform: scaleX(1);
  transition: transform var(--dur-4) var(--ease-out) var(--stagger);
}

:is(.site-nav__list > li:hover, .site-nav__list > li.is-open, .no-js .site-nav__list > li:focus-within) > .sub-menu > li {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur-4) var(--ease-out) calc(var(--i, 2) * var(--stagger)),
    transform var(--dur-4) var(--ease-out) calc(var(--i, 2) * var(--stagger));
}

.site-nav .sub-menu a {
  display: block;
  padding: var(--space-2) var(--space-5);
  font-size: var(--fs-small);
  white-space: nowrap;
  opacity: 0.82;
}

.site-nav .sub-menu a:hover,
.site-nav .sub-menu a[aria-current="page"] {
  opacity: 1;
}

/* Hover en focus op een subpagina (vanaf tablet, in het paneel): tekst
   schuift op, petrol lijntje groeit links, pijl verschijnt rechts. */
@media (min-width: 48em) {
  .site-nav .sub-menu a {
    position: relative;
    padding-right: calc(var(--space-5) + var(--space-6)); /* ruimte voor de pijl */
    transition:
      padding-left var(--dur-2) var(--ease-soft),
      opacity var(--dur-2) var(--ease-plain);
  }

  .site-nav .sub-menu a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: var(--space-5);
    width: var(--space-3);
    height: var(--space-3);
    margin-top: calc(var(--space-3) / -2);
    background-color: currentColor;
    -webkit-mask: var(--arrow-shape) center / contain no-repeat;
    mask: var(--arrow-shape) center / contain no-repeat;
    opacity: 0;
    transform: translateX(calc(-1 * var(--space-2)));
    transition:
      opacity var(--dur-2) var(--ease-plain),
      transform var(--dur-3) var(--ease-soft);
  }

  .site-nav .sub-menu > li::before {
    content: "";
    position: absolute;
    inset-block: var(--space-1);
    left: 0;
    width: var(--border-width-accent);
    background: var(--submenu-line, var(--accent));
    transform: scaleY(0);
    transition: transform var(--dur-3) var(--ease-out);
  }

  .site-nav .sub-menu > li:is(:hover, :focus-within) > a {
    padding-left: calc(var(--space-5) + var(--space-1));
    opacity: 1;
  }

  .site-nav .sub-menu > li:is(:hover, :focus-within) > a::after {
    opacity: 1;
    transform: none;
  }

  /* Lijntje ook bij de actieve subpagina, zodat je ziet waar je bent. */
  .site-nav .sub-menu > li:is(:hover, :focus-within, .current-menu-item)::before {
    transform: scaleY(1);
  }
}

/* Contactknop in het menu: alleen zichtbaar onder 373px (zie onderaan). */
.site-nav__contact {
  display: none;
}

/* --------------------------------------------------------------------------
   Menuknop — alleen met JavaScript, alleen op mobiel
   -------------------------------------------------------------------------- */

.site-header__toggle {
  display: none;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  background: none;
  border: 0;
  color: inherit;
  font-size: var(--fs-micro);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-ui);
  text-transform: uppercase;
  cursor: pointer;
}

.js .site-header__toggle {
  display: inline-flex;
}

/* Twee lijnen die bij openen een kruis vormen. */
.site-header__toggle-icon {
  position: relative;
  width: 1.125rem;  /* 18px */
  height: 0.5rem;   /* 8px tussen de lijnen */
}

.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: var(--border-width);
  background: currentColor;
  transition: transform var(--dur-3) var(--ease-soft);
}

.site-header__toggle-icon::before { top: 0; }
.site-header__toggle-icon::after  { bottom: 0; }

/* 3.5px = halve icoonhoogte min halve lijn: beide lijnen naar het midden. */
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::before {
  transform: translateY(3.5px) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::after {
  transform: translateY(-3.5px) rotate(-45deg);
}

/* --------------------------------------------------------------------------
   Mobiel menu als volledig scherm (alleen met JavaScript).
   Bewust max-width: dit vlak bestaat alleen onder 768px; met min-width
   zou elke eigenschap erboven weer teruggezet moeten worden.
   -------------------------------------------------------------------------- */

@media (max-width: 767px) {
  .js .site-nav {
    position: fixed;
    inset: 0;
    z-index: 0;
    display: flex;
    flex-direction: column;
    padding: calc(var(--header-h) + var(--space-10)) var(--shell-pad) var(--space-10);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--bg-inverse);
    color: var(--on-dark-1);
    visibility: hidden;
    opacity: 0;
    /* visibility pas na de fade: dicht menu is niet focusbaar */
    transition:
      opacity var(--dur-3) var(--ease-plain),
      visibility 0s linear var(--dur-3);
  }

  .js .is-menu-open .site-nav {
    visibility: visible;
    opacity: 1;
    transition: opacity var(--dur-3) var(--ease-plain);
  }

  .js .site-nav__list {
    flex-direction: column;
    gap: var(--space-3);
  }

  /* Kopjes komen na elkaar binnen als het menu opent. */
  .js .site-nav__list > li {
    flex-wrap: wrap;
    gap: 0 var(--space-3);
    opacity: 0;
    transform: translateY(var(--reveal-shift));
    transition:
      opacity var(--dur-2) var(--ease-plain),
      transform var(--dur-2) var(--ease-out);
  }

  .js .site-nav__list > li:nth-child(1) { --i: 1; }
  .js .site-nav__list > li:nth-child(2) { --i: 2; }
  .js .site-nav__list > li:nth-child(3) { --i: 3; }
  .js .site-nav__list > li:nth-child(4) { --i: 4; }
  .js .site-nav__list > li:nth-child(5) { --i: 5; }
  .js .site-nav__list > li:nth-child(n + 6) { --i: 6; }

  .js .is-menu-open .site-nav__list > li {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-4) var(--ease-out) calc(var(--i, 1) * var(--stagger)),
      transform var(--dur-4) var(--ease-out) calc(var(--i, 1) * var(--stagger));
  }

  .js .site-nav__list > li > a {
    padding: var(--space-1) 0;
    font-family: var(--font-display);
    font-size: var(--fs-h2-cta);
    line-height: var(--lh-heading);
    letter-spacing: var(--tr-heading);
    opacity: 0.72;
  }

  .js .site-nav__list > li > a:hover,
  .js .site-nav__list > li > a[aria-current="page"],
  .js .site-nav__list > .current-menu-ancestor > a {
    opacity: 1;
  }

  /* Uitklapknop: groot genoeg om te tikken (44px). */
  .js .site-nav__sub-toggle {
    width: 2.75rem;
    height: 2.75rem;
  }

  .js .site-nav__chevron {
    width: 0.875rem;  /* 14px */
    height: 0.875rem;
  }

  /* Hier volgt de chevron alleen de knop; hover opent niets. */
  .js .site-nav__list > li:hover > .site-nav__sub-toggle[aria-expanded="false"] .site-nav__chevron {
    transform: none;
  }

  /* Submenu klapt uit onder het kopje in plaats van als paneel. */
  .js .site-nav .sub-menu {
    position: static;
    display: none;
    flex-basis: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--space-2) 0 var(--space-3);
    background: none;
    border: 0;
    box-shadow: none;
    visibility: visible;
    opacity: 1;
    clip-path: none;
  }

  .js .site-nav .sub-menu::after {
    display: none;
  }

  .js .site-nav__list > li.is-open > .sub-menu {
    display: block;
  }

  /* Subpagina's schuiven na elkaar in bij uitklappen. @starting-style geeft
     de begintoestand direct na display: block; browsers zonder ondersteuning
     tonen ze meteen, zoals voorheen. */
  /* Zelfde specificiteit als de open-regel van het paneel; staat later, wint. */
  .js .site-nav__list > li.is-open > .sub-menu > li {
    opacity: 1;
    transform: none;
    transition:
      opacity var(--dur-4) var(--ease-out) calc((var(--i, 2) - 2) * var(--stagger)),
      transform var(--dur-4) var(--ease-out) calc((var(--i, 2) - 2) * var(--stagger));
  }

  @starting-style {
    .js .site-nav__list > li.is-open > .sub-menu > li {
      opacity: 0;
      transform: translateY(var(--space-2));
    }
  }

  .js .site-nav .sub-menu a {
    padding: var(--space-2) 0;
    font-size: var(--fs-lead);
    line-height: var(--lh-snug);
    white-space: normal;
    opacity: 0.72;
  }

  .js .site-nav .sub-menu a:hover,
  .js .site-nav .sub-menu a[aria-current="page"] {
    background: none;
    opacity: 1;
  }
}

/* Smalle schermen: logo, contactknop en menuknop hebben samen 373px
   nodig (143 + 16 + 174 + 2 x 20 marge). Daaronder zou de balk op twee
   regels vallen; de contactknop verhuist dan naar het menu. */
@media (max-width: 372px) {
  .site-header__contact {
    display: none;
  }

  .site-nav__contact {
    display: inline-flex;
    align-self: flex-start;
    margin-top: var(--space-4);
  }

  .js .site-nav__contact {
    margin-top: var(--space-10);
  }
}

/* Ankerlinks (bijvoorbeeld #over-ons) landen onder de sticky header in
   plaats van erachter. */
html {
  scroll-padding-top: var(--header-h);
}

/* Paginascroll uit zolang het menu open is. */
html.is-menu-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Tablet en groter: menu in de balk, knop weg
   -------------------------------------------------------------------------- */

@media (min-width: 48em) {
  .site-header__inner {
    flex-wrap: nowrap;
  }

  .site-nav {
    order: 0;
    flex-basis: auto;
    padding-bottom: 0;
  }

  .js .site-header__toggle {
    display: none;
  }

  .site-header__contact {
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6) var(--space-4) 1.75rem; /* terug naar .btn */
    font-size: var(--fs-ui);
  }
}

@media (min-width: 64em) {
  .site-nav__list {
    gap: var(--space-1) 2.25rem; /* 36px tussen items, ontwerp */
  }

  .site-header__actions {
    gap: var(--space-6);
  }
}