/*
Theme Name: Phoneforce
Theme URI: https://phoneforce.nl
Author: Artemis Blue
Author URI: https://artemisblue.nl
Description: Blokthema voor Phoneforce, de software voor telefoonwinkels van Artemis Blue. Mobile first, WCAG 2.2 AA.
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phoneforce
Tags: block-theme, full-site-editing, one-column, accessibility-ready, custom-colors
*/

/* ==========================================================================
   Phoneforce - designsysteem
   Volgorde: fonts → tokens → reset → basis → typografie → componenten → utilities
   Mobile first: alles hieronder geldt vanaf 320px. Media queries voegen alleen toe.

   Beeldtaal: een werkbank. Warm papierwit als vlak, diep marineblauw voor de
   zware blokken, amber als het enige signaalkleurtje. Dat is dezelfde taal als
   de software zelf spreekt, zodat de schermafbeeldingen in de pagina passen
   in plaats van erop geplakt te zijn.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts (zelf gehost - geen derde partij)
   -------------------------------------------------------------------------- */

@font-face {
	font-family: 'Public Sans Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 900;
	src: url('assets/fonts/public-sans-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: 'Bricolage Grotesque Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 200 800;
	font-stretch: 75% 100%;
	src: url('assets/fonts/bricolage-grotesque-var-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */

:root {
	/*
	 * Kleur. Alle tekstparen zijn met een contrastmeter nagerekend tegen WCAG 2.2 AA.
	 * De verhouding staat er per regel bij, zodat een latere wijziging meteen laat zien
	 * hoeveel ruimte er nog is.
	 */
	--pf-bg: #f8f5f0;           /* werkblad: warm wit, geen steriel #fff */
	--pf-bg-alt: #efeae1;       /* afwisselende sectie */
	--pf-surface: #ffffff;      /* kaart die van het werkblad af komt */
	--pf-surface-2: #f3efe8;    /* genest vlak binnen een kaart */
	--pf-line: #d9d2c6;
	/*
	 * --pf-line-bright is UITSLUITEND decoratief: een haarlijn die vlakken van elkaar scheidt.
	 * Hij blijft onder de 3:1 die WCAG 2.2 SC 1.4.11 eist. Gebruik hem daarom nooit als de rand
	 * die een bedieningselement identificeert, dus niet op invoervelden, aanvinkvakken,
	 * keuzelijsten of het zoekveld. Daar geldt --pf-text-subtle (rust) en --pf-text-muted (hover).
	 *
	 * Hij staat nog wél op de rand van .pf-btn--secondary, .pf-nav-toggle, .pf-nav-close en
	 * .pf-pagination. Dat mag, want die dragen alle vier hun eigen zichtbare tekstlabel in
	 * --pf-text: de rand voegt daar vorm toe maar geen informatie, en SC 1.4.11 vraagt alleen
	 * 3:1 voor wat nodig is om het element te herkennen. Komt er ooit een variant zonder
	 * tekstlabel, een icoonknop, dan moet die rand mee omhoog.
	 */
	--pf-line-bright: #c6bdac;

	--pf-text: #0f2039;         /* 14,9:1 op --pf-bg */
	--pf-text-muted: #41536b;   /*  7,2:1 op --pf-bg  |  6,6:1 op --pf-bg-alt */
	--pf-text-subtle: #52647d;  /*  5,4:1 op --pf-bg  |  4,9:1 op --pf-bg-alt */

	/*
	 * Amber is het enige signaalkleurtje. Het draagt de primaire actie en verder niets,
	 * zodat er per scherm maar één ding hard om aandacht vraagt.
	 * Amber is te licht om tekstkleur te zijn op wit; daarvoor is --pf-accent-text.
	 */
	--pf-accent: #f5a524;       /* vlakken en randen, nooit tekstkleur op licht */
	--pf-accent-deep: #d98c06;  /* hover van hetzelfde vlak */
	--pf-accent-ink: #0f2039;   /* tekst óp --pf-accent - 8,0:1 */
	--pf-accent-text: #8a5a00;  /* amber als tekstkleur op licht - 5,45:1 */

	--pf-link: #0b2545;         /* links op licht - 13,2:1, onderstreping doet het werk */

	/* De zware blokken: hero, afsluitende oproep, footer. */
	--pf-navy: #0b2545;
	--pf-navy-deep: #071a33;
	--pf-navy-line: #1c3a62;
	--pf-navy-text: #eaf1fb;    /* 14,7:1 op --pf-navy */
	--pf-navy-muted: #a9c0dc;   /*  8,3:1 op --pf-navy */

	--pf-danger: #a3232c;       /* 5,9:1 op --pf-surface */
	--pf-danger-bg: #fdf0f0;
	--pf-success: #14654a;      /* 6,3:1 op --pf-surface */
	--pf-success-bg: #eef8f2;
	--pf-focus: #0b2545;

	/* Typografie */
	--pf-font-display: 'Bricolage Grotesque Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--pf-font-body: 'Public Sans Variable', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

	--fs-display: clamp(2.375rem, 1.35rem + 4.3vw, 4.5rem);
	--fs-h2: clamp(1.75rem, 1.32rem + 1.8vw, 2.75rem);
	--fs-lead: clamp(1.125rem, 1.06rem + 0.3vw, 1.3125rem);
	--fs-h3: clamp(1.1875rem, 1.12rem + 0.3vw, 1.375rem);
	--fs-body: 1.0625rem;
	--fs-small: 0.9375rem;
	--fs-micro: 0.8125rem;

	/* Ruimte (4-basis) */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;
	--sp-10: 8rem;

	/* Maat en vorm */
	--container: 75rem;         /* 1200px */
	--gutter: clamp(1.25rem, 5vw, 3rem);
	--section-y: clamp(3.5rem, 8vw, 7.5rem);
	--measure: 68ch;

	--radius-sm: 4px;
	--radius: 10px;
	--radius-lg: 16px;
	--radius-pill: 999px;

	/* Beweging */
	--ease: cubic-bezier(0.22, 0.61, 0.36, 1);
	--dur: 220ms;
	--dur-slow: 320ms;

	/* Tap target ondergrens (WCAG 2.2 doelgrootte) */
	--tap: 44px;
	--control-h: 48px;
}

/* --------------------------------------------------------------------------
   3. Reset
   -------------------------------------------------------------------------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Vaste offset zodat ankerdoelen niet onder de sticky header verdwijnen */
	scroll-padding-top: 6rem;
}

body {
	margin: 0;
	background-color: var(--pf-bg);
	color: var(--pf-text);
	font-family: var(--pf-font-body);
	font-size: var(--fs-body);
	line-height: 1.62;
	font-synthesis-weight: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	/* R10: nooit horizontaal scrollen, ook niet bij een uitschieter */
	overflow-x: hidden;
}

img,
svg,
video,
canvas {
	display: block;
	max-width: 100%;
	height: auto;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
}

/* --------------------------------------------------------------------------
   4. Focus - nooit uitzetten (standaard §10)
   -------------------------------------------------------------------------- */

:focus-visible {
	outline: 3px solid var(--pf-focus);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Muisklik op een knop hoeft geen ring te tonen, toetsenbord altijd wel. */
:focus:not(:focus-visible) {
	outline: none;
}

.pf-skip-link {
	position: absolute;
	left: var(--sp-4);
	top: var(--sp-4);
	z-index: 1000;
	padding: var(--sp-3) var(--sp-5);
	background: var(--pf-accent);
	color: var(--pf-accent-ink);
	font-weight: 600;
	border-radius: var(--radius-sm);
	transform: translateY(-200%);
	transition: transform var(--dur) var(--ease);
}

.pf-skip-link:focus {
	transform: translateY(0);
}

/* --------------------------------------------------------------------------
   5. Typografie
   -------------------------------------------------------------------------- */

h1,
h2,
h3,
h4 {
	font-family: var(--pf-font-display);
	color: var(--pf-text);
	margin: 0 0 var(--sp-4);
	text-wrap: balance;
	letter-spacing: -0.02em;
}

h1 {
	font-size: var(--fs-display);
	font-weight: 700;
	line-height: 1.04;
	letter-spacing: -0.035em;
	max-width: 20ch;
}

h2 {
	font-size: var(--fs-h2);
	font-weight: 700;
	line-height: 1.14;
	max-width: 26ch;
}

h3 {
	font-size: var(--fs-h3);
	font-weight: 600;
	line-height: 1.3;
}

h4 {
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.4;
}

p {
	margin: 0 0 var(--sp-4);
	max-width: var(--measure);
}

a {
	color: var(--pf-link);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.22em;
	transition: color var(--dur) var(--ease);
}

a:hover {
	color: var(--pf-text);
	text-decoration-thickness: 2px;
}

strong {
	font-weight: 600;
	color: var(--pf-text);
}

/* Eyebrow - het enige plek waar hoofdletters gebruikt worden */
.pf-eyebrow {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
	font-family: var(--pf-font-body);
	font-size: var(--fs-micro);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pf-text-muted);
}

.pf-eyebrow__mark {
	flex: none;
	width: 0.75rem;
	height: 0.875rem;
	color: var(--pf-accent);
}

.pf-lead {
	font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
	line-height: 1.55;
	color: var(--pf-text-muted);
	max-width: 58ch;
}

.pf-note {
	font-size: var(--fs-small);
	color: var(--pf-text-subtle);
}

/* --------------------------------------------------------------------------
   6. Layout
   -------------------------------------------------------------------------- */

.pf-container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.pf-section {
	padding-block: var(--section-y);
}

.pf-section--alt {
	background-color: var(--pf-bg-alt);
}

/* Haarlijn tussen secties - draagt het "technische" karakter van het merk */
.pf-section--ruled {
	border-top: 1px solid var(--pf-line);
}

.pf-stack > * + * {
	margin-top: var(--sp-4);
}

.pf-section__head {
	margin-bottom: var(--sp-6);
}

.pf-section__head p {
	color: var(--pf-text-muted);
}

/* Kolommenraster: op mobiel altijd één kolom (R2) */
.pf-grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.pf-grid--2 {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-5);
	}

	.pf-grid--3 {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--sp-5);
	}

	.pf-grid--4 {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-5);
	}
}

@media (min-width: 64rem) {
	.pf-grid--4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.pf-section__head {
		margin-bottom: var(--sp-7);
	}
}

/* --------------------------------------------------------------------------
   7. Knoppen
   -------------------------------------------------------------------------- */

.pf-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	min-height: var(--control-h);
	padding: var(--sp-3) var(--sp-6);
	border: 1px solid transparent;
	border-radius: var(--radius-sm);
	font-family: var(--pf-font-body);
	font-size: var(--fs-body);
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
		color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.pf-btn:focus-visible {
	outline: 3px solid var(--pf-focus);
	outline-offset: 3px;
}

.pf-btn--primary {
	background-color: var(--pf-accent);
	color: var(--pf-accent-ink);
}

.pf-btn--primary:hover {
	background-color: var(--pf-accent-deep);
	color: var(--pf-accent-ink);
}

.pf-btn--primary:active {
	background-color: #c07c05;
	color: var(--pf-accent-ink);
	transform: translateY(1px);
}

.pf-btn--secondary {
	background-color: transparent;
	border-color: var(--pf-line-bright);
	color: var(--pf-text);
}

.pf-btn--secondary:hover {
	border-color: var(--pf-link);
	color: var(--pf-text);
	background-color: rgba(11, 37, 69, 0.06);
}

.pf-btn--secondary:active {
	transform: translateY(1px);
}

.pf-btn[disabled],
.pf-btn[aria-disabled='true'] {
	opacity: 0.55;
	cursor: not-allowed;
	transform: none;
}

/* Laadstatus: tekst blijft staan, spinner ernaast, aria-live meldt het apart */
.pf-btn__spinner {
	width: 1rem;
	height: 1rem;
	border: 2px solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: pf-spin 640ms linear infinite;
}

@keyframes pf-spin {
	to {
		transform: rotate(360deg);
	}
}

/* Knoppenrij: op mobiel vol breed onder elkaar */
.pf-btn-row {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

.pf-btn-row .pf-btn {
	width: 100%;
}

/* Pas op 48rem naast elkaar. Dat is exact het punt waarop patterns.css
   .pf-btn-row.wp-block-buttons omzet, zodat een rij losse .pf-btn-knoppen (contactformulier)
   en een rij core-knoppen (patronen) nooit op verschillende breedtes omklappen.
   Dit blok staat hier en niet bij de layoutregels op 48rem: media queries verhogen de
   specificiteit niet, dus het moet ná de basisregel hierboven komen om te winnen. */
@media (min-width: 48rem) {
	.pf-btn-row {
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sp-4);
	}

	.pf-btn-row .pf-btn {
		width: auto;
	}
}

/* --------------------------------------------------------------------------
   8. Kaarten
   -------------------------------------------------------------------------- */

.pf-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-5);
	background-color: var(--pf-surface);
	border: 1px solid var(--pf-line);
	border-radius: var(--radius);
	transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.pf-card h3 {
	margin: 0;
}

.pf-card p {
	margin: 0;
	color: var(--pf-text-muted);
}

.pf-card__icon {
	width: 2.5rem;
	height: 2.5rem;
	color: var(--pf-accent);
}

/* Hele kaart klikbaar via een uitgerekte link - het anker blijft de focusdrager */
.pf-card--link:hover,
.pf-card--link:focus-within {
	border-color: var(--pf-line-bright);
	background-color: var(--pf-surface-2);
}

.pf-card__link {
	margin-top: auto;
	font-weight: 600;
	text-decoration: none;
}

.pf-card__link::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.pf-card__link .pf-card__chev {
	display: inline-block;
	width: 0.6em;
	height: 0.7em;
	margin-left: 0.4em;
	vertical-align: -0.02em;
	transition: transform var(--dur) var(--ease);
}

.pf-card--link:hover .pf-card__chev {
	transform: translateX(3px);
}

.pf-card__link:focus-visible {
	outline: none;
}

.pf-card--link:focus-within {
	outline: 3px solid var(--pf-focus);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   9. Lijsten met het chevron-motief
   -------------------------------------------------------------------------- */

.pf-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--sp-3);
}

.pf-list li {
	display: grid;
	grid-template-columns: 1rem 1fr;
	gap: var(--sp-3);
	align-items: start;
	color: var(--pf-text-muted);
}

.pf-list li > svg {
	width: 0.75rem;
	height: 0.875rem;
	margin-top: 0.4em;
	color: var(--pf-accent);
	flex: none;
}

/* --------------------------------------------------------------------------
   10. Formulier
   -------------------------------------------------------------------------- */

.pf-field {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	margin-bottom: var(--sp-5);
}

.pf-label {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--pf-text);
}

.pf-label__optional {
	font-weight: 400;
	color: var(--pf-text-subtle);
}

.pf-hint {
	font-size: var(--fs-small);
	color: var(--pf-text-subtle);
}

.pf-input,
.pf-select,
.pf-textarea {
	width: 100%;
	min-height: var(--control-h);
	padding: var(--sp-3) var(--sp-4);
	background-color: var(--pf-bg);
	/* SC 1.4.11: de rand is het enige wat het veld begrenst - 5,97:1 op --pf-bg, 5,29:1 op --pf-surface. */
	border: 1px solid var(--pf-text-subtle);
	border-radius: var(--radius-sm);
	color: var(--pf-text);
	font-size: var(--fs-body);
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
	/* iOS zoomt in onder 16px - vandaar de body-maat van 17px */
	appearance: none;
}

.pf-textarea {
	min-height: 9rem;
	resize: vertical;
	line-height: 1.6;
}

.pf-select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23a3b3c9' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right var(--sp-4) center;
	background-size: 0.75rem;
	padding-right: var(--sp-8);
}

.pf-input:hover,
.pf-select:hover,
.pf-textarea:hover {
	border-color: var(--pf-text-muted);
}

.pf-input:focus-visible,
.pf-select:focus-visible,
.pf-textarea:focus-visible {
	outline: 3px solid var(--pf-focus);
	outline-offset: 1px;
	border-color: var(--pf-link);
}

.pf-input::placeholder,
.pf-textarea::placeholder {
	color: var(--pf-text-subtle);
}

/* Foutstatus - kleur is nooit het enige signaal: er komt een tekst én een icoon bij */
.pf-field--error .pf-input,
.pf-field--error .pf-select,
.pf-field--error .pf-textarea {
	border-color: var(--pf-danger);
	border-width: 2px;
}

.pf-field__error {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-2);
	font-size: var(--fs-small);
	font-weight: 500;
	color: var(--pf-danger);
}

.pf-field__error svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	margin-top: 0.15em;
}

/* Checkbox: eigen vormgeving, maar het echte input blijft bedienbaar */
.pf-check {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--sp-3);
	align-items: start;
	margin-bottom: var(--sp-5);
	cursor: pointer;
}

.pf-check input[type='checkbox'] {
	appearance: none;
	flex: none;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0.1rem 0 0;
	background-color: var(--pf-bg);
	/* Zelfde eis als bij .pf-input: zonder rand is het vakje niet te zien (SC 1.4.11). */
	border: 1px solid var(--pf-text-subtle);
	border-radius: var(--radius-sm);
	cursor: pointer;
	transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.pf-check input[type='checkbox']:checked {
	background-color: var(--pf-accent);
	border-color: var(--pf-accent);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23041020' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E");
	background-size: 1rem;
	background-position: center;
	background-repeat: no-repeat;
}

.pf-check span {
	font-size: var(--fs-small);
	color: var(--pf-text-muted);
}

/* Foutsamenvatting bovenaan het formulier */
.pf-alert {
	display: flex;
	gap: var(--sp-3);
	padding: var(--sp-4);
	margin-bottom: var(--sp-5);
	border-radius: var(--radius-sm);
	border: 1px solid;
	font-size: var(--fs-small);
	/* R10: de meldingen noemen een e-mailadres als uitweg. Op 320px is de tekstkolom smaller
	   dan dat adres, en body { overflow-x: hidden } zou het zonder scrollbalk wegknippen. */
	overflow-wrap: anywhere;
}

.pf-alert--error {
	background-color: var(--pf-danger-bg);
	border-color: var(--pf-danger);
	color: var(--pf-text);
}

.pf-alert--success {
	background-color: var(--pf-success-bg);
	border-color: var(--pf-success);
	color: var(--pf-text);
}

.pf-alert svg {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.1em;
}

.pf-alert h2,
.pf-alert h3 {
	font-size: var(--fs-body);
	margin: 0 0 var(--sp-2);
}

.pf-alert ul {
	margin: 0;
	padding-left: var(--sp-5);
}

.pf-alert a {
	color: var(--pf-text);
}

/* Honeypot: weg voor mensen én voor schermlezers, maar wel invulbaar voor bots */
.pf-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --------------------------------------------------------------------------
   11. Badges en truststrip
   -------------------------------------------------------------------------- */

.pf-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-2) var(--sp-4);
	background-color: rgba(11, 37, 69, 0.05);
	border: 1px solid var(--pf-line-bright);
	border-radius: var(--radius-pill);
	font-size: var(--fs-small);
	color: var(--pf-text-muted);
}

.pf-badge svg {
	flex: none;
	width: 1rem;
	height: 1rem;
	color: var(--pf-accent);
}

/* --------------------------------------------------------------------------
   12. Screenreader-hulpmiddelen
   -------------------------------------------------------------------------- */

.screen-reader-text,
.pf-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --------------------------------------------------------------------------
   13. Entree-animatie
   -------------------------------------------------------------------------- */

/*
 * Faalt bewust naar zichtbaar. De klasse .pf-anim komt van site.js en wordt pas gezet als het
 * script de animatie daadwerkelijk overneemt (IntersectionObserver aanwezig én geen voorkeur
 * voor minder beweging). Struikelt het script na het zetten van de js-klasse, dan is er hooguit
 * geen animatie - nooit een halve pagina onzichtbare tekst.
 */
.pf-anim .pf-reveal {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
}

.pf-anim .pf-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   14. Bewegingsvoorkeur - harde eis, geen nette bijkomstigheid
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.pf-anim .pf-reveal {
		opacity: 1;
		transform: none;
	}
}

/* --------------------------------------------------------------------------
   15. Contrastvoorkeur en print
   -------------------------------------------------------------------------- */

@media (prefers-contrast: more) {
	:root {
		--pf-text-muted: #23364e;
		--pf-text-subtle: #2c405a;
		--pf-line: #a89e8b;
		--pf-line-bright: #8d8270;
	}
}

@media print {
	body {
		background: #fff;
		color: #000;
	}

	.pf-site-header,
	.pf-site-footer,
	.pf-btn {
		display: none;
	}
}