/* === DEBUG / FORCE TEST === */
:root{ --sf-header-h: 170px !important; }   /* extreem, met !important */

@media (min-width: 821px){
  /* kleurkader zodat je het direct ziet */
  #banner{
    min-height: var(--sf-header-h) !important;
    padding-top: var(--sf-nav-h) !important;  /* nav-hoogte vrijhouden */
    
  }

  /* zorg dat de nav echt bovenaan blijft */
  .sf-nav.is-fixed{
    top: 0 !important;
    margin-top: 0 !important;
  }
  .sf-nav{ margin-top: 0 !important; }
}


/* DESKTOP — nav full-width + hoger + meer ruimte onder knoppen */
@media (min-width: 821px){
  /* Balk over de volle breedte + wat verticale padding */
  .sf-nav.is-fixed{
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    padding-left: 4%;           /* binnenmarges gelijk aan je wrapperstijl */
    padding-right: 4%;
    padding-top: 8px;           /* ↑ maak de balk hoger */
    padding-bottom: 8px;
    top: 0;                     /* zeker weten tegen de bovenkant */
  }

  /* Knoppen zelf wat groter (meer ‘ruimte eronder’ voelbaar) */
  .sf-nav__list a{
    padding: 14px 16px;         /* van 10x12 naar 14x16 */
  }

  /* Offset voor content onder de vaste balk laten meeschalen */
  :root{ --sf-nav-h: 68px; }    /* was 56px; pas desnoods 64–72px */
}


/* MOBIEL — iets hogere balk + ruimte onder de hamburgerknop */
@media (max-width: 820px){
  .sf-nav.is-fixed{
    padding-top: 6px;
    padding-bottom: 6px;        /* maakt de balk iets hoger */
  }
  .sf-nav__toggle{
    padding: 12px 14px;         /* knop zelf iets groter */
    margin-bottom: 0px;         /* extra ruimte eronder */
  }

  /* Als content nét onder de balk schuurt, zet deze iets hoger: */
  /* :root{ --sf-nav-h: 60px; } */
}

/* Desktop: vaste balk full-width, maar inhoud (UL) uitlijnen op wrapper */
@media (min-width: 821px){
  .sf-nav.is-fixed{
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    padding-left: 0;   /* geen extra buitenranden op de balk zelf */
    padding-right: 0;
  }

  /* UL inhoud centreren en begrenzen zoals .wrapper (92%, max 1200px) */
  .sf-nav__list{
    width: 92%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;

    /* ruimte links voor het logo behouden */
    padding-inline-start: var(--sf-logo-w);
    padding-left: var(--sf-logo-w);
  }
}




/* ========== LOGO IN DE NAV-BALK (desktop + mobiel) ========== */
/* ===== TOTAL PATCH — Desktop: meer ruimte rechts (max 2 rijen), Mobile ongewijzigd =====
   Doel desktop:
   - laatste button moet nog in rij 2 passen (geen 3e rij)
   - meer effectieve ruimte aan RECHTER kant
   Strategie:
   - bredere UL (99.5% / 1440px) + logo-uitlijning daarmee gesynchroniseerd
   - iets kleinere gap tussen buttons
   - zekere (niet-grote) knoppadding
*/

/* Globale variabelen (laten zoals je werkende basis) */
:root{
  /* Desktop (bestaande waarden) */
  --sf-nav-h-desktop: 98px;
  --sf-logo-w-desktop: 260px;  /* ruimte links voor logo */
  --sf-logo-gap: 110px;          /* kleine extra lucht tussen logo en menu */
  --sf-menu-gap-desktop: 8px;  /* ↓ van 10px → meer ruimte voor laatste knop */

  /* Mobiel (ongewijzigd t.o.v. je laatste werkende staat) */
  --sf-nav-h-mobile: 92px;
  --sf-edge-pad-left: 3%;
  --sf-edge-pad-right: 10px;
  --sf-toggle-height: 40px;
}

/* Veilig: geen debug rand */
#banner{ outline:none !important; }

/* ================= DESKTOP (>=821px) ================= */
@media (min-width: 821px){
  /* Balk strak bovenaan */
  .sf-nav.is-fixed{
    top: 0 !important;
    left: 0; transform: none;
    width: 100%; max-width: none;
    min-height: var(--sf-nav-h-desktop) !important;
    padding: 0 !important;
  }

  /* Logo ín de balk, uitgelijnd op bredere inhoud (99.5% / 1440px) */
  #logo{
    position: fixed;
    top: 0;
    left: calc((100vw - min(1440px, 99.5vw)) / 2) !important; /* ← gesynchroniseerd met UL */
    height: var(--sf-nav-h-desktop) !important;
    display: flex; align-items: center;
    z-index: 1300; pointer-events: auto;
  }
  #logo a{ display:flex; align-items:center; }
  #logo img{
    height: calc(var(--sf-nav-h-desktop) - 12px) !important;
    width: auto !important; max-height: none !important;
    margin: 0 !important;
  }

  /* UL breder dan voorheen + minder gap + zekere knoppadding
     → effectief meer ruimte AAN DE RECHTERKANT, minder snel 3e rij */
  .sf-nav__list{
    width: 99.5% !important;         /* ↑ van 98% */
    max-width: 1440px !important;     /* ↑ van 1360px */
    margin: 0 auto !important;
    gap: var(--sf-menu-gap-desktop) !important; /* ↓ gap */
    padding-left: calc(var(--sf-logo-w-desktop) + var(--sf-logo-gap)) !important;
    padding-inline-start: calc(var(--sf-logo-w-desktop) + var(--sf-logo-gap)) !important;
  }

  /* Hou desktop-knoppadding bescheiden (meer items per rij) */
  .sf-nav__list a{
    padding: 10px 12px !important; /* niet groter maken op desktop */
  }

  /* Inhoud onder de balk (voorkomt overlap met #hero) */
  body.has-fixed-nav{
    padding-top: calc(var(--sf-nav-h-desktop) + 10px) !important;
  }

  /* Oude banner-ruimte neutraliseren */
  #banner{ padding-top:0 !important; min-height:0 !important; }
}

/* ================= MOBIEL (<=820px) ================= */
/* Niets gewijzigd t.o.v. je laatste werkende patch */
@media (max-width: 820px){
  .sf-nav.is-fixed{
    top: 0 !important;
    min-height: var(--sf-nav-h-mobile) !important;
    padding-left: var(--sf-edge-pad-left) !important;
    padding-right: var(--sf-edge-pad-right) !important;
    padding-bottom: 32px !important;
  }

  #logo{
    position: fixed;
    top: 0; left: var(--sf-edge-pad-left) !important;
    height: var(--sf-nav-h-mobile) !important;
    display: flex; align-items: center;
    z-index: 1300; pointer-events: auto;
  }
  #logo a{ display:flex; align-items:center; }
  #logo img{
    height: calc(var(--sf-nav-h-mobile) - 20px) !important;
    width: auto !important; max-height: none !important;
    margin: 0 !important;
  }

  .sf-nav__toggle{
    position: fixed;
    right: var(--sf-edge-pad-right) !important;
    top: calc((var(--sf-nav-h-mobile) - var(--sf-toggle-height)) / 2 - 3px) !important;
    height: var(--sf-toggle-height) !important;
    padding: 4px 10px !important;
    display: flex; align-items: center; justify-content: center;
    z-index: 1400; margin: 0;
  }

  .sf-nav__list{
    margin-top: calc(var(--sf-nav-h-mobile) + 32px) !important;
    padding-left: 0 !important; padding-right: 0 !important;
  }

  body.has-fixed-nav{
    padding-top: calc(var(--sf-nav-h-mobile) + 32px) !important;
  }
}

@media (max-width: 820px){
  /* knop-formaat (hoogte = breedte) */
  :root{ --sf-toggle-height: 44px; }  /* bv. 44 of 48 */

  .sf-nav__toggle{
    height: var(--sf-toggle-height) !important;
    width:  var(--sf-toggle-height) !important;
    padding: 0 !important;                  /* echt vierkant */
    font-size: 24px !important;             /* grootte van het ☰-icoon */
    line-height: 1;                          /* nette centrering */
    top: calc((var(--sf-nav-h-mobile) - var(--sf-toggle-height)) / 2) !important; /* verticaal centreren */
  }
}


/* ===== MOBILE SPACING TIGHTEN — totaalpatch (alleen mobiel) ===== */
@media (max-width: 820px){
  :root{
    --sf-nav-h-mobile: 92px;             /* laat zoals je nu gebruikt */
    --sf-nav-pad-bottom-mobile: 0px;     /* ↓ was 32px: veel minder ruimte */
  }

  /* 1) Nav-balk: minder onderruimte */
  .sf-nav.is-fixed{
    padding-bottom: var(--sf-nav-pad-bottom-mobile) !important;
  }

  /* 2) Opengeklapt menu + content-offset gelijk trekken aan nieuwe waarde */
  .sf-nav__list{
    margin-top: calc(var(--sf-nav-h-mobile) + var(--sf-nav-pad-bottom-mobile)) !important;
  }
  body.has-fixed-nav{
    padding-top: calc(var(--sf-nav-h-mobile) + var(--sf-nav-pad-bottom-mobile)) !important;
  }

  /* 3) Zekerheidje: hero geen extra top-ruimte */
  #hero{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
}

/* ===== MOBILE: strak onder nav, maar #hero krijgt weer wat top-padding ===== */
@media (max-width: 820px){
  :root{
    --sf-nav-h-mobile: 92px;          /* laat zo als 't nu werkt bij jou */
    --sf-nav-pad-bottom-mobile: 0px;  /* geen extra bodemruimte in nav */
    --sf-hero-top-pad: 10px;          /* ↑ geef #hero weer wat lucht (bv. 8–12px) */
  }

  /* nav-offsets (zoals op je homepage al goed was) */
  .sf-nav.is-fixed{
    padding-bottom: var(--sf-nav-pad-bottom-mobile) !important;
  }
  .sf-nav__list{
    margin-top: calc(var(--sf-nav-h-mobile) + var(--sf-nav-pad-bottom-mobile)) !important;
  }
  body.has-fixed-nav{
    padding-top: calc(var(--sf-nav-h-mobile) + var(--sf-nav-pad-bottom-mobile)) !important;
  }

  /* homepage: niet 0 maar subtiele padding bovenin */
  #hero{
    padding-top: var(--sf-hero-top-pad) !important;
    margin-top: 0 !important;
  }
}


/* ===== RUIMTE ONDER HET LOGO (desktop + mobiel) ===== */
:root{
  /* pas naar smaak aan */
  --sf-logo-bottom-desktop: 20px;  /* extra ruimte onder logo in desktopbalk */
  --sf-logo-bottom-mobile:  0px;  /* extra ruimte onder logo in mobiele balk */
}

/* DESKTOP */
@media (min-width: 821px){
  /* navbalk zelf: onder-padding = zichtbare ruimte onder het logo */
  .sf-nav.is-fixed{
    padding-bottom: var(--sf-logo-bottom-desktop) !important;
  }
  /* inhoud onder de balk precies evenveel extra omlaag, zodat niets overlapt */
  body.has-fixed-nav{
    padding-top: calc(var(--sf-nav-h-desktop) + var(--sf-logo-bottom-desktop)) !important;
  }
}

/* MOBIEL */
@media (max-width: 820px){
  .sf-nav.is-fixed{
    padding-bottom: var(--sf-logo-bottom-mobile) !important;
  }
  /* wanneer het menu openklapt moet de UL net zo ver omlaag */
  .sf-nav[aria-expanded="true"] .sf-nav__list{
    margin-top: calc(var(--sf-nav-h-mobile) + var(--sf-logo-bottom-mobile)) !important;
  }
  .sf-nav[aria-expanded="false"] .sf-nav__list{ margin-top: 0 !important; }

  /* inhoud-offset gelijk trekken */
  body.has-fixed-nav{
    padding-top: calc(var(--sf-nav-h-mobile) + var(--sf-logo-bottom-mobile)) !important;
  }
}


/* ===== MOBIEL: gap onder nav weghalen op alle pagina's (zonder #hero óf met) ===== */
@media (max-width: 820px){
  /* 1) Header en banner comprimeren (basis had 25px padding) */
  header{
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 0 !important;
  }
  #banner{
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 2) Nav-offset: inhoud start exact op nav-hoogte (geen extra) */
  .sf-nav.is-fixed{ padding-bottom: 0 !important; } /* ruimte in balk zelf = 0 */
  body.has-fixed-nav{ padding-top: var(--sf-nav-h-mobile) !important; }

  /* 3) Als menu open is, schuif de UL pas dan onder de balk */
  .sf-nav[aria-expanded="true"] .sf-nav__list{
    margin-top: var(--sf-nav-h-mobile) !important;
  }
  .sf-nav[aria-expanded="false"] .sf-nav__list{ margin-top: 0 !important; }

  /* 4) Eerste container(s) strak: voorkom margin-collapsing */
  header + .wrapper#main,
  #content{
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flow-root !important; /* stopt doorzakken van 1e child-marges */
  }
  #content > *:first-child{ margin-top: 0 !important; }

  /* 5) Breadcrumb specifiek: kleine marge en geen <br> erna */
  .breadcrumb{ display: block !important; margin-top: 2px !important; }
  .breadcrumb + br{ display: none !important; }

  /* 6) Eventuele #page-header/#hero bovenaan ook zonder top-ruimte/border */
  #hero, #page-header{
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
  }
}


/* MOBIEL — homepage (#hero) weer beetje ruimte bovenin */
@media (max-width: 820px){
  :root{ --sf-hero-top-pad-mobile: 20px; } /* pas aan: 8–14px naar smaak */

  #hero{
    padding-top: var(--sf-hero-top-pad-mobile) !important; /* override eerdere 0 */
    margin-top: 0 !important;   /* geen extra buitenmarge */
    border-top: 0 !important;   /* geen extra lijn/border terugbrengen */
  }
}


.highlight-section {
  background-color: #fff3d6;   /* zachte achtergrondkleur */
  border: 1px solid #e0c78c;  /* subtiel randje */
  padding: 20px;              /* ruimte binnen het kader */
  margin: 30px 0;             /* ruimte erbuiten */
  border-radius: 10px;        /* afgeronde hoeken */
}



/* Zorg dat ankers niet achter de sticky nav verdwijnen */
[id] {
  scroll-margin-top: 140px; /* pas 100px aan aan de hoogte van je menu */
}