/* viewer.css — gedeelde stijlen voor het renderen van slides.
   Gebruikt door zowel de presentatie (index.html) als de editor (editor.html).
   Alle regels zijn gescoped op .slide-viewer zodat ze niet de omliggende
   pagina-chrome (header, editor-panelen, etc.) beïnvloeden. */

.slide-viewer {
  position: relative;
  overflow: hidden;
  background: var(--bg, #faf7f2);
  color: var(--fg, #2b2b2b);
  font-family: var(--font-body, Georgia, "Times New Roman", serif);
  line-height: 1.5;
  /* container-type maakt cqh (container-query-height) beschikbaar zodat
     tekstgroottes meeschalen met de daadwerkelijke stage-hoogte i.p.v.
     de hele viewport. Zo blijft de editor-preview klein en de fullscreen
     presentatie groot genoeg voor achterin een klaslokaal. */
  container-type: size;
}

/* ===== Slides =====
   Fontgroottes zijn clamp(min, cqh-based, max). Op een 1080p-scherm haalt
   body 3.2 cqh = ~34px (leesbaar tot achter in het lokaal), op 4K is er
   een plafond, en de editor-preview blijft compact. */
.slide-viewer .slide {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  padding: 40px 20px;
  overflow-y: auto;
  transition: transform 400ms ease, opacity 400ms ease;
  /* "safe" is essentieel, niet cosmetisch. Bij gewoon `center` verdeelt flexbox
     de overloop over bóven én onder zodra de inhoud hoger is dan de stage. Wat
     boven de rand uitsteekt zit dan op negatieve scrollpositie en is onbereikbaar:
     de kop van een volle slide is dan simpelweg niet te lezen. Met `safe center`
     valt de uitlijning in dat geval terug op boven-aan, zodat alles scrollbaar
     blijft; past de inhoud wél, dan blijft hij netjes gecentreerd.
     De regel erboven is de terugval voor browsers die `safe` niet kennen. */
  align-items: center;
  align-items: safe center;
}
.slide-viewer .slide-inner {
  max-width: min(1200px, 90%);
  width: 100%;
  font-size: clamp(1rem, 3.2cqh, 2.2rem);
}
.slide-viewer .slide h1,
.slide-viewer .slide h2,
.slide-viewer .slide h3,
.slide-viewer .slide h4 {
  font-family: var(--font-heading, Georgia, "Times New Roman", serif);
  line-height: 1.15;
}
.slide-viewer .slide h1 { font-size: clamp(1.8rem, 6cqh, 4.5rem); margin-top: 0; }
.slide-viewer .slide h2 { font-size: clamp(1.4rem, 4.5cqh, 3.2rem); }
.slide-viewer .slide h3 { font-size: clamp(1.2rem, 3.6cqh, 2.4rem); }
.slide-viewer .slide p,
.slide-viewer .slide li { font-size: 1em; }
.slide-viewer .slide code {
  background: var(--code-bg, #f0ebe0);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: Consolas, monospace;
  font-size: 0.95em;
}
.slide-viewer .slide pre {
  background: var(--code-bg, #f0ebe0);
  padding: 12px;
  border-radius: 4px;
  overflow-x: auto;
}
.slide-viewer .slide pre code { background: transparent; padding: 0; }
.slide-viewer .slide img { max-width: 100%; height: auto; }
.slide-viewer .slide a { color: var(--accent, #b8860b); }
.slide-viewer .slide table {
  border-collapse: collapse;
  width: 100%;
  margin: 1em 0;
}
.slide-viewer .slide th,
.slide-viewer .slide td {
  border: 1px solid var(--border, #c8b89a);
  padding: 0.5em 0.9em;
  text-align: left;
  vertical-align: top;
}
.slide-viewer .slide thead th {
  background: var(--accent, #b8860b);
  color: #fff;
  font-family: var(--font-heading, Georgia, serif);
  font-weight: bold;
}
.slide-viewer .slide tbody tr:nth-child(even) {
  background: var(--code-bg, #f0ebe0);
}

.slide-viewer .slide blockquote {
  border-left: 4px solid var(--accent, #b8860b);
  margin: 1em 0;
  padding: 0.5em 1em;
  background: var(--code-bg, #f0ebe0);
  border-radius: 0 4px 4px 0;
  color: var(--muted, #5a4a3a);
  font-style: italic;
}
.slide-viewer .slide blockquote p { margin: 0; }

/* ===== Transitions ===== */
.slide-viewer .slide-enter-from-right { transform: translateX(100%); opacity: 0; }
.slide-viewer .slide-enter-from-left  { transform: translateX(-100%); opacity: 0; }
.slide-viewer .slide-leave-to-left    { transform: translateX(-100%); opacity: 0; }
.slide-viewer .slide-leave-to-right   { transform: translateX(100%); opacity: 0; }

/* ===== Title slide ===== */
.slide-viewer .slide.title-slide { text-align: center; }
.slide-viewer .title-slide .lesson-title {
  font-family: var(--font-heading, Georgia, serif);
  font-size: clamp(2rem, 8cqh, 6rem);
  line-height: 1.1;
  margin: 0 0 20px 0;
  color: var(--fg, #2b2b2b);
}
.slide-viewer .title-slide .lesson-subtitle {
  font-size: clamp(1.1rem, 3.6cqh, 2.4rem);
  color: var(--muted, color-mix(in srgb, var(--fg, #2b2b2b) 60%, var(--bg, #ffffff)));
  margin: 0 0 40px 0;
  font-style: italic;
}
.slide-viewer .title-slide .lesson-meta {
  font-family: system-ui, sans-serif;
  font-size: clamp(0.9rem, 2.4cqh, 1.5rem);
  color: var(--muted, color-mix(in srgb, var(--fg, #2b2b2b) 60%, var(--bg, #ffffff)));
  margin-top: 60px;
}
.slide-viewer .title-slide .lesson-meta div { margin: 4px 0; }

/* ===== Fen borden ===== */
.slide-viewer .fen-board {
  max-width: 480px;
  margin: 20px auto;
}
.slide-viewer .fen-board-inner {
  width: 100%;
}
/* Flip-knop: bewust laag-contrast. Hij moet vindbaar zijn zonder de aandacht te
   trekken van een klas die naar het diagram kijkt. Bij hover/focus komt hij op
   volle sterkte. */
.slide-viewer .board-controls {
  display: flex;
  justify-content: center;
  margin-top: 4px;
}
.slide-viewer .board-flip {
  font-family: var(--font-body, inherit);
  font-size: clamp(0.9rem, 2.2cqh, 1.15rem);
  line-height: 1;
  padding: 3px 9px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--muted, color-mix(in srgb, var(--fg, #2b2b2b) 55%, var(--bg, #ffffff)));
  opacity: 0.55;
  cursor: pointer;
  transition: opacity 150ms ease, border-color 150ms ease, color 150ms ease;
}
.slide-viewer .board-flip:hover {
  opacity: 1;
  color: var(--fg, #2b2b2b);
  border-color: var(--border, #e5e0d5);
}
.slide-viewer .board-flip:focus-visible {
  opacity: 1;
  outline: 2px solid var(--accent, #8b6b3a);
  outline-offset: 1px;
}
/* In de puzzel-knoppenbalk staat hij tussen tekstknoppen: daar wél een rand,
   anders oogt het als een losse zwevende letter naast Hint/Reset/Toon oplossing. */
.slide-viewer .puzzle-controls .board-flip {
  border-color: var(--border, #e5e0d5);
  background: var(--code-bg, #f0ebe0);
  opacity: 0.75;
  padding: 6px 12px;
}
.slide-viewer .board-row {
  display: flex;
  gap: 24px;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  margin: 20px 0;
}
.slide-viewer .board-col {
  flex: 1 1 280px;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.slide-viewer .board-col .fen-board { margin: 10px 0; width: 100%; max-width: 100%; }
.slide-viewer .board-col h3,
.slide-viewer .board-col h4 { margin: 0; text-align: center; }

/* Chessboard.js vierkanten volgen het thema */
.slide-viewer .white-1e1d7 { background-color: var(--board-light, #f0d9b5) !important; }
.slide-viewer .black-3c85d { background-color: var(--board-dark, #b58863) !important; }

/* ===== Interactieve puzzelborden =====
   Structuur is thema-agnostisch en leunt op het bestaande variabelen-contract
   (--fg, --muted, --accent, --border, --code-bg). Correct/fout gebruiken
   universele semantische kleuren (groen/rood) — die wil je niet per thema
   herdefiniëren. Als een thema tóch een specifieke tint wil, kan het de
   --puzzle-* variabelen overschrijven. */
.slide-viewer .puzzle-board {
  /* Cap-op-cqh: op korte slides schaalt het bord mee zodat status + knoppen
     ook zichtbaar blijven zonder scrollbar. Op lange slides blijft 480px. */
  max-width: min(480px, 55cqh);
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.slide-viewer .puzzle-board-inner {
  width: 100%;
}
.slide-viewer .puzzle-status {
  text-align: center;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: clamp(0.85rem, 2.2cqh, 1.1rem);
  color: var(--muted, color-mix(in srgb, var(--fg, #2b2b2b) 60%, var(--bg, #ffffff)));
  background: transparent;
  min-height: 1.6em;
  line-height: 1.3;
}
.slide-viewer .puzzle-status.correct,
.slide-viewer .puzzle-status.solved {
  color: var(--puzzle-correct-fg, #1e5631);
  background: var(--puzzle-correct-bg, #d9ead3);
}
.slide-viewer .puzzle-status.wrong {
  color: var(--puzzle-wrong-fg, #8b1a1a);
  background: var(--puzzle-wrong-bg, #f4d7d7);
}
.slide-viewer .puzzle-status.hint,
.slide-viewer .puzzle-status.reveal {
  color: var(--fg, #2b2b2b);
  background: var(--code-bg, #f0ebe0);
  font-style: italic;
}
.slide-viewer .puzzle-controls {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.slide-viewer .puzzle-controls button {
  font-family: var(--font-body, inherit);
  font-size: clamp(0.8rem, 2cqh, 1rem);
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid var(--border, #e5e0d5);
  background: var(--code-bg, #f0ebe0);
  color: var(--fg, #2b2b2b);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.slide-viewer .puzzle-controls button:hover {
  border-color: var(--accent, #8b6b3a);
}
.slide-viewer .puzzle-controls button:active {
  background: var(--border, #e5e0d5);
}
.slide-viewer .puzzle-error {
  padding: 12px;
  border: 1px dashed var(--puzzle-wrong-fg, #8b1a1a);
  border-radius: 4px;
  color: var(--puzzle-wrong-fg, #8b1a1a);
  background: var(--puzzle-wrong-bg, #f4d7d7);
  font-style: italic;
  text-align: center;
}
/* ===== PGN-viewer =====
   Zelfde maatvoering als het puzzelbord, met de zettenlijst tussen bord en
   knoppen. De lijst heeft een eigen maximumhoogte: een partij van 60 zetten mag
   de slide niet uit elkaar duwen. */
.slide-viewer .pgn-viewer {
  max-width: min(480px, 55cqh);
  margin: 20px auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.slide-viewer .pgn-viewer:focus {
  outline: none;
}
/* Zichtbaar maken wanneer de pijltjes de partij sturen in plaats van de slides —
   anders is het onvoorspelbaar wat de volgende toetsaanslag doet. */
.slide-viewer .pgn-viewer:focus-visible,
.slide-viewer .pgn-viewer:focus-within {
  outline: 2px solid var(--accent, #8b6b3a);
  outline-offset: 6px;
  border-radius: 2px;
}
.slide-viewer .pgn-board-inner {
  width: 100%;
}
.slide-viewer .pgn-caption {
  text-align: center;
  font-family: var(--font-heading, inherit);
  font-size: clamp(0.8rem, 2.2cqh, 1.05rem);
  color: var(--muted, color-mix(in srgb, var(--fg, #2b2b2b) 60%, var(--bg, #ffffff)));
}
.slide-viewer .pgn-moves {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 1px 3px;
  max-height: 22cqh;
  overflow-y: auto;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--code-bg, #f0ebe0);
  font-size: clamp(0.75rem, 1.9cqh, 0.95rem);
  line-height: 1.5;
}
.slide-viewer .pgn-movenum {
  color: var(--muted, color-mix(in srgb, var(--fg, #2b2b2b) 55%, var(--bg, #ffffff)));
  margin-left: 4px;
}
.slide-viewer .pgn-moves .pgn-move {
  font-family: var(--font-body, inherit);
  font-size: inherit;
  padding: 0 4px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--fg, #2b2b2b);
  cursor: pointer;
}
.slide-viewer .pgn-moves .pgn-move:hover {
  background: var(--border, #e5e0d5);
}
.slide-viewer .pgn-moves .pgn-move.current {
  background: var(--accent, #8b6b3a);
  color: var(--bg, #faf7f2);
}
.slide-viewer .pgn-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.slide-viewer .pgn-nav {
  font-family: var(--font-body, inherit);
  font-size: clamp(0.8rem, 2cqh, 1rem);
  line-height: 1;
  padding: 6px 14px;
  border-radius: 4px;
  border: 1px solid var(--border, #e5e0d5);
  background: var(--code-bg, #f0ebe0);
  color: var(--fg, #2b2b2b);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, opacity 150ms ease;
}
.slide-viewer .pgn-nav:hover:not(:disabled) {
  border-color: var(--accent, #8b6b3a);
}
.slide-viewer .pgn-nav:disabled {
  opacity: 0.35;
  cursor: default;
}
.slide-viewer .pgn-error {
  padding: 12px;
  border: 1px dashed var(--puzzle-wrong-fg, #8b1a1a);
  border-radius: 4px;
  color: var(--puzzle-wrong-fg, #8b1a1a);
  background: var(--puzzle-wrong-bg, #f4d7d7);
  font-style: italic;
  text-align: center;
  white-space: pre-wrap;
}
/* Split-layout: viewer gedraagt zich als de andere borden in de rechter kolom */
.slide-viewer .split-right .pgn-viewer {
  width: 100%;
  max-width: 480px;
  margin: 0;
}

/* ===== Promotie-modal =====
   Hangt als direct kind onder .slide-viewer (niet onder de slide zelf): slides
   krijgen tijdens de overgang een transform, en daar zou een absoluut gepositio-
   neerde overlay in meebewegen. Onder de stage erft hij wél de thema-variabelen,
   want die zijn op .slide-viewer gedefinieerd. */
.slide-viewer .promo-overlay {
  position: absolute;
  inset: 0;
  z-index: 50;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  background: color-mix(in srgb, var(--bg, #faf7f2) 65%, transparent);
  backdrop-filter: blur(2px);
  /* Zelfde reden als bij .slide: in een lage editor-preview zou de bovenkant van
     het keuzevenster anders onbereikbaar zijn. */
  align-items: center;
  align-items: safe center;
}
.slide-viewer .promo-dialog {
  background: var(--bg, #faf7f2);
  border: 1px solid var(--border, #e5e0d5);
  border-radius: 8px;
  padding: 16px 20px;
  box-shadow: 0 6px 28px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 90%;
}
.slide-viewer .promo-title {
  text-align: center;
  font-family: var(--font-heading, inherit);
  font-size: clamp(0.9rem, 2.4cqh, 1.2rem);
  color: var(--fg, #2b2b2b);
}
.slide-viewer .promo-choices {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}
.slide-viewer .promo-choice {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e0d5);
  border-radius: 6px;
  background: var(--code-bg, #f0ebe0);
  color: var(--fg, #2b2b2b);
  font-family: var(--font-body, inherit);
  font-size: clamp(0.7rem, 1.8cqh, 0.9rem);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.slide-viewer .promo-choice img {
  width: clamp(38px, 7cqh, 64px);
  height: clamp(38px, 7cqh, 64px);
  display: block;
}
.slide-viewer .promo-choice:hover {
  border-color: var(--accent, #8b6b3a);
}
.slide-viewer .promo-choice:focus-visible {
  outline: 2px solid var(--accent, #8b6b3a);
  outline-offset: 2px;
}

/* Split-layout: puzzelbord gedraagt zich als fen-board in de rechter kolom */
.slide-viewer .split-right .puzzle-board {
  width: 100%;
  max-width: 480px;
  margin: 0;
}

/* ===== Align-directive: text/heading/image uitlijning ===== */
/* Wordt gebruikt via <!-- align: left|center|right --> in de markdown. */
.slide-viewer .align-left   { text-align: left; }
.slide-viewer .align-center { text-align: center; }
.slide-viewer .align-right  { text-align: right; }

/* ===== Layout: title (grote gecentreerde tussenkop) ===== */
.slide-viewer .slide-inner.layout-title {
  text-align: center;
}
.slide-viewer .slide-inner.layout-title h1,
.slide-viewer .slide-inner.layout-title h2 {
  font-size: 3.5rem;
  margin: 0;
}
.slide-viewer .slide-inner.layout-title p {
  font-size: 1.3rem;
  color: var(--muted, color-mix(in srgb, var(--fg, #2b2b2b) 60%, var(--bg, #ffffff)));
  margin-top: 20px;
}

/* ===== Layout: split ===== */
.slide-viewer .slide-inner.layout-split,
.slide-viewer .slide-inner.layout-split-reverse {
  display: flex;
  gap: 40px;
  align-items: center;
  max-width: 1200px;
}
.slide-viewer .slide-inner.layout-split-reverse { flex-direction: row-reverse; }
.slide-viewer .split-left,
.slide-viewer .split-right {
  flex: 1 1 0;
  min-width: 0;
}
.slide-viewer .split-right {
  display: flex;
  justify-content: center;
}
.slide-viewer .split-right .fen-board {
  width: 100%;
  max-width: 480px;
  margin: 0;
}
.slide-viewer .split-right .board-row { margin: 0; width: 100%; }
@media (max-width: 800px) {
  .slide-viewer .slide-inner.layout-split,
  .slide-viewer .slide-inner.layout-split-reverse {
    flex-direction: column;
  }
}