/* ============================================================
   BOUWSTENEN — de vaste onderdelen uit de huisstijl (docs/huisstijl.md, "Bouwstenen").
   Kleuren en maten komen uit huisstijl.css; hier staan geen losse kleurcodes.

   Inhoud: knoppen · statuslabels · voortgangsbalk · terugkoppeling · meldingen ·
   letterkaart · iconen

   Dit bestand laadt na huisstijl.css. Bij gelijke specificiteit wint dus wat hier staat:
   zo krijgt de grote letter in de letterkaart zijn eigen maat in plaats van de algemene
   vergroting van Grieks ([lang="grc"]).
   ============================================================ */

/* ---------- Knoppen ----------
   Primair (leiblauw vlak) en secundair (rand), minstens 44 px hoog. Een link die eruitziet
   als een knop krijgt dezelfde klassen: het element volgt wat het doet (naar een andere
   plek = <a>, iets doen op deze pagina = <button>). */
.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: var(--doel-minimaal);
  padding: 0.5rem 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--ronding);
  font: 600 1rem/1.3 var(--letter-tekst);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.knop--primair {
  background: var(--kleur-leiblauw);
  color: var(--kleur-op-leiblauw);
}

.knop--primair:hover {
  background: var(--kleur-nacht);
  color: var(--kleur-op-leiblauw);
}

.knop--secundair {
  background: var(--kleur-vlak);
  border-color: var(--kleur-rand-veld);
  color: var(--kleur-nacht);
}

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

/* Hoofdknoppen van een pagina zijn iets groter (canvas: 48 px). */
.knop--groot {
  min-height: 3rem;
  padding: 0.5rem 1.25rem;
}

/* Alleen een icoon: altijd met een toegankelijke naam (aria-label of verborgen tekst). */
.knop--rond {
  min-width: var(--doel-minimaal);
  padding: 0;
  border-radius: 999px;
}

/* Een uitgeschakelde knop hoeft geen contrast te halen (WCAG 1.4.3, uitzondering), maar
   moet wel herkenbaar uit zijn. */
.knop:disabled,
.knop[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
}

.knoppenrij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

/* ---------- Statuslabels ----------
   Klaar (groen + vinkje), bezig (blauw), nog niet begonnen (grijs). De tekst zegt altijd
   zelf wat de status is: kleur is nooit de enige drager (huisstijl, uitgangspunt 3). */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  padding: 0.25rem 0.625rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}

.status--klaar {
  background: var(--kleur-goed-vlak);
  color: var(--kleur-goed-tekst);
}

.status--bezig {
  background: var(--kleur-bezig-vlak);
  color: var(--kleur-bezig-tekst);
}

.status--nieuw {
  background: var(--kleur-nieuw-vlak);
  color: var(--kleur-nieuw-tekst);
}

/* ---------- Voortgangsbalk ----------
   Een echte <progress> met aria-valuetext ("9 van 15 stappen klaar"). De breedte komt uit
   het value-attribuut, niet uit een style-attribuut (CSP). */
.voortgangsbalk {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: 0.5rem;
  border: 0;
  border-radius: 999px;
  overflow: hidden;
  background: var(--kleur-lijn);
  color: var(--kleur-leiblauw);
}

.voortgangsbalk::-webkit-progress-bar {
  background: var(--kleur-lijn);
  border-radius: 999px;
}

.voortgangsbalk::-webkit-progress-value {
  background: var(--kleur-leiblauw);
  border-radius: 999px;
}

.voortgangsbalk::-moz-progress-bar {
  background: var(--kleur-leiblauw);
  border-radius: 999px;
}

/* ---------- Terugkoppeling ----------
   Altijd icoon + woord + kleur: "✓ Goed." en "✗ Niet goed.". */
.terugkoppeling {
  display: flex;
  gap: 0.875rem;
  padding: 1rem 1.125rem;
  border-radius: 0.875rem;
  line-height: 1.55;
}

.terugkoppeling > svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

.terugkoppeling--goed {
  background: var(--kleur-goed-vlak);
  color: var(--kleur-goed-tekst);
}

.terugkoppeling--fout {
  background: var(--kleur-fout-vlak);
  color: var(--kleur-fout-tekst);
}

.terugkoppeling__tekst {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

/* ---------- Meldingen ----------
   Bovenaan een pagina, onder de kop (hoofdpagina-ontwerp §2.2): opslagproblemen en de
   back-upherinnering. role="alert" alleen als er op dat moment werk verloren gaat. */
.melding {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.75rem 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--kleur-lijn);
  border-radius: var(--ronding-kaart);
  background: var(--kleur-bezig-vlak);
  color: var(--kleur-bezig-tekst);
}

.melding--fout {
  background: var(--kleur-fout-vlak);
  color: var(--kleur-fout-tekst);
}

.melding > svg {
  flex: none;
  width: 1.5rem;
  height: 1.5rem;
}

.melding__tekst {
  flex: 1 1 16rem;
  min-width: 0;
}

/* ---------- Letterkaart ----------
   Kleine letter groot, hoofdletter ernaast, naam, "lijkt op" (alleen bij een valse
   vriend), "klinkt als", audio en schrijven (huisstijl en canvas, lesstap valse vrienden). */
.letterkaart {
  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;
}

.letterkaart__vormen {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.letterkaart__klein {
  font-size: 4.75rem;          /* 76 px; huisstijl: losse letters 56–140 px */
  line-height: 1;
  color: var(--kleur-nacht);
}

.letterkaart__hoofd {
  font-size: 2.125rem;
  line-height: 1;
  color: var(--kleur-inkt-zacht);
}

.letterkaart__naam {
  font-family: var(--letter-tekst);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--kleur-inkt);
}

.letterkaart__gegevens {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.25rem 0.75rem;
  font-size: 0.875rem;
  line-height: 1.45;
}

.letterkaart__gegevens dt {
  color: var(--kleur-inkt-zacht);
}

.letterkaart__gegevens dd {
  margin: 0;
}

.letterkaart__acties {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Een Latijnse letter die op een Griekse lijkt ("lijkt op v"): in een schreeflettertype,
   zodat hij als lettervorm leest en niet als deel van de zin. */
.latijn {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 1.1em;
}

/* ---------- Iconen ----------
   Inline svg, altijd aria-hidden: de betekenis staat in de tekst ernaast. */
.icoon {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
}