/*
 * reacties.css — de reactielijst en het reactieformulier.
 *
 * Mobiel is de basis. Alles werkt zonder JavaScript, inclusief het uitklappen van een
 * lange reactie. Alleen tokens uit CONTRACT.md.
 *
 * Inhoud
 *  1. Sectie
 *  2. Lijst en nesting
 *  3. Eén reactie
 *  4. Lange reactie inklappen
 *  5. Formulier
 *  6. Toestanden
 *  7. Breekpunten
 */

/* ------------------------------------------------------------------ *
 * 1. Sectie
 * ------------------------------------------------------------------ */

.rb-reacties {
	padding: var(--s8) var(--gutter) var(--s9);
	background: var(--surface);
	border-top: var(--bw) solid var(--rule);
	max-width: calc(var(--leeskolom) + var(--gutter) * 2);
	margin-inline: auto;
}

/*
 * Vanaf 1200px staat de leeskolom NIET in het midden van de pagina: de kantlijn met
 * de inhoudsopgave duwt hem naar rechts. Gemeten raster op 1280px: 200 | 760 | 112,
 * dus de tekst loopt van 304 tot 1064 terwijl een gecentreerd blok van 212 tot 1068
 * liep — 92px te ver naar links en 96px te breed.
 *
 * Het reactieblok krijgt daarom dezelfde linkermarge als het middenspoor van het
 * artikelraster: de padding van het raster, plus de kantlijn, plus de tussenruimte.
 * Zo staat de reactietekst exact onder de artikeltekst.
 *
 * 1200 en niet 960: het raster wórdt pas een raster op 1200px (artikel.css). Tussen
 * 960 en 1199 bestaat die kantlijn niet en stond de hele tekst gewoon gecentreerd —
 * de compensatie duwde het reactieblok daar 264px naar rechts zonder reden. Gemeten
 * op 1100px: tekst gecentreerd op 600, reactieblok op 644.
 */
@media (min-width: 1200px) {
	.rb-reacties {
		max-width: var(--leeskolom);
		margin-inline: calc(var(--s7) + var(--toc-breedte) + var(--s7)) 0;
	}
}

.rb-reacties__kop {
	margin: 0 0 var(--s6);
	font: var(--t-h2);
	letter-spacing: var(--tr-display);
	/* 22px op mobiel: onder de 24px waarop --heading pas 4,5:1 haalt. */
	color: var(--heading-safe);
	text-align: center;
}

/* Zonder eigen definitie van het thema: een lege toestand is gedempte lopende tekst. */
:where(.rb-leeg) {
	font: var(--t-body);
	color: var(--muted);
	margin: 0;
}

/* ------------------------------------------------------------------ *
 * 2. Lijst en nesting
 * ------------------------------------------------------------------ */

.rb-reacties__lijst,
.rb-reacties__antwoorden {
	list-style: none;
	margin: 0;
	padding: 0;
}

.rb-reacties__lijst > .rb-reactie + .rb-reactie {
	margin-top: var(--s6);
	padding-top: var(--s6);
	border-top: var(--bw) solid var(--rule);
}

.rb-reacties__antwoorden {
	margin-top: var(--s5);
}

.rb-reacties__antwoorden > .rb-reactie + .rb-reactie {
	margin-top: var(--s5);
}

/*
 * Niveau 2 springt één stap in. Verder dan dat gaat het niet: vanaf niveau 3 vervalt de
 * inspringing en zegt een regel boven de reactie op wie er gereageerd wordt. Op 360px
 * blijft er anders geen leesbare kolom over.
 */
.rb-reacties__antwoorden--niveau-2 {
	margin-left: var(--s4);
	padding-left: var(--s4);
	border-left: var(--bw) solid var(--rule);
}

.rb-reacties__antwoorden--niveau-3,
.rb-reacties__antwoorden--niveau-4 {
	margin-left: 0;
	padding-left: 0;
	border-left: 0;
}

/* ------------------------------------------------------------------ *
 * 3. Eén reactie
 * ------------------------------------------------------------------ */

.rb-reactie__kaart {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
}

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

.rb-reactie__kop {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--s1) var(--s4);
}

.rb-reactie__naam {
	font: var(--t-h3);
	color: var(--text);
}

.rb-reactie__datum {
	font: var(--t-caption);
	color: var(--muted);
}

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

.rb-reactie__tekst p {
	margin-block: var(--s3);
	max-width: var(--measure);
	overflow-wrap: break-word;
}

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

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

.rb-reactie__tekst :is(ul, ol) {
	padding-left: var(--s6);
}

.rb-reactie__moderatie {
	margin: 0;
	padding: var(--s3) var(--s4);
	background: var(--callout);
	border-left: var(--bw-thick) solid var(--accent);
	font: var(--t-caption);
	color: var(--text);
}

.rb-reactie__antwoordlink {
	margin: 0;
}

/* Het tikvlak van "Antwoorden" is een van de kleinste op de pagina — dus expliciet. */
.rb-reactie__antwoordlink a,
.rb-reactie .comment-reply-link {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	padding-right: var(--s3);
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: none;
}

/* ------------------------------------------------------------------ *
 * 4. Lange reactie inklappen — zonder JavaScript
 * ------------------------------------------------------------------ */

.rb-reactie__vouw {
	display: block;
	cursor: pointer;
	list-style: none;
}

.rb-reactie__vouw::-webkit-details-marker {
	display: none;
}

.rb-reactie__fragment {
	display: block;
	font: var(--t-body);
	color: var(--text);
	overflow-wrap: break-word;
}

.rb-reactie__vouwlabel {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	margin-top: var(--s2);
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.rb-reactie__minder {
	display: none;
}

/* Open: het fragment verdwijnt, de volledige tekst staat eronder. */
.rb-reactie__tekst--lang[open] .rb-reactie__fragment,
.rb-reactie__tekst--lang[open] .rb-reactie__meer {
	display: none;
}

.rb-reactie__tekst--lang[open] .rb-reactie__minder {
	display: inline;
}

.rb-reactie__volledig {
	margin-top: var(--s3);
}

.rb-reactie__volledig p {
	margin-block: var(--s3);
	max-width: var(--measure);
	overflow-wrap: break-word;
}

/* ------------------------------------------------------------------ *
 * 5. Formulier
 * ------------------------------------------------------------------ */

.rb-reactieformulier__kop {
	margin: var(--s8) 0 var(--s5);
	font: var(--t-h3);
	color: var(--text);
}

.rb-reactieformulier__annuleer a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
	margin-left: var(--s3);
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	color: var(--muted);
}

.rb-reactieformulier {
	display: flex;
	flex-direction: column;
	gap: var(--s5);
}

.rb-veld {
	display: flex;
	flex-direction: column;
	gap: var(--s2);
	margin: 0;
}

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

/* Verplicht staat er voluit. Een sterretje alleen zegt niets zonder legenda. */
.rb-veld__verplicht {
	letter-spacing: normal;
	text-transform: none;
	color: var(--muted);
}

.rb-veld :is(input[type="text"], input[type="email"], input[type="url"], textarea) {
	width: 100%;
	box-sizing: border-box;
	min-height: var(--tap);
	padding: var(--s3) var(--s4);
	border: var(--bw) solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
	font: var(--t-body);
	color: var(--text);
}

.rb-veld textarea {
	line-height: var(--lh-body);
	resize: vertical;
}

.rb-veld__hint {
	font: var(--t-caption);
	color: var(--muted);
}

/*
 * De foutmelding staat er altijd en is verborgen tot de browser het veld werkelijk
 * afkeurt. :user-invalid slaat pas aan nadat de bezoeker het veld heeft aangeraakt of
 * verzonden — niet al bij het laden van een leeg formulier. Kent een browser het niet,
 * dan blijft de melding verborgen en doet de ingebouwde validatie zijn werk.
 */
.rb-veld__fout {
	display: none;
	font: var(--t-caption);
	color: var(--danger);
}

.rb-veld :is(input, textarea):user-invalid {
	border: var(--bw-thick) solid var(--danger);
}

.rb-veld :is(input, textarea):user-invalid ~ .rb-veld__fout {
	display: block;
}

.rb-veld--keuze {
	flex-direction: row;
	align-items: center;
	gap: var(--s3);
}

.rb-veld--keuze input[type="checkbox"] {
	width: var(--s6);
	height: var(--s6);
	flex: none;
	accent-color: var(--accent);
}

.rb-veld--keuze label {
	display: flex;
	align-items: center;
	min-height: var(--tap);
	letter-spacing: normal;
	text-transform: none;
	font: var(--t-caption);
	color: var(--text);
	cursor: pointer;
}

/* comment_form() zet de knop in een eigen <p>; de ruimte komt hier uit de flex-gap. */
.rb-reactieformulier .form-submit {
	margin: 0;
}

/* Alleen een vangnet: staat .rb-knop al in de basisstijl, dan wint die (zero-specificity). */
:where(.rb-reactieformulier .rb-knop) {
	align-self: flex-start;
	min-height: var(--tap);
	padding: 0 var(--s6);
	border: 0;
	border-radius: var(--radius);
	background: var(--accent);
	color: var(--on-accent);
	font: var(--t-label);
	letter-spacing: var(--tr-label);
	text-transform: uppercase;
	cursor: pointer;
}

.rb-reactieformulier__avg {
	margin: 0;
	font: var(--t-caption);
	color: var(--muted);
	max-width: var(--measure);
}

.rb-reactieformulier .logged-in-as,
.rb-reactieformulier .must-log-in {
	margin: 0;
	font: var(--t-caption);
	color: var(--muted);
}

.rb-reactieformulier .logged-in-as a,
.rb-reactieformulier .must-log-in a {
	display: inline-flex;
	align-items: center;
	min-height: var(--tap);
}

/* ------------------------------------------------------------------ *
 * 6. Toestanden
 * ------------------------------------------------------------------ */

.rb-reacties__gesloten {
	margin: var(--s6) 0 0;
	padding-top: var(--s5);
	border-top: var(--bw) solid var(--rule);
	font: var(--t-caption);
	color: var(--muted);
}

/* ------------------------------------------------------------------ *
 * 7. Breekpunten
 * ------------------------------------------------------------------ */

@media (hover: hover) {

	.rb-reactie__antwoordlink a:hover,
	.rb-reactie .comment-reply-link:hover,
	.rb-reactie__vouwlabel:hover {
		color: var(--accent-hover);
		text-decoration: underline;
		text-decoration-thickness: 2px;
	}

	:where(.rb-reactieformulier .rb-knop):hover {
		background: var(--accent-hover);
	}
}

@media (min-width: 640px) {

	.rb-reacties__antwoorden--niveau-2 {
		margin-left: var(--s6);
		padding-left: var(--s6);
	}
}

@media (min-width: 960px) {

	.rb-reacties {
		padding: var(--s9) var(--gutter) var(--s10);
	}

	.rb-reacties__kop {
		/* 28px vanaf dit breekpunt: dan mag --heading wel. */
		color: var(--heading);
	}
}