/* ============================================================
   HUISSTIJL — kleuren, lettertypen en de basis van elke pagina.
   Volgt docs/huisstijl.md (concept 0.1, akkoord 3 oktober 2026) en het ontwerpcanvas.

   Opbouw van de css:
     fonts/fonts.css               de lettertypen (lokaal)
     assets/css/huisstijl.css      dit bestand: kleurvariabelen, typografie, paginaopbouw
     assets/css/bouwstenen.css     knoppen, status, terugkoppeling, letterkaart, meldingen

   Regels die overal gelden:
   - Kleuren alleen via de variabelen hieronder. Een losse kleurcode elders kan in de
     donkere modus niet mee, en ontsnapt aan de contrastcontrole in tools/controle.py.
   - Geen style-attributen in de html (CSP: style-src 'self'). Alles gaat via klassen.
   - Maten in rem of em, zodat tekst meegroeit met de instelling van de browser.
   ============================================================ */

/* ---------- Kleuren, licht ----------
   Contrast staat erbij, gemeten volgens WCAG 2.2 op "papier" (tekst minstens 4,5:1,
   grafische delen minstens 3:1). tools/controle.py rekent deze paren na. */
:root {
  color-scheme: light dark;

  --kleur-papier: #F7F7F5;        /* achtergrond */
  --kleur-vlak: #FFFFFF;          /* kaarten en panelen */
  --kleur-inkt: #272B33;          /* tekst, 13,2:1 */
  --kleur-inkt-zacht: #5A6272;    /* bijschrift, 5,7:1 */
  --kleur-nacht: #1B2A4A;         /* koppen, merkteken, 13,3:1 */
  --kleur-leiblauw: #4A6190;      /* knoppen, links, focus, 5,8:1 */
  --kleur-op-leiblauw: #FFFFFF;   /* tekst op een leiblauwe knop, 6,2:1 */
  --kleur-oker: #B7791F;          /* grafisch: schrijfrichting, "let op", 3,4:1 */
  --kleur-oker-tekst: #7F5410;    /* oker als tekst, 6,2:1 */
  --kleur-goed: #2E6B4F;          /* altijd met vinkje, 5,9:1 */
  --kleur-fout: #A3441A;          /* altijd met kruis, 5,8:1 */
  --kleur-rand-veld: #8A92A3;     /* rand van invoervelden en secundaire knoppen, 3,1:1 op vlak */
  --kleur-lijn: #E2E4E8;          /* scheidingslijnen en kaartranden; decoratief, geen informatie */

  /* Vlakken achter terugkoppeling en status, met hun eigen tekstkleur (uit het canvas). */
  --kleur-goed-vlak: #E6F0EA;
  --kleur-goed-tekst: #23523C;    /* 7,7:1 op het groene vlak */
  --kleur-fout-vlak: #F8E9E0;
  --kleur-fout-tekst: #8A3814;    /* 6,7:1 op het oranjerode vlak */
  --kleur-bezig-vlak: #E8EDF6;
  --kleur-bezig-tekst: #3B4F78;   /* 6,9:1 op het blauwe vlak */
  --kleur-nieuw-vlak: #EFEFEA;
  --kleur-nieuw-tekst: #5A6272;   /* 5,3:1 op het grijze vlak */

  --kleur-focus: var(--kleur-leiblauw);

  /* Schrijfmodel (module-1-ontwerp §6.2): haal 1, 2 en 3 in nacht, roestbruin en donker oker;
     groen is alleen voor de beginstip. Grafische delen: minstens 3:1 op vlak. */
  --kleur-haal-1: #1B2A4A;        /* 13,3:1 */
  --kleur-haal-2: #9A4A1C;        /* 6,5:1 */
  --kleur-haal-3: #7F5410;        /* 6,2:1 */
  --kleur-raster: #8A92A3;        /* middellijn, 3,1:1 */
  --kleur-raster-zacht: #C9CDD5;  /* stok- en staartlijn; decoratief */
  --kleur-romp: #EEF2F8;          /* het vlak tussen middellijn en basislijn; decoratief */
  --kleur-model-grijs: #A3AAB8;   /* de lichtgrijze letter in vraag W1 */

  /* ---------- Lettertypen ---------- */
  --letter-kop: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --letter-tekst: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --letter-grieks: 'Gentium Plus', Gentium, 'Times New Roman', serif;

  /* ---------- Maten ---------- */
  --maat-tekst: 1.0625rem;        /* 17 px */
  --regel-tekst: 1.6;
  --maat-grieks-lopend: 1.5rem;   /* 24 px; huisstijl: 24–26 px */
  --regel-grieks: 1.7;
  --breedte-pagina: 73.75rem;     /* 1180 px, zoals het cursusoverzicht op het canvas */
  --breedte-lezen: 42rem;         /* prettige regellengte voor lopende tekst */
  --rand-pagina: clamp(1rem, 4vw, 1.5rem);
  --ronding: 0.625rem;            /* 10 px: knoppen */
  --ronding-kaart: 1rem;          /* 16 px: kaarten */
  --doel-minimaal: 2.75rem;       /* 44 px: alles wat je aanklikt (huisstijl) */
}

/* ---------- Kleuren, donker ----------
   Zelfde rol, eigen waarde. Volgt de instelling van het systeem; een eigen schakelaar
   komt er niet, want daarvoor is geen instelling ontworpen (ontwerp-voortgang §4.5).
   Waarden zonder huisstijlwaarde (de vlakken achter status en terugkoppeling, de rand van
   invoervelden) zijn op 6 oktober 2026 gekozen en nagerekend in tools/controle.py. */
@media (prefers-color-scheme: dark) {
  :root {
    --kleur-papier: #1C212E;
    --kleur-vlak: #252B3A;
    --kleur-inkt: #EFEFEC;          /* 14,0:1 */
    --kleur-inkt-zacht: #A9B0BF;    /* 7,4:1 */
    --kleur-nacht: #DCE3F2;         /* 12,5:1 */
    --kleur-leiblauw: #9DB4E0;      /* 7,7:1 */
    --kleur-op-leiblauw: #1C212E;   /* donkere tekst op de lichte knop, 7,7:1 */
    --kleur-oker: #D9A441;          /* 7,1:1 */
    --kleur-oker-tekst: #D9A441;
    --kleur-goed: #7CC4A0;          /* 7,9:1 */
    --kleur-fout: #F0A27A;          /* 7,8:1 */
    --kleur-rand-veld: #7D8699;     /* 3,9:1 op vlak */
    --kleur-lijn: #3A4255;

    --kleur-goed-vlak: #1E3A30;
    --kleur-goed-tekst: #7CC4A0;    /* 6,0:1 */
    --kleur-fout-vlak: #43281E;
    --kleur-fout-tekst: #F0A27A;    /* 6,5:1 */
    --kleur-bezig-vlak: #2C3754;
    --kleur-bezig-tekst: #C9D6F0;   /* 8,1:1 */
    --kleur-nieuw-vlak: #2E3445;
    --kleur-nieuw-tekst: #A9B0BF;   /* 5,7:1 */

    --kleur-haal-1: #DCE3F2;
    --kleur-haal-2: #EBA67E;
    --kleur-haal-3: #D9A441;
    --kleur-raster: #7D8699;
    --kleur-raster-zacht: #4A5266;
    --kleur-romp: #2A3247;
    --kleur-model-grijs: #6B7488;
  }
}

/* ---------- Basis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--kleur-papier);
  color: var(--kleur-inkt);
  font-family: var(--letter-tekst);
  font-size: var(--maat-tekst);
  line-height: var(--regel-tekst);
  /* Lange woorden (en lange Griekse woorden) mogen afbreken in plaats van de pagina breder
     te maken dan het scherm: WCAG 1.4.10, werkt bij 320 px en 400 % zoom. */
  overflow-wrap: break-word;
}

img,
svg {
  max-width: 100%;
  height: auto;
}

/* Een verborgen element is echt weg, ook als een klasse het display anders zet. */
[hidden] {
  display: none !important;
}

/* ---------- Typografie ---------- */
h1,
h2,
h3,
h4 {
  margin: 0;
  color: var(--kleur-nacht);
  line-height: 1.2;
}

h1,
h2 {
  font-family: var(--letter-kop);
  font-weight: 600;
}

h1 {
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);   /* 32–52 px */
  line-height: 1.1;
}

h2 {
  font-size: clamp(1.625rem, 1.4rem + 0.9vw, 1.75rem); /* 26–28 px */
}

h3 {
  font-size: 1.1875rem;
  font-weight: 600;
}

h4 {
  font-size: 1.0625rem;
  font-weight: 600;
}

p {
  margin: 0;
}

a {
  color: var(--kleur-leiblauw);
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--kleur-nacht);
}

strong {
  font-weight: 600;
}

/* Grieks: altijd Gentium Plus, en iets groter dan de Nederlandse tekst eromheen
   (huisstijl, uitgangspunt 2: "het Grieks is de hoofdzaak"). De selector is het attribuut
   en niet :lang(grc), want :lang geldt ook voor alles binnen het element, en dan zou de
   maat bij elk genest element opnieuw groeien. */
[lang="grc"] {
  font-family: var(--letter-grieks);
  font-size: 1.15em;
  font-weight: 400;
}

[lang="grc"] [lang="grc"] {
  font-size: 1em;
}

/* Lopende Griekse tekst (een vers, het voorproefje): 24 px, ruime regelafstand. */
.grieks-lopend {
  font-size: var(--maat-grieks-lopend);
  line-height: var(--regel-grieks);
}

/* ---------- Focus ----------
   Huisstijl: rand van 3 px in leiblauw, 2 px vrij van het element. Alleen bij
   toetsenbordgebruik (:focus-visible), maar nooit helemaal weg. */
:focus-visible {
  outline: 3px solid var(--kleur-focus);
  outline-offset: 2px;
}

/* Een kop die de focus krijgt na een wissel van stap (tabindex="-1") hoeft geen rand: de
   schermlezer leest hem voor en de muisgebruiker ziet de nieuwe pagina. */
[tabindex="-1"]:focus {
  outline: none;
}

/* ---------- Hulpklassen ---------- */

/* Alleen voor schermlezers: zichtbaar weg, wel voorgelezen. */
.visueel-verborgen {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Overslalink "Naar de inhoud": eerste element op elke pagina, zichtbaar bij focus. */
.overslaan {
  position: absolute;
  left: 0.75rem;
  top: -10rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--ronding);
  background: var(--kleur-nacht);
  color: var(--kleur-papier);
  font-weight: 600;
  text-decoration: none;
}

.overslaan:focus {
  top: 0.75rem;
}

/* ---------- Paginaopbouw ---------- */
.sitekop {
  background: var(--kleur-vlak);
  border-bottom: 1px solid var(--kleur-lijn);
}

.sitekop__binnen {
  max-width: var(--breedte-pagina);
  margin: 0 auto;
  padding: 0.75rem var(--rand-pagina);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1.5rem;
}

.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: var(--doel-minimaal);
  color: var(--kleur-nacht);
  text-decoration: none;
}

/* Het merkteken (docs/ontwerp-merkteken.md): het boek met Α en Ω uit assets/merk.svg, via <use>.
   Binnen <use> erven de kleuren: color voor lijnen en letters, fill voor de bladen, stroke voor
   het goud. Zo wisselt het icoon mee met de donkere modus. */
.merk__icoon {
  flex: none;
  width: 3.4rem;
  height: 2.8rem;
  color: var(--kleur-nacht);
  fill: var(--kleur-vlak);
  stroke: var(--kleur-oker);
}

.merk__tekst {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.merk__naam {
  font-family: var(--letter-kop);
  font-size: 1.6rem;
  font-weight: 600;
}

/* Hoofdletters via css, zodat een schermlezer gewoon "Koinè, Nieuwe Testament" leest. */
.merk__onder {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--kleur-oker-tekst);
}

@media (max-width: 30em) {
  .merk__icoon { width: 2.9rem; height: 2.4rem; }
  .merk__naam { font-size: 1.35rem; }
  .merk__onder { letter-spacing: 0.1em; }
}

/* Zo smal past de ondertitel niet meer op een regel naast het icoon (Y2). */
@media (max-width: 21.25em) {
  .merk__onder { display: none; }
}

.hoofdmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.hoofdmenu a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--doel-minimaal);
  padding: 0 0.875rem;
  border-radius: var(--ronding);
  color: var(--kleur-inkt);
  font-size: 0.9375rem;
  text-decoration: none;
}

.hoofdmenu a:hover {
  background: var(--kleur-bezig-vlak);
  color: var(--kleur-nacht);
}

.hoofdmenu a[aria-current="page"] {
  background: var(--kleur-bezig-vlak);
  color: var(--kleur-nacht);
  font-weight: 600;
}

.inhoud {
  max-width: var(--breedte-pagina);
  margin: 0 auto;
  padding: 3rem var(--rand-pagina) 5rem;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

.blok {
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
}

.sitevoet {
  border-top: 1px solid var(--kleur-lijn);
  background: var(--kleur-vlak);
  color: var(--kleur-inkt-zacht);
  font-size: 0.875rem;
}

.sitevoet__binnen {
  max-width: var(--breedte-pagina);
  margin: 0 auto;
  padding: 1.5rem var(--rand-pagina);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.75rem 2rem;
}

/* Bovenregel boven een kop, in oker (canvas: "Koinè-Grieks · Textus Receptus"). */
.bovenregel {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kleur-oker-tekst);
}

.inleiding {
  max-width: var(--breedte-lezen);
  font-size: 1.1875rem;
  line-height: 1.6;
}

.bijschrift {
  color: var(--kleur-inkt-zacht);
  font-size: 0.9375rem;
}

/* Raster dat vanzelf in kolommen valt. min() zorgt dat één kolom op 320 px nooit breder
   wordt dan het scherm. */
.raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 1rem;
}

.raster--breed {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
  gap: 1.5rem;
}

.kaart {
  background: var(--kleur-vlak);
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--ronding-kaart);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

/* ---------- Minder beweging ----------
   Kaders §2: animaties respecteren prefers-reduced-motion. Deze regel is het vangnet; een
   animatie die er echt toe doet (het schrijfmodel) vraagt het ook zelf na, met de
   instelling `animaties` van de leerling erbij. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}