/* ==========================================================================
   Gedeelde stijlen voor de header (ticker, menubalk, mobiel menu), de knoppen
   en de footer. Eén bestand voor de hele site, zodat de header en footer op
   elke pagina hetzelfde zijn.

   Dit bestand wordt vóór de pagina-eigen <style> geladen. Tokens die een
   pagina zelf opnieuw zet (bijvoorbeeld --maxw) winnen dus altijd.
   ========================================================================== */

:root{
  --bg:#EEF2FA;
  --surface:#FFFFFF;
  --sky:#DCE6FA;
  --sky-2:#EAF0FC;
  --navy:#0E1B44;
  --ink:#1a2650;
  --muted:#5b688c;
  --muted-2:#8a95b5;
  --line:#E1E7F4;
  --orange:#F5661E;
  --orange-2:#FF8443;
  --orange-soft:#FFE7D6;
  --green:#129d6b;
  --maxw:1220px;
  --font-d:"Space Grotesk",system-ui,sans-serif;
  --font-b:"Manrope",system-ui,sans-serif;
  --font-m:"Space Mono",ui-monospace,monospace;
}

/* ----------------------------------------------------------------- KNOPPEN */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;padding:.95em 1.5em;border-radius:14px;
  font-weight:700;font-size:.95rem;background:var(--navy);color:#fff;border:2px solid var(--navy);cursor:pointer;
  font-family:var(--font-b);line-height:1.2;text-align:center;white-space:nowrap;
  transition:transform .2s,box-shadow .2s,background .2s;box-shadow:0 8px 22px -12px rgba(14,27,68,.7)}
.btn:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(14,27,68,.6)}
.btn.orange{background:var(--orange);border-color:var(--orange);box-shadow:0 10px 26px -12px rgba(245,102,30,.8)}
.btn.ghost{background:transparent;color:var(--navy);box-shadow:none}
.btn.ghost:hover{background:var(--navy);color:#fff}
.btn.whatsapp{background:#25D366;border-color:#25D366;color:#fff;box-shadow:0 10px 26px -12px rgba(37,211,102,.8)}
.btn.whatsapp:hover{background:#1ebe5b;border-color:#1ebe5b}
.btn.sm{padding:.62em 1em;font-size:.85rem;border-radius:11px}
.btn svg{width:1.05em;height:1.05em}
/* Onder 480px verdwijnt het WhatsApp-label en blijft alleen het icoon staan,
   zodat de knop naast Proefles en de hamburger past. */
@media(max-width:480px){.nav-cta .btn.whatsapp{padding:.62em;gap:0}.nav-cta .btn.whatsapp .lbl{display:none}}

/* ------------------------------------------------------------------ TICKER */
.ticker{background:var(--navy);color:#fff;overflow:hidden;padding:.55rem 0;font-family:var(--font-m);font-size:.8rem}
.ticker .row{display:flex;gap:2.5rem;white-space:nowrap;width:max-content;animation:tk 24s linear infinite}
.ticker .row span{display:flex;align-items:center;gap:.6rem}
.ticker .row b{color:var(--orange-2)}
@keyframes tk{to{transform:translateX(-50%)}}

/* --------------------------------------------------------------- MENUBALK */
.nav{position:sticky;top:0;z-index:50}
/* Menubalk over de volle breedte. De inhoud lijnt via de zij-padding uit met
   .wrap, zodat het logo op één lijn staat met de tekst eronder. */
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;
  background:var(--surface);border-bottom:1px solid var(--line);
  padding-block:.85rem;padding-inline:max(20px,calc((100% - var(--maxw))/2));
  box-shadow:0 10px 30px -22px rgba(14,27,68,.5)}
.brand{display:flex;align-items:center;gap:.7rem;font-family:var(--font-d);font-weight:700;font-size:1.28rem;
  color:var(--navy);line-height:1.05;text-decoration:none}
.brand .mark{width:42px;height:42px;border-radius:12px;background:linear-gradient(150deg,var(--orange),#d24a10);
  display:grid;place-items:center;flex:none;box-shadow:0 6px 16px -6px rgba(245,102,30,.7)}
.brand .mark svg{width:24px;height:24px}
.brand small{display:block;font-family:var(--font-m);font-size:.62rem;letter-spacing:.14em;color:var(--muted-2);
  text-transform:uppercase;font-weight:400;margin-top:.1rem}
.nav-links{display:flex;align-items:center;gap:.2rem}
.nav-links a{padding:.5rem .8rem;border-radius:11px;font-size:.9rem;color:var(--muted);font-weight:600;
  white-space:nowrap;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:var(--navy);background:var(--sky-2)}
.nav-group{position:relative;display:flex;align-items:center}
.nav-group>a::after{content:"⌄";font-size:.75em;margin-left:.35rem;color:var(--muted-2)}
.nav-sub{position:absolute;top:calc(100% + .4rem);left:0;min-width:190px;padding:.45rem;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -24px rgba(14,27,68,.55);
  opacity:0;visibility:hidden;transform:translateY(-5px);transition:.18s;z-index:5}
.nav-sub a{display:block;white-space:nowrap}
.nav-group:hover .nav-sub,.nav-group:focus-within .nav-sub{opacity:1;visibility:visible;transform:none}
.nav-cta{display:flex;align-items:center;gap:.6rem}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;
  cursor:pointer;color:var(--navy)}
/* Zeven menu-items plus drie knoppen passen tot ongeveer 1140px op één regel;
   daaronder gaat het menu naar de hamburger. */
@media(max-width:1140px){.nav-links{display:none}.burger{display:grid;place-items:center}.nav-cta .btn.ghost{display:none}}

/* ---------------------------------------------------------- MOBIELE MENU */
/* z-index 80: boven de chatknop (70), anders zweeft die over het menu heen. */
.mobile-menu{position:fixed;inset:0;z-index:80;background:var(--bg);display:flex;flex-direction:column;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s,visibility .25s}
.mobile-menu.open{opacity:1;visibility:visible;transform:none}
.mm-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex:none;
  padding:.85rem clamp(20px,5vw,28px);background:var(--surface);border-bottom:1px solid var(--line)}
.mm-close{width:44px;height:44px;flex:none;border-radius:12px;border:1px solid var(--line);background:#fff;
  color:var(--navy);cursor:pointer;display:grid;place-items:center}
.mm-close:hover{background:var(--sky-2)}
.mm-links{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  display:flex;flex-direction:column;padding:.4rem clamp(20px,5vw,28px)}
.mobile-menu a{font-family:var(--font-d);font-size:clamp(1.35rem,5.5vw,1.9rem);color:var(--navy);
  padding:.7rem 0;border-bottom:1px solid var(--line);line-height:1.15;text-decoration:none}
.mobile-menu a small{display:block;font-family:var(--font-m);font-size:.68rem;color:var(--muted-2);margin-top:.15rem}
.mm-onder{flex:none;display:grid;gap:.6rem;background:var(--surface);border-top:1px solid var(--line);
  padding:1rem clamp(20px,5vw,28px) calc(1rem + env(safe-area-inset-bottom))}
.mm-onder .btn{width:100%}
.mm-onder a{font-family:inherit;font-size:1rem;color:inherit;padding:.9em 1.6em;border-bottom:none}
body.menu-open{overflow:hidden}
body.menu-open .chat-fab{display:none}

/* ------------------------------------------------------------------ FOOTER */
.foot{background:var(--navy);color:#fff;padding:3.5rem 0 2rem;margin-top:2rem}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:2rem}
.foot h4{font-family:var(--font-m);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#7f8cb5;margin-bottom:1rem}
.foot a{display:block;color:#aab7dd;padding:.25rem 0;font-size:.92rem;text-decoration:none}
.foot a:hover{color:var(--orange-2)}
.foot .brand{color:#fff;margin-bottom:1rem;display:inline-flex;padding:0}
.foot .brand:hover{color:#fff}
.foot .brand small{color:#7f8cb5}
.foot p{color:#aab7dd;font-size:.9rem;max-width:32ch}
.foot .foot-adres{font-style:normal;color:#aab7dd;font-size:.9rem;margin-top:.9rem;line-height:1.5}
.foot-bottom{margin-top:2.8rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12);display:flex;
  justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.82rem;color:#7f8cb5}
.foot-bottom a{display:inline;color:#7f8cb5}
@media(max-width:820px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}.foot-bottom{flex-direction:column}}

@media(prefers-reduced-motion:reduce){
  .ticker .row{animation:none}
  .btn:hover{transform:none}
}