/*
 * BESTAND: css/public-hero-header.css
 * TYPE: PUBLIEKE LAYOUT
 * DOEL: Verbindt de publieke navigatie visueel met de hero. De header is
 *       transparant boven de hero en krijgt pas tijdens scrollen een vaste
 *       achtergrond. Herohoogtes zijn centraal gelijkgetrokken.
 * ONDERHOUD: Houd breakpoint, headerstatus en herohoogtes centraal in dit
 *            bestand zodat publieke pagina's niet onderling gaan afwijken.
 */

/* =========================================================================
   1. CENTRALE HEROHOOGTE
   ========================================================================= */
/* Homepage: royale hero blijft ongewijzigd. */
body.has-public-hero .mockup-hero {
  box-sizing:border-box;
  height:75vh;
  height:75svh;
  min-height:560px;
}

/* Vaste publieke pagina's starten direct op de compacte eindhoogte.
   Deze regel staat bewust in de initieel geladen CSS om 75 -> 37,5svh FOUC
   te voorkomen voordat public-responsive-polish.css beschikbaar is. */
body.has-public-hero .blog-hero,
body.has-public-hero .diagnosis-page > .blog-hero {
  box-sizing:border-box;
  height:auto;
  min-height:37.5svh;
}

body.has-public-hero .mockup-hero-content {
  padding-top:clamp(7rem,12vh,10rem);
  padding-bottom:clamp(3.5rem,8vh,6rem)
}

/* Zelfde definitieve tekstpositie als de later geladen responsive polish. */
body.has-public-hero .blog-hero-content {
  box-sizing:border-box;
  min-height:37.5svh;
  padding-top:clamp(10.25rem,18vh,12.25rem);
  padding-bottom:clamp(3rem,6vh,4.5rem);
}

body.has-public-hero .blog-hero-content > p {
  min-height:calc(1.08rem * 1.55 * 3);
  box-sizing:border-box;
}

/* =========================================================================
   2. HEADER BOVEN DE HERO
   ========================================================================= */
body.has-public-hero .site-header {
  position:fixed;
  z-index:100;
  top:0;
  right:0;
  left:0;
  min-height:82px;
  border-bottom:1px solid transparent;
  background:transparent;
  box-shadow:none;
  color:#fff;
  backdrop-filter:none;
  transition:background-color .25s ease,border-color .25s ease,box-shadow .25s ease,backdrop-filter .25s ease
}

body.has-public-hero .site-header .nav-wrap {
  height:82px
}

/* Het lichte logo is nodig zolang de navigatie op de hero ligt. */
body.has-public-hero .site-header .logo,
html[data-theme=dark] body.has-public-hero .site-header .logo {
  background-image:url('../images/logo-modern-light.svg?v=52029')
}

body.has-public-hero .site-header #main-nav > a {
  color:#fff
}

body.has-public-hero .site-header #main-nav > a:hover,
body.has-public-hero .site-header #main-nav > a[aria-current=page] {
  color:#fff
}

body.has-public-hero .site-header #main-nav > a::after {
  background:#b8ee73
}

body.has-public-hero .site-header .account-link,
body.has-public-hero .site-header .header-icon-button,
body.has-public-hero .site-header #theme-toggle.header-icon-button {
  border-color:rgba(255,255,255,.35);
  background:rgba(8,24,18,.28);
  color:#fff;
  box-shadow:none;
  backdrop-filter:blur(8px)
}

body.has-public-hero .site-header .account-link:hover,
body.has-public-hero .site-header .header-icon-button:hover,
body.has-public-hero .site-header #theme-toggle.header-icon-button:hover {
  border-color:#b8ee73;
  background:rgba(31,107,79,.9);
  color:#fff
}

/* =========================================================================
   3. HEADER TIJDENS SCROLLEN OVER DE HERO
   =========================================================================
   Bovenaan blijft de header volledig transparant. Zodra de bezoeker begint
   te scrollen krijgt de balk een vaste donkere achtergrond. Logo, links en
   iconen blijven in deze fase licht; pas na de hero schakelen ze naar de
   normale themastijl.
 */
body.has-public-hero.public-header-over-hero .site-header {
  border-bottom-color:transparent;
  background:var(--dark);
  box-shadow:0 8px 24px rgba(6,16,13,.18);
  color:#fff;
  backdrop-filter:none
}

body.has-public-hero.public-header-over-hero .site-header .logo,
html[data-theme=dark] body.has-public-hero.public-header-over-hero .site-header .logo {
  background-image:url('../images/logo-modern-light.svg?v=52029')
}

/* =========================================================================
   4. HEADER NA DE HERO
   ========================================================================= */
body.has-public-hero.public-header-scrolled .site-header {
  border-bottom-color:color-mix(in srgb,var(--brand) 14%,var(--line));
  background:var(--surface);
  box-shadow:0 10px 30px rgba(15,45,35,.1);
  color:var(--ink);
  backdrop-filter:blur(16px)
}

body.has-public-hero.public-header-scrolled .site-header .logo {
  background-image:url('../images/logo-modern.svg?v=52029')
}

html[data-theme=dark] body.has-public-hero.public-header-scrolled .site-header .logo {
  background-image:url('../images/logo-modern-light.svg?v=52029')
}

body.has-public-hero.public-header-scrolled .site-header #main-nav > a {
  color:var(--ink)
}

body.has-public-hero.public-header-scrolled .site-header #main-nav > a:hover,
body.has-public-hero.public-header-scrolled .site-header #main-nav > a[aria-current=page] {
  color:var(--brand)
}

body.has-public-hero.public-header-scrolled .site-header #main-nav > a::after {
  background:var(--brand)
}

body.has-public-hero.public-header-scrolled .site-header .account-link,
body.has-public-hero.public-header-scrolled .site-header .header-icon-button,
body.has-public-hero.public-header-scrolled .site-header #theme-toggle.header-icon-button {
  border-color:color-mix(in srgb,var(--brand) 18%,var(--line));
  background:color-mix(in srgb,var(--brand-2) 16%,var(--surface));
  color:var(--brand);
  box-shadow:0 6px 18px rgba(20,80,48,.08);
  backdrop-filter:none
}

body.has-public-hero.public-header-scrolled .site-header .account-link:hover,
body.has-public-hero.public-header-scrolled .site-header .header-icon-button:hover,
body.has-public-hero.public-header-scrolled .site-header #theme-toggle.header-icon-button:hover {
  border-color:var(--brand);
  background:var(--brand);
  color:#fff
}

/* =========================================================================
   5. HAMBURGER VANAF 1100 PX
   ========================================================================= */
@media(max-width:1100px) {
  body.site-menu-open {
    overflow:hidden
  }

  .site-header {
    z-index:102
  }

  .site-header .nav-wrap {
    position:relative
  }

  .site-header .account-link {
    display:none!important
  }

  #menu-toggle {
    position:relative;
    z-index:104;
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    border:1px solid color-mix(in srgb,var(--brand) 35%,var(--line));
    border-radius:10px;
    background:var(--brand);
    color:#fff;
    font-size:1.35rem
  }

  .site-header #main-nav {
    position:fixed!important;
    z-index:102;
    top:0!important;
    right:auto!important;
    bottom:0!important;
    left:0!important;
    display:flex!important;
    width:min(84vw,340px)!important;
    min-width:260px;
    height:100vh;
    height:100dvh;
    padding:1rem 1rem 1.5rem!important;
    overflow-x:hidden!important;
    overflow-y:auto!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:.35rem!important;
    background:#111a17!important;
    border:0!important;
    box-shadow:24px 0 60px rgba(0,0,0,.38)!important;
    visibility:hidden;
    transform:translateX(-105%);
    transition:none
  }

  .menu-animating .site-header #main-nav {
    transition:transform .25s ease,visibility .25s
  }

  .site-header #main-nav.open {
    visibility:visible;
    transform:translateX(0)
  }

  .site-header #main-nav > a {
    display:flex;
    align-items:center;
    min-height:48px;
    padding:.75rem .9rem!important;
    border:0!important;
    border-radius:8px;
    color:#c6d0cc!important;
    font-size:.92rem;
    font-weight:750;
    line-height:1.35
  }

  .site-header #main-nav > a::after {
    display:none
  }

  .site-header #main-nav > a:hover,
  .site-header #main-nav > a[aria-current=page] {
    border:0!important;
    background:#21882d!important;
    color:#fff!important
  }

  .site-header #main-nav .mobile-menu-head {
    display:grid!important
  }

  .site-menu-overlay {
    display:block
  }

  /* Boven de hero blijven de losse zoek/thema-controls transparant. */
  body.has-public-hero:not(.public-header-scrolled) .site-header .header-icon-button,
  body.has-public-hero:not(.public-header-scrolled) .site-header #theme-toggle.header-icon-button {
    border-color:rgba(255,255,255,.35);
    background:rgba(8,24,18,.28);
    color:#fff;
    box-shadow:none
  }
}

/* =========================================================================
   5. TELEFOON: COMPACTERE HERO
   ========================================================================= */
@media(max-width:700px) {
  body.has-public-hero .mockup-hero {
    height:50vh;
    height:50svh;
    min-height:430px
  }

  body.has-public-hero .blog-hero,
  body.has-public-hero .diagnosis-page > .blog-hero {
    height:auto;
    min-height:37.5svh
  }

  body.has-public-hero .mockup-hero-content {
    padding-top:6.25rem;
    padding-bottom:2.75rem
  }

  body.has-public-hero .blog-hero-content {
    min-height:37.5svh;
    padding-top:clamp(8rem,15svh,9rem);
    padding-bottom:clamp(2.75rem,6svh,4rem)
  }

  body.has-public-hero .site-header,
  body.has-public-hero .site-header .nav-wrap {
    min-height:68px;
    height:68px
  }
}

@media(max-height:520px) and (orientation:landscape) and (max-width:1100px) {
  .site-header #main-nav {
    padding-top:.65rem!important
  }
}

@media(prefers-reduced-motion:reduce) {
  body.has-public-hero .site-header {
    transition:none
  }
}

/* =========================================================================
   6. PATCH 2026-10-02: HERO-OVERLAY, COMPACTE SCROLLHEADER & MOBIEL MENU
   =========================================================================
   #site-header reserveert normaal ruimte om FOUC te voorkomen. Op hero-pagina's
   mag die reservering juist niet bestaan: de vaste header moet boven de hero
   liggen en mag de hero niet naar beneden drukken.
 */
body.has-public-hero #site-header {
  height:0;
  min-height:0;
  background:transparent;
}

/* Transparante toestand: iets compacter en volledig vrij van een achtergrond. */
body.has-public-hero .site-header {
  min-height:72px;
  background:transparent!important;
}

body.has-public-hero .site-header .nav-wrap {
  height:72px;
}

/* Na scrollen wordt de balk bewust compacter, vergelijkbaar met de referentie. */
body.has-public-hero.public-header-scrolled .site-header {
  min-height:62px;
}

body.has-public-hero.public-header-scrolled .site-header .nav-wrap {
  height:62px;
}

body.has-public-hero.public-header-scrolled .site-header .logo {
  height:52px;
}

@media(min-width:1101px) {
  body.has-public-hero.public-header-scrolled .site-header #main-nav > a {
    padding-top:1.15rem;
    padding-bottom:1.15rem;
  }

  body.has-public-hero.public-header-scrolled .site-header #main-nav > a::after {
    bottom:.55rem;
  }

  body.has-public-hero.public-header-scrolled .site-header .account-link,
  body.has-public-hero.public-header-scrolled .site-header .header-icon-button,
  body.has-public-hero.public-header-scrolled .site-header #theme-toggle.header-icon-button {
    width:40px;
    min-width:40px;
    height:40px;
    min-height:40px;
  }
}

/* Hamburgerpaneel: circa de helft van tablet/kleine-desktopbreedte. */
@media(max-width:1100px) {
  body.has-public-hero .site-header #main-nav,
  .site-header #main-nav {
    width:50vw!important;
    min-width:380px;
    max-width:560px;
  }

  /* Het paneel en de overlay moeten altijd boven de paginacontent klikbaar zijn. */
  .site-header #main-nav {
    z-index:1002!important;
    pointer-events:auto;
  }

  .site-menu-overlay {
    z-index:1001!important;
  }

  #menu-toggle {
    z-index:1003!important;
  }
}

/* Op telefoons is 50% te smal; daar blijft het menu een ruime lade. */
@media(max-width:700px) {
  body.has-public-hero .site-header #main-nav,
  .site-header #main-nav {
    width:88vw!important;
    min-width:0;
    max-width:380px;
  }
}

/* =========================================================================
   7. PATCH 2026-10-02C: VASTE HEADERMAAT & KLIKBAAR MOBIEL MENU
   =========================================================================
   De header behoudt voor en na de hero exact dezelfde maatvoering. Alleen de
   kleuren/achtergrond wisselen wanneer de hero daadwerkelijk verlaten is.

   Bij het mobiele menu moet de volledige header-stacking-context boven de
   pagina-overlay liggen. Een hoge z-index op #main-nav alleen is niet genoeg
   wanneer de ouder (.site-header) zelf een lagere stacking-context vormt.
 */
body.has-public-hero.public-header-scrolled .site-header {
  min-height:72px;
}

body.has-public-hero.public-header-scrolled .site-header .nav-wrap {
  height:72px;
}

/* Laat logo en actie-iconen exact dezelfde afmetingen behouden na scrollen. */
body.has-public-hero.public-header-scrolled .site-header .logo {
  height:var(--logo-h);
}

@media(min-width:1101px) {
  body.has-public-hero.public-header-scrolled .site-header #main-nav > a {
    padding-top:1.35rem;
    padding-bottom:1.35rem;
  }

  body.has-public-hero.public-header-scrolled .site-header #main-nav > a::after {
    bottom:.75rem;
  }

  body.has-public-hero.public-header-scrolled .site-header .account-link,
  body.has-public-hero.public-header-scrolled .site-header .header-icon-button,
  body.has-public-hero.public-header-scrolled .site-header #theme-toggle.header-icon-button {
    width:46px;
    min-width:46px;
    height:46px;
    min-height:46px;
  }
}

@media(max-width:1100px) {
  /* De ouder moet boven de overlay staan; zo blijven alle links klikbaar. */
  .site-header,
  body.has-public-hero .site-header {
    z-index:1202!important;
  }

  .site-header #main-nav {
    z-index:1204!important;
    pointer-events:auto!important;
  }

  #menu-toggle {
    z-index:1205!important;
  }

  .site-menu-overlay {
    z-index:1201!important;
  }

  /* De lade blijft ruim op tablet/kleine desktop. */
  .site-header #main-nav,
  body.has-public-hero .site-header #main-nav {
    width:50vw!important;
    min-width:380px;
    max-width:560px;
  }
}

@media(max-width:700px) {
  .site-header #main-nav,
  body.has-public-hero .site-header #main-nav {
    width:88vw!important;
    min-width:0;
    max-width:380px;
  }
}

/* =========================================================================
   8. DEFINITIEVE HEADERSTATUS BOVEN / TIJDENS / NA HERO
   =========================================================================
   De volgorde is bewust expliciet:
   1. paginatop: transparant boven de hero;
   2. scroll binnen hero: dekkend donker, met lichte navigatie;
   3. hero verlaten: dekkend licht (light mode) met donker logo/navigatie.

   Deze selectors staan als laatste in dit bestand zodat oudere algemene
   hero-regels de scrollstatus niet opnieuw transparant kunnen maken.
 */
body.has-public-hero:not(.public-header-over-hero):not(.public-header-scrolled) .site-header {
  border-bottom-color:transparent!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#fff!important;
  backdrop-filter:none!important;
}

body.has-public-hero.public-header-over-hero:not(.public-header-scrolled) .site-header {
  border-bottom-color:transparent!important;
  background:var(--dark)!important;
  box-shadow:0 8px 24px rgba(6,16,13,.18)!important;
  color:#fff!important;
  backdrop-filter:none!important;
}

body.has-public-hero.public-header-over-hero:not(.public-header-scrolled) .site-header .logo,
html[data-theme=dark] body.has-public-hero.public-header-over-hero:not(.public-header-scrolled) .site-header .logo {
  background-image:url('../images/logo-modern-light.svg?v=52029')!important;
}

body.has-public-hero.public-header-over-hero:not(.public-header-scrolled) .site-header #main-nav > a {
  color:#fff!important;
}

body.has-public-hero.public-header-scrolled .site-header {
  background:var(--surface)!important;
  color:var(--ink)!important;
}

body.has-public-hero.public-header-scrolled .site-header .logo {
  background-image:url('../images/logo-modern.svg?v=52029')!important;
}

html[data-theme=dark] body.has-public-hero.public-header-scrolled .site-header .logo {
  background-image:url('../images/logo-modern-light.svg?v=52029')!important;
}


/* =========================================================================
   9. PATCH 2026-10-02G: STABIELE EERSTE PAINT & DEFINITIEVE LOGOWISSEL
   =========================================================================
   Deze regels zijn bewust de laatste autoriteit voor de drie headerstanden.
   De body heeft `has-public-hero` al in de HTML, dus style.css kan tijdens de
   eerste paint geen witte standaardheader of gereserveerde headerhoogte tonen.
 */
body.has-public-hero #site-header {
  height:0!important;
  min-height:0!important;
  background:transparent!important;
}

/* 1. Paginatop: transparant, lichte navigatie boven de hero. */
body.has-public-hero:not(.public-header-over-hero):not(.public-header-scrolled) .site-header {
  background:transparent!important;
  border-bottom-color:transparent!important;
  box-shadow:none!important;
}

/* 2. Scroll binnen hero: direct volledig dekkend donker. */
body.has-public-hero.public-header-over-hero:not(.public-header-scrolled) .site-header {
  background:#0b251e!important;
  border-bottom-color:transparent!important;
  box-shadow:0 8px 24px rgba(6,16,13,.18)!important;
}

body.has-public-hero.public-header-over-hero:not(.public-header-scrolled) .site-header .logo {
  background-image:url('../images/logo-modern-light.svg?v=52029')!important;
}

/* 3. Hero verlaten: altijd een dekkende lichte balk met donker logo. */
body.has-public-hero.public-header-scrolled .site-header,
html[data-theme=dark] body.has-public-hero.public-header-scrolled .site-header {
  background:#f6f7f2!important;
  border-bottom-color:#dce4df!important;
  box-shadow:0 10px 30px rgba(15,45,35,.10)!important;
  color:#123029!important;
  backdrop-filter:none!important;
}

body.has-public-hero.public-header-scrolled .site-header .logo,
html[data-theme=dark] body.has-public-hero.public-header-scrolled .site-header .logo {
  background-image:url('../images/logo-modern.svg?v=52029')!important;
}

body.has-public-hero.public-header-scrolled .site-header #main-nav > a,
html[data-theme=dark] body.has-public-hero.public-header-scrolled .site-header #main-nav > a {
  color:#123029!important;
}

body.has-public-hero.public-header-scrolled .site-header #main-nav > a:hover,
body.has-public-hero.public-header-scrolled .site-header #main-nav > a[aria-current=page],
html[data-theme=dark] body.has-public-hero.public-header-scrolled .site-header #main-nav > a:hover,
html[data-theme=dark] body.has-public-hero.public-header-scrolled .site-header #main-nav > a[aria-current=page] {
  color:#1f6b4f!important;
}

/* Geen hoogte-/formaattransitie: alleen kleur en schaduw mogen wisselen. */
body.has-public-hero .site-header,
body.has-public-hero .site-header .nav-wrap,
body.has-public-hero .site-header .logo,
body.has-public-hero .site-header .header-icon-button,
body.has-public-hero .site-header .account-link {
  transition-property:background-color,border-color,box-shadow,color!important;
}

/* =========================================================================
   10. PATCH 2026-10-02H: ROBUUSTE LOGOWISSEL VIA PSEUDO-ELEMENT
   =========================================================================
   Het publieke headerlogo wordt hier bewust niet meer via de background van
   .logo zelf gewisseld. Meerdere oudere stylesheets schrijven die property
   namelijk ook. Het pseudo-element is daardoor de enige zichtbare logolaag.
*/
body.has-public-hero .site-header .logo {
  position:relative;
  background-image:none!important;
}

body.has-public-hero .site-header .logo::before {
  content:"";
  position:absolute;
  inset:0;
  display:block;
  background-position:left center;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url('/images/logo-modern-light.svg?v=52029')!important;
  pointer-events:none;
}

/* Na de hero staat de navigatie op licht: toon altijd het donkere logo. */
body.has-public-hero.public-header-scrolled .site-header .logo::before,
html[data-theme="dark"] body.has-public-hero.public-header-scrolled .site-header .logo::before {
  background-image:url('/images/logo-modern.svg?v=52029')!important;
}


/* =========================================================================
   11. PATCH 2026-10-02I: ECHT IMG-ELEMENT VOOR HET HEADERLOGO
   =========================================================================
   De header gebruikt voortaan een echt img-element. Dit voorkomt conflicten
   met oudere background-image-regels en maakt de wissel deterministisch.
*/
body.has-public-hero .site-header .logo {
  background-image:none!important;
}

body.has-public-hero .site-header .logo::before {
  content:none!important;
  display:none!important;
}

body.has-public-hero .site-header .logo > .header-logo-image {
  display:block!important;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  visibility:visible!important;
  opacity:1!important;
}

/* =========================================================================
   12. PATCH 2026-10-02J: IDENTIEKE HEADERGEOMETRIE IN ALLE STATUSSEN
   =========================================================================
   Alleen kleur, achtergrond en logovariant mogen veranderen. Afmetingen,
   positie en spacing blijven gelijk aan de beginstand boven de hero.

   Het logo gebruikt opnieuw dezelfde background-techniek als de originele
   header. Hierdoor blijft de bestaande maatvoering exact behouden en ontstaat
   geen dubbele logolaag door een img- of pseudo-element.
 */
body.has-public-hero .site-header .logo,
body.has-public-hero .site-header .logo::before {
  content:none!important;
}

body.has-public-hero .site-header .logo > .header-logo-image {
  display:none!important;
}

/* Bovenaan en tijdens scrollen over de hero: lichte logovariant. */
body.has-public-hero:not(.public-header-scrolled) .site-header .logo {
  background:url('/images/logo-modern-light.svg?v=52029') left center / contain no-repeat!important;
}

/* Na de hero: exact dezelfde box, uitsluitend de donkere logovariant. */
body.has-public-hero.public-header-scrolled .site-header .logo,
html[data-theme="dark"] body.has-public-hero.public-header-scrolled .site-header .logo {
  background:url('/images/logo-modern.svg?v=52029') left center / contain no-repeat!important;
}

/* De header zelf behoudt in iedere status dezelfde hoogte. */
body.has-public-hero .site-header,
body.has-public-hero.public-header-over-hero .site-header,
body.has-public-hero.public-header-scrolled .site-header {
  min-height:72px!important;
}

body.has-public-hero .site-header .nav-wrap,
body.has-public-hero.public-header-over-hero .site-header .nav-wrap,
body.has-public-hero.public-header-scrolled .site-header .nav-wrap {
  height:72px!important;
}

/* Desktop: exact dezelfde logo-, link- en icoonmaten vóór en na de wissel. */
@media(min-width:1101px) {
  body.has-public-hero .site-header .logo,
  body.has-public-hero.public-header-over-hero .site-header .logo,
  body.has-public-hero.public-header-scrolled .site-header .logo {
    width:310px!important;
    height:70px!important;
    flex:0 0 auto!important;
  }

  body.has-public-hero .site-header #main-nav > a,
  body.has-public-hero.public-header-over-hero .site-header #main-nav > a,
  body.has-public-hero.public-header-scrolled .site-header #main-nav > a {
    padding:1.75rem 0 1.65rem!important;
  }

  body.has-public-hero .site-header #main-nav > a::after,
  body.has-public-hero.public-header-over-hero .site-header #main-nav > a::after,
  body.has-public-hero.public-header-scrolled .site-header #main-nav > a::after {
    bottom:1rem!important;
  }

  body.has-public-hero .site-header .account-link,
  body.has-public-hero .site-header .header-icon-button,
  body.has-public-hero .site-header #theme-toggle.header-icon-button,
  body.has-public-hero.public-header-scrolled .site-header .account-link,
  body.has-public-hero.public-header-scrolled .site-header .header-icon-button,
  body.has-public-hero.public-header-scrolled .site-header #theme-toggle.header-icon-button {
    width:44px!important;
    min-width:44px!important;
    height:44px!important;
    min-height:44px!important;
  }
}

/* =========================================================================
   12. VERFIJNING DESKTOPNAVIGATIE
   =========================================================================
   Home wordt via het logo bereikbaar gehouden. De overgebleven links krijgen
   iets meer onderlinge ruimte, zonder de vaste headerhoogte, logo-afmetingen,
   iconen of kleurwissels tijdens scrollen te veranderen.
   ========================================================================= */
@media(min-width:1101px) {
  .site-header #main-nav,
  body.has-public-hero .site-header #main-nav,
  body.has-public-hero.public-header-over-hero .site-header #main-nav,
  body.has-public-hero.public-header-scrolled .site-header #main-nav {
    gap:1.45rem!important;
  }
}

/* =========================================================================
   12. HOMEPAGE-ANKERS: SCHEIDINGSLIJN ONDER DE VASTE HEADER
   ========================================================================= */
/*
 * Over ons en Contact beginnen visueel op de scheiding tussen twee vlakken.
 * De vaste publieke header is 72px hoog. Met scroll-margin-top blijft die
 * scheidingslijn na een ankersprong exact onder de header zichtbaar, in
 * plaats van enkele pixels achter de vaste navigatie te verdwijnen.
 */
body[data-page="home"] #over-ons,
body[data-page="home"] #contact {
    scroll-margin-top: 72px;
}