/*
 * Het juridische document en de pagina eromheen (spec 2-3, "Juridisch").
 *
 * De pagina is een kolommen-met-zijbalk in een main van 32 en 48 (het
 * sjabloon template-legal.html). Onder 1024 staat de lijst met documenten
 * boven het document, vanaf 1024 ernaast: in de breedte van de zijbalk uit
 * het ontwerpsysteem (custom.kolom.filters, 320), met 64 ertussen. Zonder
 * lijst (een los juridisch document) is er één kolom.
 *
 * Elke h3 van de tekst is een knop met een paneel; de server maakt ze
 * (inc/modules/paginas/juridisch.php). De knop erft letter, maat en kleur van
 * de h3, de rol tussenkop van het thema: de kop blijft een kop. Een dicht
 * paneel is tot-gevonden verborgen; de browser geeft het content-visibility:
 * hidden, zodat zoeken in de pagina de tekst vindt en het paneel opent. Zo'n
 * paneel houdt zijn padding (alleen de inhoud valt weg), dus de ruimte onder
 * de tekst staat op het laatste kind en niet op het paneel.
 *
 * Een brede tabel (het privacybeleid) scrolt in zijn paneel, niet de pagina.
 * Het paneel is de scrollcontainer, en niet de tabel: een tabel met
 * display: block verliest in sommige schermlezers zijn tabelrol. 4 lucht
 * links en rechts, met een even grote negatieve marge, houdt de focusring
 * van een link aan de rand heel.
 *
 * Zonder JavaScript staat elk paneel open (een noscript-stijl in de head),
 * en bij afdrukken ook (onderaan).
 */
.dg-juridisch:has(> .wp-block-dreamglow-juridische-navigatie) {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	row-gap: var(--wp--preset--spacing--32);
}

.dg-juridisch-document__pdf {
	display: inline-flex;
	align-items: center;
	min-block-size: var(--dg-raakvlak);
	margin-block-end: var(--wp--preset--spacing--16);
}

.dg-juridisch-document__titel {
	margin-block: 0 var(--wp--preset--spacing--32);
}

.dg-juridisch__tekst > :first-child {
	margin-block-start: 0;
}

.dg-juridisch__tekst p,
.dg-juridisch__tekst li {
	max-inline-size: var(--wp--style--global--content-size);
}

.dg-juridisch__item {
	margin: 0;
	border-block-start: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}

.dg-juridisch__item:last-child {
	border-block-end: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
}

/* De inleiding vóór de eerste kop staat los van de lijst. */
.dg-juridisch__tekst > :not(.dg-juridisch__item) + .dg-juridisch__item {
	margin-block-start: var(--wp--preset--spacing--32);
}

.dg-juridisch__kop {
	margin: 0;
}

.dg-juridisch__knop {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wp--preset--spacing--24);
	inline-size: 100%;
	min-block-size: var(--dg-raakvlak);
	padding-block: var(--wp--preset--spacing--16);
	padding-inline: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-align: start;
	cursor: pointer;
}

/* Plus, en min als het paneel open is. */
.dg-juridisch__icoon {
	position: relative;
	flex: none;
	inline-size: var(--wp--preset--spacing--16);
	block-size: var(--wp--preset--spacing--16);
}

.dg-juridisch__icoon::before,
.dg-juridisch__icoon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: currentColor;
}

.dg-juridisch__icoon::before {
	block-size: var(--wp--custom--lijn--dik);
}

.dg-juridisch__icoon::after {
	inline-size: var(--wp--custom--lijn--dik);
	transition: transform var(--wp--custom--duur--standaard) var(--wp--custom--curve--standaard);
}

.dg-juridisch__knop[aria-expanded="true"] .dg-juridisch__icoon::after {
	transform: scaleY(0);
}

.dg-juridisch__paneel {
	overflow-x: auto;
	padding-inline: var(--wp--preset--spacing--4);
	margin-inline: calc(-1 * var(--wp--preset--spacing--4));
}

.dg-juridisch__paneel > :first-child {
	margin-block-start: 0;
}

.dg-juridisch__paneel > :last-child {
	margin-block-end: var(--wp--preset--spacing--24);
}

/*
 * Tabellen in de tekst (het privacybeleid heeft er twee), zoals de vorige
 * opzet ze toonde met zijn globale regels: de volle breedte van de kolom,
 * samengevouwen randen, 8 padding, een lijn onder elke cel, links uitgelijnd,
 * en een kop in kapitalen (12, 2 px spatiëring, ink-soft), in Jost 400 en
 * niet vet: één gewicht per letter (ontwerpsysteem §2, regel 3). Het thema
 * heeft geen globale regel voor een tabel; deze staan daarom hier, voor de
 * tekst van een document.
 *
 * :where() houdt de specificiteit op die van een kale table, th of td (0,0,1),
 * zoals de globale regels van de vorige opzet; bij gelijke specificiteit beslist
 * de volgorde van de bladen. De tabel op het cookiebeleid heeft een eigen vorm met
 * klassen (assets/css/cookies.css, op beide sites gelijk), met (0,1,0) voor de
 * tabel en (0,1,1) voor zijn cellen: die wint hier ook, en krijgt alleen wat hij
 * zelf niet zet, de kop in kapitalen. border-box: een tabel is dat al, maar zijn
 * maat is 100%.
 */
:where(.dg-juridisch__tekst) table {
	box-sizing: border-box;
	inline-size: 100%;
	border-collapse: collapse;
}

:where(.dg-juridisch__tekst) :is(th, td) {
	padding: var(--wp--preset--spacing--8);
	border-block-end: var(--wp--custom--lijn--dun) solid var(--wp--preset--color--line);
	text-align: start;
}

:where(.dg-juridisch__tekst) th {
	color: var(--wp--preset--color--ink-soft);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--xs);
	line-height: var(--wp--custom--leading--xs);
	letter-spacing: var(--wp--custom--spatie--groot);
	text-transform: uppercase;
}

@media (hover: hover) {
	.dg-juridisch__knop:hover .dg-juridisch__label {
		text-decoration: underline;
		text-underline-offset: var(--wp--preset--spacing--4);
	}
}

@media (width > 1023px) {
	.dg-juridisch:has(> .wp-block-dreamglow-juridische-navigatie) {
		grid-template-columns: var(--wp--custom--kolom--filters) minmax(0, 1fr);
		column-gap: var(--wp--preset--spacing--64);
		align-items: start;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dg-juridisch__icoon::after {
		transition: none;
	}
}

/*
 * Op papier elk paneel open. Een tot-gevonden verborgen paneel geeft
 * content-visibility: hidden in elk medium, en een browser zonder die waarde
 * maakt er display: none van; dan kwam van een document alleen de lijst met
 * koppen op papier (de vorige opzet had hetzelfde probleem). Het plusje
 * wijst op papier nergens naar, en een tabel is op papier geen scrollvlak.
 */
@media print {
	.dg-juridisch__paneel[hidden] {
		display: block;
		content-visibility: visible;
	}

	.dg-juridisch__paneel {
		overflow: visible;
	}

	.dg-juridisch__icoon {
		display: none;
	}
}