/* ===== nav-final.css — FINAL (Schwerin look) ===== */

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

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

  /* Desktopbalk zoals Schwerin */
  --nav-h-desktop: 50px;
  --logo-space-desktop: 280px; /* ruimte links in UL voor logo */
  --logo-gap-desktop: 16px;    /* gap tussen logo en eerste pill */
  --logo-img-desktop: 36px;    /* logo-beeldhoogte */

  /* Mobiel */
  --nav-h-mobile: 92px;
}

/* 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;                 /* compact als Schwerin */
  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 als Schwerin (36px), 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;
  }

  .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:0 4%;
    z-index:3500;
  }
  /* logo links, compact */
  #logo{
    position:fixed; top:0; left:4%;
    height:var(--nav-h-mobile);
    display:flex; align-items:center; margin:0; z-index:3600;
  }
  #logo img{ max-height: calc(var(--nav-h-mobile) - 18px); height:auto; width:auto; }

  /* hamburger zichtbaar rechtsboven */
  .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; font-size:24px;
    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 */
#sfTop{
  position:fixed; right:16px; bottom:40px;
  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:5000;
}
#sfTop.show{ opacity:1; visibility:visible; transform:translateY(0); }

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


/* ===== Berchtesgaden – mobile finetune v3 (2025-10-12) ===== */

/* 1) Lagere mobiele header */
:root{
  --nav-h-mobile: 66px; /* was 72/84/92 → nu echt lager */
}

/* 2) Mobiel: logo iets groter & iets naar rechts; hamburger wat naar links */
@media (max-width:919.98px){
  /* vaste balk hoogte + horizontale padding iets ruimer */
  .sf-nav{
    min-height: var(--nav-h-mobile);
    padding-left: 6%;
    padding-right: 6%;
  }

  /* logo: iets naar rechts (6%) en relatief wat groter binnen lagere balk */
  #logo{
    left: 6%;
    height: var(--nav-h-mobile);
  }
  /* maak het logo iets prominenter binnen de lagere balk */
  #logo img{
    max-height: calc(var(--nav-h-mobile) - 14px); /* was -28/-22 → iets groter */
  }

  /* hamburger: wat naar links (dus grotere afstand vanaf rechterrand) */
  .sf-nav__toggle{
    right: 6%;
    height: 34px; width: 34px; font-size: 20px;
    top: calc((var(--nav-h-mobile) - 34px)/2);
    border: 2px solid rgba(0,0,0,.18);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
  }

  /* menu-paneel start exact onder de nieuwe balkhoogte */
  .sf-nav__list{ margin-top: var(--nav-h-mobile); }

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


/* ===== Mobile header squash — 2025-10-12 ===== */
@media (max-width:919.98px){
  /* Header zelf: geen padding/border/hoogte */
  header.wrapper{
    padding: 0 !important;
    border: 0 !important;
    min-height: 0 !important;
  }

  /* Bannerblok in header uitschakelen als spacer */
  #banner{
    margin: 0 !important;
    padding: 0 !important;
    height: 0 !important;
  }

  /* Zorg dat er geen extra gap boven content/hero zit */
  header.wrapper + .wrapper#main,
  header.wrapper + #hero{
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Balk- en paneelhoogte blijven leidend */
  .sf-nav{ min-height: var(--nav-h-mobile); }
  .sf-nav__list{ margin-top: var(--nav-h-mobile); }
  body{ padding-top: var(--nav-h-mobile); }
}