/**
 * Toegankelijkheid, de kant van de bezoeker.
 *
 * Bewust sober gehouden: dit is de laag die in élk thema terecht komt, dus hij
 * moet ernaast kunnen staan zonder ruzie te maken. Alles hangt aan één
 * variabele, --tt-kleur, die uit de instellingen komt.
 *
 * DE TWEE CONTRASTSTANDEN
 *
 * De lade heeft één schakelaar die alle kleuren omdraait. Daarom staat er
 * nergens een vaste kleur in de onderdelen zelf: ze lezen --tt-vlak (de
 * achtergrond) en --tt-op-vlak (alles wat daarop staat), en de schakelaar
 * verwisselt die twee. Eén regel omdraaien, en de hele lade klopt weer.
 *
 * Gemeten contrast met de standaardkleur #1d4ed8:
 *
 *   normale stand, vlak = #1d4ed8
 *     wit op de kleur                    6,70:1   alle tekst in de lade
 *     de kleur op wit                    6,70:1   het woord dat nu klinkt
 *     wit op #466edf                     4,61:1   icoon in een grijze cirkel
 *
 *   omgekeerde stand, vlak = wit
 *     de kleur op wit                    6,70:1   alle tekst in de lade
 *     wit op de kleur                    6,70:1   het woord dat nu klinkt
 *     de kleur op #ebebeb                5,62:1   icoon in een grijze cirkel
 *
 *   in de pagina zelf
 *     wit op #1d4ed8                     6,70:1   de zin die wordt voorgelezen
 *     #111827 op #e9ff55                15,97:1   het woord dat nu klinkt
 *
 * Het woord dat klinkt was eerst een doorschijnend wit vlak. Dat haalde 4,23
 * en dus net niet de 4,5 die WCAG vraagt. Vlak en tekst omdraaien haalt 6,70
 * in bééde standen, en het valt bovendien veel beter op.
 *
 * Kiest iemand in de instellingen een lichtere kleur, dan zakken deze waarden
 * mee. Het instellingenscherm rekent dat contrast voor en waarschuwt.
 */

/*
 * --tt-kleur komt uit de instellingen en wordt op :root gezet. Hier stond hij
 * ooit ook, als terugval, en dat was precies de fout: een eigen definitie op
 * .tt-balk wint van de waarde die van :root komt, dus bleef alles blauw hoe
 * vaak je de kleur ook wijzigde. De terugval hoort in var() zelf te staan.
 */
.tt-balk {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	align-items: center;
	margin: 0 0 1.5rem;
	padding: 0;
}

.tt-knop {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;

	margin: 0;
	padding: 0.5rem 1rem;

	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--tt-kleur, #1d4ed8);

	background: #fff;
	border: 2px solid var(--tt-kleur, #1d4ed8);
	border-radius: 0.5rem;
	cursor: pointer;
}

.tt-knop:hover {
	background: #f3f4f6;
}

/* Zichtbare focus is hier geen detail maar de kern van het product. */
.tt-knop:focus-visible,
.tt-term:focus-visible,
.tt-rond:focus-visible,
.tt-schakelaar:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
}

.tt-knop[aria-pressed="true"] {
	color: #fff;
	background: var(--tt-kleur, #1d4ed8);
}

.tt-icoon {
	display: inline-flex;
	flex-shrink: 0;
}

/* Meeschalen met de tekst van de knop, niet met een vaste maat: een thema met
   een grotere basisletter krijgt dan vanzelf een groter icoon. */
.tt-icoon .tt-svg {
	width: 1.15em;
	height: 1.15em;
}

.tt-icoon:empty {
	display: none;
}

/* ------------------------------------------------------------------
 * De lade
 * ---------------------------------------------------------------- */

.tt-lade {
	--tt-vlak: var(--tt-kleur, #1d4ed8);
	--tt-op-vlak: #fff;
	--tt-cirkel: rgba(255, 255, 255, 0.18);

	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99990;

	color: var(--tt-op-vlak);
	background: var(--tt-vlak);
	box-shadow: 0 -0.5rem 2rem rgba(0, 0, 0, 0.25);

	transform: translateY(100%);
	transition: transform 0.28s ease;
}

/* De omgekeerde stand verwisselt alleen deze drie; de rest volgt vanzelf. */
.tt-lade--om {
	--tt-vlak: #fff;
	--tt-op-vlak: var(--tt-kleur, #1d4ed8);
	--tt-cirkel: rgba(0, 0, 0, 0.08);
}

.tt-lade[hidden] {
	display: none;
}

.tt-lade.is-open {
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.tt-lade {
		transition: none;
	}
}

.tt-lade__binnen {
	max-width: 62rem;
	margin: 0 auto;
	/* Geen padding bovenaan: die zit in de kop, want die moet zijn eigen
	   achtergrond meenemen als hij vastplakt. */
	padding: 0 1.25rem 1.25rem;
}

/*
 * De kop blijft staan als je scrollt.
 *
 * In de leesweergave scrolt de hele lade. Zonder sticky verdwijnt de kop, en
 * daarmee het kruisje waarmee je de weergave sluit: je moet dan eerst helemaal
 * terug naar boven om eruit te komen. De achtergrond hoort erbij, anders
 * scrolt de tekst er doorheen.
 */
.tt-lade__hoofd {
	position: sticky;
	top: 0;
	z-index: 2;

	display: flex;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;

	/* De negatieve marge trekt de achtergrond over de padding van de lade
	   heen, zodat er links en rechts geen tekst langsschuift. */
	margin: 0 -1.25rem 0.75rem;
	padding: 1rem 1.25rem 0.85rem;

	background: var(--tt-vlak);

	/* Een dunne lijn maakt zichtbaar dat de tekst er onderdoor schuift. Zonder
	   die scheiding plakt de eerste regel tegen de titel zodra je scrolt. */
	box-shadow: inset 0 -1px 0 rgba(128, 128, 128, 0.35);
}

.tt-lade__titel {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.85;
}

.tt-lade__hoofdknoppen {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------
 * Voorlezen: de ondertitel plus de bediening
 * ---------------------------------------------------------------- */

/*
 * De onderkant is de ankerlijn, niet het midden.
 *
 * De ondertitel wisselt per zin van hoogte: één regel, dan drie, dan weer
 * twee. Met align-items: center schuift de knoppengroep daar telkens in mee,
 * en dan danst de play-knop onder je vinger weg terwijl je hem wil indrukken.
 * De lade groeit naar boven, want hij zit aan de onderkant vast, dus met
 * flex-end staan de knoppen altijd op dezelfde plek op het scherm.
 */
.tt-paneel {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 1.5rem;
	align-items: flex-end;
	justify-content: space-between;
}

.tt-paneel[hidden] {
	display: none;
}

.tt-ondertitel {
	flex: 1 1 20rem;

	max-height: 30vh;
	overflow-y: auto;
	margin: 0;

	font-size: clamp(1.25rem, 1rem + 1.4vw, 1.875rem);
	font-weight: 500;
	line-height: 1.45;
	text-wrap: balance;
}

/*
 * Het woord dat op dit moment klinkt. Vlak en tekst wisselen van rol, want een
 * doorschijnende markering haalde het contrast niet. Zo is het in beide
 * standen 6,70:1 en springt het er ook echt uit.
 */
.tt-woord.is-nu {
	padding: 0.05em 0.15em;
	margin: 0 -0.05em;

	color: var(--tt-vlak);
	background: var(--tt-op-vlak);
	border-radius: 0.2em;
}

.tt-bediening {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-shrink: 0;
}

/* ------------------------------------------------------------------
 * Ronde knoppen
 * ---------------------------------------------------------------- */

.tt-rond {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	/* 3rem is de ondergrens die WCAG voor een aanraakdoel aanhoudt. */
	width: 3.25rem;
	height: 3.25rem;
	padding: 0;

	color: var(--tt-op-vlak);
	background: var(--tt-cirkel);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.tt-rond:hover {
	filter: brightness(1.1);
}

/*
 * Het omhulsel om het icoon staat op flex en de tekening op block.
 *
 * Als span is het een regel tekst, en dan houdt de browser er ruimte onder vrij
 * voor de staarten van een g en een p. Het icoon komt daardoor een paar pixels
 * te hoog in de knop te staan. De vorm zelf is goed: opgemeten staat het
 * driehoekje precies op 320 van de 640 in de hoogte.
 */
.tt-rond > span:not(.tt-verborgen) {
	display: flex;
	align-items: center;
	justify-content: center;
}

.tt-rond .tt-svg {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
}

/* De play- en pauzeknop is de hoofdknop en draait de kleuren om. */
.tt-rond--kleur {
	width: 4rem;
	height: 4rem;

	color: var(--tt-vlak);
	background: var(--tt-op-vlak);
}

.tt-rond--kleur .tt-svg {
	width: 2rem;
	height: 2rem;
}

.tt-rond--sluiten {
	width: 2.75rem;
	height: 2.75rem;
}

.tt-rond--sluiten .tt-svg {
	width: 1.125rem;
	height: 1.125rem;
}

/* ------------------------------------------------------------------
 * De contrastschakelaar
 * ---------------------------------------------------------------- */

.tt-schakelaar {
	display: inline-flex;
	align-items: center;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	color: var(--tt-op-vlak);
}

.tt-schakelaar__spoor {
	position: relative;
	display: block;
	width: 3.75rem;
	height: 2.25rem;

	/* Hetzelfde zachte vlak als de ronde knoppen, zodat het spoor een rustige
	   ondergrond is en niet zelf om aandacht vraagt. De rand doet het werk. */
	background: var(--tt-cirkel);
	border: 2px solid var(--tt-op-vlak);
	border-radius: 999px;
}

.tt-schakelaar__knop {
	position: absolute;
	top: 0.3rem;
	left: 0.3rem;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 1.625rem;
	height: 1.625rem;

	color: var(--tt-op-vlak);
	border-radius: 50%;

	transition: transform 0.2s ease;
}

.tt-schakelaar[aria-pressed="true"] .tt-schakelaar__knop {
	transform: translateX(1.5rem);
}

@media (prefers-reduced-motion: reduce) {
	.tt-schakelaar__knop {
		transition: none;
	}
}

.tt-schakelaar__knop .tt-svg {
	width: 1.5rem;
	height: 1.5rem;
}

/* ------------------------------------------------------------------
 * Moeilijke woorden
 * ---------------------------------------------------------------- */

.tt-instructie,
.tt-begrip {
	flex: 1 1 100%;
	margin: 0;
}

.tt-instructie {
	font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
	line-height: 1.45;
}

.tt-begrip[hidden] {
	display: none;
}

.tt-begrip__woord {
	margin: 0 0 0.35rem;
	font-size: clamp(1.5rem, 1.2rem + 1.6vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
}

.tt-begrip__uitleg {
	max-width: 42em;
	margin: 0;
	font-size: clamp(1.125rem, 1rem + 0.8vw, 1.5rem);
	line-height: 1.5;
}

/*
 * In de pagina zelf. Nooit alleen kleur: er staat ook een lijn onder.
 *
 * De tekstkleur staat er expliciet, en erft dus niet van het thema. Het vlak
 * eronder ligt vast op fluorgeel #e9ff55, en een thema met lichte tekst op een
 * donkere achtergrond zou daar met color: inherit lichtgeel op geel van maken.
 * Deze combinatie is gemeten: #111827 op #e9ff55 is 15.97:1.
 *
 * Weglaten is geen oplossing: dan valt de knop terug op de standaardkleur die
 * de browser voor knoppen aanhoudt, en die verschilt per browser en per
 * systeemthema.
 */
.tt-term {
	display: inline;

	margin: 0;
	padding: 0 0.1em;

	font: inherit;
	color: #111827;

	background: #e9ff55;
	border: 0;
	border-bottom: 2px dotted var(--tt-kleur, #1d4ed8);
	border-radius: 0.15em;
	cursor: help;
}

.tt-term.is-gekozen {
	color: #fff;
	background: var(--tt-kleur, #1d4ed8);
	border-bottom-color: #fff;
}

/* ------------------------------------------------------------------
 * Eenvoudige tekst, over het hele scherm
 * ---------------------------------------------------------------- */

.tt-lade--vol {
	top: 0;
	overflow-y: auto;
	box-shadow: none;
}

/*
 * Ruimte voor de beheerbalk van WordPress.
 *
 * Die staat vast bovenaan met een hogere z-index dan deze lade, dus zonder deze
 * ruimte valt de kop met het kruisje erachter. Alleen een ingelogde bezoeker
 * ziet die balk; WordPress zet daarvoor .admin-bar op de body.
 */
.admin-bar .tt-lade--vol {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .tt-lade--vol {
		top: 46px;
	}
}

.tt-lade--vol .tt-lade__binnen {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	padding-bottom: 3rem;
}

.tt-paneel--vol {
	display: block;
	padding-top: 1.25rem;
}

.tt-eenvoudig {
	max-width: 36em;
	margin: 0 auto;
	font-size: 1.3rem;
	line-height: 1.7;
}

/*
 * Alles in de leesweergave neemt de kleur van de lade over.
 *
 * De tekst staat hier in een gekleurd vlak, en een thema dat zijn koppen of
 * links een eigen kleur geeft, zet die anders op een ondergrond waarvoor die
 * kleur nooit bedoeld was. Dezelfde fout als eerder bij een gemarkeerd woord,
 * alleen valt hij hier over een hele pagina tekst.
 *
 * De grootte laten we wel aan het thema: dat houdt de koppenhierarchie zoals
 * de lezer hem op de rest van de site ook ziet.
 */
.tt-eenvoudig,
.tt-eenvoudig * {
	color: inherit;
}

.tt-eenvoudig h2,
.tt-eenvoudig h3,
.tt-eenvoudig h4 {
	margin: 1.75em 0 0.5em;
	line-height: 1.25;
}

/* h2 houdt de grootte van het thema, h3 krijgt er een van ons. */
.tt-eenvoudig h3 {
	font-size: 1.3em;
}

.tt-eenvoudig p,
.tt-eenvoudig ul,
.tt-eenvoudig ol,
.tt-eenvoudig blockquote {
	margin: 0 0 1em;
}

.tt-eenvoudig li {
	margin-bottom: 0.35em;
}

.tt-eenvoudig a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* De pagina eronder mag niet meescrollen zolang de leesweergave openstaat. */
.tt-vast,
.tt-vast body {
	overflow: hidden;
}

/* ------------------------------------------------------------------
 * De pagina tijdens het voorlezen
 * ---------------------------------------------------------------- */

/**
 * De markering loopt via de CSS Custom Highlight API. Dat is de enige manier
 * om tekst op te lichten zonder de pagina te verbouwen, en dus zonder dat
 * links, koppen of schermlezers erdoor in de war raken. Een browser die het
 * niet kent, leest gewoon voor zonder markering.
 */
::highlight(tt-zin) {
	color: #fff;
	background-color: var(--tt-kleur, #1d4ed8);
}

::highlight(tt-woord) {
	color: #111827;
	background-color: #e9ff55;
}

/* Ruimte onder de pagina zodat de laatste zin niet achter de lade valt. */
body {
	scroll-padding-bottom: var(--tt-lade-hoogte, 0);
}

.tt-verborgen {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------
 * Op een telefoon
 * ---------------------------------------------------------------- */

@media (max-width: 40rem) {
	.tt-lade__binnen {
		padding: 0 1rem 1rem;
	}

	.tt-lade__hoofd {
		margin: 0 -1rem 0.75rem;
		padding: 0.75rem 1rem 0.75rem;
	}

	/* De bediening onder de ondertitel, en gecentreerd: naast elkaar wordt het
	   op een smal scherm te krap voor knoppen die je moet kunnen raken. */
	.tt-paneel {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	/*
	 * De flex-basis van 20rem is bedoeld als bréédte naast de knoppen. In een
	 * kolom wordt datzelfde getal een hoogte, en dan staat er onder een korte
	 * zin ineens driehonderd pixels leegte. Op een telefoon vulde de lade
	 * daardoor het halve scherm.
	 */
	.tt-ondertitel {
		flex: 0 1 auto;
		max-height: 32vh;
		font-size: 1.25rem;
	}

	.tt-bediening {
		justify-content: center;
	}

	.tt-lade__titel {
		font-size: 0.75rem;
	}

	.tt-eenvoudig {
		font-size: 1.125rem;
	}
}

/* ==================================================================
 * Het gereedschap als menu-item
 *
 * Twee dingen die hier met opzet zo staan.
 *
 * Alles binnen dit onderdeel rekent in em en niet in rem. Rem hangt aan de
 * wortelgrootte, en die zetten we zelf hoger zodra de bezoeker op A+ drukt: dan
 * zou het paneel meegroeien met de pagina die het bedient. Em hangt aan de
 * menuregel eromheen, dus het onderdeel houdt de maat van het thema en blijft
 * gelijk als de bezoeker de tekst vergroot.
 *
 * En de kleuren komen uit --tt-kleur, dezelfde als de lade. Het is één stuk
 * gereedschap, en dat hoort er overal hetzelfde uit te zien.
 * ================================================================== */

/*
 * Het gereedschap houdt altijd dezelfde maat, wat er om hem heen ook gebeurt.
 *
 * 1rem is de wortelgrootte, en die zetten we zelf hoger zodra de bezoeker op
 * A+ drukt. Delen door diezelfde factor levert weer precies de oorspronkelijke
 * maat op. Erven van de menuregel was niet genoeg: op een thema dat zijn menu
 * in rem opmaakt groeide het paneel alsnog mee met de pagina die het bedient.
 */
/*
 * Dicht is dit een gewone menuregel, en dan hoort hij zich ook zo te gedragen.
 *
 * Met position: relative altijd aan tekent hij zich boven alles wat niet
 * gepositioneerd is, en boven gepositioneerde buren die eerder in de HTML
 * staan. Een uitklapmenu van het thema zelf verdween er daardoor achter, en
 * onze knop lag er dwars overheen. Alleen als het paneel openstaat is er iets
 * om aan op te hangen, en pas dan hoort hij vooraan te liggen.
 */
.tt-menu {
	position: static;
	font-size: calc(1rem / var(--tt-schaal, 1));
}

.tt-menu.is-open {
	position: relative;
	z-index: 90;
}

.tt-menu__knop {
	display: inline-flex;
	gap: 0.45em;
	align-items: center;

	margin: 0;
	padding: 0.5em 1em;

	font: inherit;
	color: inherit;
	background: none;

	border: var(--tt-menu-rand, 2px) solid currentColor;
	border-radius: var(--tt-menu-radius, 999px);
	cursor: pointer;
}

.tt-menu__knop .tt-svg {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
}

/* De dikte komt van het thema, net als de letter zelf. Een eigen gewicht zou
   altijd naast de menuregels ernaast vallen. */
.tt-menu__knop .tt-label,
.tt-paneel-menu .tt-label {
	font-weight: inherit;
}

/* Een driehoekje van randen, zodat er geen tweede tekening bij hoeft. */
.tt-menu__pijl {
	width: 0;
	height: 0;
	border-top: 0.35em solid currentColor;
	border-right: 0.3em solid transparent;
	border-left: 0.3em solid transparent;
	transition: transform 0.15s ease;
}

.tt-menu.is-open .tt-menu__pijl {
	transform: rotate(180deg);
}

.tt-menu__knop:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * Het paneel
 * ---------------------------------------------------------------- */

.tt-paneel-menu {
	position: absolute;
	top: calc(100% + 0.5em);
	right: 0;
	z-index: 90;

	width: max-content;
	min-width: 15em;

	/* Nooit breder dan het scherm, hoe smal de menuregel eromheen ook is. De
	   zijkant die overblijft is de marge waarbinnen JavaScript hem terugduwt. */
	max-width: min(20em, calc(100vw - 24px));
	padding: 1em;

	font-size: 1em;
	line-height: 1.4;
	text-align: left;
	color: #fff;
	background: var(--tt-kleur, #1d4ed8);

	border: 0;
	/* De ronding volgt de knop, maar een paneel met een pilvorm bestaat niet:
	   boven een halve em wordt het een bak met afgeronde hoeken. */
	border-radius: min(var(--tt-menu-radius, 999px), 0.75em);
	box-shadow: 0 0.75em 2em rgba(0, 0, 0, 0.25);
}

.tt-paneel-menu[hidden] {
	display: none;
}

.tt-paneel-menu__kop {
	margin: 0 0 0.6em;
	font-size: 1em;
	font-weight: 700;
	color: inherit;
}

.tt-paneel-menu__kop:not(:first-child) {
	margin-top: 1.1em;
	padding-top: 0.9em;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
}

/*
 * Het kopje boven de lettergroottes staat er alleen voor wie het niet ziet.
 *
 * Op het scherm zeggen A, A+ en A++ het zelf, en een regel tekst erboven maakt
 * het paneel alleen langer. Weghalen mag niet: de groep verwijst ernaar met
 * aria-labelledby, en zonder dat hoort een schermlezer drie losse letters
 * zonder te weten waar ze over gaan.
 */
.tt-paneel-menu__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* De knoppen in het paneel: volle breedte, want ze zijn een lijst met keuzes
   en geen rij losse knoppen. Zo is het aanraakvlak ook meteen groot genoeg. */
.tt-paneel-menu__item {
	display: flex;
	gap: 0.6em;
	align-items: center;

	width: 100%;
	margin: 0 0 0.4em;
	padding: 0.6em 0.75em;

	font: inherit;
	font-size: 0.95em;
	text-align: left;
	color: inherit;

	/* Geen rand maar een zacht vlak. Hetzelfde vlak als --tt-cirkel in de lade:
	   het is één stuk gereedschap en het hoort er overal hetzelfde uit te zien.
	   De rand hield het paneel onrustig, want elke regel kreeg zijn eigen lijn. */
	background: rgba(255, 255, 255, 0.18);
	border: 0;
	border-radius: var(--tt-menu-radius, 999px);
	cursor: pointer;
}

.tt-paneel-menu__item:last-child {
	margin-bottom: 0;
}

.tt-paneel-menu__item .tt-svg {
	width: 1.15em;
	height: 1.15em;
	flex-shrink: 0;
}

.tt-paneel-menu__item:hover,
.tt-grootte:hover {
	background: rgba(255, 255, 255, 0.3);
}

.tt-paneel-menu__item:focus-visible,
.tt-grootte:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* Ingedrukt is niet alleen een kleur: het vlak keert om. Kleur alleen zou voor
   een deel van de mensen die dit gebruiken niets zeggen. */
.tt-paneel-menu__item[aria-pressed="true"],
.tt-grootte[aria-pressed="true"] {
	color: var(--tt-kleur, #1d4ed8);
	background: #fff;
	border-color: #fff;
}

/* ------------------------------------------------------------------
 * De drie lettergroottes
 * ---------------------------------------------------------------- */

.tt-groottes {
	display: flex;
	gap: 0.5em;
	margin-bottom: 1em;
}

.tt-grootte {
	flex: 1 1 0;

	/* 2,75em blijft ook met een dikke rand boven de 44 pixels die een
	   aanraakdoel nodig heeft. */
	min-height: 2.75em;
	padding: 0.4em 0.5em;

	font: inherit;
	font-weight: 700;
	color: inherit;
	background: rgba(255, 255, 255, 0.18);

	border: 0;
	border-radius: var(--tt-menu-radius, 999px);
	cursor: pointer;
}

/* De knoppen tonen wat ze doen: A+ staat groter dan A. */
.tt-grootte[data-tt-grootte="1"]    { font-size: 0.95em; }
.tt-grootte[data-tt-grootte="1.15"] { font-size: 1.1em; }
.tt-grootte[data-tt-grootte="1.3"]  { font-size: 1.25em; }

/* Los op de pagina in plaats van in een menu: dan is er geen menuregel om
   tegenaan te hangen en mag het paneel gewoon links uitlijnen. */
.tt-menu--los {
	display: inline-block;
}

.tt-menu--los .tt-paneel-menu {
	right: auto;
	left: 0;
}

/*
 * Het paneel blijft op élk formaat zweven.
 *
 * Eerst schoof hij op een smal scherm tussen de menuregels in, maar dat gaat
 * alleen goed als het menu daar ook echt een kolom is. Staat de navigatie nog
 * op één rij, dan is de menuregel een paar tellen breed en loopt het paneel
 * het scherm uit. Zwevend is het op elk thema hetzelfde, en de rand die het
 * scherm raakt wordt door JavaScript rechtgezet.
 */

/* ==================================================================
 * De losse Lees voor-knop bij de inhoud
 *
 * Zelfde vorm als de knop in het menu, met dezelfde instellingen voor rand en
 * ronding, zodat ze bij elkaar horen. Ook deze groeit niet mee met de
 * lettergrootte: het gereedschap houdt altijd zijn maat.
 * ================================================================== */

.tt-voorleesknop {
	display: inline-flex;
	gap: 0.45em;
	align-items: center;

	margin: 0;
	padding: 0.5em 1em;

	font: inherit;
	font-size: calc(1rem / var(--tt-schaal, 1));
	color: inherit;
	background: none;

	border: var(--tt-menu-rand, 2px) solid currentColor;
	border-radius: var(--tt-menu-radius, 999px);
	cursor: pointer;
}

.tt-voorleesknop .tt-svg {
	width: 1.25em;
	height: 1.25em;
	flex-shrink: 0;
}

.tt-voorleesknop .tt-label {
	font-weight: inherit;
}

.tt-voorleesknop:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 2px;
}

/* Aan is een gevuld vlak en niet alleen een andere kleur. */
.tt-voorleesknop[aria-pressed="true"] {
	color: #fff;
	background: var(--tt-kleur, #1d4ed8);
	border-color: var(--tt-kleur, #1d4ed8);
}

/* ==================================================================
 * Hoog contrast
 *
 * Dit is met opzet grof. Een thema kan zijn kleuren overal vandaan halen, in
 * losse regels, in variabelen, in inline stijlen, en er is geen nette manier om
 * daar met een paar regels bovenop te komen. Wie deze knop aanzet vraagt niet
 * om een mooie pagina maar om een leesbare, en dan is alles overschrijven de
 * eerlijkste uitkomst.
 *
 * Wat het ook doet, en dat is het deel dat kleurenblinden echt helpt: links
 * krijgen een onderstreping. Kleur is dan nergens meer het enige verschil
 * tussen een link en gewone tekst (WCAG 1.4.1).
 *
 * Gemeten op wit: tekst #1a1a1a haalt 16,1:1, een link #0b3fa8 haalt 8,9:1, en
 * bezocht #6b21a8 haalt 8,0:1. Alle drie ruim boven de 4,5 die nodig is, en de
 * drie kleuren blijven onderling uit elkaar te houden.
 * ================================================================== */

[data-tt-contrast="hoog"] body,
[data-tt-contrast="hoog"] body *:not(svg):not(svg *) {
	color: #1a1a1a !important;
	background-color: #fff !important;
	background-image: none !important;
	border-color: #1a1a1a !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

/*
 * Let op de vorm van deze selector. De algemene regel hierboven is
 * [data-tt-contrast] body *:not(svg):not(svg *), en die weegt zwaarder dan een
 * kale "a": de twee :not()'s tellen allebei mee. Zonder body en [href] werden
 * links gewoon zwart en bleef alleen de onderstreping over. Precies het soort
 * regel waarvan je in de code denkt dat hij klopt.
 */
[data-tt-contrast="hoog"] body a[href],
[data-tt-contrast="hoog"] body a[href] * {
	color: #0b3fa8 !important;
	text-decoration: underline !important;
}

[data-tt-contrast="hoog"] body a[href]:visited,
[data-tt-contrast="hoog"] body a[href]:visited * {
	color: #6b21a8 !important;
}

/* Een knop moet als knop te herkennen blijven, ook zonder kleurvlak. */
[data-tt-contrast="hoog"] button,
[data-tt-contrast="hoog"] input[type="submit"],
[data-tt-contrast="hoog"] input[type="button"],
[data-tt-contrast="hoog"] .button {
	border: 2px solid #1a1a1a !important;
}

/*
 * De knop en het paneel in hoog contrast: wit op zwart.
 *
 * Zonder deze regels kreeg elk stukje tekst zijn eigen witte vlak van de
 * algemene regel hierboven, en dan staat er een wit blokje om het woord "Hoog
 * contrast" heen op een zwarte pil. Hier wordt het vlak één keer gezet, op het
 * paneel, en alles daarbinnen wordt doorzichtig.
 */
[data-tt-contrast="hoog"] .tt-menu__knop,
[data-tt-contrast="hoog"] .tt-paneel-menu {
	color: #fff !important;
	background-color: #1a1a1a !important;

	/* Een rand eromheen, want in hoog contrast is de schaduw weg en is het
	   paneel anders niet van de zwarte pagina erachter te onderscheiden. */
	border: 2px solid #fff !important;
}

[data-tt-contrast="hoog"] .tt-paneel-menu *:not(svg):not(svg *),
[data-tt-contrast="hoog"] .tt-menu__knop *:not(svg):not(svg *) {
	color: #fff !important;
	background-color: transparent !important;
	border-color: #fff !important;
}

/*
 * En de randen komen hier juist terug. In de gewone stand is een zacht vlak
 * genoeg om een knop als knop te herkennen, maar in hoog contrast is dat vlak
 * doorzichtig en blijft er anders niets over om te zien.
 */
[data-tt-contrast="hoog"] .tt-paneel-menu__item,
[data-tt-contrast="hoog"] .tt-grootte {
	border: 2px solid #fff !important;
}

/*
 * Het pijltje blijft een pijltje.
 *
 * Het is een driehoek van randen: één gekleurde en twee doorzichtige. De regel
 * die alle randen zwart maakt vulde die twee ook in, en dan is het geen
 * driehoek meer maar een blokje. De extra .tt-menu ervoor is er niet voor de
 * sier: zonder dat wint de regel hierboven, die álle randen wit maakt.
 */
[data-tt-contrast="hoog"] .tt-menu .tt-menu__pijl {
	border-top-color: #fff !important;
	border-right-color: transparent !important;
	border-bottom-color: transparent !important;
	border-left-color: transparent !important;
}

/*
 * De schakelaar is zelf al een vorm.
 *
 * De regel hierboven zet om elke knop een kader, zodat een knop zonder
 * kleurvlak als knop te herkennen blijft. Bij de contrastschakelaar levert dat
 * een vierkant om een pil op: de knop eromheen is niet meer dan een omhulsel,
 * het spoor erbinnen is wat je ziet en dat heeft zijn rand al.
 */
[data-tt-contrast="hoog"] .tt-schakelaar {
	border: 0 !important;
}

[data-tt-contrast="hoog"] :focus-visible {
	outline: 3px solid #0b3fa8 !important;
	outline-offset: 2px !important;
}

/*
 * Ons eigen gereedschap staat hier ná de algemene regels, want die zetten met
 * !important alles op wit. Zonder deze uitzondering verdwijnt het verschil
 * tussen een ingedrukte en een losse knop, en dat is precies wat je moet zien.
 */


/*
 * De lade in hoog contrast: zwart met wit, en omgekeerd wit met zwart.
 *
 * Hier stonden eerst vaste kleuren met !important, en dat maakte de schakelaar
 * in de lade stuk: die verwisselt --tt-vlak en --tt-op-vlak, maar tegen een
 * vastgezette kleur valt niets te verwisselen. De knop bewoog en er gebeurde
 * niets. Nu wijzen dezelfde regels naar de variabelen, dus het omdraaien werkt
 * ook in hoog contrast, en allebei de standen halen het volle contrast.
 */
[data-tt-contrast="hoog"] .tt-lade {
	--tt-vlak: #1a1a1a;
	--tt-op-vlak: #fff;
	--tt-cirkel: rgba(255, 255, 255, 0.22);

	color: var(--tt-op-vlak) !important;
	background-color: var(--tt-vlak) !important;
}

[data-tt-contrast="hoog"] .tt-lade--om {
	--tt-vlak: #fff;
	--tt-op-vlak: #1a1a1a;
	--tt-cirkel: rgba(0, 0, 0, 0.1);
}

[data-tt-contrast="hoog"] .tt-lade *:not(svg):not(svg *) {
	color: var(--tt-op-vlak) !important;
	background-color: transparent !important;
	border-color: var(--tt-op-vlak) !important;
}

/* Het spoor en de ronde knoppen houden hun eigen zachte vlak, anders is er in
   de omgekeerde stand geen verschil meer tussen knop en ondergrond. */
[data-tt-contrast="hoog"] .tt-lade .tt-rond,
[data-tt-contrast="hoog"] .tt-lade .tt-schakelaar__spoor {
	background-color: var(--tt-cirkel) !important;
}

[data-tt-contrast="hoog"] .tt-lade .tt-schakelaar__knop {
	color: var(--tt-op-vlak) !important;
}

[data-tt-contrast="hoog"] .tt-woord.is-nu,
[data-tt-contrast="hoog"] .tt-zin.is-nu {
	color: var(--tt-vlak, #1a1a1a) !important;
	background-color: var(--tt-op-vlak, #fff) !important;
}

/*
 * Een afbeelding blijft staan. Hem weghalen zou informatie wegnemen, en een
 * foto is geen contrastprobleem: de tekst eromheen was dat.
 */
[data-tt-contrast="hoog"] img,
[data-tt-contrast="hoog"] video {
	background: none !important;
}

/* Aanstaan keert om, ook hier: zwart op wit tegenover wit op zwart. Het staat
   helemaal achteraan omdat de regels hierboven alles doorzichtig maken. */
[data-tt-contrast="hoog"] .tt-paneel-menu__item[aria-pressed="true"],
[data-tt-contrast="hoog"] .tt-grootte[aria-pressed="true"] {
	color: #1a1a1a !important;
	background-color: #fff !important;
	border-color: #fff !important;
}

/* Ook wat erin staat. De regel die alles binnen het paneel wit maakt geldt
   namelijk ook voor het label in deze knop, en dan staat er wit op wit. */
[data-tt-contrast="hoog"] .tt-paneel-menu__item[aria-pressed="true"] *,
[data-tt-contrast="hoog"] .tt-grootte[aria-pressed="true"] * {
	color: #1a1a1a !important;
}

/* De losse Lees voor-knop keert in hoog contrast ook om als hij aanstaat. */
[data-tt-contrast="hoog"] .tt-voorleesknop[aria-pressed="true"],
[data-tt-contrast="hoog"] .tt-voorleesknop[aria-pressed="true"] * {
	color: #fff !important;
	background-color: #1a1a1a !important;
	border-color: #1a1a1a !important;
}