/*
 * Fortuna UI — woordenlijst (Woordenboek 2, stap 7; ontwerp akkoord Patrick 10-10-2026, proef in tools/stijlpagina/woordenlijst/).
 * Handle fu-woordenlijst (niet in de bundel fu-site): Fortuna Woordenboek laadt hem op het overzicht en de woordpagina's.
 *
 * Overzicht:  .fu-wl  (zoekveld, soortpillen, A–Z-balk, groepen per letter met rijen)
 * Woordpagina: .fu-woord (kop met beroep, tekst, zijkolom met archief en "Genoemd in", vorige/volgende)
 */

/* === Overzicht ============================================================ */

.fu-wl__zoek {
	position: relative;
	margin-block: var(--fu-space-6) var(--fu-space-4);
	max-width: var(--fu-measure);
}
.fu-wl__zoek .fu-icon {
	position: absolute;
	inset-inline-start: var(--fu-space-4);
	top: 50%;
	translate: 0 -50%;
	width: var(--fu-icoon-m);
	height: var(--fu-icoon-m);
	color: var(--fu-c-fg-sub);
	pointer-events: none;
}
.fu-wl__invoer {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--fu-control-xl);
	padding: 0 var(--fu-space-4) 0 calc(var(--fu-space-4) * 2 + var(--fu-icoon-m));
	border: var(--fu-lijn) solid var(--fu-c-line-strong);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-surface);
	color: var(--fu-c-fg);
	font: inherit;
	font-size: var(--fu-fs-md);
}
.fu-wl__invoer::placeholder { color: var(--fu-c-fg-sub); opacity: 1; }
.fu-wl__invoer::-webkit-search-cancel-button { -webkit-appearance: none; }
.fu-wl__invoer:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); border-color: var(--fu-c-brand); }

.fu-wl__balk {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--fu-space-3);
	margin-block-end: var(--fu-space-2);
}
.fu-wl__teller { margin: 0; color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); }
.fu-wl__teller b { color: var(--fu-c-fg); font-variant-numeric: tabular-nums; }

/* A–Z: zelfde plakkende balk als op de andere pagina's (.fu-chipsbar), letters compact. */
.fu-wl .fu-chips--az .fu-chip { min-width: var(--fu-control-m); justify-content: center; padding-inline: var(--fu-space-2); font-variant-numeric: tabular-nums; }
.fu-wl .fu-chips--az .fu-chip[aria-disabled="true"] { color: var(--fu-c-fg-faint); pointer-events: none; }

.fu-wl__groep { scroll-margin-top: calc(var(--fu-header-h) + var(--fu-sticky-top) + var(--fu-control-m) + var(--fu-space-6)); padding-block-start: var(--fu-space-8); }
.fu-wl__letter {
	margin: 0 0 var(--fu-space-3);
	font-family: var(--fu-font-display);
	font-weight: var(--fu-display-weight);
	font-size: var(--fu-fs-3xl);
	line-height: var(--fu-lh-tight);
	color: var(--fu-c-brand);
}

.fu-wl__lijst {
	display: grid;
	gap: 0 var(--fu-space-8);
	margin: 0;
	padding: 0;
	list-style: none;
}
@media (min-width: 720px) { .fu-wl__lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .fu-wl__lijst { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.fu-wl__rij {
	display: grid;
	gap: var(--fu-space-0-5);
	padding-block: var(--fu-space-3);
	border-block-end: var(--fu-lijn) solid var(--fu-c-line);
	color: inherit;
	text-decoration: none;
	min-height: var(--fu-doel-min);
}
.fu-wl__naam { font-weight: 600; font-size: var(--fu-fs-md); line-height: var(--fu-lh-snug); }
.fu-wl__rij:hover .fu-wl__naam,
.fu-wl__rij:focus-visible .fu-wl__naam { color: var(--fu-c-link); text-decoration: underline; text-decoration-thickness: var(--fu-lijn); text-underline-offset: var(--fu-onderstreep-afstand); }
.fu-wl__rij:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); border-radius: var(--fu-r-xs); }
.fu-wl__beroep { color: var(--fu-c-fg-sub); font-size: var(--fu-fs-sm); font-style: italic; }
.fu-wl__soort {
	justify-self: start;
	margin-block-start: var(--fu-space-1);
	padding: 0 var(--fu-space-2);
	border-radius: var(--fu-r-pill);
	background: var(--fu-c-brand-soft);
	color: var(--fu-c-brand-strong);
	font-size: var(--fu-fs-2xs);
	font-weight: 600;
	letter-spacing: var(--fu-track-label);
	text-transform: uppercase;
	line-height: var(--fu-tag-h);
}
.fu-wl mark { background: var(--fu-geel-200); color: inherit; border-radius: var(--fu-r-xs); }

.fu-wl__leeg { margin-block: var(--fu-space-10); }

/* === Woordpagina ========================================================== */

.fu-woord__kruimel { margin: 0 0 var(--fu-space-4); font-size: var(--fu-fs-sm); color: var(--fu-c-fg-sub); }
.fu-woord__kruimel a { color: inherit; }
.fu-woord__kop { display: grid; gap: var(--fu-space-3); margin-block-end: var(--fu-space-10); }
.fu-woord__soort { margin: 0; color: var(--fu-c-brand); font-size: var(--fu-fs-xs); font-weight: 700; letter-spacing: var(--fu-track-label); text-transform: uppercase; }
.fu-woord__naam { margin: 0; }
.fu-woord__beroep {
	margin: var(--fu-space-2) 0 0;
	padding-block: var(--fu-space-1);
	padding-inline-start: var(--fu-space-3);
	border-inline-start: var(--fu-accent-width) solid var(--fu-c-accent);
	font-size: var(--fu-fs-lg);
	color: var(--fu-c-fg-sub);
}
.fu-woord__beroep b { color: var(--fu-c-fg); font-weight: 600; }

.fu-woord__opzet { display: grid; gap: var(--fu-space-10); }
@media (min-width: 1024px) { .fu-woord__opzet { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); align-items: start; } }
.fu-woord__tekst { max-width: var(--fu-measure); }
.fu-woord__zij { display: grid; gap: var(--fu-space-6); }
@media (min-width: 1024px) { .fu-woord__zij { position: sticky; top: calc(var(--fu-header-h) + var(--fu-sticky-top) + var(--fu-space-4)); } }

.fu-woord__genoemd { margin: 0; padding: 0; list-style: none; }
.fu-woord__genoemd li { display: grid; gap: var(--fu-space-0-5); padding-block: var(--fu-space-2-5); border-block-end: var(--fu-lijn) solid var(--fu-c-line); }
.fu-woord__genoemd li:last-child { border-block-end: 0; }
.fu-woord__genoemd time { color: var(--fu-c-fg-sub); font-size: var(--fu-fs-xs); font-variant-numeric: tabular-nums; }
.fu-woord__meer { margin: var(--fu-space-3) 0 0; font-size: var(--fu-fs-sm); color: var(--fu-c-fg-sub); }

.fu-woord__ook { display: flex; flex-wrap: wrap; gap: var(--fu-space-2); margin: 0; padding: 0; list-style: none; }
.fu-woord__ook li { padding: 0 var(--fu-space-2-5); border: var(--fu-lijn) solid var(--fu-c-line); border-radius: var(--fu-r-pill); font-size: var(--fu-fs-sm); line-height: var(--fu-tag-h); }

.fu-woord__buren { display: grid; gap: var(--fu-space-3); margin-block-start: var(--fu-space-12); padding-block-start: var(--fu-space-6); border-block-start: var(--fu-lijn) solid var(--fu-c-line); }
@media (min-width: 720px) { .fu-woord__buren { grid-template-columns: 1fr 1fr; } }
.fu-woord__buur { display: grid; gap: var(--fu-space-0-5); padding: var(--fu-space-4); border: var(--fu-lijn) solid var(--fu-c-line); border-radius: var(--fu-r-md); color: inherit; text-decoration: none; }
.fu-woord__buur:hover { border-color: var(--fu-c-brand); background: var(--fu-c-bg-sub); }
.fu-woord__buur:focus-visible { outline: var(--fu-focus-breedte) solid var(--fu-c-focus); outline-offset: var(--fu-focus-afstand-klein); }
.fu-woord__buur--volgende { text-align: end; }
.fu-woord__buur span { color: var(--fu-c-fg-sub); font-size: var(--fu-fs-xs); text-transform: uppercase; letter-spacing: var(--fu-track-label); }
.fu-woord__buur b { font-weight: 600; }

/* Cijfers uit het archief: rustige lijst (label links, getal rechts). */
.fu-woord__cijfers { display: grid; margin: 0; }
.fu-woord__cijfers + .fu-woord__cijfers { margin-block-start: var(--fu-space-4); }
.fu-woord__cijfers div { display: flex; justify-content: space-between; gap: var(--fu-space-4); padding-block: var(--fu-space-2); border-block-end: var(--fu-lijn) solid var(--fu-c-line); }
.fu-woord__cijfers dt { color: var(--fu-c-fg-sub); }
.fu-woord__cijfers dd { margin: 0; font-family: var(--fu-font-num); font-weight: 700; font-variant-numeric: tabular-nums; text-align: end; }

.fu-woord__kruimel a { text-decoration: none; }
.fu-woord__kruimel a:hover { text-decoration: underline; }