/* Basis: pagina, layout-containers, header, footer en tekstpagina's. */

html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--wke-header-h) + 16px); }
body {
	margin: 0;
	background: var(--wke-bg);
	color: var(--wke-text);
	font: 400 16px/1.55 var(--wke-font-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
*, *::before, *::after { box-sizing: border-box; }
img, svg { max-width: 100%; }
h1, h2, h3, h4 { margin: 0; font-family: var(--wke-font-display); font-weight: 800; color: var(--wke-text); text-wrap: balance; font-variation-settings: "opsz" 96; }
p { margin: 0; }
a { color: var(--wke-petrol); }
:where(a, button, input, [tabindex]):focus-visible { outline: 2px solid var(--wke-petrol); outline-offset: 2px; border-radius: 4px; }
:where(a, button, input, [tabindex]):focus:not(:focus-visible) { outline: none; }
mark { background: none; color: inherit; }

.wke-sr {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.oxy-skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 1000; background: var(--wke-surface); padding: 10px 14px; border-radius: var(--wke-r-10); }

.wke-container { width: 100%; max-width: calc(var(--wke-max) + 2 * var(--wke-gutter)); margin-inline: auto; padding-inline: var(--wke-gutter); }
.wke-container--narrow { max-width: calc(720px + 2 * var(--wke-gutter)); }
.wke-container--text { max-width: calc(68ch + 2 * var(--wke-gutter)); }

/* ---------- Header (Oxygen-header met deze klassen) ---------- */
.wke-header {
	position: sticky; top: 0; z-index: 50;
	background: rgba(244, 247, 246, .92);
	-webkit-backdrop-filter: saturate(1.4) blur(10px);
	backdrop-filter: saturate(1.4) blur(10px);
	border-bottom: 1px solid var(--wke-line);
}
.wke-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--wke-space-4); min-height: var(--wke-header-h); }
.wke-logo { display: inline-flex; align-items: center; gap: .32em; text-decoration: none; color: var(--wke-text); font: 800 21px/1 var(--wke-font-display); letter-spacing: -.045em; font-variation-settings: "opsz" 96; white-space: nowrap; }
.wke-logo__mark { width: 1.2em; height: 1.2em; flex: none; }
.wke-nav { display: flex; gap: var(--wke-space-6); }
.wke-nav a { color: var(--wke-muted); text-decoration: none; font-size: 15px; padding: 10px 2px; transition: color var(--wke-ease); }
.wke-nav a:hover, .wke-nav a[aria-current="page"] { color: var(--wke-petrol); }
.wke-nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--wke-mint); }
.wke-menu-toggle {
	display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
	border: 0; border-radius: var(--wke-r-10); background: transparent; color: var(--wke-petrol);
	font: 500 12px/1 var(--wke-font-mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
	box-shadow: inset 0 0 0 1.5px var(--wke-line);
}
.wke-menu-toggle:hover { background: var(--wke-tint); }

@media (min-width: 1024px) { .wke-logo { font-size: 25px; } }
@media (max-width: 767.98px) {
	.wke-menu-toggle { display: inline-flex; }
	.wke-nav {
		display: none; position: absolute; left: 0; right: 0; top: 100%;
		flex-direction: column; gap: 0; padding: 8px var(--wke-gutter) 16px;
		background: var(--wke-surface); border-bottom: 1px solid var(--wke-line);
		box-shadow: 0 20px 30px -24px rgba(13, 74, 71, .4);
	}
	.wke-nav.is-open { display: flex; }
	.wke-nav a { font-size: 17px; padding: 14px 0; border-bottom: 1px solid var(--wke-line); color: var(--wke-text); }
	.wke-nav a:last-child { border-bottom: 0; }
}

/* ---------- Footer ---------- */
.wke-footer { background: var(--wke-petrol-dark); color: #DCEBE5; margin-top: var(--wke-section); }
.wke-footer :where(a, button):focus-visible { outline-color: var(--wke-mint); }
.wke-footer__inner { display: grid; gap: var(--wke-space-8); padding-block: var(--wke-space-12) var(--wke-space-8); }
.wke-footer .wke-logo { color: #FFFFFF; font-size: 24px; }
.wke-footer__tagline { margin-top: 10px; color: var(--wke-mint); font-size: 15px; }
.wke-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.wke-footer__nav a { color: #FFFFFF; text-decoration: none; font-size: 15px; padding: 6px 0; }
.wke-footer__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }
.wke-footer__note { font-size: 13px; line-height: 1.5; color: #B7CCC5; max-width: 62ch; }
.wke-footer__copy { font: 500 11px/1 var(--wke-font-mono); letter-spacing: .06em; text-transform: uppercase; color: #8FB0A6; padding-top: var(--wke-space-6); border-top: 1px solid rgba(191, 227, 213, .18); }
@media (min-width: 768px) {
	.wke-footer__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
	.wke-footer__note, .wke-footer__copy { grid-column: 1 / -1; }
}

/* ---------- Pagina's ---------- */
.wke-page { padding-bottom: var(--wke-section); }
.wke-page--text { padding-top: var(--wke-space-12); }
.wke-prose { font-size: 17px; line-height: 1.6; }
.wke-prose__title { font-size: 34px; line-height: 1.05; letter-spacing: -.035em; margin-bottom: var(--wke-space-6); }
.wke-prose > * + * { margin-top: 1em; }
.wke-prose h2 { font-size: 24px; line-height: 1.1; letter-spacing: -.035em; margin-top: 1.8em; }
.wke-prose h3 { font-size: 19px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; margin-top: 1.4em; }
.wke-prose ul, .wke-prose ol { padding-left: 1.2em; }
.wke-prose li + li { margin-top: .4em; }
.wke-prose a { text-underline-offset: 3px; }
.wke-prose .wp-block-group, .wke-prose .wke-callout { background: var(--wke-surface); border: 1px solid var(--wke-line); border-radius: var(--wke-r-14); padding: var(--wke-space-5); }
@media (min-width: 1024px) { .wke-prose__title { font-size: 44px; } .wke-prose h2 { font-size: 26px; } }

.wke-notfound { padding-block: var(--wke-space-16); display: grid; gap: var(--wke-space-4); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}