/*
 * Peakweb Base: core. Always loaded. Tokens, reset, accessibility, layout
 * utilities and the mechanics of the menu, embeds and animations. Contains no
 * brand design: that lives in ontwerp.css (optional) and the client theme.
 */


:root {
	--pw-kleur-achtergrond: #ffffff;
	--pw-kleur-vlak: #f5f5f4;
	--pw-kleur-kaart: #ffffff;
	--pw-kleur-tekst: #1a1a1a;
	--pw-kleur-gedempt: #5c5c5c;
	--pw-kleur-lijn: #e3e3e0;
	--pw-kleur-merk: #1f3a5f;
	--pw-kleur-op-merk: #ffffff;
	--pw-kleur-accent: #dfe7f1;
	--pw-kleur-focus: #1f3a5f;

	--pw-font-tekst: system-ui, -apple-system, "Segoe UI", sans-serif;
	--pw-font-kop: var(--pw-font-tekst);
	--pw-gewicht-kop: 600;
	--pw-letterafstand-kop: -0.02em;

	--pw-radius-kaart: 24px;
	--pw-radius-knop: 999px;
	--pw-radius-klein: 12px;

	--pw-breedte: 1200px;
	--pw-breedte-smal: 760px;
	--pw-rand: clamp(1rem, 4vw, 2.5rem);
	--pw-sectie-ruimte: clamp(3.5rem, 8vw, 7rem);
	--pw-ruimte: 1rem;

	--pw-maat-h1: clamp(2.25rem, 1.4rem + 3.6vw, 4rem);
	--pw-maat-h2: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
	--pw-maat-h3: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
	--pw-maat-tekst: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	margin: 0;
	background: var(--pw-kleur-achtergrond);
	color: var(--pw-kleur-tekst);
	font-family: var(--pw-font-tekst);
	font-size: var(--pw-maat-tekst);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

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

h1,
h2,
h3,
h4 {
	margin: 0;
	font-family: var(--pw-font-kop);
	font-weight: var(--pw-gewicht-kop);
	letter-spacing: var(--pw-letterafstand-kop);
	line-height: 1.12;
	text-wrap: balance;
}

h1 {
	font-size: var(--pw-maat-h1);
}

h2 {
	font-size: var(--pw-maat-h2);
}

h3 {
	font-size: var(--pw-maat-h3);
}

p,
ul,
ol,
dl,
figure,
blockquote {
	margin: 0;
}

a {
	color: var(--pw-kleur-merk);
	text-underline-offset: 0.2em;
}

:focus-visible {
	outline: 3px solid var(--pw-kleur-focus);
	outline-offset: 3px;
	border-radius: 4px;
}

[role="list"] {
	list-style: none;
	padding: 0;
}

.pw-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.pw-skiplink {
	position: absolute;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100;
	padding: 0.75rem 1rem;
	border-radius: var(--pw-radius-klein);
	background: var(--pw-kleur-merk);
	color: var(--pw-kleur-op-merk);
	transform: translateY(-200%);
}

.pw-skiplink:focus {
	transform: none;
}

/* Layout */
.pw-container {
	width: 100%;
	max-width: calc(var(--pw-breedte) + 2 * var(--pw-rand));
	margin-inline: auto;
	padding-inline: var(--pw-rand);
}

.pw-container--smal {
	max-width: calc(var(--pw-breedte-smal) + 2 * var(--pw-rand));
}

.pw-stapel {
	display: flex;
	flex-direction: column;
	gap: var(--pw-ruimte);
}

.pw-stapel--groot {
	gap: calc(var(--pw-ruimte) * 2.5);
}

.pw-sectie {
	padding-block: var(--pw-sectie-ruimte);
}

.pw-sectie + .pw-sectie {
	padding-top: 0;
}

.pw-inhoud:focus {
	outline: none;
}

.pw-sectie__kop {
	max-width: 44rem;
}

.pw-sectie__intro {
	color: var(--pw-kleur-gedempt);
	font-size: 1.1em;
}

.pw-label {
	color: var(--pw-kleur-gedempt);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* Mobile menu: mechanics only (appearance lives in ontwerp.css or the client theme) */
.pw-menuknop {
	display: none;
}

@media (max-width: 899px) {
	.pw-menuknop {
		display: inline-flex;
	}

	.pw-nav {
		display: none;
	}

	.pw-nav.is-open,
	.no-js .pw-nav {
		display: flex;
	}
}

/* Click-to-load embeds: mechanics */
.pw-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/*
 * Animations (opt-in via config: 'animaties' => true, and per section
 * 'animatie' => 'fade' | 'fade-up' | 'slide-left' | 'slide-right' | 'zoom' or a
 * client-defined name). Content is only hidden when JavaScript runs and the
 * visitor has not asked for reduced motion; base.js then reveals it on scroll.
 */
@media (prefers-reduced-motion: no-preference) {
	.pw-animaties [data-pw-animatie]:not(.is-zichtbaar) {
		opacity: 0;
	}

	.pw-animaties [data-pw-animatie="fade-up"]:not(.is-zichtbaar) {
		transform: translateY(24px);
	}

	.pw-animaties [data-pw-animatie="slide-left"]:not(.is-zichtbaar) {
		transform: translateX(-32px);
	}

	.pw-animaties [data-pw-animatie="slide-right"]:not(.is-zichtbaar) {
		transform: translateX(32px);
	}

	.pw-animaties [data-pw-animatie="zoom"]:not(.is-zichtbaar) {
		transform: scale(0.96);
	}

	.pw-animaties [data-pw-animatie] {
		transition: opacity var(--pw-animatie-duur, 0.6s) ease, transform var(--pw-animatie-duur, 0.6s) cubic-bezier(0.2, 0.7, 0.2, 1);
	}
}

/* Peakweb form: structure only; colours come from the design. */
.pw-formulier__velden {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 1rem;
	margin-bottom: 1.25rem;
}

.pw-veld {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	margin: 0;
	min-width: 0;
}

@media (min-width: 40em) {
	.pw-veld--half {
		grid-column: span 1;
	}
}

.pw-veld > label,
.pw-veld legend {
	font-weight: 600;
}

.pw-veld fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.pw-veld__keuze {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
}

.pw-veld__keuze input {
	width: 1.125rem;
	height: 1.125rem;
	margin: 0.2rem 0 0;
	flex: none;
}

.pw-veld__optioneel {
	font-weight: 400;
	opacity: 0.75;
}

.pw-veld__fout {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: #b32d2e;
}

.pw-veld.is-fout input,
.pw-veld.is-fout textarea,
.pw-veld.is-fout select {
	border-color: #b32d2e;
}

.pw-veld--uitleg {
	font-size: 0.875rem;
}

.pw-formulier__status:empty {
	display: none;
}

.pw-formulier__status {
	margin: 0 0 1rem;
	font-weight: 600;
}

.pw-formulier__status.is-fout {
	color: #b32d2e;
}

.pw-formulier[aria-busy="true"] .pw-formulier__knop {
	opacity: 0.6;
	cursor: progress;
}

/* Honeypot: invisible for people and screen readers, filled in by bots. */
.pw-formulier__honing {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* 1.8: submenus from the config (mechanics only) */
.pw-sub {
	display: none;
}

.pw-nav__item.is-open > .pw-sub,
.no-js .pw-nav__item--sub:hover > .pw-sub,
.no-js .pw-nav__item--sub:focus-within > .pw-sub {
	display: block;
}

.pw-nav__open {
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
}

.pw-sub__lijst {
	margin: 0;
	padding: 0;
}

/* 1.8: background video (mechanics only) */
.pw-video {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.pw-video video {
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.6s ease;
}

.pw-video.is-actief video {
	opacity: 1;
}

.pw-video__knop {
	position: absolute;
	z-index: 3;
	right: var(--pw-rand);
	bottom: 1.25rem;
	cursor: pointer;
}

.pw-video__knop[hidden],
.pw-video__speel,
.pw-video.is-gepauzeerd .pw-video__pauze {
	display: none;
}

.pw-video.is-gepauzeerd .pw-video__speel {
	display: inline;
}

/* 1.8: comparison table stacks per row on small screens */
.pw-vergelijking {
	width: 100%;
	border-collapse: collapse;
}

@media (max-width: 599px) {
	.pw-vergelijking thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
	}

	.pw-vergelijking tr,
	.pw-vergelijking td {
		display: block;
	}

	.pw-vergelijking td::before {
		content: attr(data-kolom);
		display: block;
		font-size: 0.8125rem;
		font-weight: 600;
	}
}

/* 1.8: key figures, logos, steps, gallery: list resets */
.pw-cijfers,
.pw-cijfers dd,
.pw-logos,
.pw-stappen,
.pw-galerij,
.pw-kenmerken {
	margin: 0;
	padding: 0;
}

/* 1.8: second line of a section title ("Titel | tweede regel") */
.pw-sectie__titel-regel {
	display: block;
}

/* Key figure icon (since 1.9.0) */
.pw-cijfers__icoon {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
	margin-bottom: 0.5rem;
}

/* Search form on the results page (since 1.9.0) */
.pw-zoeken__form {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	max-width: 36rem;
}

.pw-zoeken__veld {
	flex: 1 1 14rem;
	min-width: 0;
	min-height: 44px;
	padding: 0.5rem 0.85rem;
	border: 1px solid var(--pw-kleur-lijn);
	border-radius: var(--pw-radius-klein);
	font: inherit;
}