/* AI in de klas: digibordpresentatie.
   Elke dia = <section class="dia dia-TYPE">. Eenheid --u = 1/100 van de dia-breedte, dus alles schaalt
   mee (1920x1080 op 150% = viewport 1280x720, Chromebook 1366x768). Kop >= ca. 56px, tekst >= ca. 32px bij 1080p. */

:root{
  --u:min(1vw, calc(100vh * 16 / 90));     /* 1u = 1% van de dia-breedte (16:9) */
  --ink:#0a0e14; --muted:#3b4350; --papier:#ffffff; --rand:#0a0e14; --bg:#1a1e26;
  --blauw:#1741b8; --blauw-zacht:#e4ebfd;
  --oranje:#a84300; --oranje-zacht:#fde9d9;
  --groen:#0b6b4f; --groen-zacht:#dff3ea;
  --paars:#7a2bb8; --paars-zacht:#f0e5fa;
  --kop-font:"Bricolage Grotesque", "Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --tekst-font:"Atkinson Hyperlegible", ui-sans-serif, system-ui, sans-serif;
  --mono-font:"DM Mono", ui-monospace, monospace;
}
*{box-sizing:border-box; min-width:0}
html{overflow-x:hidden; background:var(--bg)}
body.presentatie{margin:0; background:var(--bg); color:var(--ink); font-family:var(--tekst-font);
  font-size:calc(var(--u) * 1.75); line-height:1.3; -webkit-font-smoothing:antialiased}

/* de dia zelf: vaste 16:9 doos */
.dia{position:relative; width:calc(var(--u) * 100); height:calc(var(--u) * 56.25); margin:0 auto 2vh;
  background:var(--papier); color:var(--ink); overflow:hidden; padding:calc(var(--u) * 4.5) calc(var(--u) * 5.5);
  display:flex; flex-direction:column; justify-content:center; gap:calc(var(--u) * 2)}
.dia > .notities{display:none}
.dia h1, .dia h2, .dia h3{font-family:var(--kop-font); font-weight:700; letter-spacing:-.015em; margin:0;
  line-height:1.08; overflow-wrap:anywhere; text-wrap:balance}
.dia h2{font-size:calc(var(--u) * 3.4)}          /* 65px bij 1920 */
.dia h3{font-size:calc(var(--u) * 2.3)}
.dia p, .dia li{font-size:calc(var(--u) * 1.75); margin:0}
.dia p + p{margin-top:.6em}
.dia ul, .dia ol{margin:0; padding-left:1.2em}
.dia li{margin:.3em 0}
.dia .dia-label{font:500 calc(var(--u) * 1.15) var(--mono-font); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:0}
.dia .dia-label::before{content:""; display:inline-block; width:.7em; height:.7em; background:var(--blauw); margin-right:.6em; border-radius:50%}
.dia a{color:var(--blauw)}

/* alleen de actieve dia tonen als JS draait; zonder JS staan ze onder elkaar */
.slides-js body.presentatie{height:100vh; overflow:hidden; display:grid; place-items:center}
.slides-js .dia{display:none; margin:0}
.slides-js .dia.actief{display:flex}

/* ---- diatypes ---- */
/* titel */
.dia-titel{justify-content:center; border-left:calc(var(--u) * 1.4) solid var(--blauw)}
.dia-titel h1{font-size:calc(var(--u) * 6.4); max-width:16ch}      /* 123px */
.dia-titel .ondertitel{font-size:calc(var(--u) * 2.4); color:var(--muted); max-width:32ch}
.dia-titel .flap-plek{position:absolute; right:calc(var(--u) * 5); bottom:calc(var(--u) * 4); width:calc(var(--u) * 26); height:calc(var(--u) * 26)}

/* vraag */
.dia-vraag{justify-content:center; align-items:flex-start}
.dia-vraag h2{font-size:calc(var(--u) * 6.2); max-width:20ch; line-height:1.08}   /* 119px */
.dia-vraag .context{font-size:calc(var(--u) * 1.9); color:var(--muted); max-width:42ch}

/* stelling en keuze: vlakken met kleur + vorm + woord/letter */
.opties{display:grid; gap:calc(var(--u) * 2.2); flex:1; min-height:0}
.dia-stelling h2, .dia-keuze h2{font-size:calc(var(--u) * 3.6)}
.dia-stelling .opties{grid-template-columns:repeat(2,minmax(0,1fr)); max-height:calc(var(--u) * 20)}
.dia-keuze .opties{grid-template-columns:repeat(3,minmax(0,1fr))}
.dia-keuze .opties.twee{grid-template-columns:repeat(2,minmax(0,1fr))}
.optie{position:relative; display:flex; align-items:center; gap:calc(var(--u) * 2); padding:calc(var(--u) * 2);
  border:calc(var(--u) * .5) solid var(--kc); background:var(--kz); border-radius:calc(var(--u) * 1.2);
  font-size:calc(var(--u) * 2.1); font-weight:700; line-height:1.15; overflow-wrap:anywhere}
.dia-keuze .optie{flex-direction:column; justify-content:center; text-align:center}
.optie .vorm{flex:0 0 auto; display:grid; place-items:center; width:calc(var(--u) * 7.5); height:calc(var(--u) * 7.5);
  background:var(--kc); color:#fff; font:700 calc(var(--u) * 4) var(--kop-font)}
.optie small{display:block; font-weight:400; font-size:.8em; margin-top:.3em; color:var(--muted)}
/* vormen: 1 cirkel, 2 vierkant, 3 ruit, 4 zeshoek */
.optie:nth-child(1){--kc:var(--blauw); --kz:var(--blauw-zacht)}
.optie:nth-child(2){--kc:var(--oranje); --kz:var(--oranje-zacht)}
.optie:nth-child(3){--kc:var(--groen); --kz:var(--groen-zacht)}
.optie:nth-child(4){--kc:var(--paars); --kz:var(--paars-zacht)}
.optie:nth-child(1) .vorm{border-radius:50%}
.optie:nth-child(2) .vorm{border-radius:calc(var(--u) * .6)}
.optie:nth-child(3) .vorm{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.optie:nth-child(4) .vorm{clip-path:polygon(25% 5%,75% 5%,100% 50%,75% 95%,25% 95%,0 50%)}
/* stelling: eens = blauwe cirkel met vinkje, oneens = oranje vierkant met kruis (het teken zit in .vorm) */
.dia .stelling-tekst{font-family:var(--kop-font); font-weight:700; font-size:calc(var(--u) * 4.4); line-height:1.12; max-width:34ch; overflow-wrap:anywhere}

/* stappen */
.stappen{list-style:none; padding:0; counter-reset:st; display:grid; gap:calc(var(--u) * 1.6)}
.stappen li{counter-increment:st; display:flex; align-items:center; gap:calc(var(--u) * 2); font-size:calc(var(--u) * 2.2); margin:0;
  padding:calc(var(--u) * 1.3) calc(var(--u) * 2); border:calc(var(--u) * .3) solid var(--rand); border-radius:calc(var(--u) * 1.2); background:#f3f5f9}
.stappen li::before{content:counter(st); flex:0 0 auto; width:calc(var(--u) * 5.4); height:calc(var(--u) * 5.4); border-radius:50%;
  background:var(--ink); color:#fff; display:grid; place-items:center; font:700 calc(var(--u) * 3) var(--kop-font)}
.stappen.rij{grid-template-columns:repeat(auto-fit,minmax(0,1fr)); align-items:stretch}
.stappen.rij li{flex-direction:column; align-items:flex-start; justify-content:flex-start}

/* flap */
.dia-flap{flex-direction:row; align-items:center; gap:calc(var(--u) * 5)}
.dia-flap .flap-plek{flex:0 0 calc(var(--u) * 34); height:calc(var(--u) * 34)}
.dia-flap .tekst{flex:1; display:flex; flex-direction:column; gap:calc(var(--u) * 1.6)}
.dia-flap.omgekeerd{flex-direction:row-reverse}
.flap-plek svg{display:block; width:100%; height:100%}
.flap-plek:empty{display:none}

/* afbeelding */
.dia-afbeelding{padding:calc(var(--u) * 3.5) calc(var(--u) * 5)}
.dia-afbeelding h2{font-size:calc(var(--u) * 3)}
.dia-afbeelding figure{flex:1; min-height:0; margin:0; display:flex; flex-direction:column; gap:calc(var(--u) * 1)}
.dia-afbeelding img, .afb-plek{flex:1; min-height:0; width:100%; object-fit:contain}
.afb-plek{display:grid; place-items:center; border:calc(var(--u) * .3) dashed var(--muted); border-radius:calc(var(--u) * 1.2);
  color:var(--muted); font-size:calc(var(--u) * 2); text-align:center; padding:1em}
.dia-afbeelding figcaption{font-size:calc(var(--u) * 1.5); color:var(--muted)}

/* ---- navigatie (door slides.js aangemaakt) ---- */
.dia-nav{position:fixed; right:calc(var(--u) * 1); bottom:calc(var(--u) * 1); z-index:20; display:flex; gap:8px; align-items:center;
  padding:6px; background:rgba(10,14,20,.86); border-radius:12px; opacity:.55; transition:opacity .2s}
.dia-nav:hover, .dia-nav:focus-within{opacity:1}
.dia-nav button{min-width:44px; min-height:44px; padding:0 14px; border:2px solid #fff; border-radius:9px; background:#0a0e14; color:#fff;
  font:700 16px var(--tekst-font); cursor:pointer}
.dia-nav button:hover{background:#243044}
.dia-nav button:focus-visible{outline:3px solid #ffd54a; outline-offset:2px}
.dia-nummer{position:fixed; left:calc(var(--u) * 1); bottom:calc(var(--u) * 1); z-index:20; padding:4px 12px; border-radius:8px;
  background:rgba(10,14,20,.86); color:#fff; font:500 18px var(--mono-font)}
.toon-notities .dia.actief > .notities{display:block; position:fixed; left:0; right:0; bottom:0; z-index:15; max-height:34vh; overflow:auto;
  padding:16px 22px 16px 22px; background:#0a0e14; color:#fff; font-size:20px; line-height:1.45; border-top:3px solid #ffd54a}
.toon-notities .dia.actief > .notities::before{content:"Sprekersnotities (N verbergt)"; display:block; font:500 13px var(--mono-font);
  letter-spacing:.1em; text-transform:uppercase; color:#ffd54a; margin-bottom:6px}
.toon-notities .dia.actief > .notities p, .toon-notities .dia.actief > .notities li{font-size:20px}
.toon-notities .dia-nav, .toon-notities .dia-nummer{bottom:auto; top:calc(var(--u) * 1)}

/* kleine/smalle schermen (telefoon): niet bedoeld, maar wel leesbaar zonder horizontale scroll */
@media (max-width:640px){ :root{--u:min(1vw, calc(100vh * 16 / 90))} }

@media (prefers-reduced-motion:reduce){ .dia-nav{transition:none} }
html[data-rustig="1"] .dia-nav{transition:none}

/* ---- print: elke dia 1 liggende A4 ---- */
@page{size:A4 landscape; margin:10mm}
@media print{
  :root{--u:2.77mm}                        /* 277mm breed (A4 landscape min marges) */
  html, body.presentatie{background:#fff !important; height:auto !important; overflow:visible !important; display:block !important; font-size:calc(var(--u) * 1.75)}
  .dia-nav, .dia-nummer{display:none !important}
  .slides-js .dia, .dia{display:flex !important; position:relative; width:277mm; height:155.8mm; margin:0; overflow:visible;
    border:.5mm solid #000; break-after:page; page-break-after:always; break-inside:avoid}
  .dia:last-of-type{break-after:auto; page-break-after:auto}
  .dia > .notities{display:block !important; position:absolute; left:0; right:0; top:calc(100% + 3mm); font-size:9pt; line-height:1.35; color:#000}
  .dia > .notities::before{content:"Sprekersnotities: "; font-weight:700}
  .dia > .notities p, .dia > .notities li{display:inline; font-size:9pt}
  .dia > .notities ul, .dia > .notities ol{display:inline; padding:0}
  .dia > .notities li:not(:last-child)::after{content:" / "}
  .optie, .optie .vorm, .stappen li, .stappen li::before{-webkit-print-color-adjust:exact; print-color-adjust:exact}
  .optie{background:#f1f1f1 !important}
  .dia .dia-label::before{background:#000}
}