/* =========================================================
   site.css — gedeelde basis voor alle pagina's
   Wordt vóór het eigen <style>-blok van een pagina geladen,
   dus een pagina kan elke waarde hier zelf overschrijven.
   ========================================================= */

:root{
  /* ---------- kleuren ---------- */
  --ink:#1e293b;      /* slate-800: tekst */
  --muted:#475569;    /* slate-600: bijzaken */
  --sky:#f0f9ff;      /* sky-50: achtergrond */
  --card:#ffffff;
  --line:#e2e8f0;
  --focus:#f59e0b;    /* focusring, goed zichtbaar op licht én donker */

  /* ---------- lettertypes (geladen via Google Fonts per pagina) ---------- */
  --font-tekst:"Nunito",system-ui,sans-serif;
  --font-kop:"Baloo 2",system-ui,sans-serif;

  /* ---------- beweging (motion-tokens) ---------- */
  --duration-micro:80ms;
  --duration-quick:150ms;     /* sluiten, tekst wisselen */
  --duration-fast:250ms;      /* openen, hover, schermwissel */
  --duration-slow:400ms;      /* paneel openen */
  --ease-smooth-out:cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out:ease-in-out;
  --ease-bounce:cubic-bezier(0.34, 1.36, 0.64, 1);
}

/* ---------- toetsenbordfocus: één ring voor de hele site ---------- */
:focus-visible{outline:4px solid var(--focus);outline-offset:3px}

/* ---------- touchscreen en digibord: een tik reageert meteen (geen dubbeltik-zoom) ---------- */
a,button,input,select,textarea,label,[role="button"]{touch-action:manipulation}

/* ---------- minder beweging als het apparaat daarom vraagt ----------
   Animaties en overgangen duren dan vrijwel 0 ms. Ze worden niet
   uitgezet, zodat alles nog op de eindstand komt en code die
   op het einde van een animatie wacht blijft werken. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-delay:0s !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    transition-delay:0s !important;
    scroll-behavior:auto !important;
  }
}

/* ---------- kerndoel-label bij een activiteit (zie kerndoelen.js) ---------- */
.kerndoel-label{
  margin:4px auto 10px;
  max-width:60ch;
  font-size:.82rem;
  line-height:1.35;
  font-weight:600;
  color:var(--muted, #475569);
  text-align:center;
}
.kerndoel-label[hidden]{display:none}
.kerndoel-label b{font-weight:800}