/*
 * Theme Fortuna Online: alleen de basis van de pagina. Alle onderdelen komen uit Fortuna UI (bundel fu-site);
 * hier geen eigen kleuren, maten of tijden, alleen tokens (AGENTS.md §7). Geen overrides van Fortuna UI.
 */
/* De oude plugin-opmaak (tabellen, Woordenboek, Filters, formulier) gebruikt nog de oude kleuren (--fu-text, --fu-green …).
   In het theme wijzen ze naar de nieuwe: zo is overal dezelfde kleur als op de stijlpagina. Onder Extra blijft alles zoals het was. */
:root,
.fu-root {
	--fu-text: var(--fu-c-fg);
	--fu-muted: var(--fu-c-fg-sub);
	--fu-green: var(--fu-c-brand);
	--fu-green-dark: var(--fu-c-brand-strong);
	--fu-green-tint: color-mix(in srgb, var(--fu-c-brand) 10%, transparent);
	--fu-on-green: var(--fu-c-on-brand);
	--fu-surface: var(--fu-c-bg-sub);
	--fu-line: var(--fu-c-line-strong);
	--fu-focus: var(--fu-c-focus);
}

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--fu-header-h) + var(--fu-sticky-top)); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--fu-c-bg);
	color: var(--fu-c-fg);
	font-family: var(--fu-font-text);
	font-size: var(--fu-fs-md);
	line-height: var(--fu-lh-text);
	-webkit-font-smoothing: antialiased;
}

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

/* Ankers onder de vaste kop niet laten verdwijnen (was de :target-truc in de oude Customizer-CSS). */
:target { scroll-margin-top: calc(var(--fu-header-h) + var(--fu-sticky-top)); }

.screen-reader-text {
	position: absolute;
	width: var(--fu-sr-maat);
	height: var(--fu-sr-maat);
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Naar de inhoud: zichtbaar zodra hij focus krijgt. */
.fo-skip:focus {
	position: fixed;
	z-index: var(--fu-z-dialog);
	inset: var(--fu-space-2) auto auto var(--fu-space-2);
	width: auto;
	height: auto;
	clip: auto;
	padding: var(--fu-space-2) var(--fu-space-4);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-bg);
	color: var(--fu-c-fg);
	font-weight: 600;
	outline: var(--fu-focus-breedte) solid var(--fu-c-focus);
	outline-offset: var(--fu-focus-afstand);
}

.fo-main:focus { outline: none; }

/* Ruimte tussen de paginakop (titel, intro, pillen) en de inhoud, zoals op de stijlpagina. */
.fo-na-kop { margin-top: var(--fu-space-8); }
.fo-na-blok { margin-top: var(--fu-space-12); }

/* Bladeren onder een lijst. */
.fo-bladeren { margin-top: var(--fu-space-10); justify-content: flex-start; gap: var(--fu-space-3); }

/* Verslag: één leeskolom (plan §8b), foto en blokken even breed als de tekst. */
.fo-leeskolom { max-width: var(--fu-measure); margin-inline: auto; }
.fo-artikel__kop { display: grid; gap: var(--fu-ritme-tekst); }
.fo-artikel__kop .fu-h1 { margin: 0; text-wrap: balance; }
.fo-byline { display: flex; flex-wrap: wrap; gap: var(--fu-space-2); margin: 0; }
.fo-artikel__foto { margin: var(--fu-space-8) 0 0; }
.fo-artikel__foto img { display: block; width: 100%; height: auto; border-radius: var(--fu-r-md); }
.fo-artikel__foto figcaption { margin-top: var(--fu-space-2); }
.fo-artikel__tekst { margin-top: var(--fu-space-8); }

/* Inhoud uit de editor: beelden, onderschriften en video's binnen de kolom, met lucht erboven en eronder. */
.fu-prose :is(img, video, iframe) { max-width: 100%; }
.fu-prose img { height: auto; border-radius: var(--fu-r-sm); }
.fu-prose :is(figure, .wp-caption) { margin: var(--fu-space-6) 0; max-width: 100%; }
.fu-prose :is(figcaption, .wp-caption-text) { margin-top: var(--fu-space-2); color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); }
.fu-prose iframe[src*="youtube"], .fu-prose iframe[src*="vimeo"] { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; border-radius: var(--fu-r-md); }
.fu-prose :is(h2, h3) { margin: var(--fu-space-8) 0 var(--fu-space-3); line-height: var(--fu-lh-snug); }
.fu-prose > .fu-block, .fu-prose .fa-blok { margin-block: var(--fu-space-6); }
.fu-prose :is(.alignleft, .alignright) { float: none; margin-inline: 0; }

.fo-delen { display: flex; flex-wrap: wrap; align-items: center; gap: var(--fu-space-3); margin-top: var(--fu-space-10); padding-top: var(--fu-space-6); border-top: var(--fu-lijn) solid var(--fu-c-line); }
.fo-delen .fu-chips { flex-wrap: wrap; overflow: visible; }
.fo-auteur { margin-top: var(--fu-space-8); }
.fo-auteur img { border-radius: var(--fu-r-pill); }

/* Vaste blokken (Vandaag in …, Uit de oude doos, Harald): op een telefoon onder elkaar in die volgorde; breed twee kolommen,
   links Vandaag in … met Harald direct eronder, rechts Uit de oude doos (feedback Patrick 08-10). */
.fo-vast { display: grid; gap: var(--fu-space-4); align-items: start; }
.fo-vast__links { display: contents; }
.fo-vast__weetjes { order: 1; }
.fo-vast__doos { order: 2; }
.fo-vast__harald { order: 3; }
@media (min-width: 1024px) {
	.fo-vast { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--fu-space-6); }
	.fo-vast__links { display: grid; gap: var(--fu-space-6); align-content: start; }
	.fo-vast__weetjes, .fo-vast__doos, .fo-vast__harald { order: 0; }
	/* Zonder Uit de oude doos: Vandaag in … en Harald naast elkaar over de volle breedte. */
	.fo-vast--zonder-doos { grid-template-columns: 1fr; }
	.fo-vast--zonder-doos .fo-vast__links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}