/* ============================================================
   overrides.css — Clean build (compat met main.js + nav-final.css)
   Datum: 2025-10-09
   Doel: minimale, robuuste layout + states. Styling → nav-final.css
   ============================================================ */

/* ---------------------------
   1) Variabelen (pas aan per site)
   --------------------------- */
:root{
  --wrapper-max: 1200px;     /* contentbreedte voor centreren */
  --wrapper-w: 92vw;

  /* Hoogtes balk */
  --nav-h-desktop: 72px;
  --nav-h-mobile:  92px;

  /* Logo-ruimte desktop (ruimte links in UL) */
  --logo-w-desktop: 280px;
  --logo-gap-desktop: 20px;

  /* Kleur vaste balk (sticky) */
  --bar-bg-sticky: #fff;

  /* Scroll margin voor ankers onder sticky balk */
  --scroll-margin: 140px;
}

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

/* -----------------------------------
   2) Basis nav-container (layout)
   ----------------------------------- */
.sf-nav{
  display:block;
  width:100%;
  margin:0;
  padding:0;
  box-sizing:border-box;
  z-index:1000;
}

/* UL is flex op desktop; mobiel regelen we verderop */
.sf-nav__list{
  list-style:none;
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* Toggle-button: door nav-final.css gestyled; wij regelen zichtbaarheid */
.sf-nav__toggle{
  background:transparent;
  border:0;
  cursor:pointer;
  line-height:1;
}

/* -----------------------------------
   3) Sticky states (door main.js)
   - .is-fixed op .sf-nav
   - .has-fixed-nav op body
   ----------------------------------- */
.sf-nav.is-fixed{
  position:fixed;
  top:0; left:0; right:0;
  background:var(--bar-bg-sticky);
  border-bottom:1px solid rgba(0,0,0,.06);
  box-shadow:0 4px 12px rgba(0,0,0,.06);
}

/* Content onder vaste balk */
@media (min-width: 920px){
  body.has-fixed-nav{ padding-top: var(--nav-h-desktop); }
}
@media (max-width: 919.98px){
  body.has-fixed-nav{ padding-top: var(--nav-h-mobile); }
}

/* -----------------------------------
   4) Desktop layout (>= 920px)
   ----------------------------------- */
@media (min-width: 920px){
  /* UL centreren en ruimte links voor logo */
  .sf-nav__list{
    display:flex;
    align-items:center;
    gap:8px;
    width:min(var(--wrapper-max), var(--wrapper-w));
    margin:0 auto;
    padding-left: calc(var(--logo-w-desktop) + var(--logo-gap-desktop));
    padding-inline-start: calc(var(--logo-w-desktop) + var(--logo-gap-desktop));
  }

  /* Toggle verbergen op desktop */
  .sf-nav__toggle{ display:none; }

  /* Logo uitlijnen aan linker wrapperrand */
  header.wrapper #logo{
    position:fixed;
    top:0;
    left: calc((100vw - min(var(--wrapper-max), var(--wrapper-w))) / 2);
    height: var(--nav-h-desktop);
    display:flex; align-items:center;
    z-index: 1100;
    margin:0;
  }

  /* Logo-hoogte met shrink op scroll */
  header.wrapper #logo img{
    height: calc(var(--nav-h-desktop) - 16px);
    width:auto;
    transition: height .2s ease;
  }
  .has-fixed-nav header.wrapper #logo img{
    height: calc(var(--nav-h-desktop) - 28px); /* kleiner bij sticky */
  }
}

/* -----------------------------------
   5) Mobiel layout (< 920px)
   ----------------------------------- */
@media (max-width: 919.98px){
  /* Toggle zichtbaar en bovenaan rechts */
  .sf-nav__toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    position:fixed;
    right:10px;
    top: calc((var(--nav-h-mobile) - 44px)/2);
    height:44px; width:44px;
    z-index:1400;
  }

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

  /* Nav zelf gedraagt zich als vaste bovenbalk zodra sticky */
  .sf-nav.is-fixed{
    min-height: var(--nav-h-mobile);
    padding: 0 4%;
  }

  /* Paneel standaard dicht; open bij aria-expanded of .is-open (fallback) */
  .sf-nav__list{
    display:none;
    flex-direction:column;
    gap:6px;
    margin-top: var(--nav-h-mobile);
    padding: 0 0 12px 0;
    position:relative;
    z-index: 1350;
  }
  .sf-nav[aria-expanded="true"] .sf-nav__list,
  .sf-nav__list.is-open{
    display:flex;
  }
}

/* -----------------------------------
   6) Back-to-top (#sfTop) — main.js voegt .show toe
   ----------------------------------- */
#sfTop{
  position:fixed;
  right:16px; bottom:40px;
  width:52px; height:52px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  background:#fff;
  color:#111;
  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;
}
#sfTop.show{ opacity:1; visibility:visible; transform:translateY(0); }
@media (max-width: 919.98px){ #sfTop{ right:14px; bottom:40px; } }

/* -----------------------------------
   7) Helpers & legacy kill
   ----------------------------------- */

/* Soepele scroll & anker-offset */
html { scroll-behavior:smooth; }
[id]{ scroll-margin-top: var(--scroll-margin); }

/* Verberg legacy menu als het nog in de DOM staat */
#topnav, .menu-toggle, .srt-menu{ display:none !important; }

/* Safety: zorg dat essentials niet onzichtbaar worden door oude CSS */
.sf-nav{ display:block !important; }
.sf-nav__toggle, #sfTop{ visibility:visible; opacity:1; }

/* Box-sizing consistent op UL + kinderen (voorkomt rare wrapping) */
.sf-nav__list, .sf-nav__list *{ box-sizing:border-box; }


/* ===== overrides.css — minimal clean ===== */
html { scroll-behavior:smooth; }
[id]{ scroll-margin-top: 140px; }

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

/* Zorg dat basis niet per ongeluk pill-style overschrijft */
.sf-nav__list a{ text-decoration:none; }