/* ===== SHARED SITE NAV — gebruikt door home / map / manifest etc.
   Eén waarheid: alle pagina's krijgen exact dezelfde header zodat
   de gebruiker geen visuele shift ziet bij page-loads.
   Browsers met View Transitions API doen 'm zelfs naadloos. ===== */

.site-nav{
  position:fixed;top:16px;left:0;right:0;z-index:1100;
  display:flex;justify-content:center;padding:0 16px;
  pointer-events:none;
  view-transition-name:site-nav;
}
.site-nav-inner{
  pointer-events:auto;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;
  padding:10px 24px;width:100%;max-width:920px;
  border-radius:9999px;
  background:rgba(20,18,40,0.42);
  backdrop-filter:blur(22px) saturate(160%);
  -webkit-backdrop-filter:blur(22px) saturate(160%);
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 4px 16px rgba(0,0,0,0.30),inset 0 1px 0 rgba(255,255,255,0.05);
}
.site-nav-brand{
  justify-self:start;
  font-family:'Roboto Slab',Georgia,serif;
  font-weight:800;font-size:24px;line-height:1;
  color:#fff;text-decoration:none;letter-spacing:-0.3px;
}
.site-nav-brand .dot{color:rgba(153,153,229,0.85);}
.site-nav-brand:hover{color:#fff;text-decoration:none;}

.site-nav-links{
  justify-self:center;
  display:flex;align-items:center;gap:30px;
}
.site-nav-links a,
.site-nav-right a{
  font-family:'Roboto Slab',Georgia,serif;
  font-size:15px;font-weight:600;
  color:rgba(255,255,255,0.82);text-decoration:none;
  transition:color .2s;
  white-space:nowrap;
  letter-spacing:-0.15px;
}
.site-nav-links a:hover,
.site-nav-right a:hover{color:#fff;text-decoration:none;}

.site-nav-right{justify-self:end;display:flex;align-items:center;gap:14px;}

/* Kaart/Login swap regel (desktop):
   - Subpages (body zonder .cm-webnav-on): Kaart zichtbaar, Login verborgen
     (login doe je via de kaart, geen aparte loginpagina).
   - Collabmap (body.cm-webnav-on): Login zichtbaar, Kaart verborgen
     (Kaart-link is redundant — je bent al op de kaart).
   Mobile: beide verborgen (zie @media (max-width:760px) hieronder). */
.site-nav-login{
  display:none;
  align-items:center;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:17px;font-weight:600;
  color:#fff !important;
  text-decoration:none;
  background:transparent;
  padding:0;
  white-space:nowrap;
  transition:color .15s;
}
.site-nav-login:hover{
  color:#fff !important;
  text-decoration:none;
  opacity:0.88;
}
body.cm-webnav-on .site-nav-login{display:inline-flex;}
body.cm-webnav-on .site-nav-kaart{display:none;}
body.is-logged-in .site-nav-login{display:none !important;}

/* Language flags — los van de pil, helemaal rechts. Op desktop naast
   de pil zichtbaar, op mobile naast de hamburger.  Auto-geinjecteerd
   door site-nav.js o.b.v. hreflang tags van de huidige pagina. */
/* Flag-bar: strakke vlaggen zonder pill. Vertical align = midden van de
   hoofd-pil (header top 16px + padding 10px + 12px halve brand-font = ~38px
   center). Flag img 19px hoog → top: 38 - 9.5 ≈ 28px. */
.site-nav-lang-flags{
  position:fixed;
  top:28px;
  right:24px;
  z-index:1101;
  display:flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:none;
  padding:0;
  box-shadow:none;
  pointer-events:auto;
}
.site-nav-lang-flags a{
  background:none;
  border:none;
  border-radius:3px;
  padding:0;
  line-height:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  opacity:0.55;
  transition:opacity .15s,transform .15s;
}
.site-nav-lang-flags a:hover{opacity:0.85;}
.site-nav-lang-flags a.active{opacity:1;transform:scale(1.05);}
.site-nav-lang-flags a img{
  width:28px;height:19px;border-radius:3px;object-fit:cover;display:block;
}

/* View Transitions API — cross-document transition zodat de header
   visueel blijft staan tussen page-loads in Chrome 126+ / Safari 18+.
   Browsers zonder support krijgen gewoon de normale page-load. */
@view-transition{navigation:auto;}

/* Mobile site-menu dropdown — verschijnt zodra rechts-hamburger geklikt */
.site-nav-mobile-menu{
  display:none;
  position:fixed;
  top:calc(env(safe-area-inset-top,0px) + 56px);
  right:14px;
  min-width:200px;
  background:rgba(20,18,40,0.92);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,0.10);
  border-radius:14px;
  padding:6px 0;
  z-index:1300;
  box-shadow:0 12px 40px rgba(0,0,0,0.45);
  pointer-events:auto;
}
.site-nav-mobile-menu.open{display:block;}
.site-nav-mobile-menu a{
  display:block;
  padding:11px 20px;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:15px;font-weight:500;
  color:rgba(255,255,255,0.85);
  text-decoration:none;
  transition:background .15s,color .15s;
}
.site-nav-mobile-menu a:hover,
.site-nav-mobile-menu a:active{
  background:rgba(255,255,255,0.06);
  color:#fff;
}

/* Mobile: geen pill-container, alleen brand links + hamburger-icon rechts.
   Kaart-link verborgen — verhuist naar het in-map hamburger menu. */
@media (max-width:760px){
  .site-nav{top:0;padding:env(safe-area-inset-top,0px) 14px 0;}
  .site-nav-inner{
    grid-template-columns:1fr auto;
    padding:14px 4px;
    gap:12px;
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:none;
    box-shadow:none;
    max-width:none;
  }
  .site-nav-links{display:none;}
  .site-nav-right .site-nav-kaart{display:none;}
  /* Login knop nooit zichtbaar op mobile — alleen in desktop header */
  .site-nav-login{display:none !important;}
  .site-nav-brand{font-size:20px;}
  /* Hamburger-icon rechts */
  .site-nav-mobile-burger{
    display:flex;
    align-items:center;justify-content:center;
    width:38px;height:38px;
    background:transparent;
    border:none;
    cursor:pointer;
    padding:0;
    color:#fff;
    font-size:22px;
    line-height:1;
  }
  .site-nav-mobile-burger:hover{color:#fff;}
  /* Mobile: flag-bar verbergen. Op collabmap staat 'ie al in-map; op
     subpages is ruimte schaars en kunnen gebruikers via desktop wisselen. */
  .site-nav-lang-flags{display:none !important;}
  /* Tagline 'Jouw lokale netwerk' centraal in de header op mobile.
     2 regels: 'Jouw lokale' / 'netwerk'. top+bottom + flex centreert
     verticaal tussen .site-nav-inner's padding (14px boven + 14px onder
     binnen de hamburger-rij). Geen grotere balk. */
  .site-nav-tagline{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:absolute;
    left:50%;
    top:calc(env(safe-area-inset-top,0px) + 14px);
    bottom:14px;
    transform:translateX(-50%);
    font-family:'Roboto Slab',Georgia,serif;
    font-size:14px;
    font-weight:700;
    color:rgba(255,255,255,0.78);
    line-height:1.05;
    text-align:center;
    letter-spacing:-0.1px;
    pointer-events:none;
    white-space:nowrap;
  }
}
/* Desktop: tagline verborgen — er is genoeg ruimte met de nav-links. */
@media (min-width:761px){
  .site-nav-tagline{display:none;}
}
@media (min-width:761px){
  .site-nav-mobile-burger{display:none;}
  .site-nav-mobile-menu{display:none !important;}
}