/**
 * Kids Digitaal - Voorleeslaag (kd-voorlezen.css) v2
 *
 * De knop staat in de onderste rij van de koptekst, links naast de hartjes.
 * De voortgangsbalk blijft daardoor over de volle breedte. Verder alleen
 * additieve stijlen: er wordt niets van de bestaande engine-opmaak
 * overschreven.
 */

/* ===== De aan/uit-knop, eigen kolom rechts in de koptekst =====
   De koptekst is een raster: kolom 1 is de sluitknop (over beide rijen),
   kolom 2 bevat de voortgangsbalk en de hartjes. We voegen een derde kolom
   toe zodat de voorleesknop rechts staat, gespiegeld aan de sluitknop. */
.kd-engine-header { grid-template-columns: auto 1fr auto; }
/* De twee rijen moeten OOK expliciet, anders klopt de koptekst alleen zolang
   de knop zichtbaar is. De sluitknop staat op grid-row 1/3, dus de balk komt
   in rij 1 kolom 2. Is de knop verborgen (een leestekst die met opzet stil
   blijft), dan is rij 1 kolom 3 leeg en schuift de rij met "Voortgang" en de
   hartjes daarin, naast de balk in plaats van eronder. De balk krimpt dan mee.
   Robert zag dat op 3 sep 2026 bij begrijpend lezen. Gemeten in
   koptekst-test.html: balk 366px met knop, 232px zonder. */
.kd-engine-header > .kd-header-top    { grid-column: 2 / 3; grid-row: 1 / 2; }
.kd-engine-header > .kd-header-bottom { grid-column: 2 / 3; grid-row: 2 / 3; }
/* Kolom 3 moet expliciet: een raster plaatst elementen met een vaste rij
   eerst, dus zonder deze regel kaapt de knop de kolom van de voortgangsbalk. */
.kd-engine-header > .kdv-knoppen {
  grid-column: 3 / 4;
  grid-row: 1 / 3;
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Twee knoppen, sinds 4 sep 2026: links "lees de hele opgave voor" (of stop),
   rechts de modus vanzelf-voorlezen aan/uit. Zelfde maat en vorm, zodat ze als
   een paar lezen; de speelknop is de handeling, de modusknop de instelling. */
.kdv-btn,
.kdv-speel {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 2px solid #CFE6FB;
  border-bottom-width: 3px;
  border-radius: 11px;
  background: #E3F3FF;
  color: #2E8FD9;
  cursor: pointer;
  transition: transform .12s ease, background .15s ease, color .15s ease,
              border-color .15s ease, opacity .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.kdv-btn svg, .kdv-speel svg { width: 19px; height: 19px; display: block; }
.kdv-btn:hover, .kdv-speel:hover { background: #D3EBFF; }
.kdv-btn:active, .kdv-speel:active { transform: translateY(2px); border-bottom-width: 1px; }
.kdv-btn:focus-visible, .kdv-speel:focus-visible { outline: 3px solid #4BADFF; outline-offset: 2px; }

/* ===== Het herhaalknopje naast de vraag en de hint =====
   De hoofdknop hierboven speelt altijd het HELE scherm opnieuw af. Dit knopje
   speelt alleen het stuk waar het naast staat. Het staat als laatste kind IN
   het tekstelement, dus het loopt mee met de tekst: het blijft aan het eind van
   de laatste regel staan, ook als de vraag over twee of drie regels breekt, en
   het volgt de uitlijning van die tekst (bij ons gecentreerd).

   De maat schaalt mee met de letter waar hij naast staat, met een onder- en
   bovengrens. Zonder die grenzen wordt hij naast een grote vraagkop een joekel
   en naast de kleine hint te klein om te raken. Gemeten: bij de vraag komt hij
   op 34px uit, bij de hint op 28px; met het onzichtbare randje van 4px is het
   raakvlak 36 tot 42px. Op 4 sep 2026 op verzoek van Robert: geen achtergrond
   in rust (de lichtblauwe cirkel verschijnt pas bij hover) en het pictogram
   zelf op 85 procent van het vak in plaats van 58, zodat het losse
   luidsprekertje naast de tekst goed te zien is. */
.kdv-mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  width: clamp(28px, 1.35em, 34px);
  height: clamp(28px, 1.35em, 34px);
  margin: 0 .38em 0 0;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #2E8FD9;
  font: inherit;
  line-height: 0;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .12s ease, opacity .25s ease;
}
/* Tijdens het voorlezen van het HELE scherm blijven ze weg: dan zijn ze
   nergens goed voor en lokken ze alleen maar een onderbreking uit. Bewust met
   visibility en niet met display, zodat de plek behouden blijft. Met display
   zou de vraag opzij springen op het moment dat het knopje verschijnt, precies
   terwijl het kind de woorden zit mee te lezen. */
.kdv-mini-weg { visibility: hidden; opacity: 0; }

/* De tekst zelf is ook de knop (kdv-voorlezen.js zet een klik op het hele
   element). Op een muis zie je dat: handje, en het knopje licht op zodra je
   over de tekst gaat. Op een tablet bestaat hover niet; daar blijft het
   knopje het zichtbare anker. Zolang het scherm nog wordt voorgelezen
   (kdv-wacht) is de tekst even geen knop, en dus ook geen handje. */
@media (hover: hover) {
  .kdv-heeft-mini { cursor: pointer; }
  .kdv-heeft-mini.kdv-wacht { cursor: default; }
  .kdv-heeft-mini:hover .kdv-mini:not(.kdv-mini-weg) { background: #CFE6FB; }
}

/* Groter raakvlak dan het cirkeltje, zonder de tekstregel op te rekken. */
.kdv-mini::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; }
.kdv-mini svg { width: 85%; height: 85%; display: block; }
.kdv-mini:hover { background: #CFE6FB; }
.kdv-mini:active { transform: scale(.9); }
.kdv-mini:focus-visible { outline: 3px solid #4BADFF; outline-offset: 2px; }

/* ===== Beginscherm: "Begin met geluid" / "Begin zonder geluid" =====
   Alleen bij de jongste groepen (KEUZE_TOT_GROEP in kd-voorlezen.js). Twee
   knoppen van gelijke vorm en maat, onder elkaar, volle breedte tot 320px.
   De onthouden voorkeur is de gevulde knop; de andere is omlijnd maar even
   groot, want een kind van vijf moet hem net zo makkelijk kunnen raken. Het
   pictogram doet het werk: dat kind leest het woord niet. */
.kd-intro-geluid {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: min(100%, 320px);
}
.kd-intro-geluid .kd-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  padding: 16px 24px;
  font-size: 1.15rem;
}
.kd-intro-geluid .kd-btn svg { width: 26px; height: 26px; flex: 0 0 auto; }
/* De niet-gekozen standaard: omlijnd, zelfde hoogte en zelfde "drukbare" rand
   als de gevulde knop, zodat ze als een paar lezen. */
.kd-intro-geluid .kd-intro-geluid-los {
  background: #fff;
  color: var(--kd-primary-dark, #2f8fd6);
  border: 2px solid rgba(75, 173, 255, 0.45);
  box-shadow: 0 4px 0 rgba(75, 173, 255, 0.25);
}
.kd-intro-geluid .kd-intro-geluid-los:hover { background: #f2f9ff; }
.kd-intro-geluid .kd-intro-geluid-los:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(75, 173, 255, 0.25); }
.kd-intro-geluid .kd-btn:focus-visible { outline: 3px solid #FFC440; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .kdv-mini { transition: none; }
  .kdv-mini:active { transform: none; }
}

/* Uit: rustig grijs, met een doorgestreepte luidspreker */
.kdv-btn.kdv-uit {
  background: #F1F3F5;
  border-color: #DDE2E7;
  color: #98A2AD;
}
.kdv-btn.kdv-uit:hover { background: #E8ECEF; }

/* ===== De modusknop is een schakelaar (Robert, 4 sep 2026) =====
   Een pil van 46 bij 34 met een rond knopje waarop de luidspreker staat:
   even hoog als de speelknop ernaast (34), zodat de drie knoppen in de
   koptekst op een lijn staan. Eerst 48 bij 28, maar dat viel uit de maat.
   Rechts en blauw = vanzelf voorlezen aan; links en grijs = uit. Geen tekst,
   dan blijft hij klein. Een schakelaar leest als instelling en niet als knop
   die iets doet: een kind dat "nog een keer" wil, tikt er niet op, daarvoor
   staat de speelknop ernaast. De regels hieronder overschrijven de gedeelde
   knopmaat van .kdv-btn hierboven. */
.kdv-btn {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 34px;
  padding: 0;
  border-radius: 999px;
  border: 2px solid #CFE6FB;
  border-bottom-width: 2px;
  background: #E3F3FF;
}
/* Sinds 4 sep 2026 (avond) is het een PAUZE-schakelaar: het knopje draagt een
   pauzeteken en de schakelaar staat aan (blauw, rechts) als het vanzelf
   voorlezen gepauzeerd is (.kdv-uit), en uit (grijs, links) als het gewoon
   voorleest. Precies omgekeerd aan de luidspreker van eerst, die als
   mute-knop las. De klasse kdv-uit blijft "vanzelf voorlezen uit" betekenen;
   alleen de vormgeving is omgedraaid. */
.kdv-btn { background: #F1F3F5; border-color: #DDE2E7; }
.kdv-btn:hover { background: #E8ECEF; }
.kdv-btn .kdv-knop {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #98A2AD;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(44, 62, 80, .25);
  transition: left .15s ease, background .15s ease;
}
.kdv-btn .kdv-knop svg { width: 15px; height: 15px; display: block; }
/* Pauze actief: vanzelf voorlezen staat uit. */
.kdv-btn.kdv-uit { background: #E3F3FF; border-color: #CFE6FB; }
.kdv-btn.kdv-uit:hover { background: #D3EBFF; }
.kdv-btn.kdv-uit .kdv-knop { left: 14px; background: #4BADFF; }
/* Een schakelaar drukt niet in zoals een knop. */
.kdv-btn:active { transform: none; border-bottom-width: 2px; }
@media (prefers-reduced-motion: reduce) {
  .kdv-btn .kdv-knop { transition: none; }
}

/* Aan en bezig met voorlezen: vol blauw, golfjes pulseren */
/* Speelt (klasse volgt het echte 'playing'-event): vol blauw. Sinds de
   splitsing van 4 sep 2026 alleen nog op de speelknop; de schakelaar ernaast
   verandert niet mee. */
.kdv-speel.kdv-spelend {
  background: #4BADFF;
  border-color: #2E8FD9;
  color: #fff;
}
@keyframes kdv-golf {
  0%, 100% { opacity: 1; }
  50%      { opacity: .25; }
}

/* De browser wacht op een eerste aanraking: zachtjes uitnodigen */
.kdv-btn.kdv-tik-mij, .kdv-speel.kdv-tik-mij { animation: kdv-pulse 1.4s ease-in-out infinite; }
@keyframes kdv-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* ===== Meekleuren tijdens het voorlezen ===== */

/* Het woord dat nu klinkt. Donkere tekst op geel geeft ruim voldoende
   contrast, ook bij dyslexie-vriendelijke instellingen. */
.kdv-w { border-radius: 5px; }
.kdv-w.kdv-aan {
  background: #FFBE0B;
  color: #3D2E00;
  box-shadow: 0 0 0 3px #FFBE0B;
}

/* Het onderdeel dat nu klinkt. Wordt alleen gezet als er GEEN woorden
   meekleuren; anders zou je twee markeringen over elkaar heen zien. */
.kdv-leest {
  border-radius: 10px;
  box-shadow: 0 0 0 3px rgba(75, 173, 255, .35);
}
.kd-option-btn.kdv-leest {
  border-color: #4BADFF !important;
}

/* ===== Kleine schermen ===== */
@media (max-width: 480px) {
  .kdv-btn { width: 30px; height: 30px; border-radius: 9px; }
  .kdv-btn svg { width: 17px; height: 17px; }
}

/* ===== Rustig aan bij verminderde beweging ===== */
@media (prefers-reduced-motion: reduce) {
  .kdv-btn.kdv-spelend .kdv-golf1,
  .kdv-btn.kdv-spelend .kdv-golf2,
  .kdv-btn.kdv-tik-mij, .kdv-speel.kdv-tik-mij { animation: none; }
  .kdv-btn.kdv-tik-mij, .kdv-speel.kdv-tik-mij { box-shadow: 0 0 0 3px rgba(75, 173, 255, .5); }
}