/* ============================================================
   HEBREEUWS — wat het Hebreeuws extra vraagt bovenop de overgenomen stijlbladen
   (ontwerp-deel-1 §12).

   - Rechts naar links: rijen met Hebreeuwse tegels krijgen dir="rtl" in de opmaak; flex en grid
     volgen die richting vanzelf. Hier alleen wat daarnaast nodig is.
   - Groter dan het Grieks: de punten en streepjes onder en in de letters zijn klein, dus de
     letters krijgen meer ruimte en een ruime regelafstand.
   - Kleuren en maten uit huisstijl.css; geen losse kleurcodes.
   Laadt als laatste stijlblad, zodat het de algemene vergroting van [lang="hbo"] kan overrulen.
   ============================================================ */

/* ---------- Hebreeuwse tekst (Site.hebreeuws) ----------
   lang="hbo" zet het lettertype al (huisstijl.css); de klasse is de haak voor de scripts en
   houdt de woorden bij elkaar in een rechts-naar-linksregel. */
.hebreeuws {
  font-family: var(--letter-hebreeuws);
}

/* ---------- Eindvormen: een eigen blauw (besluit 10 oktober 2026) ----------
   Alleen waar de cursus een eindvorm als vorm laat zien (kaarten, platen, stap 6, de
   schrijfoefenplek), nooit in vragen of lopende tekst. Nooit alleen kleur: de eindvorm staat
   kleiner naast zijn letter, en op kaarten en platen met het woordje "eind" eronder. */
[lang="hbo"].eindvorm {
  color: var(--kleur-eindvorm);
}

.eindvorm__vak {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

.eindvorm__label {
  font-family: var(--letter-tekst);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1;
  color: var(--kleur-eindvorm);
}

/* ---------- Letterkaart ---------- */
.letterkaart__vormen {
  direction: rtl;
}

.letterkaart__klein {
  font-size: 4.5rem;
  line-height: 1.25;
}

.letterkaart__hoofd {
  font-size: 3rem;
  line-height: 1.25;
}

.letterkaart__voorbeeld [lang="hbo"],
.letterkaart__gegevens [lang="hbo"] {
  font-size: 1.6em;
}

/* ---------- Alefbetstrook: van rechts naar links ---------- */
.strook__rijen[dir="rtl"] .strook__rijkop,
.strook__rijen[dir="rtl"] .strook__naam {
  direction: ltr;
}

.strook__letter {
  font-size: 2.25rem;
  line-height: 1.3;
}

/* ---------- Eindvormen ---------- */
.eindvormen {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eindvormen__paar {
  padding: 0.75rem 1rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--ronding);
  background: var(--kleur-vlak);
  text-align: center;
}

.eindvormen__vormen {
  display: flex;
  direction: rtl;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
}

.eindvormen__teken {
  font-size: 2.75rem;
  line-height: 1.4;
  color: var(--kleur-nacht);
}

.eindvormen__pijl {
  /* De pijl wijst naar het eind van het woord: in een rechts-naar-links-rij is dat links. */
  display: inline-block;
  transform: scaleX(-1);
  color: var(--kleur-inkt-zacht);
}

.eindvormen__naam {
  margin: 0.25rem 0 0;
  font-weight: 600;
}

/* ---------- Paarblok met de gedrukte letter (sjin en sin) ---------- */
.paarblok__groot {
  margin: 0;
  font-size: 5rem;
  line-height: 1.3;
  text-align: center;
  color: var(--kleur-nacht);
}

/* ---------- Woorden, verzen, tegels ---------- */
.woord__hebreeuws {
  margin: 0;
  font-size: 2.25rem;
  line-height: 1.6;
  color: var(--kleur-nacht);
}

.vers__hebreeuws {
  margin: 0;
  color: var(--kleur-nacht);
}

.lettertegel__teken {
  font-size: 2rem;
  line-height: 1.3;
}

.schrijfkop__teken {
  font-size: 1.6em;
}

/* ---------- Vragen ---------- */
.vraag__letter {
  font-size: 7rem;
  line-height: 1.25;
}

.vraag__woord {
  line-height: 1.6;
}

.keuze__hebreeuws {
  line-height: 1.4;
}

.tikker__rij[dir="rtl"] {
  direction: rtl;
}

/* ---------- Klinkers (stap 7 en 8) ---------- */
/* Hoe je een woord leest, onder het woord: cursief, zoals een uitspraak in een woordenboek. */
.woord__uitspraak {
  margin: 0;
  font-style: italic;
  font-weight: 600;
  color: var(--kleur-leiblauw);
}

/* Lettergrepen: per letter een rij, van rechts naar links. */
.lettergrepen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lettergreep {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.5rem;
  padding: 0.25rem 0.5rem 0.5rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--ronding);
  background: var(--kleur-vlak);
}

.lettergreep__tekst {
  font-size: 2.5rem;
  line-height: 1.6;
  color: var(--kleur-nacht);
}

.lettergreep__uitspraak {
  font-style: italic;
  font-weight: 600;
  color: var(--kleur-leiblauw);
}

.lesblok--lettergrepen {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* Een klinkerkaart: het teken staat bij de letter mem. */
.klinkerkaart .letterkaart__klein {
  color: var(--kleur-nacht);
}

/* ---------- Leeslab (stap 9) ---------- */
.leeslab {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.leeslab__figuur {
  margin: 0;
  padding: 1.25rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--ronding-kaart);
  background: var(--kleur-vlak);
}

/* Het vers van rechts naar links; elk woord met (verborgen) uitspraak en betekenis eronder. */
.leeslab__vers {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.25rem;
  margin: 0 0 0.75rem;
  padding: 0;
  list-style: none;
}

.leeslab__woord {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  text-align: center;
}

.leeslab__knop {
  min-height: var(--doel-minimaal);
  padding: 0 0.375rem;
  border: 2px solid transparent;
  border-radius: var(--ronding);
  background: none;
  color: var(--kleur-nacht);
  cursor: pointer;
}

.leeslab__knop:hover {
  background: var(--kleur-bezig-vlak);
}

.leeslab__knop[aria-expanded="true"] {
  border-color: var(--kleur-leiblauw);
  background: var(--kleur-bezig-vlak);
}

.leeslab__tekst {
  font-size: 2.25rem;
  line-height: 1.7;
}

.leeslab__uitspraak {
  font-style: italic;
  font-weight: 600;
  color: var(--kleur-leiblauw);
}

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

.leeslab__hulpkaart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding: 1rem 1.25rem;
  border-left: 4px solid var(--kleur-leiblauw);
  border-radius: var(--ronding);
  background: var(--kleur-vlak);
}

.leeslab__hulpwoord {
  margin: 0;
  font-size: 3rem;
  line-height: 1.5;
  color: var(--kleur-nacht);
}

.leeslab__opdrachten h3 {
  margin: 0 0 0.5rem;
}

.leeslab__lijst {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0;
  padding-left: 1.25rem;
}

.leeslab__antwoord summary {
  min-height: var(--doel-minimaal);
  display: flex;
  align-items: center;
  color: var(--kleur-leiblauw);
  font-weight: 600;
  cursor: pointer;
}

/* Hulp bij het gekozen woord: leeg tot je een woord kiest. */
.leeslab__hulp:empty {
  display: none;
}

.leeslab__opdracht .schakelaar {
  align-items: flex-start;
}