/* ============================================================
   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 bovenlijn en basislijn; decoratief */
  --kleur-model-grijs: #A3AAB8;   /* de lichtgrijze letter in vraag W1 */
  --kleur-eindvorm: #1B6AB0;      /* de vijf eindvormen, waar ze als vorm getoond worden; 5,6:1, op bezig-vlak 4,8:1 */

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

  /* ---------- Maten ---------- */
  --maat-tekst: 1.0625rem;        /* 17 px */
  --regel-tekst: 1.6;
  --maat-hebreeuws-lopend: 1.875rem; /* 30 px: de punten zijn klein (ontwerp-deel-1 §12.3) */
  --regel-hebreeuws: 2.1;            /* ruimte voor accenten boven en punten onder */
  --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;
    --kleur-eindvorm: #7DB7F5;      /* 6,7:1 op vlak, 5,6:1 op bezig-vlak */
  }
}

/* ---------- 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;
}

/* Hebreeuws: altijd Ezra SIL, en duidelijk groter dan de Nederlandse tekst eromheen (huisstijl,
   uitgangspunt 2: de grondtekst is de hoofdzaak; de punten zijn klein). De selector is het
   attribuut en niet :lang(hbo), want :lang geldt ook voor alles binnen het element, en dan zou de
   maat bij elk genest element opnieuw groeien.
   unicode-bidi: isolate houdt Hebreeuws in een Nederlandse zin bij elkaar: leestekens en cijfers
   eromheen verspringen niet (ontwerp-deel-1 §12.1). Het element heeft zelf dir="rtl" (Site.hebreeuws). */
[lang="hbo"],
[lang="arc"] {
  font-family: var(--letter-hebreeuws);
  font-size: 1.35em;
  font-weight: 400;
  line-height: 1.6;
  unicode-bidi: isolate;
}

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

/* Transliteratie: Gentium Plus heeft de tekens ʾ ʿ ḥ ṭ ṣ š ś en de klinkers met een streepje. */
[lang="hbo-Latn"] {
  font-family: var(--letter-translit);
  font-size: 1.05em;
}

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

/* ---------- 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;
}

.merk__teken {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ronding);
  background: var(--kleur-nacht);
  color: var(--kleur-papier);
  font-family: var(--letter-hebreeuws);
  font-size: 1.75rem;
  line-height: 1;
}

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

.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"],
.hoofdmenu a[aria-current="true"] {
  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;
  }
}