/*
 * Tekstpagina: een gewone pagina die niet met een Hero opent, zoals het
 * privacybeleid. Bovenaan titel en subkop op zand met links naar de
 * tussenkoppen; de golf uit het logo leidt naar de tekst op wit. De tekst is
 * petrol, zoals bij de veelgestelde vragen. Oranje is hier alleen een accent: op
 * wit en zand is het te licht voor tekst.
 *
 * Een bericht, en een tekstpagina met een uitgelichte afbeelding, heeft de
 * titel op wit (text-page--white). Daarboven staat dan de foto met de golf.
 *
 * Op mobiel staan de links onder de titel op het zand, dus in de html vóór de
 * golf. Op desktop staan ze rechts naast de tekst en blijven ze in beeld bij het
 * scrollen; daar zet een flexbox ze op de rij van de tekst.
 */

/* Op zijn eigen plek staat de kop op hetzelfde zand als de titel; meeschuivend blijft hij wit. Met de titel op wit blijft hij altijd wit. */
.has-page-intro:not(:has(.text-page--white)) .site-header:not([data-sticky="true"]) {
	background: var(--sm-bg-warm);
}

.has-page-intro .site-main {
	padding-block: 0;
}

/*
 * Dezelfde rand als bij de banden: band-pad-x, en op schermen breder dan
 * band-max meer, zodat alles in dezelfde kolom staat. --main is de breedte van
 * titel en tekst.
 */
.text-page {
	--inset: max(var(--band-pad-x), (100% - var(--band-max)) / 2 + var(--band-pad-x));
	--main: var(--content-max);
	color: var(--sm-text-brand);
}

/* Titel en subkop */

.page-intro {
	padding: calc(var(--band-pad-y) / 2) var(--inset);
	background: var(--sm-bg-warm);
}

/* Op mobiel een maat kleiner, zodat "Voorwaarden" heel blijft. Afbreken is voor lange Duitse woorden. */
.page-intro__title {
	font-size: var(--sm-kop-l-size);
	line-height: var(--sm-kop-l-line-height);
	overflow-wrap: break-word;
	hyphens: auto;
}

.page-intro__subtitle {
	margin: 0.625rem 0 0;
}

/* Scroll naar */

.page-nav {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding: 0 var(--inset) calc(var(--band-pad-y) / 2);
	background: var(--sm-bg-warm);
}

.page-nav__title {
	margin: 0;
	color: var(--sm-petrol-tint-1);
}

.page-nav__links {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Teal met wat petrol: zo haalt het ook op zand genoeg contrast voor kleine letters. */
.page-nav__links a {
	display: block;
	padding-block: 0.3125rem;
	color: color-mix(in srgb, var(--sm-teal), var(--sm-petrol) 25%);
	text-decoration: none;
}

/* Even groot als "Scroll naar:" en in gewone letters, rustiger dan de hoofdletters van type-menu. */
.page-nav__links .type-menu {
	font-size: var(--sm-body-size);
	letter-spacing: normal;
	text-transform: none;
}

.page-nav__links a:hover {
	text-decoration: underline;
	text-decoration-color: var(--sm-oranje);
}

/* De golf naar de tekst, met zand erachter */

.page-intro__wave {
	position: relative;
	aspect-ratio: 1280 / 188.15;
	background: var(--sm-bg-warm);
}

.page-intro__wave .wave {
	--wave-color: var(--sm-bg-default);
}

/*
 * De foto over de volle breedte bovenaan, met onderaan de golf naar het wit van
 * de titel. De hoogte is 16:9, maar hooguit 60% van het scherm, zodat de titel
 * op een laptop nog in beeld komt. Op mobiel is de foto minstens 16rem hoog, dan
 * ongeveer 3:2.
 */

.page-image {
	position: relative;
	flex: 0 0 100%;
}

.page-image img {
	width: 100%;
	height: clamp(16rem, 60vh, 56.25vw);
	object-fit: cover;
}

.page-image .wave {
	--wave-color: var(--sm-bg-default);
}

/* Titel op wit: zonder zand en zonder golf, direct boven de tekst */

.text-page--white .page-intro {
	padding-block: calc(var(--band-pad-y) / 2) 0;
	background: none;
}

.text-page--white .page-intro__title {
	max-width: 62.5rem;
	font-size: var(--sm-kop-l-size);
	line-height: var(--sm-kop-l-line-height);
}

.text-page--white .page-nav {
	background: none;
}

.text-page--white .text-page__content {
	padding-top: 1.875rem;
}

/* De tekst uit de editor */

.text-page__content {
	padding: 1.25rem max(var(--inset), 100% - var(--inset) - var(--main)) var(--band-pad-y) var(--inset);
}

/* Elke tussenkop opent een nieuw deel, met de stippellijn uit de voet erboven. */
.text-page__content > h2 {
	margin-top: 2.5rem;
	padding-top: 2.5rem;
	background: repeating-linear-gradient(90deg, var(--sm-koper-tint-1) 0 2px, transparent 2px 4px) top left / 100% 1px no-repeat;
	font-size: var(--sm-kop-m-size);
	font-weight: 300;
	line-height: var(--sm-kop-m-line-height);
	letter-spacing: var(--sm-kop-m-letter-spacing);
	text-transform: uppercase;
	overflow-wrap: break-word;
	/* Na een link onder Scroll naar valt de kop niet onder de meeschuivende kop. Die hoogte is pas bekend na het scrollen. */
	scroll-margin-top: calc(var(--site-header-height, 6.5rem) + 1.25rem);
}

.text-page__content > h2:first-child {
	margin-top: 0;
	padding-top: 0;
	background: none;
}

.text-page__content > h3 {
	margin-top: 2.5rem;
	font-size: var(--sm-tussenkop-size);
	font-weight: 700;
	line-height: var(--sm-tussenkop-line-height);
	letter-spacing: var(--sm-tussenkop-letter-spacing);
	text-transform: uppercase;
}

.text-page__content > h4 {
	font-size: inherit;
	font-weight: 700;
	line-height: inherit;
}

.text-page__content > h2 + * {
	margin-top: 1.25rem;
}

.text-page__content > :is(h3, h4) + * {
	margin-top: 0.625rem;
}

.text-page__content a {
	text-decoration-color: var(--sm-oranje);
}

.text-page__content :is(ul, ol) {
	padding-left: 1.5rem;
}

.text-page__content li + li {
	margin-top: 0.5rem;
}

.text-page__content ul > li::marker {
	color: var(--sm-oranje);
}

.text-page__content ol > li::marker {
	font-weight: 700;
}

.text-page__content blockquote {
	padding-left: 1.5rem;
	border-left: 2px solid var(--sm-oranje);
	font-size: var(--sm-body-l-size);
	font-weight: 300;
	line-height: var(--sm-body-l-line-height);
}

.text-page__content blockquote cite {
	display: block;
	margin-top: 0.625rem;
	font-size: var(--sm-klein-size);
	font-style: normal;
	line-height: var(--sm-klein-line-height);
}

.text-page__content hr {
	height: 1px;
	border: 0;
	background: repeating-linear-gradient(90deg, var(--sm-koper-tint-1) 0 2px, transparent 2px 4px);
}

.text-page__content figcaption {
	margin-top: 0.625rem;
	color: var(--sm-text-secondary);
	font-size: var(--sm-klein-size);
	line-height: var(--sm-klein-line-height);
}

/*
 * Tabellen: koppen in petrol, rijen gescheiden door een dunne lijn. Op een
 * smal scherm schuift een brede tabel opzij; lange woorden breken op een
 * lettergreep, niet midden in een letter. WordPress geeft elke cel een rand;
 * met .wp-block-table ervoor weegt dit zwaarder.
 */

.text-page__content .wp-block-table table {
	min-width: 36rem;
}

.text-page__content .wp-block-table thead {
	border-bottom: 2px solid var(--sm-text-brand);
}

.text-page__content .wp-block-table :is(th, td) {
	padding: 0.75rem 1.25rem 0.75rem 0;
	border: 0;
	border-bottom: 1px solid var(--sm-border-default);
	text-align: left;
	vertical-align: top;
	word-break: normal;
	hyphens: auto;
}

.text-page__content .wp-block-table th {
	color: var(--sm-text-brand);
	font-size: var(--sm-tussenkop-size);
	font-weight: 700;
	line-height: var(--sm-tussenkop-line-height);
	letter-spacing: var(--sm-tussenkop-letter-spacing);
	text-transform: uppercase;
}

.text-page__content .wp-block-table thead th {
	border-bottom: 0;
}

/*
 * Titel op wit: tot desktop staan de links naar de tussenkoppen tussen titel en
 * tekst. Op desktop staan ze ernaast, gelijk met de bovenkant van de tekst.
 */
@media (max-width: 74.99rem) {
	.text-page--white .page-nav {
		padding-block: 1.875rem 0;
	}
}

@media (min-width: 48rem) {
	.page-intro__title {
		font-size: var(--sm-kop-xl-size);
		line-height: var(--sm-kop-xl-line-height);
	}

	.text-page--white .text-page__content {
		padding-top: 2.5rem;
	}

	.text-page__content > h2 {
		margin-top: 3.125rem;
		padding-top: 3.125rem;
	}
}

/*
 * Desktop: titel en subkop, verticaal gecentreerd op het zand. Daaronder de tekst
 * met rechts de links, die tot onderaan de tekst in beeld blijven: een sticky
 * element blijft binnen zijn flexcontainer. De rechterkolom is minstens 20rem
 * breed; daarvoor wordt de tekst zo nodig smaller.
 */
@media (min-width: 75rem) {
	.text-page {
		--gap: var(--band-pad-x);
		--main: min(var(--content-max), 100% - 2 * var(--inset) - var(--gap) - 20rem);
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
	}

	/* De golf eronder is ook zand. Een derde van zijn hoogte extra erboven zet titel en subkop in het midden van het zandvlak. */
	.page-intro {
		flex: 0 0 100%;
		padding-block: calc(var(--band-pad-y) + 100vw * 188.15 / 1280 / 3) var(--band-pad-y);
	}

	.page-intro__wave {
		flex: 0 0 100%;
	}

	.text-page__content {
		order: 1;
		flex: 0 0 calc(var(--inset) + var(--main));
		padding-right: 0;
	}

	.page-nav {
		position: sticky;
		top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--site-header-height, 6.5rem) + 2rem);
		order: 2;
		flex: 1 1 0;
		margin: 1.25rem 0 var(--band-pad-y);
		padding: 0 var(--inset) 0 var(--gap);
		background: none;
	}

	.text-page--white .page-nav {
		margin-top: 2.5rem;
	}
}