/* ==========================================================================
   C1 · hd — Sitebrede header
   v1.0 · 2026-08-30 · Natuurlijk Gezonder
   --------------------------------------------------------------------------
   Prefix: hd-. Gebruikt uitsluitend tokens uit 00-tokens.css.
   Laadt na 05-reset.css.

   Twee ontwerpbesluiten die hier vastliggen omdat ze anders later
   ongemerkt teruggedraaid worden:

   1. De header is ALTIJD dekkend wit, ook boven een beeldhero. Een
      zwevende transparante header vraagt een lichte logovariant, en het
      logobestand laat zich niet met een filter omkleuren: de ammoniet in
      de cirkel verdwijnt dan en er blijft een witte schijf over (gemeten
      in de eerste render). Dekkend wit is bovendien wat een boekingssite
      nodig heeft — de navigatie moet vindbaar zijn, niet mooi zweven.

   2. De hoogte VERANDERT NIET bij scrollen. Een krimpende sticky header
      verschuift de inhoud eronder en kost per frame layoutwerk. De
      scrollstaat verandert alleen een schaduw (opacity van ::after) en de
      schaal van het logo (transform) — beide draaien op de compositor.
   ========================================================================== */

.hd {
  position: sticky;
  top: 0;
  z-index: var(--ng-z-header);
  background: var(--ng-grond);
  /* De hoogte staat vast en wordt nergens geanimeerd. */
  --hd-h: 4.25rem;               /* 68px, mobiel */
}
@media (min-width: 62rem) {
  .hd { --hd-h: 5.5rem; }        /* 88px, desktop */
}

/* De schaduwlaag zit in een pseudo-element zodat er opacity geanimeerd
   wordt in plaats van box-shadow. */
.hd::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-bottom: 1px solid var(--ng-lijn);
  box-shadow: var(--ng-schaduw-opgetild);
  opacity: 0;
  transition: opacity var(--ng-duur-rustig) var(--ng-easing);
}
.hd.is-gescrold::after { opacity: 1; }

.hd__balk {
  display: flex;
  align-items: center;
  gap: var(--ng-s-4);
  height: var(--hd-h);
}

/* --------------------------------------------------------------------------
   Logo
   -------------------------------------------------------------------------- */

.hd__logo {
  flex: 0 0 auto;
  display: block;
  margin-right: auto;
  line-height: 0;
  border-radius: var(--ng-radius);
}
/* Het logo is SVG, gebouwd uit het aangeleverde vectorbestand: horizontale
   lockup 1145 × 280, verhouding 4,09:1. Twee varianten via <picture>:
   desktop mét de regel HOME RESORT, mobiel zonder — op 32 px is die regel
   nog ongeveer drie pixels hoog en dan is het textuur, geen tekst. Beide
   bestanden hebben dezelfde viewBox, dus de omschakeling verschuift niets. */
.hd__logo img {
  width: auto;
  height: 2rem;                  /* 32px mobiel → 131px breed */
  transform-origin: left center;
  transition: transform var(--ng-duur-rustig) var(--ng-easing);
}
@media (min-width: 62rem) {
  .hd__logo img { height: 2.75rem; }   /* 44px → 180px breed */
}
.hd.is-gescrold .hd__logo img { transform: scale(.86); }

/* --------------------------------------------------------------------------
   Navigatie — desktop
   -------------------------------------------------------------------------- */

.hd__nav { display: none; }

/* De basisreset van de lijst staat BUITEN de mediaquery. Stond hij erin, dan
   erfde de verborgen desktoplijst op mobiel de 24px-inspringing van de
   themalaag — onzichtbaar, maar het soort restant dat later opduikt zodra
   iemand de breakpoints verschuift. */
.hd__lijst { margin: 0; padding: 0; list-style: none; }
.hd__lijst > li { margin: 0; }

@media (min-width: 62rem) {
  .hd__nav { display: block; }

  .hd__lijst {
    display: flex;
    align-items: center;
    gap: var(--ng-s-4);
  }
  .hd__lijst > li { position: relative; }

  .hd__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ng-s-1);
    padding: var(--ng-s-2) 0;
    font-size: var(--ng-t-klein);
    font-weight: var(--ng-w-half);
    letter-spacing: .02em;
    color: var(--ng-tekst);
    text-decoration: none;
    position: relative;
  }
  /* De onderstreping groeit vanuit het midden; dezelfde weg terug. */
  .hd__link::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--ng-actie);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform var(--ng-duur-snel) var(--ng-easing);
  }
  .hd__link:hover { color: var(--ng-actie); }
  .hd__link:hover::after,
  .hd__link:focus-visible::after { transform: scaleX(1); }
  .hd__link[aria-current="page"] { color: var(--ng-actie); }
  .hd__link[aria-current="page"]::after { transform: scaleX(1); }
}

/* --------------------------------------------------------------------------
   Submenu — desktop
   -------------------------------------------------------------------------- */

.hd__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  color: inherit;
  border-radius: var(--ng-radius);
}
.hd__toggle svg {
  width: .625rem;
  height: .625rem;
  transition: transform var(--ng-duur-snel) var(--ng-easing);
}
.hd__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.hd__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 62rem) {
  .hd__groep { display: inline-flex; align-items: center; gap: var(--ng-s-1); }

  .hd__sub {
    position: absolute;
    top: 100%;
    left: calc(var(--ng-s-3) * -1);
    min-width: 17.5rem;
    padding: var(--ng-s-2);
    background: var(--ng-grond);
    border: 1px solid var(--ng-lijn);
    border-radius: var(--ng-radius);
    box-shadow: var(--ng-schaduw-zwevend);

    /* Komt van boven, gaat naar boven terug. transform-origin ligt bij het
       item dat hem opriep, niet in het midden van het scherm. */
    transform-origin: top left;
    transform: translateY(-.375rem);
    opacity: 0;
    visibility: hidden;
    transition:
      opacity    var(--ng-duur-snel) var(--ng-easing),
      transform  var(--ng-duur-snel) var(--ng-easing),
      visibility 0s linear var(--ng-duur-snel);
  }
  /* Het submenu is een BROER van .hd__groep, geen kind — vandaar de
     aangrenzende combinator. Met een descendant-selector matcht hier niets. */
  .hd__groep.is-open + .hd__sub {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }

  .hd__sub li { margin: 0; }
  .hd__sub a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ng-s-3);
    padding: var(--ng-s-2) var(--ng-s-3);
    border-radius: var(--ng-radius);
    font-size: var(--ng-t-klein);
    color: var(--ng-tekst);
    text-decoration: none;
    transition: background-color var(--ng-duur-snel) var(--ng-easing);
  }
  .hd__sub a:hover { background: var(--ng-munt-050); color: var(--ng-tekst); }
  .hd__sub b { font-weight: var(--ng-w-half); white-space: nowrap; }
  .hd__sub span {
    font-size: var(--ng-t-micro);
    color: var(--ng-tekst);
    opacity: .7;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Taalkiezer
   -------------------------------------------------------------------------- */

.hd__taal { position: relative; flex: 0 0 auto; }

.hd__taalknop {
  display: inline-flex;
  align-items: center;
  gap: var(--ng-s-1);
  padding: var(--ng-s-2) var(--ng-s-2);
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-half);
  letter-spacing: var(--ng-ls-caps);
  text-transform: uppercase;
  color: var(--ng-tekst);
  border-radius: var(--ng-radius);
  transition: color var(--ng-duur-snel) var(--ng-easing);
}
.hd__taalknop:hover { color: var(--ng-actie); }
.hd__taalknop svg { width: .625rem; height: .625rem; transition: transform var(--ng-duur-snel) var(--ng-easing); }
.hd__taalknop[aria-expanded="true"] svg { transform: rotate(180deg); }

.hd__taallijst {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 9rem;
  margin: 0;
  padding: var(--ng-s-2);
  list-style: none;
  background: var(--ng-grond);
  border: 1px solid var(--ng-lijn);
  border-radius: var(--ng-radius);
  box-shadow: var(--ng-schaduw-zwevend);
  transform-origin: top right;
  transform: translateY(-.375rem);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--ng-duur-snel) var(--ng-easing),
    transform  var(--ng-duur-snel) var(--ng-easing),
    visibility 0s linear var(--ng-duur-snel);
}
.hd__taal.is-open .hd__taallijst {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}
.hd__taallijst li { margin: 0; }
.hd__taallijst a {
  display: block;
  padding: var(--ng-s-2) var(--ng-s-3);
  border-radius: var(--ng-radius);
  font-size: var(--ng-t-klein);
  color: var(--ng-tekst);
  text-decoration: none;
  transition: background-color var(--ng-duur-snel) var(--ng-easing);
}
.hd__taallijst a:hover { background: var(--ng-munt-050); }
.hd__taallijst a[aria-current="true"] { font-weight: var(--ng-w-half); color: var(--ng-actie); }

/* --------------------------------------------------------------------------
   Primaire actie
   -------------------------------------------------------------------------- */

.hd__actie {
  flex: 0 0 auto;
  display: none;
  align-items: center;
  padding: .6875rem var(--ng-s-4);
  background: var(--ng-actie);
  color: var(--ng-op-actie);
  border-radius: var(--ng-radius);
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-half);
  letter-spacing: .02em;
  text-decoration: none;
  transition:
    background-color var(--ng-duur-snel) var(--ng-easing),
    transform        var(--ng-duur-snel) var(--ng-easing);
}
@media (min-width: 48rem) { .hd__actie { display: inline-flex; } }
.hd__actie:hover { background: var(--ng-actie-hover); color: var(--ng-op-actie); }
/* Reactie op pointer-down, niet pas bij loslaten. */
.hd__actie:active { transform: translateY(1px); }

/* --------------------------------------------------------------------------
   Hamburger
   -------------------------------------------------------------------------- */

.hd__burger {
  flex: 0 0 auto;
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0 .625rem;
  border-radius: var(--ng-radius);
  color: var(--ng-tekst);
}
@media (min-width: 62rem) { .hd__burger { display: none; } }

.hd__burger i {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transform-origin: center;
  transition:
    transform var(--ng-duur-snel) var(--ng-easing),
    opacity   var(--ng-duur-snel) var(--ng-easing);
}
.hd__burger[aria-expanded="true"] i:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd__burger[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.hd__burger[aria-expanded="true"] i:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Mobiel paneel
   -------------------------------------------------------------------------- */

.hd__scrim {
  position: fixed;
  inset: 0;
  z-index: var(--ng-z-menu);
  background: rgba(20, 59, 53, .45);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity    var(--ng-duur-rustig) var(--ng-easing),
    visibility 0s linear var(--ng-duur-rustig);
}
.hd.is-menu-open .hd__scrim { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (min-width: 62rem) { .hd__scrim { display: none; } }

.hd__paneel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  z-index: var(--ng-z-overlay);
  width: min(22rem, 88vw);
  padding: var(--ng-s-4) var(--ng-s-4) var(--ng-s-6);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--ng-grond);
  box-shadow: var(--ng-schaduw-zwevend);

  /* Komt van rechts, gaat naar rechts terug. */
  transform: translateX(100%);
  visibility: hidden;
  transition:
    transform  var(--ng-duur-rustig) var(--ng-easing),
    visibility 0s linear var(--ng-duur-rustig);
}
.hd.is-menu-open .hd__paneel { transform: translateX(0); visibility: visible; transition-delay: 0s; }
@media (min-width: 62rem) { .hd__paneel { display: none; } }

/* Wie minder beweging wil, krijgt een overvloeier in plaats van een
   verplaatsing — niet géén terugkoppeling. */
@media (prefers-reduced-motion: reduce) {
  .hd__paneel { transform: none; opacity: 0; transition: opacity 120ms linear, visibility 0s linear 120ms; }
  .hd.is-menu-open .hd__paneel { opacity: 1; }
}

.hd__paneelkop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ng-s-3);
  min-height: 2.75rem;
  margin-bottom: var(--ng-s-4);
  padding-bottom: var(--ng-s-3);
  border-bottom: 1px solid var(--ng-lijn);
}
.hd__paneelkop p {
  margin: 0;
  font-size: var(--ng-t-micro);
  font-weight: var(--ng-w-half);
  letter-spacing: var(--ng-ls-caps);
  text-transform: uppercase;
  color: var(--ng-tekst-zacht);
}
.hd__sluit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-right: -.625rem;
  border-radius: var(--ng-radius);
  color: var(--ng-tekst);
}
.hd__sluit svg { width: 1rem; height: 1rem; }

.hd__paneel .hd__lijst { margin: 0; padding: 0; list-style: none; }
.hd__paneel .hd__lijst > li { margin: 0; border-bottom: 1px solid var(--ng-lijn); }

.hd__paneel .hd__groep {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.hd__paneel .hd__link {
  flex: 1;
  display: block;
  padding: var(--ng-s-3) 0;
  font-family: var(--ng-font-display);
  font-size: var(--ng-t-h3);
  font-weight: var(--ng-w-medium);
  letter-spacing: var(--ng-ls-kop);
  color: var(--ng-kop);
  text-decoration: none;
}
.hd__paneel .hd__toggle { width: 2.75rem; height: 2.75rem; color: var(--ng-tekst-zacht); }

/* Accordeon: grid-template-rows 0fr → 1fr is de enige manier om naar
   automatische hoogte te animeren zonder de hoogte te meten. Kost layout,
   maar alleen binnen het paneel en alleen bij een expliciete handeling. */
.hd__paneel .hd__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--ng-duur-rustig) var(--ng-easing);
}
.hd__paneel .hd__groep.is-open + .hd__sub { grid-template-rows: 1fr; }
.hd__paneel .hd__sub > div { overflow: hidden; min-height: 0; }
.hd__paneel .hd__sub ul { margin: 0 0 var(--ng-s-3); padding: 0; list-style: none; }
.hd__paneel .hd__sub li { margin: 0; }
.hd__paneel .hd__sub a {
  display: flex;
  justify-content: space-between;
  gap: var(--ng-s-3);
  padding: var(--ng-s-2) 0 var(--ng-s-2) var(--ng-s-3);
  font-size: var(--ng-t-body);
  color: var(--ng-tekst);
  text-decoration: none;
  border-left: 2px solid var(--ng-lijn);
}
.hd__paneel .hd__sub a:hover { border-left-color: var(--ng-actie); color: var(--ng-actie); }
.hd__paneel .hd__sub span { font-size: var(--ng-t-micro); opacity: .7; align-self: center; }

.hd__paneelvoet { margin-top: var(--ng-s-5); }
.hd__paneelvoet .hd__actie {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: .875rem var(--ng-s-4);
  font-size: var(--ng-t-body);
}
.hd__talen {
  display: flex;
  gap: var(--ng-s-2);
  margin: var(--ng-s-4) 0 0;
  padding: 0;
  list-style: none;
}
.hd__talen li { margin: 0; }
.hd__talen a {
  display: block;
  padding: var(--ng-s-2) var(--ng-s-3);
  border: 1px solid var(--ng-lijn);
  border-radius: var(--ng-radius);
  font-size: var(--ng-t-klein);
  font-weight: var(--ng-w-half);
  letter-spacing: var(--ng-ls-caps);
  text-transform: uppercase;
  color: var(--ng-tekst);
  text-decoration: none;
}
.hd__talen a[aria-current="true"] {
  background: var(--ng-actie);
  border-color: var(--ng-actie);
  color: var(--ng-op-actie);
}

/* --------------------------------------------------------------------------
   SF-13 · 01-10 · De themavulling op de menuknoppen
   --------------------------------------------------------------------------
   Hello Elementors reset.css zet `[type=button]:hover, [type=button]:focus
   { background-color:#c36; color:#fff }` — (0,2,0). De menuknoppen hadden
   geen eigen hover- of focusregel en werden dus roze met witte tekst: de
   submenuknop op elke pagina, de hamburger en de sluitknop van het paneel.
   `button.<klasse>:hover` weegt (0,2,1) en wint zonder !important. Elke
   regel zet de toestand terug op wat de knop in rust al is. De
   focusomlijning (`:focus-visible`) blijft onaangeroerd: alleen de
   themavulling verdwijnt. Zelfde vorm als SF-06 in 98-ac-galerij.css.
   Gemeten in Chromium vóór en na, met een kale knop als tegenproef. */
button.hd__toggle:hover,
button.hd__toggle:focus { background: none; color: inherit; }
.hd__paneel button.hd__toggle:hover,
.hd__paneel button.hd__toggle:focus { color: var(--ng-tekst-zacht); }
button.hd__burger:hover,
button.hd__burger:focus,
button.hd__sluit:hover,
button.hd__sluit:focus { background: none; color: var(--ng-tekst); }
/* De taalknop staat nog op `hidden`; zodra hij zichtbaar wordt geldt
   dezelfde themaregel. Focus eerst, hover daarna. */
button.hd__taalknop:focus { background: none; color: var(--ng-tekst); }
button.hd__taalknop:hover { background: none; color: var(--ng-actie); }

/* Scrollvergrendeling terwijl het paneel open staat.
   De klasse staat op <html>, niet op <body>: `scrollbar-gutter: stable` uit
   05-reset.css hoort bij het html-element, en alleen daar houdt hij de goot
   gereserveerd. Met de vergrendeling op body verdween de schuifbalk alsnog
   en sprong de hele pagina vijftien pixels opzij — gemeten, niet aangenomen. */
html.hd-vast {
  overflow: hidden;
  padding-right: var(--hd-schuifbalk, 0px);
}

/* --------------------------------------------------------------------------
   Aanraakdoelen — toegevoegd 02-09
   --------------------------------------------------------------------------
   De zes links in het accommodatiemenu waren 41 px hoog en het logo 32.
   Onder de praktijknorm van 44 px. Zie de toelichting in 95-ft-footer.css
   voor waarom dit op `pointer: coarse` staat en niet op een breedtegrens.
   -------------------------------------------------------------------------- */

@media (pointer: coarse) {
  .hd__sub a { min-height: 2.75rem; align-items: center; }
  .hd__logo { min-height: 2.75rem; display: flex; align-items: center; }
}

/* R4 · 2026-10-01 · de taalknop is nu zichtbaar: op een aanraakscherm 44 px hoog (was 38). */
@media (pointer: coarse) {
  .hd__taalknop { min-height: 2.75rem; }
  .hd__taallijst a, .hd__talen a { min-height: 2.75rem; display: flex; align-items: center; }
}