/* ============================================================
 *  ADHD Mastery — canonieke site-navigatie (.snav)
 *  Eén consistente balk, gelijk aan de homepage-nav.
 *  Genaamruimd onder .snav zodat oude page-CSS niet botst.
 * ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500;600&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=Geist:wght@400;500&display=swap');

.snav{
  position: sticky; top: 0; z-index: 200;
  background: rgba(250,247,240,.85);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid #E5E2D9;
}
.snav__inner{
  max-width: 1280px; margin: 0 auto;
  padding: 0 20px; min-height: 72px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* Brand + canoniek driehoek-logo (géén cirkel) */
.snav .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#2D2D2D; }
.snav .brand-mark{
  width:28px; height:28px; flex-shrink:0;
  background:none !important; border-radius:0 !important; box-shadow:none !important;
  display:grid; place-items:center; font-style:normal;
}
.snav .brand-mark svg{ width:100%; height:100%; display:block; }
.snav .brand-name{
  font-family:'Cormorant Garamond', Georgia, serif;
  font-weight:600; font-size:19px; font-style:normal;
  letter-spacing:-.01em; line-height:1; white-space:nowrap; color:#2D2D2D;
}

/* Desktop links */
.snav__links{ display:flex; align-items:center; gap:28px; }
.snav__links a{
  font-family:'Geist', system-ui, -apple-system, sans-serif;
  font-size:14.5px; font-weight:400; color:#4A4A4A; text-decoration:none;
  letter-spacing:normal; transition:color .15s ease;
}
.snav__links a:hover{ color:#2D2D2D; }

/* Right cluster */
.snav__right{ display:flex; align-items:center; gap:18px; }

/* Taal-schakelaar (consistent) */
.snav .lang-switch{ display:inline-flex; align-items:center; gap:9px; }
.snav .lang-switch .lang-opt{
  background:none; border:none; padding:0; cursor:pointer; line-height:0;
  border-radius:3px; overflow:hidden; opacity:.42; filter:grayscale(.35);
  transition:opacity .2s, filter .2s, transform .2s;
}
.snav .lang-switch .lang-opt:hover{ opacity:.85; filter:grayscale(0); transform:translateY(-1px); }
.snav .lang-switch .lang-opt.is-active{ opacity:1; filter:none; box-shadow:0 0 0 1.5px #FAF7F0, 0 0 0 3px #3270C8; }
.snav .lang-switch .flag{ width:24px; height:16px; display:block; border-radius:2px; }

/* Primaire CTA */
.snav__cta{
  display:inline-flex; align-items:center; gap:8px;
  background:#3270C8; color:#fff;
  font-family:'Geist', system-ui, sans-serif; font-size:14px; font-weight:500;
  text-decoration:none; padding:10px 18px; border-radius:100px; white-space:nowrap; line-height:1;
  transition:background .2s ease, transform .15s ease;
}
.snav__cta:hover{ background:#0F4C97; transform:translateY(-1px); }
.snav__cta svg{ width:16px; height:16px; flex-shrink:0; }

/* Ledenportaal-login (secundair, naast de CTA) */
.snav__login{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'Geist', system-ui, sans-serif; font-size:14px; font-weight:500;
  color:#4A4A4A; text-decoration:none; white-space:nowrap; line-height:1;
  padding:9px 15px; border:1px solid #E5E2D9; border-radius:100px;
  transition:color .15s ease, border-color .15s ease, background .15s ease;
}
.snav__login:hover{ color:#0F4C97; border-color:#C9D3E8; background:rgba(50,112,200,.06); }
.snav__login svg{ width:15px; height:15px; flex-shrink:0; }

/* Secundaire "terug" link */
.snav__back{
  font-family:'Geist', system-ui, sans-serif; font-size:14px; color:#5A6470;
  text-decoration:none; white-space:nowrap; transition:color .15s ease;
}
.snav__back:hover{ color:#2D2D2D; }

/* Hamburger */
.snav__burger{
  display:none; width:42px; height:42px; align-items:center; justify-content:center;
  background:none; border:1px solid #E5E2D9; border-radius:50%; color:#2D2D2D;
  cursor:pointer; flex-shrink:0; padding:0;
}
.snav__burger:hover{ background:rgba(0,0,0,.03); }

/* ---- Mobiele drawer ---- */
.snav__drawer{ position:fixed; inset:0; z-index:300; display:none; }
.snav__drawer.is-open{ display:block; }
.snav__drawer-backdrop{ position:absolute; inset:0; background:#FAF7F0; opacity:0; transition:opacity .25s ease; }
.snav__drawer.is-open .snav__drawer-backdrop{ opacity:1; }
.snav__drawer-panel{
  position:absolute; inset:0; width:100%;
  background:#FAF7F0; box-shadow:none;
  opacity:0; transform:translateY(6px); transition:opacity .22s ease, transform .28s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column; padding:16px 22px 30px;
}
.snav__drawer.is-open .snav__drawer-panel{ opacity:1; transform:none; }
.snav__drawer-head{ display:flex; align-items:center; justify-content:space-between; min-height:44px; margin-bottom:10px; }
.snav__drawer-head .brand-name{ font-family:'Cormorant Garamond', Georgia, serif; font-weight:600; font-size:20px; color:#2D2D2D; letter-spacing:-.01em; }
.snav__drawer-close{
  width:42px; height:42px; display:flex; align-items:center; justify-content:center;
  background:none; border:1px solid #E5E2D9; border-radius:50%; color:#2D2D2D; cursor:pointer; flex-shrink:0;
}
.snav__drawer-links{ display:flex; flex-direction:column; gap:9px; }
.snav__drawer-links a{
  font-family:'Cormorant Garamond', Georgia, serif; font-size:27px; font-weight:500; color:#2D2D2D;
  text-decoration:none; padding:15px 20px; line-height:1;
  background:#F1EFE9; border:1px solid #EAE7DF; border-radius:16px;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.snav__drawer-links a:active{ background:rgba(50,112,200,.08); border-color:rgba(50,112,200,.28); color:#0F4C97; }
.snav__drawer-foot{ margin-top:auto; display:flex; flex-direction:column; gap:18px; padding-top:24px; }
.snav__drawer-lang{ display:flex; align-items:center; gap:12px; }
.snav__drawer-lang .lang-switch{ display:inline-flex; align-items:center; gap:14px; }
.snav__drawer-lang .lang-opt{ background:none; border:none; padding:6px 2px; cursor:pointer; line-height:0; opacity:.5; filter:grayscale(.3); border-radius:3px; transition:opacity .2s, filter .2s; }
.snav__drawer-lang .lang-opt.is-active{ opacity:1; filter:none; box-shadow:0 0 0 1.5px #FAF7F0, 0 0 0 3px #3270C8; }
.snav__drawer-lang .flag{ width:28px; height:19px; display:block; border-radius:2px; }
.snav__drawer .snav__cta{ justify-content:center; padding:15px 18px; font-size:15px; }

/* ---- Responsief ---- */
@media (max-width:760px){
  .snav__inner{ min-height:72px; padding:0 18px; }
  .snav .brand-name{ font-size:19px; }
  .snav__links{ display:none; }
  /* Vlaggen: comfortabel tikdoel op mobiel (sub-pagina's tonen ze in de balk) */
  .snav .lang-switch .lang-opt{ padding:9px 5px; }
  /* Pagina's mét een menu: verplaats lang + CTA naar de drawer, toon hamburger */
  .snav__has-menu .snav__right > .lang-switch,
  .snav__has-menu .snav__right > [data-lang-switch],
  .snav__has-menu .snav__right > .snav__cta{ display:none; }
  .snav__has-menu .snav__burger{ display:flex; }
  /* Login blijft één tik weg op mobiel — icoon-only naast de hamburger */
  .snav__login{ padding:9px 11px; }
  .snav__login .snav__login-label{ display:none; }
  /* Sub-pagina's: verberg de overbodige "terug" link (logo linkt al naar home) */
  .snav .snav__back{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .snav__drawer-panel, .snav__drawer-backdrop, .snav__cta, .snav .lang-switch .lang-opt{ transition:none !important; }
}