/**
 * Component: Tekstblok
 *
 * Lopende tekst zonder beeld. Vrijwel alles komt uit .bw-prose in
 * base.css; hier staat alleen wat dit component eigen is.
 */

.bw-tekstblok__header {
	margin-block-end: var(--bw-space-md);
}

/*
 * In .bw-prose staat p en li op max-width 68ch, wat op een brede
 * container de regellengte begrenst. In de smalle container is de
 * container zelf al de begrenzing, en dan zorgt die 68ch ervoor dat
 * een tabel of een brede opsomming niet mee-groeit met de rest.
 */
.bw-tekstblok .bw-prose > * {
	max-width: none;
}

.bw-tekstblok__body > h2,
.bw-tekstblok__body > h3 {
	/*
	 * Een tussenkop hoort bij de tekst eronder en niet bij de alinea
	 * erboven. Zonder dit staat hij precies in het midden en is de
	 * indeling van een lange verklaring niet te zien.
	 */
	margin-block-start: var(--bw-space-lg);
}

.bw-tekstblok__body > h2:first-child,
.bw-tekstblok__body > h3:first-child {
	margin-block-start: 0;
}

.bw-tekstblok__body > h3 {
	margin-block-start: var(--bw-space-md);
}

/*
 * Een tabel in een verklaring — bewaartermijnen, verwerkers — mag op
 * een telefoon horizontaal schuiven in plaats van de pagina breder te
 * maken.
 */
.bw-tekstblok__body table {
	display: block;
	width: 100%;
	overflow-x: auto;
	border-collapse: collapse;
}

.bw-tekstblok__body th,
.bw-tekstblok__body td {
	padding: var(--bw-space-2xs) var(--bw-space-sm);
	border-block-end: 1px solid var(--bw-surface-border, var(--bw-border));
	text-align: start;
	vertical-align: top;
}

.bw-tekstblok__body th {
	font-family: var(--bw-font-heading);
	font-weight: 500;
}