/* Winterhaven — basisstijl. Waarden komen uit de HTML-referentie; kleuren/lettertypes zijn CSS-variabelen (inc/tokens.php). */

:root {
	--wh-c-teal: #00585f;
	--wh-c-teal-dark: #00484e;
	--wh-c-coral: #e0696c;
	--wh-c-tan: #efd8bd;
	--wh-c-cream: #fff8ec;
	--wh-c-brown: #5b5045;
	--wh-c-pink: #f6b7b3;
	--wh-c-rust: #8e3e3c;
	--wh-c-ink: #2b0f10;
	--wh-c-muted: #665b4e;
	--wh-c-mist: #c4d5d5;
	--wh-c-soft: #cfc3b2;
	--wh-c-soft2: #dbd0c2;
	--wh-c-pill: #2e747a;
	--wh-c-rule: #d8c4a8;
	--wh-font-serif: "Bodoni Moda", serif;
	--wh-font-sans: "Jost", sans-serif;
}

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

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--wh-c-teal);
	color: var(--wh-c-brown);
	font-family: var(--wh-font-sans);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	font-optical-sizing: auto; /* Bodoni Moda heeft een opsz-as: grote tekst krijgt automatisch de fijne, hoog-contrast versie */
}

img {
	max-width: 100%;
	height: auto;
}

a {
	color: var(--wh-c-pink);
	text-decoration: none;
}
a:hover {
	color: var(--wh-c-tan);
}

.wh-main {
	width: 100%;
	overflow: hidden;
}

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

/* ── Knoppen (gedeeld door alle blokken) ── pil-vorm, waarden uit de HTML-referentie */
.wh-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 14px 28px;
	border-radius: 999px;
	border: 0; /* alleen de omlijnde variant heeft een rand; zo blijft de gevulde knop 46px hoog (14 + 18 + 14) */
	font-family: var(--wh-font-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 18px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, opacity 0.25s ease;
}
.wh-btn--primary {
	background: var(--wh-c-coral);
	color: var(--wh-c-ink);
}
.wh-btn--primary:hover {
	color: var(--wh-c-ink);
	transform: translateY(-1px);
}
.wh-btn--outline {
	padding: 15px 30px;
	border: 1.5px solid rgba(239, 216, 189, 0.55);
	background: transparent;
	color: var(--wh-c-tan);
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.12em;
}
.wh-btn--outline:hover {
	border-color: var(--wh-c-tan);
	color: var(--wh-c-tan);
}
@media (prefers-reduced-motion: reduce) {
	.wh-btn { transition: none; }
}

/* ── Verschijnen bij scrollen (gedeeld door alle blokken) ──
   Blok: data-reveal="1" op de wrapper + class .wh-reveal op de onderdelen (met --i voor de volgorde).
   Alleen actief als JavaScript draait (html.wh-js), zodat zonder JS alles gewoon zichtbaar blijft. */
.wh-js [data-reveal="1"] .wh-reveal {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.75s cubic-bezier(0.22, 0.75, 0.2, 1) calc(var(--i, 0) * 90ms),
		transform 0.75s cubic-bezier(0.22, 0.75, 0.2, 1) calc(var(--i, 0) * 90ms);
}
.wh-js [data-reveal="1"] .wh-reveal.is-visible {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.wh-js [data-reveal="1"] .wh-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}