/*
 * Fortuna UI — typografie. Vereist fu-tokens (2026-set).
 * Rollen: display (koppen, scores), tekst (lopende tekst en bediening), cijfers (uitslagen, tabellen).
 */
.fu-display,
.fu-h1,
.fu-h2,
.fu-h3 {
	margin: 0;
	font-family: var(--fu-font-display);
	font-stretch: var(--fu-display-stretch);
	font-weight: var(--fu-display-weight);
	letter-spacing: var(--fu-track-display);
	line-height: var(--fu-lh-tight);
	color: var(--fu-c-kop, var(--fu-c-fg)); /* --fu-c-kop: koppen apart kleuren; zonder waarde volgt de koptekst de tekstkleur */
	text-wrap: balance;
}

.fu-display { font-size: var(--fu-fs-3xl); }
.fu-h1 { font-size: var(--fu-fs-2xl); }
.fu-h2 { font-size: var(--fu-fs-xl); line-height: var(--fu-lh-snug); }
.fu-h3 { font-size: var(--fu-fs-lg); line-height: var(--fu-lh-snug); letter-spacing: -0.015em; }

.fu-lead {
	margin: 0;
	font-family: var(--fu-font-text);
	font-size: var(--fu-fs-md);
	line-height: 1.5;
	color: var(--fu-c-fg-sub);
	max-width: var(--fu-measure);
	text-wrap: pretty;
}

.fu-prose {
	font-family: var(--fu-font-text);
	font-size: var(--fu-fs-md);
	line-height: var(--fu-lh-text);
	color: var(--fu-c-fg);
	max-width: var(--fu-measure);
}

.fu-prose p { margin: 0 0 1.1em; text-wrap: pretty; }

/* Tabel uit de editor (bijv. de A–Z op de woordenlijst): rustige lijst met lijnen i.p.v. zware randen. De editor zet rand, breedte en
 * uitlijning inline; !important is hier nodig om die te overschrijven. De eerste link in een cel (de letter) wordt groot. */
.fu-prose table:not([class]) {
	width: 100%;
	margin: var(--fu-space-6) 0;
	border: 0;
	border-collapse: collapse;
	border-block: var(--fu-lijn) solid var(--fu-c-line);
}

.fu-prose table:not([class]) td,
.fu-prose table:not([class]) th {
	padding: var(--fu-space-4) var(--fu-space-4) var(--fu-space-4) 0;
	border: 0;
	border-top: var(--fu-lijn) solid var(--fu-c-line);
	text-align: left !important;
	vertical-align: top;
	font-size: var(--fu-fs-sm);
	color: var(--fu-c-fg-sub);
}

.fu-prose table:not([class]) tr:first-child td,
.fu-prose table:not([class]) tr:first-child th { border-top: 0; }

.fu-prose table:not([class]) th { color: var(--fu-c-fg); font-weight: 600; }
.fu-prose table:not([class]) td p { margin: 0; }
.fu-prose table:not([class]) td p:empty { display: none; }

.fu-prose table:not([class]) td > a:first-child {
	display: block;
	width: fit-content;
	margin-bottom: var(--fu-space-1);
	font: var(--fu-display-weight) var(--fu-fs-xl) / 1.1 var(--fu-font-display);
	letter-spacing: var(--fu-track-display);
	text-decoration-line: none;
}

/* Klein label boven of naast een kop: spaarzaam gebruiken (max. één per drie secties). */
.fu-label {
	font-family: var(--fu-font-text);
	font-size: var(--fu-fs-xs);
	font-weight: 600;
	letter-spacing: var(--fu-track-label);
	text-transform: uppercase;
	color: var(--fu-c-fg-sub);
}

.fu-meta {
	font-family: var(--fu-font-text);
	font-size: var(--fu-fs-sm);
	color: var(--fu-c-fg-sub);
}

/* Cijfers die onder elkaar moeten staan: uitslagen, minuten, tabellen. */
.fu-num {
	font-family: var(--fu-font-num);
	font-stretch: var(--fu-display-stretch);
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: -0.01em;
}

/* Kop in twee tinten (zoals Apple): eerste zin in tekstkleur, vervolg zachter. Zelfde letter en grootte.
 *   <h2 class="fu-h2">Het laatste nieuws. <span class="fu-h2__sub">Verslagen en achtergrond.</span></h2> */
.fu-h2__sub { color: var(--fu-c-fg-faint); }

/*
 * Optische uitlijning. text-box snijdt de witruimte boven de hoofdletters en onder de basislijn weg,
 * zodat een titel precies gelijk staat met de bovenkant van een foto of kader en precies midden naast een icoon.
 * Browsers zonder ondersteuning tonen het zoals voorheen.
 */
@supports (text-box: trim-both cap alphabetic) {
	.fu-trim,
	.fu-block__title,
	.fu-h1,
	.fu-h2,
	.fu-h3,
	.fu-display,
	.fu-lead,
	.fu-card__title,
	.fu-card__excerpt,
	.fu-card__meta,
	.fu-shelf__title,
	.fu-shelf__meta,
	.fu-split__title,
	.fu-split__text,
	.fu-kpi__label,
	.fu-kpi__source,
	.fu-section__intro,
	.fu-match__name,
	.fu-scoreboard__name,
	.fu-kpi__value,
	.fu-fact__year { text-box: trim-both cap alphabetic; }
}

/* Grote koppen hangen optisch iets naar links, zodat de eerste letter lijnt met kleinere tekst eronder. */
.fu-display,
.fu-h1,
.fu-card--lead .fu-card__title,
.fu-split__title { margin-left: -0.04em; }

/* Term uit de woordenlijst (opent een venster met uitleg): onderscheidt zich van een gewone link.
 * Gewone link = groen met lijn; term = lopende tekstkleur met gestippelde lijn in het merkgroen. De Woordenboek-plugin
 * zet fu-link-hint fw-link op zulke links; in het theme krijgen ze ook fu-term (of koppel .fw-link hieraan). */
.fu-term,
.fu-prose a[aria-haspopup="dialog"],
.fu-prose a.fw-link {
	color: inherit;
	font-weight: 600; /* woordenboek-links zijn halfvet (Patrick 08-10); gewone links niet */
	text-decoration-line: underline;
	text-decoration-style: dotted;
	text-decoration-color: var(--fu-c-brand);
	text-decoration-thickness: var(--fu-onderstreep);
	text-underline-offset: var(--fu-onderstreep-afstand);
	cursor: help;
	border-radius: var(--fu-r-xs);
	transition: background-color var(--fu-beweging-hover);
}

.fu-term:hover,
.fu-prose a[aria-haspopup="dialog"]:hover,
.fu-prose a.fw-link:hover { background: var(--fu-c-brand-soft); text-decoration-style: solid; }
.fu-term:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); }

/* Ritme in tekstblokken (zie --fu-ritme-* in tokens.css): label strak bij de kop, datum en actie iets losser onderaan. */
.fu-card__kicker + .fu-card__title,
.fu-shelf__kicker + .fu-shelf__title,
.fu-split__kicker + .fu-split__title { margin-top: calc(var(--fu-ritme-label-hang) * -1); }

.fu-card__meta:not(:first-child),
.fu-shelf__meta:not(:first-child),
.fu-kpi__source { margin-top: var(--fu-ritme-los); }