/* ============================================================
   overrides.css — Globale UI-overrides (menu + back-to-top)
   Voor: Schwerin.nl en zustersites
   Versie: 1.0
   ============================================================ */

/* ---------------------------
   1) THEMA & LAYOUT VARIABELE
   --------------------------- */
   
:root{
  --nav-h-desktop: 96px;        /* hoogte sticky balk desktop */
  --logo-space-desktop: 240px;  /* ruimte links voor het logo (pas aan) */
  --bar-bg-sticky: #fff;        /* achtergrond van de sticky balk */
}   

:root{
  /* Kleuren (pas alleen deze aan per site) */
  --color-primary: #0d3b66;         /* thema-hoofdkleur (knoppen/hover) */
  --color-primary-contrast: #ffffff;
  --color-pill-bg: #f8f4e8;         /* zachte “pill” achtergrond */
  --color-pill-border: #eadfca;
  --color-bar-bg: #f4ecd6;          /* achtergrond fixed nav-balk */
  --color-bar-border: #eadfca;

  /* Typo/spacing */
  --menu-pill-pad-y: 10px;
  --menu-pill-pad-x: 12px;
  --menu-gap: 10px;

  /* Afmetingen */
  --logo-space-desktop: 240px;      /* ruimte links voor logo (desktop) */
  --nav-h-desktop: 96px;            /* visuele hoogte navbalk desktop */
  --nav-h-mobile: 92px;             /* visuele hoogte navbalk mobiel */

  /* Logo extra ruimte onder in de balk (als je dat mooi vindt) */
  --logo-bottom-desktop: 16px;
  --logo-bottom-mobile: 0px;

  /* Breakpoint */
  --bp-desktop: 920px;

  /* Scroll offset voor ‘anker naar sectie’ */
  --scroll-margin: 140px;
}

/* Helper: respecteer prefers-reduced-motion */
@media (prefers-reduced-motion: reduce){
  * { transition: none !important; animation: none !important; }
}

/* -----------------------------------
   2) NAV-CONTAINER & BASIS STYLING
   ----------------------------------- */

.sf-nav{
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  box-sizing: border-box;
}

/* Toggle (mobiel) – standaard verborgen, op mobiel zichtbaar */
.sf-nav__toggle{
  display: none;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
}

/* Ongeordende lijst met ‘pills’ */
.sf-nav__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--menu-gap);
  flex-wrap: wrap;
}

/* Link-pills */
.sf-nav__list a{
  display: block;
  padding: var(--menu-pill-pad-y) var(--menu-pill-pad-x);
  text-decoration: none;
  color: #222;
  background: var(--color-pill-bg);
  border: 2px solid var(--color-pill-border);
  border-radius: 999px;
  line-height: 1;
  transition: color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sf-nav__list a:hover,
.sf-nav__list a:focus-visible{
  color: var(--color-primary-contrast);
  background: var(--color-primary);
  border-color: var(--color-primary);
  outline: none;
}
.sf-nav__list a:focus-visible{
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary);
}

/* High-contrast modus */
@media (forced-colors: active){
  .sf-nav__list a{ border: 1px solid ButtonText; }
}

/* -----------------------------------
   3) DESKTOP LAY-OUT (>= breakpoint)
   ----------------------------------- */
@media (min-width: 920px){
  /* Ruimte links voor het logo */
  .sf-nav__list{
    padding-inline-start: var(--logo-space-desktop);
    padding-left: var(--logo-space-desktop);
    width: 99.5%;
    max-width: 1440px;
    margin: 0 auto;
  }
}

/* -----------------------------------
   4) MOBIEL LAY-OUT (< breakpoint)
   ----------------------------------- */
@media (max-width: 919.98px){
  .sf-nav{ margin: 8px 0 0; }
  .sf-nav__toggle{ display: inline-flex; align-items: center; justify-content: center; }

  /* standaard ingeklapt */
  .sf-nav__list{
    display: none;
    flex-direction: column;
    gap: 6px;
    margin-top: 10px;
    padding: 0 !important;
  }

  /* openen via aria-expanded op .sf-nav (aanbevolen) of .is-open op UL */
  .sf-nav[aria-expanded="true"] .sf-nav__list,
  .sf-nav__list.is-open{ display: flex; }
}

/* -----------------------------------
   5) FIXED NAVIGATIE BIJ SCROLL
   (JS voegt .is-fixed op .sf-nav en .has-fixed-nav op body)
   ----------------------------------- */
.sf-nav.is-fixed{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1200;
  background: var(--color-bar-bg);
  border-bottom: 0 solid var(--color-bar-border);
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  margin-top: 0;
}

/* Desktop: full-width balk, inhoud (UL) gecentreerd zoals wrapper */
@media (min-width: 920px){
  .sf-nav.is-fixed{
    left: 0;
    transform: none;
    width: 100%;
    max-width: none;
    padding: 0;                 /* paddings regelen we via UL en logo */
    min-height: var(--nav-h-desktop);
    top: 0 !important;
  }

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

  /* UL uitlijnen en logo-ruimte houden */
  .sf-nav__list{
    width: 99.5%;
    max-width: 1440px;
    margin: 0 auto;
    gap: 8px; /* iets krapper voor meer items per rij */
    padding-left: var(--logo-space-desktop);
    padding-inline-start: var(--logo-space-desktop);
  }

  /* Extra lucht onder het logo in de balk (optioneel) */
  .sf-nav.is-fixed{ padding-bottom: var(--logo-bottom-desktop); }

  /* Content-offset zodat niets onder de balk verdwijnt */
  body.has-fixed-nav{
    padding-top: calc(var(--nav-h-desktop) + var(--logo-bottom-desktop));
  }
}

/* Mobiel fixed balk + toggle/UL posities */
@media (max-width: 919.98px){
  .sf-nav.is-fixed{
    top: 0 !important;
    min-height: var(--nav-h-mobile);
    padding: 0 4%;
  }

  #logo{
    position: fixed;
    top: 0; left: 4%;
    height: var(--nav-h-mobile);
    display: flex; align-items: center;
    z-index: 1300; pointer-events: auto;
  }
  #logo a{ display:flex; align-items:center; }
  #logo img{
    height: calc(var(--nav-h-mobile) - 18px);
    width: auto; max-height: none;
  }

  .sf-nav__toggle{
    position: fixed;
    right: 10px;
    top: calc((var(--nav-h-mobile) - 44px) / 2);
    height: 44px; width: 44px;
    padding: 0;
    font-size: 24px;
    z-index: 1400; margin: 0;
  }

  /* het uitgeklapte menu begint direct onder de balk */
  .sf-nav__list{
    margin-top: var(--nav-h-mobile);
    padding-left: 0 !important; padding-right: 0 !important;
  }

  /* Content-offset onder de balk */
  body.has-fixed-nav{
    padding-top: var(--nav-h-mobile);
  }

  /* Optioneel extra ruimte onder logo op mobiel */
  .sf-nav.is-fixed{ padding-bottom: var(--logo-bottom-mobile); }
  .sf-nav[aria-expanded="true"] .sf-nav__list{
    margin-top: calc(var(--nav-h-mobile) + var(--logo-bottom-mobile));
  }
}

/* -----------------------------------
   6) HEADER & HERO ‘GAP’-TWEAKS (mobiel)
   ----------------------------------- */
@media (max-width: 919.98px){
  header{
    padding: 0 !important;
    margin: 0 !important;
    border-bottom: 0 !important;
  }
  #banner{
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* voorkom extra ruimte boven de eerste content */
  header + .wrapper#main,
  #content{
    margin-top: 0 !important;
    padding-top: 0 !important;
    display: flow-root !important;
  }
  #content > *:first-child{ margin-top: 0 !important; }

  .breadcrumb{ display: block !important; margin-top: 2px !important; }
  .breadcrumb + br{ display: none !important; }

  #hero, #page-header{
    padding-top: 0 !important;
    margin-top: 0 !important;
    border-top: 0 !important;
  }

  /* Homepage: desgewenst weer wat top-lucht */
  #hero{ padding-top: 16px !important; }
}

/* -----------------------------------
   7) BACK-TO-TOP KNOP (site-wide)
   ----------------------------------- */
.sf-top {
  position: fixed;
  right: 16px;
  bottom: 40px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: color-mix(in oklab, var(--color-primary) 85%, black 15%);
  color: var(--color-primary-contrast);
  border: 1px solid color-mix(in oklab, var(--color-pill-border) 80%, black 20%);
  box-shadow: 0 4px 10px rgba(0,0,0,.2);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 2000;
}
.sf-top:hover { filter: brightness(0.95); }
.sf-top:active { transform: translateY(10px); }
.sf-top.show{
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
@media (max-width: 919.98px){
  .sf-top{ right: 14px; bottom: 40px; }
}

/* -----------------------------------
   8) GLOBALE HULPSTYLES
   ----------------------------------- */

/* Soepele scroll site-wide */
html { scroll-behavior: smooth; }

/* Sectie-highlight kader (herbruikbaar) */
.highlight-section {
  background-color: var(--color-pill-bg);
  border: 1px solid var(--color-pill-border);
  padding: 20px;
  margin: 30px 0;
  border-radius: 10px;
}

/* Ankers laten landen onder sticky nav */
[id]{ scroll-margin-top: var(--scroll-margin); }


/* ======= LEGACY MENU OVERRIDES (kill conflicts) ======= */

/* Verberg oude menu-HTML/CSS als die nog ergens in de DOM staat */
#topnav,
.menu-toggle,
.srt-menu { display: none !important; }

/* Zorg dat het nieuwe menu altijd zichtbaar/bruikbaar is */
.sf-nav { display: block !important; }

/* Desktop: lijst zichtbaar, toggle weg */
@media (min-width: 920px){
  .sf-nav__list { display: flex !important; }
  .sf-nav__toggle { display: none !important; }

  /* Forceer sticky-styles (mocht iets anders ze overschrijven) */
  .sf-nav.is-fixed{
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    z-index: 3000 !important;
    background: var(--color-bar-bg) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.06) !important;
    min-height: var(--nav-h-desktop) !important;
  }
  body.has-fixed-nav{
    padding-top: calc(var(--nav-h-desktop) + var(--logo-bottom-desktop)) !important;
  }
}

/* Mobiel: toggle aan, lijst alleen open bij aria-expanded */
@media (max-width: 919.98px){
  .sf-nav__toggle { display: inline-flex !important; }
  .sf-nav__list { display: none !important; }
  .sf-nav[aria-expanded="true"] .sf-nav__list { display: flex !important; }
}

/* Back-to-top knop altijd boven alles */
.sf-top{
  z-index: 5000 !important;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
}
.sf-top.show{
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

/* Zorg dat niets anders jouw UL beïnvloedt */
.sf-nav__list, .sf-nav__list * { box-sizing: border-box; }

/* Anker-offset wint van basis CSS */
[id]{ scroll-margin-top: var(--scroll-margin) !important; }


/* Kill legacy menu */
#topnav, .menu-toggle, .srt-menu { display: none !important; }

/* Nieuwe menu state afdwingen */
@media (min-width: 920px){
  .sf-nav__list { display: flex !important; }
  .sf-nav__toggle { display: none !important; }
  .sf-nav.is-fixed{
    position: fixed !important; top:0 !important; left:0 !important; right:0 !important;
    z-index: 3000 !important;
  }
  body.has-fixed-nav{
    padding-top: calc(var(--nav-h-desktop) + var(--logo-bottom-desktop)) !important;
  }
}
@media (max-width: 919.98px){
  .sf-nav__toggle { display: inline-flex !important; }
  .sf-nav__list { display: none !important; }
  .sf-nav[aria-expanded="true"] .sf-nav__list { display: flex !important; }
}

/* Pijltje altijd bovenaan */
.sf-top{ z-index: 5000 !important; }


/* ===== Sticky-balk + logo zichtbaar op desktop (universeel) ===== */
@media (min-width: 920px){
  /* Balkkleur en layering bij sticky */
  .sf-nav.is-fixed{
    background: var(--bar-bg-sticky) !important;
    border-bottom: 1px solid rgba(0,0,0,.06);
    z-index: 3000 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    min-height: var(--nav-h-desktop);
  }

  /* Logo meeschuiven in de balk – ondersteunt #logo, .logo, .site-logo */
  header .site-logo,
  header .logo,
  #logo{
    position: fixed !important;
    top: 0;
    left: 4%; /* uitlijnen met je wrapperrand; desgewenst aanpassen */
    height: var(--nav-h-desktop) !important;
    display: flex;
    align-items: center;
    z-index: 3100 !important;
    margin: 0 !important;
  }
  header .site-logo img,
  header .logo img,
  #logo img{
    height: calc(var(--nav-h-desktop) - 12px) !important;
    width: auto !important;
  }

  /* Menu-items ruimte links geven voor het logo */
  .sf-nav__list{
    padding-left: var(--logo-space-desktop) !important;
    padding-inline-start: var(--logo-space-desktop) !important;
    width: 99.5% !important;
    max-width: 1440px !important;
    margin: 0 auto !important;
    gap: 8px;
  }

  /* Content netjes onder de vaste balk */
  body.has-fixed-nav{
    padding-top: var(--nav-h-desktop) !important;
  }
}

/* Legacy menu uitschakelen (voor de zekerheid) */
#topnav, .menu-toggle, .srt-menu { display: none !important; }

/* Back-to-top altijd vooraan */
.sf-top{ z-index: 5000 !important; }


/* ===== SCHWERIN v7.3 — lucht + zichtbare witte balk + hamburger boven logo ===== */

/* Afstelbare waardes (hou klein voor subtiel effect) */
:root{
  /* desktop lucht */
  --logo-under-desktop: 6px;    /* extra lucht onder logo vóór knoppen */
  --nav-gap-top: 6px;           /* lucht boven knoppen (klein) */
  --pill-pad-y-desktop: 7px;    /* plattere pills desktop om hoogte gelijk te houden */

  /* mobiel zichtbaarheid + uitlijning */
  --nav-h-mobile: 92px;         /* je werkende mobiele hoogte laten staan */
  --pill-pad-y-mobile: 8px;     /* compacte pill-hoogte op mobiel */
}

/* ============ MOBIEL (<=919px) ============ */
@media (max-width: 919.98px){
  /* Balk altijd zichtbaar en wit bij binnenkomst */
  .sf-nav{
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    min-height: var(--nav-h-mobile) !important;
    background: #fff !important;                    /* expliciet wit */
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    padding-left: var(--mobile-edge-pad,4%) !important;
    padding-right: var(--mobile-edge-pad,4%) !important;
    z-index: 3500 !important;
  }

  /* Logo: links, verticaal gecentreerd in de balk */
  #logo{
    position: fixed !important;
    top: 0 !important; left: var(--mobile-edge-pad,4%) !important;
    height: var(--nav-h-mobile) !important;
    display: flex !important; align-items: center !important;
    margin: 0 !important;
    z-index: 3600 !important;                        /* boven de balk */
  }
  #logo img{
    max-height: calc(var(--nav-h-mobile) - 18px) !important;
    height: auto !important; width: auto !important;
  }

  /* Hamburger: blijft boven logo en in het midden van de balk (ook bij scroll) */
  .sf-nav__toggle{
    display: inline-flex !important;
    position: fixed !important;
    right: 10px !important;
    top: calc((var(--nav-h-mobile) - 44px)/2) !important;  /* midden van de balk */
    height: 44px !important; width: 44px !important;
    align-items: center; justify-content: center;
    z-index: 7000 !important;                         /* vóór logo en balk */
  }
  .sf-nav.is-fixed .sf-nav__toggle{ display: inline-flex !important; }

  /* Opengeklapt menu start direct onder de (witte) balk en is licht compacter */
  .sf-nav__list{
    margin-top: var(--nav-h-mobile) !important;
    padding-top: var(--nav-gap-top) !important;
    position: relative; z-index: 3550 !important;     /* boven logo */
  }
  .sf-nav__list a{
    padding: var(--pill-pad-y-mobile) 14px !important;
  }

  /* Content offset exact gelijk aan balkhoogte */
  body{ padding-top: var(--nav-h-mobile) !important; }
}

/* ============ DESKTOP (>=920px) ============ */
@media (min-width: 920px){
  /* Compacte balk (hoogte blijft laag) */
  .sf-nav{
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid rgba(0,0,0,.06);
    box-shadow: 0 4px 12px rgba(0,0,0,.06);
    min-height: var(--nav-h-desktop,72px) !important;   /* jouw huidige desktophoogte */
    padding-top: 0 !important; padding-bottom: 0 !important;
    z-index: 3500 !important;
  }

  /* Logo: exact op wrapper-links, verticaal gecentreerd */
  #logo{
    position: fixed !important;
    left: calc((100vw - min(var(--wrapper-max,1200px), var(--wrapper-w,92vw))) / 2) !important;
    top: 0 !important;
    height: var(--nav-h-desktop,72px) !important;
    display: flex !important; align-items: center !important;
    margin: 0 !important;
    z-index: 3600 !important;                          /* boven balk, onder knoppen */
  }
  #logo img{
    max-height: calc(var(--nav-h-desktop,72px) - 16px) !important; /* kleine binnenmarge */
    height: auto !important; width: auto !important;
  }

  /* Lucht onder logo + boven de knoppen, zonder de balk optisch te verhogen */
  .sf-nav__list{
    width: min(var(--wrapper-max,1200px), var(--wrapper-w,92vw)) !important;
    margin-left: auto !important; margin-right: auto !important;
    padding-left: calc(var(--logo-w-desktop,280px) + var(--logo-gap-desktop,20px)) !important;
    padding-inline-start: calc(var(--logo-w-desktop,280px) + var(--logo-gap-desktop,20px)) !important;

    /* hier komt de 'lucht onder het logo' + klein beetje top-lucht */
    padding-top: calc(var(--logo-under-desktop) + var(--nav-gap-top)) !important;

    position: relative; z-index: 3700 !important;      /* knoppen altijd vóór logo */
    justify-content: flex-start !importan

/* === SCHWERIN — DESKTOP NAV 50px + LOGO 36px (definitief) === */
@media (min-width: 821px){
  header.wrapper .sf-nav{
    position: fixed !important; top:0 !important; left:0 !important; right:0 !important;
    height:50px !important; min-height:50px !important;
    background:#fff !important;
    border-bottom:1px solid rgba(0,0,0,.06) !important;
    box-shadow:0 4px 12px rgba(0,0,0,.06) !important;
    padding:0 !important; margin:0 !important;
    overflow:hidden !important; z-index:3500 !important;
  }

  header.wrapper #logo{
    position: fixed !important;
    top:0 !important;
    left: calc((100vw - min(1200px, 92vw))/2) !important;
    height:50px !important;
    display:flex !important; align-items:center !important;
    margin:0 !important; line-height:0 !important; z-index:3600 !important;
  }

  header.wrapper #logo img{
    height:36px !important; max-height:36px !important; width:auto !important;
    display:block !important; margin:0 !important; padding:0 !important; border:0 !important;
  }

  /* Menulijst rechts van logo; til de balk niet op */
  header.wrapper .sf-nav__list{
    width:min(1200px, 92vw) !important;
    margin:0 auto !important;
    padding:2px 0 0 296px !important; /* 280 (logo-ruimte) + 16 (gap). Pas aan indien nodig. */
    line-height:1 !important;
    position:relative !important; z-index:3700 !important; justify-content:flex-start !important;
  }

  header.wrapper .sf-nav__list a{
    padding:6px 12px !important; line-height:1 !important;
  }

  body{ padding-top:50px !important; }
}