/* ===== Vars / Base ===== */
:root{
  --ink:#182230; --muted:#6a7b91;
  --page:#f7f9fd; --surface:#ffffff;
  --brand:#14335f; --brand-2:#1e4595; --accent:#2f6cf0;

  --r-lg:20px; --r-pill:28px;
  --shadow-sm:0 8px 24px rgba(14,27,53,.08);
  --shadow-md:0 18px 44px rgba(14,27,53,.14);
  --shadow-lg:0 36px 86px rgba(14,27,53,.18);

  --container:1200px; --focus:#8db6ff;
  --speed: .45s; /* animatiesnelheid */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:hidden;}
body.noor{
  margin:0; direction:rtl;
  font-family:"Vazirmatn",system-ui,-apple-system,Segoe UI,Roboto;
  color:var(--ink); background:var(--page); line-height:1.85;
  overflow-x:hidden;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:12px}

.container{width:min(92%,var(--container));margin-inline:auto}
.section{padding:64px 0}
.section--alt{background:#fff}
@media (max-width:760px){ .section{padding:48px 0} }

h1,h2,h3{margin:0 0 .6em}
h1{font-weight:800;font-size:clamp(1.9rem,3.4vw,2.8rem)}
h2{font-weight:800;font-size:clamp(1.45rem,2.2vw,1.95rem);color:var(--brand)}
h3{font-weight:800;font-size:1.14rem;color:var(--brand)}
.section__head{text-align:center;margin-bottom:24px}
.section__sub{color:var(--muted);max-width:66ch;margin:8px auto 0}

/* ===== Header / Nav ===== */
.site-header{
  position:sticky; top:0; z-index:1000;
  background:rgba(255,255,255,.75);
  backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(31,69,149,.12);
}
.header__inner{height:74px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:12px;color:var(--brand);font-weight:800}
.brand__logo{height:44px}
.brand__name{display:none}
@media (min-width:1024px){ .brand__name{display:inline} }

/* Desktop nav */
.nav--desktop{display:flex;align-items:center;gap:18px}
.nav__links{display:flex;gap:12px;list-style:none;margin:0;padding:0}
.nav__links a{font-weight:700;color:var(--brand);padding:10px 12px;border-radius:12px;transition:background .2s ease, transform .2s ease}
.nav__links a:hover{background:rgba(47,108,240,.12); transform:translateY(-1px)}
.nav__cta{display:flex;align-items:center;gap:12px;margin-inline-start:6px}

/* Pills */
.pill{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  padding:.78rem 1.2rem;border-radius:var(--r-pill);font-weight:800;line-height:1;white-space:nowrap;
  box-shadow:0 10px 26px rgba(18,43,96,.18), inset 0 -1px 0 rgba(255,255,255,.25);
  transition:transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.pill:active{transform:translateY(1px)}
.pill--solid{
  color:#fff;background:linear-gradient(180deg,#2a428a 0%, #223a7d 50%, #1b326f 100%);
  box-shadow:0 14px 28px rgba(20,51,95,.28), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 6px rgba(0,0,0,.16);
  border:1px solid rgba(18,40,98,.35)
}
.pill--outline{
  color:#1f3158;background:#fff;border:2px solid #e0e7f5;
  box-shadow:0 8px 22px rgba(31,69,149,.10), inset 0 -1px 0 rgba(0,0,0,.02)
}
.pill--solid:hover{filter:brightness(1.05)}
.pill--outline:hover{background:#fcfdff;border-color:#d7e0f3}

/* Mobile toggle (burger) */
.nav-toggle{
  display:none; width:34px; height:26px; position:relative; border:0; background:transparent; cursor:pointer;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after{
  content:""; position:absolute; right:0; left:0; height:2px; background:var(--brand); border-radius:2px; transition:.25s ease;
}
.nav-toggle__bar{ top:50%; transform:translateY(-50%); }
.nav-toggle__bar::before{ top:-8px }
.nav-toggle__bar::after{ top:8px }

/* Backdrop + Drawer */
.nav-backdrop{
  position:fixed; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:999; transition:opacity .25s ease;
}
.nav--mobile{
  position:fixed; top:74px; right:0; bottom:0; width:min(360px,86vw);
  background:#fff; z-index:1000;
  transform:translateX(100%); transition:transform var(--speed) ease;
  border-inline-start:1px solid rgba(31,69,149,.15); box-shadow:var(--shadow-lg);
}
.nav--mobile__inner{height:100%; display:flex; flex-direction:column; gap:12px; padding:18px; overflow:auto}
.nav--mobile .nav__links{flex-direction:column; gap:6px; list-style:none; margin:0; padding:0}
.nav--mobile .nav__links a{padding:12px 10px; border-radius:12px; transition:background .2s ease}
.nav--mobile .nav__links a:hover{background:#f3f6ff}
.nav__cta--stack{flex-direction:column; align-items:stretch}
.nav__cta--stack .pill{justify-content:center}

/* Open state via body class */
.is-menu-open .nav--mobile{ transform:none }
.is-menu-open .nav-backdrop{ opacity:1; pointer-events:auto }
.is-menu-open .nav-toggle .nav-toggle__bar{ background:transparent }
.is-menu-open .nav-toggle .nav-toggle__bar::before{ top:0; transform:rotate(45deg) }
.is-menu-open .nav-toggle .nav-toggle__bar::after{ top:0; transform:rotate(-45deg) }

/* Breakpoints */
@media (max-width:900px){
  .nav--desktop{ display:none }
  .nav-toggle{ display:block }
}
@media (min-width:901px){
  .nav--mobile, .nav-backdrop{ display:block } /* blijft in DOM; niet actief zonder .is-menu-open */
}

/* ===== Hero ===== */
.hero{
  color:#fff; padding:92px 0 60px;
  background:linear-gradient(135deg,#0f2650 0%,#14335f 55%,#1e4595 100%);
}
.hero__grid{display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:28px}
.hero__lead{color:#eaf1ff; opacity:.95}
.hero__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.hero__stats{list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.stat{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.22); border-radius:16px; padding:12px; text-align:center}
.stat b{display:block}
.stat span{font-size:.92rem;opacity:.9}
.hero__media img{border-radius:22px; box-shadow:var(--shadow-lg)}
@media (max-width:980px){ .hero__grid{grid-template-columns:1fr} .hero__stats{grid-template-columns:repeat(2,1fr)} }

/* ===== Buttons (content) ===== */
.btn{--_bg:var(--accent); display:inline-flex; align-items:center; gap:.55rem; padding:.9rem 1.2rem; border-radius:999px; font-weight:800; color:#fff; background:linear-gradient(180deg,var(--_bg),color-mix(in oklab,var(--_bg),#000 10%)); box-shadow:0 12px 28px color-mix(in oklab,var(--_bg),#000 25% / 40%); transition:transform .1s ease, filter .2s ease}
.btn:hover{filter:brightness(1.05); transform:translateY(-1px)}
.btn--ghost{background:#fff; color:var(--brand); border:2px solid rgba(31,69,149,.15)}
.btn--soft{--_bg:color-mix(in oklab,var(--accent),#fff 65%); color:var(--brand)}

/* ===== Grid / Cards / Acc ===== */
.grid{display:grid; gap:20px}
.grid--2{grid-template-columns:1fr 1fr}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:980px){ .grid--2,.grid--3{grid-template-columns:1fr} .grid--4{grid-template-columns:1fr 1fr} }
@media (max-width:760px){ .grid--4{grid-template-columns:1fr} }

.card{background:#fff; border:1px solid rgba(31,69,149,.12); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:22px; transition:box-shadow var(--speed) ease, transform var(--speed) ease}
.card--lift:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.card--outline{background:linear-gradient(#fff,#fff) padding-box, linear-gradient(135deg, rgba(20,51,95,.25), rgba(47,108,240,.25)) border-box; border:1px solid transparent}

/* Accordions */
.acc{overflow:hidden; padding:0; border-radius:var(--r-lg); border:1px solid rgba(31,69,149,.12); background:#fff}
.acc > summary{list-style:none; cursor:pointer; padding:16px 18px; display:flex; align-items:center; gap:.6rem; font-weight:800; color:var(--brand)}
.acc[open] > summary{border-bottom:1px dashed rgba(31,69,149,.18)}
.acc__content{padding:14px 18px; color:var(--ink)}

/* ===== Teachers (no padding around images) ===== */
.teacher{padding:0; overflow:hidden}
.teacher__media{margin:0}
.teacher__media img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.teacher__body{padding:18px 20px}
.teacher__body h3{color:#1e4595; margin-bottom:.25rem}
.teacher__body p{color:#5d6e85}

/* ===== Table ===== */
.table-wrap{margin-top:18px}
.table-head{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(31,69,149,.12)}
.table-head h3{margin:0}
.table-scroll{overflow:auto}
.table{width:100%;min-width:720px;border-collapse:collapse}
.table th,.table td{padding:12px 16px;text-align:right;border-bottom:1px solid rgba(31,69,149,.12)}
.table thead th{background:linear-gradient(180deg, rgba(47,108,240,.10), rgba(47,108,240,.06));color:var(--brand);font-weight:800;position:sticky;top:0;z-index:1}

/* ===== Contact ===== */
.contact{align-items:start}
.contact__info .contact__list{list-style:none; padding:0; margin:0; display:grid; gap:.7rem}
.contact__list li{display:flex; align-items:center; gap:.6rem; border-bottom:1px dashed rgba(31,69,149,.15); padding:.6rem 0}
.contact__list li:last-child{border-bottom:0}
.form{display:grid; gap:12px}
.form__row{display:grid; gap:8px}
.form__row input,.form__row textarea{width:100%; font:inherit; color:var(--ink); background:#fff; border:1px solid rgba(31,69,149,.16); padding:12px 14px; border-radius:14px}
.form__actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:4px}
.form__status{min-height:1.35em; color:#18a56a; font-weight:800}

/* ===== Footer (rijk) ===== */
.site-footer{
  color:#e9f1ff;
  background:
    radial-gradient(1600px 300px at 70% -40%, rgba(47,108,240,.22), transparent 60%),
    linear-gradient(180deg,#0b1a33,#0a162b);
  margin-top:28px;
}
.footer__grid{
  display:grid; gap:28px; padding:38px 0;
  grid-template-columns:2fr 1fr 1fr;
}
.footer__brand{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.footer__logo{height:38px}
.footer__text{margin:0; color:#cfdcff}
.footer__title{margin:0 0 .6rem; font-size:1rem; color:#dbe7ff}
.footer__list{list-style:none; padding:0; margin:0; display:grid; gap:.5rem}
.footer__list a{color:#e9f1ff; opacity:.9; transition:opacity .2s ease, transform .2s ease}
.footer__list a:hover{opacity:1; transform:translateX(-2px)}

.footer__copybar{
  border-top:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  padding:12px 0;
}
.copybar__inner{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; color:#d4e4ff}
.to-top{padding:8px 14px; border:1px solid rgba(255,255,255,.25); border-radius:999px; color:#e9f1ff; text-decoration:none; transition:transform .2s ease, background .2s ease}
.to-top:hover{background:rgba(255,255,255,.08); transform:translateY(-1px)}

@media (max-width:980px){
  .footer__grid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .footer__grid{grid-template-columns:1fr}
}

/* ===== Premium micro-animations ===== */
/* Scroll-reveal (wordt door JS .is-visible gegeven) */
.reveal{opacity:0; transform:translateY(14px); transition:opacity .5s ease, transform .5s ease}
.reveal.is-visible{opacity:1; transform:none}

/* Respecteer gebruikersinstelling */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important}
}