/* =========================================================
   SCHWERIN — NAV FINAL (desktop perfect + mobile finetuned)
   - Desktop: nav 72px, logo 54px, knoppen iets naar rechts,
              extra lucht boven de knoppen
   - Mobile : nav 72px, logo 54px, hamburger gecentreerd,
              uitgeklapt menu heeft witte achtergrond + lucht onderaan
   ========================================================= */

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

/* =============== DESKTOP (>=821px) =============== */
@media (min-width: 821px){
  /* VASTE WITTE BALK — 72px hoog */
  header.wrapper .sf-nav{
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 72px !important; min-height: 72px !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;
  }

  /* LOGO LINKS OP WRAPPER-RAND — 54px hoog (netjes gecentreerd in 72px) */
  header.wrapper #logo{
    position: fixed !important;
    top: 0 !important;
    left: calc((100vw - min(1200px, 92vw)) / 2) !important;
    height: 72px !important;
    display: flex !important; align-items: center !important;
    margin: 0 !important; line-height: 0 !important;
    z-index: 3600 !important;
  }
  header.wrapper #logo img{
    height: 54px !important;
    max-height: 54px !important;
    width: auto !important;
    display: block !important;
    margin: 0 !important; padding: 0 !important; border: 0 !important;
  }

  /* MENULIJST — binnen wrapper, verder naar rechts en met top-lucht */
  header.wrapper .sf-nav__list{
    width: min(1200px, 92vw) !important;
    margin: 0 auto !important;
    /* ruimte voor logo + extra gap → naar smaak aanpassen (352px werkt mooi) */
    padding: 25px 0 0 520px !important; /* top-lucht 10px, links ruimte voor logo */
    line-height: 1 !important;
    position: relative !important;
    z-index: 3700 !important; /* knoppen altijd boven logo */
    justify-content: flex-start !important;
  }

  /* KNOPPEN — compact zodat alles lekker in 72px past */
  header.wrapper .sf-nav__list a{
    padding: 6px 13px !important; /* plattere pill */
    line-height: 1 !important;
  }

  /* CONTENT-OFFSET — niets onder de vaste balk laten kruipen */
  body{ padding-top: 72px !important; }
}

/* =============== MOBILE (<=820px) =============== */
@media (max-width: 820px){
  /* VASTE WITTE BALK — 72px hoog */
  header.wrapper .sf-nav{
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    height: 72px !important; min-height: 72px !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;
    z-index: 3500 !important;
  }

  /* LOGO — 54px hoog, netjes gecentreerd in 72px */
  header.wrapper #logo{
    position: fixed !important;
    top: 0 !important; left: 4% !important;
    height: 72px !important;
    display: flex !important; align-items: center !important;
    margin: 0 !important; line-height: 0 !important;
    z-index: 3600 !important;
  }
  header.wrapper #logo img{
    height: 54px !important;
    max-height: 54px !important;
    width: auto !important;
    display: block !important;
  }

  /* HAMBURGER — gecentreerd in de balk en boven alles */
  .sf-nav__toggle{
    position: fixed !important;
    right: 10px !important;
    top: calc((72px - 44px)/2) !important; /* 72 = nav-hoogte */
    height: 44px !important; width: 44px !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    z-index: 7000 !important;
  }

  /* UITGEKLAPT MENU — wit vlak met lucht boven én onder */
  header.wrapper .sf-nav__list{
    margin-top: 72px !important;      /* direct onder de balk */
    padding-top: 10px !important;     /* lucht boven */
    padding-bottom: 16px !important;  /* lucht onder de laatste knop */
    background: #fff !important;      /* niet transparant */
    border-top: 1px solid rgba(0,0,0,.04) !important;
    box-shadow: 0 6px 18px rgba(0,0,0,.06) !important;
    position: relative !important; z-index: 3650 !important;
  }

  /* CONTENT-OFFSET */
  body{ padding-top: 72px !important; }
}

/* Kleine veiligheidjes */
#logo, .sf-nav__toggle{ transform: none !important; }