/* ===== nav-final.css v2.4 — universal menu ===== */

/* Kern-variabelen (standaard) */
:root{
  /* Thema */
  --color-primary: #0d3b66;
  --color-primary-contrast: #fff;
  --pill-bg: #f8f4e8;
  --pill-border: #eadfca;

  /* Wrapper */
  --wrapper-max: 1200px;
  --wrapper-w: 92vw;

  /* Desktop (basis) */
  --nav-h-desktop: 50px;       /* balkhoogte */
  --logo-space-desktop: 280px; /* ruimte links in UL voor logo -> schuift knoppen naar rechts */
  --logo-gap-desktop: 16px;    /* gap tussen logo en eerste pill */
  --logo-img-desktop: 36px;    /* logo-beeldhoogte */

  /* Mobiel (compact) */
  --nav-h-mobile: 66px;        /* totale hoogte header op mobiel */

  /* Tuning helpers mobiel */
  --mobile-xpad: 6%;
  --mobile-toggle-size: 34px;

  /* Scroll close drempel (px) voor mobiel */
  --menu-close-scroll-threshold: 20;
}

/* Basis */
.sf-nav{ display:block; width:100%; margin:0; padding:0; box-sizing:border-box; z-index:1000; }
.sf-nav__list{ list-style:none; margin:0; padding:0; box-sizing:border-box; }
.sf-nav__toggle{ background:transparent; border:0; cursor:pointer; line-height:1; }

/* Pills */
.sf-nav__list a{
  display:block;
  text-decoration:none;
  border-radius:999px;
  padding:6px 12px;
  background:var(--pill-bg);
  border:2px solid var(--pill-border);
  color:#222;
  line-height:1;
  transition:background .2s, border-color .2s, color .2s;
}
.sf-nav__list a:hover,
.sf-nav__list a:focus-visible{
  background:var(--color-primary);
  border-color:var(--color-primary);
  color:var(--color-primary-contrast);
  outline:none;
}

/* Desktop (>=920px) */
@media (min-width:920px){
  /* Sticky witte balk */
  .sf-nav{
    position:fixed; top:0; left:0; right:0;
    height:var(--nav-h-desktop); min-height:var(--nav-h-desktop);
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.06);
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    z-index:3500;
  }

  /* Logo exact uitgelijnd met wrapper-links */
  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; margin:0; z-index:3600;
  }
  header.wrapper #logo img{
    height:var(--logo-img-desktop) !important;
    width:auto !important;
  }

  /* Menulijst rechts van logo */
  .sf-nav__list{
    width:min(var(--wrapper-max), var(--wrapper-w));
    margin:0 auto;
    padding-left: calc(var(--logo-space-desktop) + var(--logo-gap-desktop));
    padding-inline-start: calc(var(--logo-space-desktop) + var(--logo-gap-desktop));
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    position:relative; z-index:3700;
    padding-top: 12px; /* lucht boven knoppen (desktop default) */
  }

  .sf-nav__toggle{ display:none; }

  /* Content onder de vaste balk */
  body{ padding-top: var(--nav-h-desktop); }
}

/* Mobiel (<920px) */
@media (max-width:919.98px){
  /* vaste balk */
  .sf-nav{
    position:fixed; top:0; left:0; right:0;
    min-height:var(--nav-h-mobile);
    background:#fff;
    border-bottom:1px solid rgba(0,0,0,.06);
    box-shadow:0 4px 12px rgba(0,0,0,.06);
    padding-left: var(--mobile-xpad); padding-right: var(--mobile-xpad);
    padding-top: env(safe-area-inset-top);
    z-index:3500;
  }
  /* logo links, compact */
  #logo{
    position:fixed; top:0; left: var(--mobile-xpad);
    height:var(--nav-h-mobile);
    display:flex; align-items:center; margin:0; z-index:3600;
  }
  #logo img{
    max-height: calc(var(--nav-h-mobile) - 14px);
    height:auto; width:auto;
  }

  /* hamburger zichtbaar (met rand) */
  .sf-nav__toggle{
    display:inline-flex;
    align-items:center; justify-content:center;
    position:fixed; right: var(--mobile-xpad);
    top: calc((var(--nav-h-mobile) - var(--mobile-toggle-size))/2);
    height: var(--mobile-toggle-size); width: var(--mobile-toggle-size); font-size:20px;
    border: 2px solid rgba(0,0,0,.18);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
    z-index:3700;
  }

  /* paneel dicht → open bij aria-expanded=true */
  .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:3650;
  }
  .sf-nav[aria-expanded="true"] .sf-nav__list,
  .sf-nav__list.is-open{ display:flex; }

  /* content onder balk */
  body{ padding-top: var(--nav-h-mobile); }
}

/* Back-to-top (klikbaar, hoge z-index) */
#sfTop{
  position:fixed; right:16px; bottom:calc(40px + env(safe-area-inset-bottom));
  width:52px; height:52px; display:grid; place-items:center;
  border-radius:50%; background:#fff; border:1px solid rgba(0,0,0,.08);
  box-shadow:0 4px 10px rgba(0,0,0,.2);
  font-size:26px; font-weight:900; line-height:1;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s, transform .2s, visibility .2s;
  z-index:9999;
  cursor:pointer;
}
#sfTop.show{ opacity:1; visibility:visible; transform:translateY(0); }

/* ===== MOBILE HEADER SQUASH (fix basic-style header/padding) ===== */
@media (max-width:919.98px){
  header.wrapper{
    padding: 0 !important; border: 0 !important; min-height: 0 !important;
  }
  #banner{ margin:0 !important; padding:0 !important; height:0 !important; }
  header.wrapper + .wrapper#main,
  header.wrapper + #hero{
    margin-top: 0 !important; padding-top: 0 !important;
  }
}

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

/* ===== A11y & QoL ===== */
.sf-nav__list a:focus-visible,
.sf-nav__toggle:focus-visible{
  outline: 2px solid rgba(0,0,0,.35);
  outline-offset: 2px;
  border-color: currentColor;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; }
}

/* Print: menu/knop verbergen */
@media print{
  .sf-nav, #sfTop, .sf-nav__toggle{ display:none !important; }
  body{ padding-top:0 !important; }
}

/* ======== SITE TUNE (pas alleen hier aan per site) ======== */
/* Thuringengids.nl — desktop groter logo, knoppen verder naar rechts en meer lucht */
@media (min-width:920px){
  :root{
    --wrapper-max: 1320px;      /* breedte content */
    --nav-h-desktop: 78px;      /* hoogte balk desktop */
    --logo-img-desktop: 60px;   /* logohoogte desktop */
    --logo-space-desktop: 420px;/* ruimte links voor logo → duwt knoppen naar rechts */
    --logo-gap-desktop: 20px;   /* lucht tussen logo en eerste knop */
  }
  .sf-nav__list{ padding-top: 20px; } /* extra lucht boven knoppen */
}

/* Mobiel tunables (meestal prima zo laten) */
:root{
  --nav-h-mobile: 66px;
  --mobile-xpad: 6%;
  --mobile-toggle-size: 34px;
  --menu-close-scroll-threshold: 20; /* px scroll → auto dichtklappen */
}

/* === TEMPLATE voor volgende site (kopieer en pas aan) ===
@media (min-width:920px){
  :root{
    --wrapper-max: 1280px;
    --nav-h-desktop: 64px;
    --logo-img-desktop: 52px;
    --logo-space-desktop: 560px;
    --logo-gap-desktop: 18px;

    --color-primary: #0d3b66;   // wijzig kleurthema hier indien gewenst
    --pill-bg: #f8f4e8;
    --pill-border: #eadfca;
  }
  .sf-nav__list{ padding-top: 16px; }
}
*/