/*
 * artikel.css — de artikelpagina en de opmaak van de blokken erin.
 *
 * Mobiel is de basis (360px). Alles wat groter is, komt er met min-width bovenop.
 * Alleen tokens uit CONTRACT.md; geen kleurwaarden, geen eigen schaal.
 *
 * Inhoud
 *  1. Omhulsel en raster
 *  2. Artikelkop
 *  3. Uitgelichte afbeelding
 *  4. Inhoudsopgave
 *  5. Tekstvel, blokritme en ondertekening
 *  6. Koppen en initiaal
 *  7. Citaat, inclusief het Arabische patroon
 *  8. Lijsten, tabel, code, beeld, scheiding, details, aandachtsblok
 *  9. Voetnoten
 * 10. Reeks, onderwerpen, vorige/volgende, lees ook
 * 11. Reeksarchief
 * 12. Breekpunten
 */

/* ------------------------------------------------------------------ *
 * 1. Omhulsel en raster
 * ------------------------------------------------------------------ */

.rb-artikel {
	max-width: var(--container);
	margin-inline: auto;
}

.rb-artikel__raster {
	background: var(--surface);
}

/* Alles onder de tekst blijft op leeskolombreedte staan. */
.rb-artikel__voet {
	max-width: calc(var(--leeskolom) + var(--gutter) * 2);
	margin-inline: auto;
}

/* ------------------------------------------------------------------ *
 * 2. Artikelkop
 * ------------------------------------------------------------------ */

.rb-artikel__kop {
	padding: var(--s8) var(--gutter) var(--s6);
	text-align: center;
	border-bottom: var(--bw) solid var(--rule);
	max-width: calc(var(--leeskolom) + var(--gutter) * 2);
	margin-inline: auto;
}

.rb-artikel__meta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	/*
	 * center in plaats van baseline: de rubriek is een link en heeft een tikvlak
	 * van 48px nodig (gemeten: 62,8 x 24px, te klein). Met baseline zou dat
	 * hogere tikvlak de hele regel scheeftrekken.
	 */
	align-items: center;
	gap: var(--s2) var(--s5);
	margin: 0 0 var(--s4);
	font: var(--t-meta);
	color: var(--muted);
}

/*
 * De meta-regel staat in het ontwerp in 13px labelletters. Hier 16px: het zijn geen
 * labels maar leesbare feiten (datum, leestijd, rubriek), en CLAUDE.md §3 legt de
 * ondergrond voor lopende tekst op 16px. Zie het rapport bij deze taak.
 */

/*
 * De leestijd en de rubriek zitten samen in .rb-meta__rest. Die groep wordt 48px hoog
 * doordat de rubriek-link een tikvlak van die maat krijgt — en zonder align-items
 * viel de leestijd terug op de standaard `normal`, waardoor "2 min" tegen de bovenkant
 * van die 48px plakte terwijl de datum ernaast gecentreerd stond. Gemeten: datum op
 * top=109, de groep op top=97.
 *
 * Met center delen alle drie de onderdelen dezelfde middellijn en staat de regel weer
 * recht, zonder dat het tikvlak kleiner wordt.
 */
.rb-meta__rest {
	align-items: center;
}

.rb-artikel__meta a {
	color: var(--muted);

	/* Tikvlak van 48px. inline-flex omdat een inline <a> geen hoogte aanneemt. */
	min-height: var(--tap);
	display: inline-flex;
	align-items: center;
}

.rb-artikel__titel {
	margin: 0;
	font: var(--t-h1);
	letter-spacing: var(--tr-display);
	text-transform: uppercase;
	color: var(--heading);
	text-wrap: pretty;
}

/* ------------------------------------------------------------------ *
 * 3. Uitgelichte afbeelding
 * ------------------------------------------------------------------ */

.rb-artikel__beeld {
	margin: 0;
	background: var(--surface);
	border-bottom: var(--bw) solid var(--rule);
}

/*
 * max-width, nooit width: een vaste breedte rekt een kleine foto op boven zijn eigen
 * resolutie en drukt hem plat zodra er ook een hoogte in het spel is (MEMORY.md V5).
 */
.rb-artikel__beeld img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

.rb-artikel__bijschrift {
	padding: var(--s3) var(--gutter) var(--s5);
	font: var(--t-caption);
	color: var(--muted);
	max-width: var(--leeskolom);
	margin-inline: auto;
}

/* ------------------------------------------------------------------ *
 * 4. Inhoudsopgave
 * ------------------------------------------------------------------ */

.rb-toc__lijst {
	margin: 0;
	padding: 0 0 var(--s3) var(--s5);
	font: var(--t-body);
}

/*
 * Tikvlakken moeten minimaal 8px uit elkaar (CLAUDE.md §3). De links in de
 * inhoudsopgave zijn elk 48px hoog en stonden 4px uit elkaar — gemeten op 960px en
 * 1280px, waar de kantlijnvariant pas bestaat. Op smallere schermen viel dit buiten
 * de meting omdat de opgave daar een dichtgeklapte lade is.
 */
.rb-toc__item {
	margin: 0;
}

.rb-toc__item + .rb-toc__item {
	margin-top: var(--s1);
}

.rb-toc--kant .rb-toc__item + .rb-toc__item {
	margin-top: var(--s2);
}

.rb-toc__link {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	color: var(--text);
}

/*
 * font-size apart, ná de font-shorthand: het kopje staat in een <p> en telt daarmee
 * als lopende tekst, ook voor een schermlezer. De 14px van --t-label zakt dan onder
 * de ondergrens uit CLAUDE.md §3.
 */
.rb-toc__label {
	margin: 0;
	font: var(--t-label);
	font-size: var(--fs-meta);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--muted);
}

/* De lade: het mobiele patroon. Werkt zonder JavaScript. */
.rb-toc--lade {
	border-top: var(--bw) solid var(--rule);
	border-bottom: var(--bw) solid var(--rule);
}

.rb-toc__knop {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s3);
	min-height: var(--tap);
	cursor: pointer;
	list-style: none;
}

/* Het standaard driehoekje van Safari en Chrome weghalen; de eigen pijl komt ervoor terug. */
.rb-toc__knop::-webkit-details-marker {
	display: none;
}

.rb-toc__pijl {
	display: grid;
	place-items: center;
	color: var(--muted);
	transition: transform var(--motion-fast) var(--easing);
}

/* Lijniconen krijgen hun stijl in de CSS, nooit in de icoondefinitie (MEMORY.md V7). */
.rb-toc__pijl svg,
.rb-omliggend__pijl svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 1.6;
}

.rb-toc--lade[open] .rb-toc__pijl {
	transform: rotate(180deg);
}

/* De kantlijnvariant bestaat pas vanaf 960px; zie §12. */
.rb-toc--kant {
	display: none;
}

/* ------------------------------------------------------------------ *
 * 5. Tekstvel, blokritme en ondertekening
 * ------------------------------------------------------------------ */

.rb-artikel__vel {
	background: var(--surface);
	padding: var(--s7) var(--gutter) var(--s9);
}

.rb-artikel__tekst {
	font: var(--t-body);
	color: var(--text);
}

/*
 * Het verticale ritme komt uit het thema en niet uit de content: gelijke marges boven
 * en onder klappen tussen twee blokken samen tot één afstand. Zo klopt het ritme ook
 * als de auteur nooit een spacer plaatst — en dat is precies de bedoeling (MEMORY.md V9).
 */
.rb-artikel__tekst > * {
	margin-block: var(--block);
	margin-inline: auto;
	max-width: var(--measure);
}

.rb-artikel__tekst > :first-child {
	margin-block-start: 0;
}

.rb-artikel__tekst > :last-child {
	margin-block-end: 0;
}

/*
 * Woordafbreking staat op élke breedte aan, uitvullen niet.
 *
 * Afbreken helpt altijd: het haalt de diepste happen uit de rechterrand en het scheelt
 * regels. Gemeten op een kolom van 300px: 14 regels mét afbreken, 15 zonder. Het werkt
 * hier omdat <html lang="nl-NL"> staat — zonder een taal die de browser kent doet
 * `hyphens: auto` niets.
 *
 * Bewust GEEN hyphenate-limit-chars. Ik had er 7 4 3 op gezet (alleen woorden vanaf
 * zeven letters breken) omdat "ge-loof" lelijk oogt. Gemeten bleek dat de spaties juist
 * verder oprekken, want de browser houdt minder breekpunten over: mediaan 1,81x tegen
 * 1,51x bij de standaardwaarde, op 360px. De standaard wint; laat hem staan.
 */
.rb-artikel__tekst p,
.rb-artikel__tekst li,
.rb-artikel__tekst dd {
	hyphens: auto;
	-webkit-hyphens: auto;
	text-wrap: pretty;
}

/*
 * Uitvullen pas vanaf 640px, en dat is een meting, geen smaak.
 *
 * Uitvullen betekent: de browser rekt de spaties op tot de regel precies vol is. Hoeveel
 * hij moet oprekken hangt af van hoeveel woorden er op een regel passen — in een smalle
 * kolom moet dezelfde restruimte over minder spaties verdeeld worden, en dan krijg je de
 * gaten waar uitvullen zijn slechte naam aan dankt.
 *
 * Gemeten op een echt artikel, de woordruimte in een uitgevulde regel gedeeld door
 * diezelfde ruimte zonder uitvullen:
 *
 *     360px  kolom 320px   mediaan 1,81x   9 op de 10 regels onder 3,58x   piek 9,35x
 *     390px  kolom 350px   mediaan 1,64x                        3,16x           5,03x
 *     414px  kolom 374px   mediaan 1,72x                        2,74x           4,71x
 *     640px  kolom 508px   mediaan 1,61x                        2,30x           2,91x
 *    1280px  kolom 562px   mediaan 1,61x                        2,30x           2,91x
 *
 * Vanaf 640px verandert er niets meer en blijft de piek onder de 3x — dat is rustige
 * bladspiegel. Daaronder loopt de staart weg: op 360px is een op de tien regels meer dan
 * drie en een halve keer zo los, en dat zie je als witte rivieren door de alinea lopen.
 *
 * Op een telefoon leest een rafelige rechterrand daarom beter dan een gelijke. De
 * afbreking hierboven blijft daar wél staan, en die doet het meeste werk.
 */
@media (min-width: 640px) {

	.rb-artikel__tekst p,
	.rb-artikel__tekst li,
	.rb-artikel__tekst dd {
		text-align: justify;
	}
}

/*
 * Niet uitvullen wat geen lopende tekst is.
 *
 * Het citaatblok blijft in zijn geheel links uitgelijnd. Daar staan drie dingen onder
 * elkaar in één alinea — Arabisch, vertaling, bron — en de vertaling en de bron stonden
 * al expliciet links (zie hieronder). Zou de Arabische regel wél uitgevuld worden, dan
 * kreeg je binnen één blok drie verschillende uitlijningen. Een citaat ragged zetten
 * naast uitgevulde lopende tekst is bovendien gewoon gangbaar: het zet het citaat apart.
 *
 * Een bijschrift, een bronregel of een noot heeft te weinig regels om iets over te
 * verdelen; uitvullen rekt dan die ene regel over de volle breedte en leest als een fout.
 */
.rb-artikel__tekst :is(blockquote, .wp-block-quote) :is(p, li),
.rb-artikel__tekst figcaption,
.rb-artikel__tekst .wp-block-footnotes li {
	text-align: left;
	hyphens: manual;
}

/*
 * Arabisch nooit uitvullen en nooit afbreken. Het schrift verbindt letters; een
 * afbreekstreepje midden in een woord breekt die verbinding en maakt het onleesbaar.
 * Uitvullen zonder kashida rekt hier bovendien alleen de spaties tussen de woorden, en
 * die staan in een gevocaliseerde tekst al ruim.
 *
 * `start` en niet `right`: deze regel raakt óók Arabisch dat middenin een Nederlandse
 * alinea staat. Zo'n span heeft geen dir="rtl" en moet gewoon met de zin meelopen.
 */
.rb-artikel__tekst :lang(ar),
.rb-artikel__tekst [lang="ar"] {
	text-align: start;
	hyphens: none;
}

/* De inleiding krijgt iets meer lucht dan de rest. */
.rb-artikel__tekst > p:first-child {
	font: var(--t-lead);
}

/* Brede uitlijning is er voor beeld, tabellen en schema's — niet voor tekst. */
.rb-artikel__tekst > .alignwide {
	max-width: min(100%, calc(var(--measure) + var(--s10)));
}

.rb-artikel__tekst > .alignfull {
	max-width: none;
	width: auto;
	margin-inline: calc(var(--gutter) * -1);
}

.rb-artikel__tekst > :is(p, ul, ol, dl, h2, h3, h4, blockquote):is(.alignwide, .alignfull) {
	max-width: var(--measure);
	width: auto;
	margin-inline: auto;
}

.rb-artikel__paginas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2);
	padding-top: var(--s5);
	border-top: var(--bw) solid var(--rule);
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--muted);
}

.rb-artikel__paginas a,
.rb-artikel__paginas > span > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--tap);
	min-height: var(--tap);
	border: var(--bw) solid var(--border);
}

/* --- vaste ondertekening --- */

/*
 * Sluit het tekstvel af: dunne lijn, gedempt, gecentreerd. De lezer moet zien dat het
 * betoog hier ophoudt zonder dat de afsluiting zelf om aandacht vraagt. --rule mag dit,
 * want de lijn is decoratief en niet de enige aanduiding van iets (CONTRACT.md §2).
 *
 * Staat op de leeskolom en niet op de volle velbreedte, zodat hij precies onder de tekst
 * uitkomt en niet als een losse band onder het artikel hangt.
 */
.rb-ondertekening {
	max-width: var(--measure);
	margin: var(--s8) auto 0;
	padding-top: var(--s6);
	border-top: var(--bw) solid var(--rule);
	text-align: center;
}

/*
 * --t-caption is 16px/1.5. De 16px is precies de ondergrens uit CLAUDE.md §3 en dus in
 * orde, maar de regelafstand wordt hier op --lh-body gezet: dit zijn twee volle zinnen
 * en geen bijschrift van drie woorden, en voor lopende tekst geldt minimaal 1,6.
 *
 * De eigen --measure is hier geen doublure van die op .rb-ondertekening: ch rekent met
 * de fontgrootte van het element zelf. Op de aside staat 57ch bij 20px (535px, ruimte
 * voor 81 tekens); op deze alinea van 16px is dezelfde 57ch 428px en dus ±65 tekens —
 * binnen de 60-75 uit CLAUDE.md §3. Zonder deze regel wordt de kleinste tekst op de
 * pagina de breedste. De randlijn blijft wél op de volle velbreedte staan.
 */
.rb-ondertekening__motto {
	margin: 0 auto;
	max-width: var(--measure);
	font: var(--t-caption);
	line-height: var(--lh-body);
	color: var(--muted);
	text-wrap: pretty;
}

/*
 * De merkregel krijgt de nadruk: niet groter, maar donkerder en zwaarder. Gentium Basic
 * heeft alleen 400 en 700 (CLAUDE.md §5) — een tussenwaarde laat de browser een halfvet
 * verzinnen, en op een schreefletter is dat meteen te zien. Cursief zou hier ook kunnen,
 * maar er is geen cursieve 700; die combinatie zou dus alsnog synthetisch worden.
 */
.rb-ondertekening__merk {
	margin: var(--s4) auto 0;
	max-width: var(--measure);
	font: var(--t-caption);
	font-weight: 700;
	line-height: var(--lh-body);
	color: var(--text);
	text-wrap: balance;
}

/* ------------------------------------------------------------------ *
 * 6. Koppen en initiaal
 * ------------------------------------------------------------------ */

/*
 * H2 is op mobiel 22px en blijft daarmee onder de 24px waarop --heading pas genoeg
 * contrast haalt (4,06:1). Tot 960px dus --heading-safe; daarboven groeit hij naar
 * 28px en mag --heading (CONTRACT.md §2).
 */
.rb-artikel__tekst h2 {
	font: var(--t-h2);
	letter-spacing: var(--tr-display);
	color: var(--heading-safe);
	text-align: center;
	text-wrap: balance;
	margin-block: calc(var(--block) + var(--s5)) var(--s4);
}

.rb-artikel__tekst h3 {
	font: var(--t-h3);
	color: var(--text);
	text-wrap: balance;
	margin-block: calc(var(--block) + var(--s2)) var(--s3);
}

.rb-artikel__tekst h4 {
	font: var(--t-h3);
	font-weight: 700;
	color: var(--text);
	margin-block: var(--block) var(--s3);
}

/*
 * Marges van buren klappen samen tot de grootste waarde. Zonder deze regel zou de
 * ruime blokafstand van de alinea de kleine afstand onder de kop opeten en zweeft de
 * kop los tussen twee alinea's.
 */
.rb-artikel__tekst :is(h2, h3, h4) + * {
	margin-block-start: var(--s4);
}

/* Ankersprong: de kop moet onder een meelopende sitekop uit komen. */
.rb-artikel__tekst :is(h2, h3, h4)[id] {
	scroll-margin-top: calc(var(--header-h) + var(--s4));
}

/*
 * De initiaal staat uit op mobiel: hij kost ruim 60 van de 280px tekstbreedte die er
 * op 320px overblijft. Vanaf 480px is er ruimte en komt hij terug.
 * ::first-letter en geen span in de content — de auteur hoeft er niets voor te doen.
 */
@media (min-width: 480px) {

	.rb-artikel__tekst > p:first-child::first-letter {
		float: left;
		font-family: var(--font-display);
		font-size: var(--dropcap-fs);
		font-weight: 700;
		line-height: var(--dropcap-lh);
		color: var(--heading);
		padding-top: var(--dropcap-pt);
		margin-right: var(--dropcap-mr);
	}
}

/* ------------------------------------------------------------------ *
 * 7. Citaat
 * ------------------------------------------------------------------ */

.rb-artikel__tekst :is(blockquote, .wp-block-quote) {
	background: var(--bg);
	padding: var(--s6) var(--s5);
	border: 0;
	color: var(--text);
}

/*
 * Vanaf 640px geldt de regellengte-eis van 60-75 tekens (MEMORY.md B5), en daar
 * werkte de horizontale padding tegen: 20px aan weerszijden hield van de leeskolom
 * van 534px nog 494px over, waarmee de vertaalregel op 59 tekens uitkwam — net
 * eronder. Gemeten met check-mobiel.py, niet geschat.
 *
 * Het citaatvlak blijft herkenbaar doordat het een eigen achtergrondkleur heeft;
 * daar is geen brede binnenmarge voor nodig. Op mobiel blijft de ruimere padding
 * staan, want daar is de kolom toch smaller dan de norm en oogt krap lelijk.
 */
@media (min-width: 640px) {
	.rb-artikel__tekst :is(blockquote, .wp-block-quote) {
		padding-inline: var(--s3);

		/*
		 * En daarom óók breder: `.rb-artikel__tekst > *` kapt elk blok af op --measure,
		 * maar bij een blok met padding is dat de BUITENmaat. De tekst erbinnen wordt
		 * dan de leesregel min tweemaal de padding — gemeten 457px in plaats van 479px,
		 * waarmee de vertaalregel op 59 tekens uitkwam, net onder de 60.
		 *
		 * Door het blok precies zijn eigen padding breder te maken, landt de tekst
		 * erbinnen exact op de leesregel. Hetzelfde geldt voor het aandachtsblok.
		 */
		max-width: calc(var(--measure) + var(--s3) * 2);
	}

	.rb-artikel__tekst > :is(.wp-block-group.is-style-callout, .rb-callout) {
		max-width: calc(var(--measure) + var(--s5) * 2);
	}
}

.rb-artikel__tekst :is(blockquote, .wp-block-quote) > p {
	margin-block: var(--s4);
}

.rb-artikel__tekst :is(blockquote, .wp-block-quote) > :first-child {
	margin-block-start: 0;
}

.rb-artikel__tekst :is(blockquote, .wp-block-quote) > :last-child {
	margin-block-end: 0;
}

.rb-artikel__tekst :is(blockquote, .wp-block-quote) cite {
	display: block;
	margin-top: var(--s4);
	font: var(--t-label);
	font-style: normal;
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--muted);
	text-align: right;
}

/*
 * Het patroon uit CONTRACT.md §7: Arabische regel, vertaling, bron — in één alinea,
 * gescheiden door regelafbrekingen. De regels krijgen in PHP ieder een span, omdat CSS
 * ze anders niet los kan aanspreken.
 *
 * Er zijn twee schrijfwijzen, en beide landen op dezelfde drie klassen:
 *   1. Arabisch / "Vertaling: …" / "Bron: …"
 *   2. Arabisch / *"…"* — bron          (vertaling en bron op één getypte regel)
 * Bij de tweede vorm splitst de PHP op de em-dash; de opmaak hieronder merkt daar
 * niets van, en dat is de bedoeling.
 */
.rb-citaat .rb-citaat__arabisch,
.rb-citaat .rb-citaat__vertaling,
.rb-citaat .rb-citaat__bron,
.rb-citaat .rb-citaat__regel {
	display: block;
}

.rb-citaat .rb-citaat__arabisch {
	/*
	 * Arabisch met ḥarakāt is hoger dan Latijnse tekst: de klinkertekens staan boven en
	 * onder de letter. Met de gewone 1,7 raken ze de regel erboven.
	 */
	font-size: 1.28em;
	line-height: 1.9;
	color: var(--text);
	margin-bottom: var(--s3);
	overflow-wrap: break-word;
}

.rb-citaat .rb-citaat__vertaling {
	/* Links uitlijnen: gecentreerde lopende tekst leest aantoonbaar trager. */
	text-align: left;
	line-height: var(--lh-body);

	/*
	 * In de tweede schrijfwijze is de héle vertaling cursief. Over meerdere regels
	 * leest dat al zwaarder; een losstaand slotwoord maakt het erger.
	 */
	text-wrap: pretty;
}

/*
 * De bron staat een regel lager, kleiner en gedempt — hij hoort bij het citaat maar is
 * niet het citaat. Uitlijning expliciet links, want in de tweede schrijfwijze stond hij
 * in de brontekst achter de vertaling en zou hij anders een uitlijning erven die voor
 * het hele citaatblok bedoeld was.
 */
.rb-citaat .rb-citaat__bron {
	margin-top: var(--s3);
	font: var(--t-caption);
	color: var(--muted);
	text-align: left;
}

/*
 * Lettertype, kapitalisatie en letterspatiëring voor Arabisch staan sitebreed in
 * basis.css (CONTRACT.md §5.14). Hier alleen wat daar ontbreekt: de regelhoogte binnen
 * lopende tekst. Naskh met ḥarakāt is hoger dan Latijn — de klinkertekens staan boven
 * én onder de letter en raken bij 1,7 de regel erboven.
 */
.rb-artikel__tekst :lang(ar),
.rb-reactie__tekst :lang(ar) {
	line-height: 1.9;
}

/* --- blokstijlen op core/quote (geregistreerd door de mu-plugin) --- */

/*
 * De blokstijlen zijn een verbetering, geen voorwaarde: het bestaande bericht gebruikt
 * het kale citaatblok en moet er zonder ingreep van de auteur al goed uitzien. Daarom
 * staat de opmaak hierboven op `blockquote` zelf en verfijnen deze regels alleen.
 *
 * .rb-citaat zet de PHP erop zodra hij het patroon herkend heeft en de regels ieder een
 * eigen span hebben gekregen. Ontbreekt die klasse, dan valt de stijl terug op de hele
 * alinea — meer kan CSS niet, want los van markup is een schrift niet te selecteren.
 */

.wp-block-quote.is-style-bron .rb-citaat__bron,
.wp-block-quote.is-style-arabisch .rb-citaat__bron {
	font: var(--t-caption);
	color: var(--muted);
}

.wp-block-quote.is-style-bron .rb-citaat__vertaling,
.wp-block-quote.is-style-arabisch .rb-citaat__vertaling {
	text-align: left;
	line-height: var(--lh-body);
}

/*
 * Naskh met ḥarakāt heeft méér regelhoogte nodig dan Latijnse tekst: de klinkertekens
 * staan boven én onder de letter en raken bij 1,7 de regel erboven.
 */
.wp-block-quote.is-style-arabisch p {
	line-height: 1.9;
}

.wp-block-quote.is-style-arabisch .rb-citaat__arabisch {
	font-size: 1.35em;
}

/* Geen herkend patroon: dan maar de hele alinea groter, dat is hier de bedoeling. */
.wp-block-quote.is-style-arabisch:not(.rb-citaat) p {
	font-size: 1.28em;
}

/* --- blokstijl op core/table --- */

.wp-block-table.is-style-compact .rb-schuif :is(th, td) {
	padding: var(--s2) var(--s3);
}

/* ------------------------------------------------------------------ *
 * 8. Lijsten, tabel, code, beeld, scheiding, details, aandachtsblok
 * ------------------------------------------------------------------ */

/*
 * list-style terugzetten. basis.css zet `ul[class], ol[class] { list-style: none }` met
 * de bedoeling dat alleen componenten (menu, paginering) hun opsommingsteken verliezen —
 * maar de blokeditor zet `class="wp-block-list"` op élke lijst in de content, dus die
 * attribuutselector greep de artikellijsten net zo goed.
 *
 * Gevolg was niet alleen kosmetisch: de serie-index heeft genummerde lijsten en de
 * slotalinea daarvan verwijst letterlijk naar "posts 7 en 9", terwijl er nergens een 7
 * of een 9 op het scherm stond. De inspringing van 24px hieronder stond er al — alleen
 * het teken zelf ontbrak, en dan lijkt het een bewuste keuze.
 *
 * `revert` en geen `disc`/`decimal`: dan blijft het onderscheid tussen ul en ol staan,
 * inclusief de geneste varianten (circle, square, lower-alpha) die de browser zelf kiest.
 */
.rb-artikel__tekst :is(ul, ol) {
	padding-left: var(--s6);
	list-style: revert;
}

.rb-artikel__tekst li + li {
	margin-top: var(--s2);
}

.rb-artikel__tekst li > :is(ul, ol) {
	margin-block: var(--s2);
}

/* Een lange URL of een lang woord mag de kolom niet uit duwen. */
.rb-artikel__tekst :is(p, li, dd, td, th) {
	overflow-wrap: break-word;
}

/* --- tabel --- */

.rb-artikel__tekst .wp-block-table {
	margin-inline: auto;
}

.rb-artikel__tekst figcaption {
	margin-top: var(--s3);
	font: var(--t-caption);
	color: var(--muted);
}

/*
 * Schuifregio. De twee bovenste laagjes schuiven mee met de inhoud en dekken de
 * schaduw af zodra die kant bereikt is; de twee onderste staan stil. Zo is aan de rand
 * te zien dát er meer staat, zonder JavaScript.
 */
.rb-schuif {
	overflow-x: auto;
	border: var(--bw) solid var(--rule);
	background:
		linear-gradient(to right, var(--surface), transparent) 0 0 / var(--s5) 100% no-repeat local,
		linear-gradient(to left, var(--surface), transparent) 100% 0 / var(--s5) 100% no-repeat local,
		linear-gradient(to right, var(--rule), transparent) 0 0 / var(--s3) 100% no-repeat scroll,
		linear-gradient(to left, var(--rule), transparent) 100% 0 / var(--s3) 100% no-repeat scroll;
}

/* De focusring van een schuifregio valt buiten de rand weg; daarom naar binnen. */
.rb-schuif:focus-visible,
.rb-artikel__tekst pre:focus-visible {
	outline: var(--focus-w) solid var(--focus);
	outline-offset: calc(var(--focus-off) * -1);
}

.rb-schuif table {
	/* max-content en geen pixelgetal: de tabel bepaalt zelf hoe breed hij moet zijn. */
	min-width: max-content;
	width: 100%;
	border-collapse: collapse;
	font: var(--t-body);
}

.rb-schuif :is(th, td) {
	padding: var(--s3) var(--s4);
	border-bottom: var(--bw) solid var(--rule);
	text-align: left;
	vertical-align: top;
}

.rb-schuif th {
	background: var(--bg);
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--muted);
}

.rb-schuif tr:last-child :is(th, td) {
	border-bottom: 0;
}

.rb-schuif__hint {
	margin-block: var(--s2) 0;
	font: var(--t-caption);
	color: var(--muted);
}

/* --- code --- */

.rb-artikel__tekst :is(pre, .wp-block-code) {
	overflow-x: auto;
	background: var(--bg);
	border: var(--bw) solid var(--rule);
	padding: var(--s4);
	font: var(--t-code);
	color: var(--text);
}

.rb-artikel__tekst :is(pre, .wp-block-code) code {
	font: var(--t-code);
	background: none;
	padding: 0;
}

.rb-artikel__tekst :not(pre) > code {
	font-family: var(--font-mono);
	font-size: 0.9em;
	background: var(--bg);
	padding: 0 var(--s1);
}

/* --- beeld in de tekst --- */

/*
 * margin-inline: auto en nooit "margin: … 0" — dat laatste wint op specificiteit van
 * de automarges waar een gecentreerde figure op rekent (MEMORY.md V6).
 */
.rb-artikel__tekst :is(.wp-block-image, figure) {
	margin-inline: auto;
}

.rb-artikel__tekst :is(.wp-block-image, figure) img {
	display: block;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

.rb-artikel__tekst .aligncenter {
	margin-inline: auto;
}

.rb-artikel__tekst .alignleft,
.rb-artikel__tekst .alignright {
	/* Op mobiel is er geen ruimte om tekst omheen te laten lopen. */
	float: none;
	margin-inline: auto;
}

/* --- scheiding --- */

.rb-artikel__tekst :is(hr, .wp-block-separator) {
	border: 0;
	border-top: var(--bw) solid var(--rule);
	max-width: var(--measure);
	margin-block: var(--section);
}

.rb-artikel__tekst .wp-block-separator.is-style-wide {
	max-width: var(--measure);
}

/* --- details --- */

.rb-artikel__tekst :is(details, .wp-block-details) {
	background: var(--bg);
	padding: var(--s4) var(--s5);
}

.rb-artikel__tekst :is(details, .wp-block-details) > summary {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	cursor: pointer;
	font-weight: 700;
}

/* --- aandachtsblok: blokstijl "callout" op core/group (mu-plugin) --- */

.rb-artikel__tekst .wp-block-group.is-style-callout {
	background: var(--callout);
	border-left: var(--bw-thick) solid var(--accent);
	padding: var(--s5);
}

.rb-artikel__tekst .wp-block-group.is-style-callout > * {
	max-width: none;
	margin-block: var(--s3);
}

.rb-artikel__tekst .wp-block-group.is-style-callout > :first-child {
	margin-block-start: 0;
}

.rb-artikel__tekst .wp-block-group.is-style-callout > :last-child {
	margin-block-end: 0;
}

/* ------------------------------------------------------------------ *
 * 9. Voetnoten
 * ------------------------------------------------------------------ */

/*
 * De verwijzing in de tekst is klein. Met negatieve marges om de padding heen wordt het
 * tikvlak groot genoeg zonder dat de regelafstand verspringt.
 */
.rb-artikel__tekst :is(sup, sub) a {
	display: inline-block;
	padding: var(--s3) var(--s2);
	margin: calc(var(--s3) * -1) calc(var(--s1) * -1);
	text-decoration: none;
}

.rb-noten {
	border-top: var(--bw) solid var(--rule);
	padding-top: var(--s5);
}

.rb-noten__label {
	display: block;
	margin-bottom: var(--s3);
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--muted);
}

.rb-noten .wp-block-footnotes {
	margin: 0;
	padding-left: var(--s6);
	font: var(--t-caption);
	color: var(--muted);
}

.rb-noten .wp-block-footnotes li {
	margin-bottom: var(--s3);
}

.rb-noten .wp-block-footnotes li a {
	display: inline-block;
	min-height: var(--s6);
	padding: var(--s1) var(--s2);
}

/* ------------------------------------------------------------------ *
 * 10. Reeks, onderwerpen, vorige/volgende, lees ook
 * ------------------------------------------------------------------ */

.rb-reeks {
	padding: var(--s5) var(--gutter);
	background: var(--callout);
	border-left: var(--bw-thick) solid var(--accent);
}

/*
 * align-items is center en niet baseline: de reeksnaam hieronder is een link en dus een
 * tikvlak van 48px hoog. Op een gedeelde basislijn zou dat blok de tekst ernaast ("deel 3
 * van 11") met de halve tikvlakhoogte omhoog trekken; op het midden staan ze gelijk.
 */
.rb-reeks__label {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--s2) var(--s4);
	margin: 0;
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

.rb-reeks__naam {
	color: var(--accent);
}

/*
 * Alleen de <a>-variant. Op de reeksarchiefpagina zelf is dit een <span> — die wijst
 * nergens heen, is geen tikvlak, en zou met 48px hoogte alleen maar lucht toevoegen.
 * Gemeten op 1280px was de link 334 x 19,6px: de enige die onder de 48px zat.
 */
a.rb-reeks__naam {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

.rb-reeks__positie {
	color: var(--muted);
}

.rb-reeks__stappen {
	list-style: none;
	margin: var(--s3) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--s2);
}

.rb-reeks__stap a {
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	min-height: var(--tap);
	justify-content: center;
	text-decoration: none;
}

.rb-reeks__richting {
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--muted);
}

.rb-reeks__titel {
	font: var(--t-body);
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- onderwerpen --- */

.rb-tags {
	padding: var(--s6) var(--gutter);
}

.rb-tags__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2);
}

.rb-tags__tag {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding: 0 var(--s4);
	border: var(--bw) solid var(--border);
	color: var(--muted);
	text-decoration: none;
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
}

/* --- vorige / volgende --- */

.rb-omliggend {
	display: grid;
	grid-template-columns: 1fr;
	border-top: var(--bw) solid var(--rule);
}

.rb-omliggend__link {
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	justify-content: center;
	min-height: var(--tap);
	padding: var(--s4) var(--gutter);
	text-decoration: none;
	border-bottom: var(--bw) solid var(--rule);
}

.rb-omliggend__link--volgende {
	text-align: right;
	align-items: flex-end;
}

.rb-omliggend__richting {
	display: flex;
	align-items: center;
	gap: var(--s2);
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--muted);
}

.rb-omliggend__pijl {
	display: grid;
	place-items: center;
}

.rb-omliggend__titel {
	font: var(--t-body);
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- lees ook --- */

.rb-lees-ook {
	padding: var(--s8) var(--gutter);
	background: var(--bg);
	border-top: var(--bw) solid var(--rule);
}

/*
 * font-size apart, ná de shorthand: dit is een <h2>, en een kop mag nooit onder 16px
 * (CLAUDE.md §3). --t-label staat op 14px, wat klopt voor een label maar niet voor een
 * kop. Gemeten op de artikelpagina zodra er een tweede bericht bestond — met één
 * bericht wordt dit blok niet gerenderd en was het dus nooit te meten.
 */
.rb-lees-ook__kop {
	margin: 0 0 var(--s5);
	font: var(--t-label);
	font-size: var(--fs-meta);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--muted);
	text-align: center;
}

.rb-lees-ook__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--s4);
}

.rb-lees-ook__link {
	display: flex;
	flex-direction: column;
	gap: var(--s1);
	min-height: var(--tap);
	justify-content: center;
	padding: var(--s3) 0;
	border-bottom: var(--bw) solid var(--rule);
	text-decoration: none;
}

.rb-lees-ook__titel {
	font: 700 var(--fs-lead)/1.35 var(--font-display);
	letter-spacing: -0.01em;
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rb-lees-ook__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s2) var(--s4);
	font: var(--t-caption);
	color: var(--muted);
}

/* ------------------------------------------------------------------ *
 * 11. Reeksarchief
 * ------------------------------------------------------------------ */

.rb-reeksarchief {
	max-width: calc(var(--leeskolom) + var(--gutter) * 2);
	margin-inline: auto;
}

.rb-reeksarchief__kop {
	padding: var(--s6) var(--gutter) var(--s5);
	display: flex;
	flex-direction: column;
	gap: var(--s3);
}

.rb-reeksarchief__label {
	margin: 0;
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--accent);
}

.rb-reeksarchief__titel {
	margin: 0;
	font: var(--t-h1);
	letter-spacing: var(--tr-display);
	text-transform: uppercase;
	color: var(--heading);
	text-wrap: pretty;
}

.rb-reeksarchief__omschrijving {
	font: var(--t-body);
	color: var(--text);
	max-width: var(--measure);
}

.rb-reeksarchief__aantal {
	margin: 0;
	font: var(--t-caption);
	color: var(--muted);
}

.rb-reeksarchief__lijst {
	border-top: var(--bw) solid var(--rule);
}

/*
 * Het deelnummer staat náást de rij en niet erin: de rij is één grote link uit
 * layout.css en daar hoort geen tweede tekstblok in. De onderlinge afstand komt uit de
 * padding van de rij, dus hier alleen de bovenkant en dezelfde goot.
 */
.rb-reeksarchief__deelnummer {
	margin: 0;
	padding: var(--s4) var(--gutter) 0;
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--muted);
}

/* De rij eronder hoeft niet nog eens dezelfde ruimte bovenaan. */
.rb-reeksarchief__deelnummer + .rb-lijst__item .rb-lijst__rij {
	padding-top: var(--s2);
}

/* ------------------------------------------------------------------ *
 * 12. Breekpunten
 * ------------------------------------------------------------------ */

/* Hover pas vanaf hier: op een touchscreen blijft een hover-stand anders plakken. */
@media (hover: hover) {

	.rb-toc__link:hover,
	.rb-artikel__meta a:hover {
		color: var(--accent-hover);
	}

	.rb-tags__tag:hover {
		color: var(--text);
		border-color: var(--text);
	}

	.rb-omliggend__link:hover .rb-omliggend__titel,
	.rb-lees-ook__link:hover .rb-lees-ook__titel,
	.rb-reeks__stap a:hover .rb-reeks__titel {
		color: var(--accent-hover);
		text-decoration-thickness: 2px;
	}
}

@media (min-width: 480px) {

	.rb-lees-ook__lijst {
		grid-template-columns: 1fr 1fr;
		gap: var(--s5);
	}
}

@media (min-width: 640px) {

	.rb-artikel__kop {
		padding-top: var(--s9);
	}

	.rb-omliggend {
		grid-template-columns: 1fr 1fr;
	}

	.rb-omliggend__link--vorige {
		border-right: var(--bw) solid var(--rule);
	}
}

@media (min-width: 960px) {

	/*
	 * Vanaf hier komt de inhoudsopgave uit de lade naar de kantlijn. Het middenspoor
	 * blijft precies zo breed als op mobiel bedoeld: de leeskolom verandert niet mee
	 * met het scherm, alleen de ruimte eromheen.
	 */
	.rb-artikel__vel {
		padding: var(--s9) var(--gutter);
	}



	.rb-toc--kant .rb-toc__lijst {
		list-style: none;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: var(--s1);
	}

	.rb-toc--kant .rb-toc__link {
		font: var(--t-caption);
		color: var(--muted);
		border-left: var(--bw-thick) solid var(--rule);
		padding: var(--s1) var(--s3);
		text-decoration: none;
	}

	/* H2 is hier 28px en haalt daarmee ruim het contrast van --heading. */
	.rb-artikel__tekst h2 {
		color: var(--heading);
	}

	.rb-artikel__titel {
		max-width: 20ch;
		margin-inline: auto;
		text-wrap: balance;
	}
}

@media (hover: hover) and (min-width: 960px) {

	.rb-toc--kant .rb-toc__link:hover {
		color: var(--text);
		border-left-color: var(--accent);
	}
}


/* ========================================================= breekpunt 1200 */

/*
 * Pas hier komt de inhoudsopgave uit de lade naar de kantlijn.
 *
 * Niet op 960px, waar het ontwerp hem zette: een kantlijn van 200px, 32px
 * tussenruimte, een leeskolom van 760px en 2x32px padding vragen samen 1056px. Op
 * 960px werd de leeskolom daardoor tot 536px geknepen en zakte de regellengte naar
 * 55-62 tekens — onder de ondergrens uit CLAUDE.md §3, en juist op de plek waar de
 * lezer het langst zit. Gemeten met check-mobiel.py.
 *
 * Tussen 960 en 1200px blijft de opgave dus de uitklaplade, en die staat daar prima:
 * hij werkt zonder JavaScript en kost dicht maar 48px.
 */
@media (min-width: 1200px) {
	.rb-artikel__raster {
		display: grid;
		grid-template-columns: var(--toc-breedte) minmax(0, var(--leeskolom)) 1fr;
		gap: var(--s7);
		align-items: start;
		padding-inline: var(--s7);
		background: none;
	}

	/*
	 * Expliciet plaatsen, niet op volgorde vertrouwen.
	 *
	 * De inhoudsopgave verschijnt alleen bij drie of meer tussenkoppen. Bij een
	 * artikel zonder opgave was het tekstvel het eerste kind en belandde het dus in
	 * kolom 1 — de kantlijn van 200px. Het hele artikel werd daardoor in een strook
	 * van 200px geperst, met driekwart van de pagina leeg ernaast.
	 *
	 * Het viel niet op in de metingen omdat de kantlijn pas vanaf 1200px bestaat en
	 * check-mobiel standaard tot 768px meet. Gemeten na het publiceren van artikelen
	 * zonder opgave.
	 */
	.rb-toc--kant {
		grid-column: 1;
	}

	.rb-artikel__vel {
		grid-column: 2;
	}

	/*
	 * Kop en voet staan buiten het raster en werden dus gecentreerd op de héle pagina,
	 * terwijl de tekst vanaf hier naar rechts schuift om plaats te maken voor de
	 * kantlijn. Gemeten op 1660px: het tekstvel liep van 494 tot 1254, de reeksbalk en
	 * het blok vorige/volgende van 402 tot 1258. Links 92px eruit, rechts 4px — net
	 * genoeg verschil om als slordigheid te lezen in plaats van als opzet.
	 *
	 * Ze krijgen daarom dezelfde linkermarge als het middenspoor: de padding van het
	 * raster, plus de kantlijn, plus de tussenruimte. Dezelfde regel als in
	 * reacties.css; alles onder het artikel deelt nu één linkerlijn met de tekst.
	 */
	.rb-artikel__kop,
	.rb-artikel__voet {
		max-width: var(--leeskolom);
		margin-inline: calc(var(--s7) + var(--toc-breedte) + var(--s7)) 0;
	}

	.rb-toc--lade {
		display: none;
	}

	.rb-toc--kant {
		display: flex;
		flex-direction: column;
		gap: var(--s3);
		position: sticky;
		top: calc(var(--header-h) + var(--s4));
		justify-self: end;
		width: var(--toc-breedte);
		max-height: calc(100vh - var(--header-h) - var(--s7));
		overflow-y: auto;
	}
}