/*
Theme Name: Lumicento
Theme URI: https://lumicento.org/
Author: Lumicento
Author URI: https://lumicento.org/
Description: Lumicento racconta il simulatore di lavoro postale con guide gratuite, analisi delle meccaniche, diari di partita e confronti tra piattaforme.
Version: 1.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lumicento
Tags: blog, entertainment, one-column, custom-colors, translation-ready
*/

@import url('fonts/fonts.css');

/* Палітра приходить уже доведеною до WCAG AA (logic/uniq/color.py ДО рендеру).
   Accent і primary — і заливка кнопок, і 14px-посилання (футер на vlak,
   `a {}` на grond), тому їх доводять до 4.5:1 проти обох підкладок.
   accent_alt лишається заливкою / великими цифрами (3:1). */
:root {
	--kleur-grond: #fbfbfb;
	--kleur-vlak: #f0f1f2;
	--kleur-rand: #89909f;
	--kleur-schrift: #1e2024;
	--kleur-schrift-zacht: #535965;
	--kleur-hoofd: #a52737;
	--kleur-hoofd-op: #faf9fa;
	--kleur-nadruk: #a5501d;
	--kleur-nadruk-op: #fafaf9;
	--kleur-nadruk-tweede: #ac8168;

	--schrift-titel: 'Outfit', Georgia, 'Times New Roman', serif;
	--schrift-tekst: 'Fira Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	--maat-rand: 1px;
	--maat-ronding: 4px;
	--kaart-vlak: var(--kleur-vlak);
	--band-even: var(--kleur-vlak);
	--maat-kolom: 1160px;
	--maat-lucht: clamp(2.5rem, 6vw, 5rem);
	--maat-raak: 44px;
	--maat-kop-hoogte: 76px;
}

/* Атрибут hidden слабший за будь-який клас, що задає display: правило
   браузера для [hidden] перебиває навіть один клас кнопки з display:
   inline-flex. Через це кнопка, помічена як схована, лишалась видимою.
   Лікується один раз на весь проєкт, і саме тут. */
[hidden] {
	display: none !important;
}

/* Липка шапка перехоплює анкерні переходи: без цього посилання-анкер приводить
   до блока, схованого під шапкою — і в тесті, і в живого користувача. */
html {
	scroll-padding-top: calc(var(--maat-kop-hoogte) + 1rem);
}

/* Поява блоків при скролі вішається ТІЛЬКИ під класом js, який дописує
   інлайновий скрипт у head. Інакше при вимкненому JavaScript сайт порожній. */
html.js [data-verschijn] {
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 420ms ease, transform 420ms ease;
}

html.js [data-verschijn].is-in-zicht {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	html.js [data-verschijn] {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

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

body {
	margin: 0;
	padding-bottom: var(--koek-ruimte, 0px);
	scroll-padding-bottom: var(--koek-ruimte, 0px);
	background: var(--kleur-grond);
	color: var(--kleur-schrift);
	font-family: var(--schrift-tekst);
	font-size: 1.0625rem;
	line-height: 1.7;
	overflow-wrap: break-word;
	-webkit-text-size-adjust: 100%;
}

h1,
h2,
h3,
h4 {
	font-family: var(--schrift-titel);
	line-height: 1.18;
	margin: 0 0 0.6em;
	font-weight: 700;
}

h1 {
	font-size: clamp(2rem, 5vw, 3.1rem);
}

h2 {
	font-size: clamp(1.55rem, 3.4vw, 2.25rem);
}

h3 {
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

p {
	margin: 0 0 1.1em;
}

ul,
ol {
	margin: 0 0 1.2em;
	padding-left: 1.2em;
}

li {
	margin-bottom: 0.4em;
}

a {
	/* Accent доведений до 4.5:1 проти grond і vlak: це 14–16px текст, не заливка. */
	color: var(--kleur-nadruk);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

/* min-height на display:inline ігнорується — тому кожне видиме посилання
   стає inline-flex. Інакше рядок на кшталт cookie-«lees meer» лишається
   16px і брама tap_targets блокує ZIP на кожній сторінці зі смугою. */
a[href]:not(.schaduwlabel) {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: var(--maat-raak);
	max-width: 100%;
}

a:hover,
a:focus {
	color: var(--kleur-hoofd);
}

/* Фокус лишається видимим завжди: outline: none заради вигляду прибирає
   клавіатурну навігацію разом із ним. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--kleur-nadruk);
	outline-offset: 2px;
}

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

img {
	display: block;
}

figure {
	margin: 0;
}

table {
	width: 100%;
	max-width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

th,
td {
	padding: 0.7rem 0.8rem;
	border-bottom: var(--maat-rand) solid var(--kleur-rand);
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

th {
	font-family: var(--schrift-titel);
	font-size: 0.95rem;
	letter-spacing: 0.02em;
}

code,
kbd {
	font-family: ui-monospace, Consolas, monospace;
	font-size: 0.95em;
	overflow-wrap: anywhere;
	word-break: break-word;
}

blockquote {
	margin: 0;
	padding: 1.2rem 1.4rem;
	border-left: 4px solid var(--kleur-nadruk);
	background: var(--kleur-vlak);
}

/* Тільки для скрінрідерів. Не display:none — інакше вміст зникає і для них. */
.schaduwlabel {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.schaduwlabel:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	z-index: 60;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0.75rem 1rem;
	clip: auto;
	clip-path: none;
	background: var(--kleur-hoofd);
	color: var(--kleur-hoofd-op);
}

.vesting {
	width: 100%;
	max-width: var(--maat-kolom);
	margin: 0 auto;
	padding: 0 clamp(1rem, 4vw, 2rem);
}

.sector {
	padding: var(--maat-lucht) 0;
}

.sector:nth-of-type(even) {
	background: var(--band-even);
}

.sector__kop {
	max-width: 46rem;
	margin-bottom: 2rem;
}

/* Колір дрібного тексту в надзаголовку — з ролей text/text_muted.

   Accent і primary доведені реєстром до 4.5:1, бо CSS ставить їх на 14px
   посилання (футер, `a {}`). accent_alt лишається 3:1: заливка й великі цифри,
   не букви 14px. Надзаголовок навмисно не бере акцент. */
.sector__voorkop {
	display: block;
	margin-bottom: 0.5rem;
	font-family: var(--schrift-titel);
	font-size: 0.9rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kleur-schrift-zacht);
}

.sector__lijf {
	display: grid;
	gap: clamp(1.2rem, 3vw, 2.2rem);
	align-items: start;
}

/* --- Ось 4, компоновка: позиція медіа ------------------------------------ */

.sector--media-left .sector__lijf,
.sector--media-right .sector__lijf {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.sector--media-left .vizier {
	order: -1;
}

.sector--media-right .vizier {
	order: 1;
}

.sector--media-full .sector__lijf {
	grid-template-columns: minmax(0, 1fr);
}

.sector--media-full .vizier {
	margin-bottom: 1.4rem;
}

/* --- Ось 4, компоновка: надзаголовок ------------------------------------- */

.sector--eyebrow-after .sector__voorkop {
	margin-top: 0.6rem;
	margin-bottom: 0;
	order: 2;
}

.sector--eyebrow-after .sector__kop {
	display: flex;
	flex-direction: column;
}

/* --- Ось 4, компоновка: мета-дані ---------------------------------------- */

.sector__meta {
	margin: 0;
	font-size: 0.92rem;
	color: var(--kleur-schrift-zacht);
}

.sector--meta-above .sector__meta {
	order: -1;
	margin-bottom: 0.6rem;
}

.sector--meta-below .sector__meta {
	margin-top: 1rem;
}

.sector--meta-aside .sector__meta {
	padding-left: 1rem;
	border-left: 3px solid var(--kleur-rand);
}

/* --- Ось 4, компоновка: форма сітки карток ------------------------------- */

.sector__reeks {
	display: grid;
	gap: clamp(1rem, 2.4vw, 1.8rem);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
}

.sector--grid-row4 .sector__reeks {
	grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
}

.sector--grid-pair2x2 .sector__reeks {
	grid-template-columns: repeat(2, minmax(min(16.5rem, 100%), 1fr));
}

.sector--grid-feature3plus1 .sector__reeks {
	grid-template-columns: repeat(auto-fit, minmax(min(16.5rem, 100%), 1fr));
}

.sector--grid-feature3plus1 .sector__reeks > li:first-child {
	grid-column: 1 / -1;
}

.sector--grid-stack .sector__reeks {
	grid-template-columns: minmax(0, 1fr);
}

/* Картки поруч із фото: ніколи не три колонки по 80px — інакше імена
   ламаються всередині слова (Mar co / Elena Ferr aro). */
.sector--media-left .sector__reeks,
.sector--media-right .sector__reeks {
	grid-template-columns: minmax(0, 1fr);
}

/* --- Ось 4, компоновка: подача даних ------------------------------------- */

.sector--data-shape-chips .sector__gegevens {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	list-style: none;
}

.sector--data-shape-chips .sector__gegevens > li {
	margin: 0;
	padding: 0.35rem 0.75rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 999px;
	background: var(--kleur-grond);
	font-size: 0.92rem;
}

.sector--data-shape-list .sector__gegevens {
	padding-left: 1.1rem;
}

.sector--data-shape-table .sector__gegevens {
	display: table;
	width: 100%;
	padding: 0;
	list-style: none;
}

.sector--data-shape-table .sector__gegevens > li {
	display: table-row;
}

.sector--data-shape-table .sector__gegevens > li > span {
	display: table-cell;
	padding: 0.45rem 0.7rem 0.45rem 0;
	border-bottom: var(--maat-rand) solid var(--kleur-rand);
}

.runenband {
	height: 14px;
	margin: 0;
	border: 0;
	background-image: repeating-linear-gradient(
		90deg,
		var(--kleur-rand) 0,
		var(--kleur-rand) 10px,
		transparent 10px,
		transparent 22px
	);
	background-position: center;
	background-repeat: repeat-x;
	background-size: auto 2px;
}

html[data-scheid='chevron'] .runenband {
	height: 10px;
	background-image: repeating-linear-gradient(
		135deg,
		var(--kleur-rand) 0 6px,
		transparent 6px 12px
	);
	background-size: 16px 10px;
}

html[data-scheid='dots'] .runenband {
	height: 10px;
	background-image: radial-gradient(circle, var(--kleur-rand) 1.6px, transparent 1.8px);
	background-size: 14px 10px;
	background-repeat: repeat-x;
}

html[data-scheid='bar'] .runenband {
	height: 4px;
	background-image: none;
	background-color: var(--kleur-rand);
}

html[data-scheid='double'] .runenband {
	height: 10px;
	background-image: linear-gradient(
		var(--kleur-rand),
		var(--kleur-rand) 2px,
		transparent 2px,
		transparent 8px,
		var(--kleur-rand) 8px,
		var(--kleur-rand) 10px
	);
	background-size: 100% 10px;
}

/* --- Шапка й меню -------------------------------------------------------- */

.banier {
	position: sticky;
	top: 0;
	z-index: 40;
	min-height: var(--maat-kop-hoogte);
	background: var(--kleur-grond);
	border-bottom: var(--maat-rand) solid var(--kleur-rand);
}

.banier__lijn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--maat-kop-hoogte);
}

.banier__merk {
	display: inline-flex;
	align-items: baseline;
	gap: 0.1em;
	font-family: var(--schrift-titel);
	font-size: 1.35rem;
	font-weight: 700;
	color: var(--kleur-schrift);
	text-decoration: none;
	letter-spacing: -0.01em;
}

.banier__merk-staart {
	color: var(--kleur-nadruk);
}

.seinkaart {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.6vw, 1.4rem);
}

.seinkaart ul {
	display: flex;
	align-items: center;
	gap: clamp(0.6rem, 1.6vw, 1.4rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

.seinkaart li {
	margin: 0;
}

.seinkaart a {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
	padding: 0 0.2rem;
	color: var(--kleur-schrift);
	text-decoration: none;
	font-size: 1rem;
}

.seinkaart a:hover,
.seinkaart a:focus,
.seinkaart .current-menu-item > a {
	color: var(--kleur-nadruk);
	text-decoration: underline;
}

.seinkaart__schakelaar {
	display: none;
	align-items: center;
	justify-content: center;
	min-width: var(--maat-raak);
	min-height: var(--maat-raak);
	padding: 0 0.7rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: var(--maat-ronding);
	background: var(--kleur-vlak);
	color: var(--kleur-schrift);
	font-family: var(--schrift-titel);
	font-size: 0.95rem;
	cursor: pointer;
}

/* --- Кнопки ------------------------------------------------------------- */

.schakelaar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: var(--maat-raak);
	padding: 0.7rem 1.3rem;
	border: 2px solid transparent;
	border-radius: var(--maat-ronding);
	background: var(--kleur-hoofd);
	color: var(--kleur-hoofd-op);
	font-family: var(--schrift-titel);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.schakelaar:hover,
.schakelaar:focus {
	background: var(--kleur-nadruk);
	color: var(--kleur-nadruk-op);
}

/* Підпис контурної кнопки — роллю text, а не primary.
 *
 * Раніше primary був лише 3:1 (великий текст) і на 15px давав ~4.4:1.
 * Тепер primary теж 4.5:1, але контурна кнопка лишає букви в ролі text:
 * рамка несе колір бренду, літери — гарантований відтінок. */
.schakelaar--los {
	background: transparent;
	border-color: var(--kleur-hoofd);
	color: var(--kleur-schrift);
}

.schakelaar--los:hover,
.schakelaar--los:focus {
	background: var(--kleur-hoofd);
	color: var(--kleur-hoofd-op);
}

.schakelaar--kort {
	padding: 0.5rem 0.9rem;
	font-size: 0.95rem;
}

/* --- Картка ------------------------------------------------------------- */

.dossier {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	height: 100%;
	min-width: 0;
	padding: clamp(1.1rem, 2.2vw, 1.6rem);
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: var(--maat-ronding);
	background: var(--kaart-vlak);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

html[data-kaart='inset'] .dossier {
	box-shadow: inset 0 0 0 1px var(--kleur-rand);
}

.dossier h3 {
	margin: 0;
	font-size: 1.08rem;
	line-height: 1.28;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.dossier p {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.55;
	overflow-wrap: normal;
	word-break: normal;
	hyphens: none;
}

.dossier__cijfer {
	font-family: var(--schrift-titel);
	font-size: clamp(1.6rem, 3.4vw, 2.4rem);
	font-weight: 700;
	line-height: 1;
	color: var(--kleur-nadruk-tweede);
}

.dossier__pijl {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
	font-family: var(--schrift-titel);
	font-size: 0.98rem;
}

/* Ось 4: стрілка зверху блока або притиснута до низу. margin-top:auto
   працює тільки у flex-контейнері — тому картка і є flex. */
.dossier--arrow-bottom .dossier__pijl {
	margin-top: auto;
}

.dossier--arrow-top .dossier__pijl {
	order: -1;
}

.dossier--figure-footer .dossier__cijfer {
	order: 5;
}

.dossier--figure-before .dossier__cijfer {
	order: -2;
}

.dossier__lijst {
	margin: 0;
	padding-left: 1.1rem;
	font-size: 0.97rem;
}

.merk {
	display: inline-block;
	padding: 0.2rem 0.6rem;
	border-radius: 999px;
	background: var(--kleur-nadruk-tweede);
	color: var(--kleur-grond);
	font-family: var(--schrift-titel);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* --- Медіа -------------------------------------------------------------- */

.vizier {
	margin: 0;
	overflow: hidden;
	border-radius: var(--maat-ronding);
	border: var(--maat-rand) solid var(--kleur-rand);
}

.vizier img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: cover;
}

.vizier__onderschrift {
	padding: 0.5rem 0.8rem;
	background: var(--kleur-vlak);
	font-size: 0.88rem;
	color: var(--kleur-schrift-zacht);
}

/* --- Форма -------------------------------------------------------------- */

.logboek {
	display: grid;
	gap: 1rem;
	max-width: 34rem;
	padding: clamp(1.1rem, 2.2vw, 1.6rem);
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: var(--maat-ronding);
	background: var(--kleur-vlak);
}

.logboek__rij {
	display: grid;
	gap: 0.35rem;
}

.logboek label {
	font-family: var(--schrift-titel);
	font-size: 0.96rem;
}

.logboek input,
.logboek select,
.logboek textarea {
	min-height: var(--maat-raak);
	padding: 0.6rem 0.7rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 8px;
	background: var(--kleur-grond);
	color: var(--kleur-schrift);
	font-family: inherit;
	font-size: 1rem;
}

.logboek textarea {
	min-height: 8rem;
	resize: vertical;
}

.logboek__akkoord {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	min-height: var(--maat-raak);
	padding-block: 0.35rem;
	font-size: 0.95rem;
}

.logboek__akkoord input {
	width: 1.25rem;
	height: 1.25rem;
	min-width: 1.25rem;
	min-height: 1.25rem;
	margin-top: 0.2rem;
	flex-shrink: 0;
}

.logboek__akkoord span {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

/* Приманка для ботів: поле схоже на справжнє, але сховане від людей.
 *
 * Одного виносу за екран замало. Елемент за межами вьюпорта усе одно має
 * непорожню геометрію, і Playwright вважає його видимим — тобто проба
 * червоніє на техніці, яка працює. Тому додається нульовий розмір: людина
 * поля не бачить, бот у розмітці його знаходить, а проба бачить нульовий
 * бокс і не сперечається. display:none не годиться: частина ботів свідомо
 * пропускає такі поля. */
.logboek__lokval {
	position: absolute;
	left: -9999px;
	width: 0;
	height: 0;
	overflow: hidden;
	opacity: 0;
	pointer-events: none;
}

.logboek__lokval input,
.logboek__lokval label {
	width: 0;
	height: 0;
	min-height: 0;
	padding: 0;
	border: 0;
}

.logboek__toelichting {
	margin: 0;
	font-size: 0.88rem;
	color: var(--kleur-schrift-zacht);
}

/* --- Відгуки, питання, журнал ------------------------------------------- */

.dossier--ervaring blockquote {
	padding: 0;
	border: 0;
	background: none;
	font-size: 1.02rem;
}

.dossier--ervaring footer {
	font-size: 0.9rem;
	color: var(--kleur-schrift-zacht);
}

.dossier--vraag {
	padding: 0;
	overflow: hidden;
}

.dossier--vraag summary {
	display: flex;
	align-items: center;
	min-height: var(--maat-raak);
	padding: 0.8rem 1.1rem;
	background: var(--kleur-vlak);
	font-family: var(--schrift-titel);
	font-size: 1.02rem;
	cursor: pointer;
}

.dossier--vraag > div {
	padding: 0.2rem 1.1rem 1rem;
}

/* Зірки оцінки — це текст 15px, тому колір із ролі text, не з акцентної. */
.dossier--sterren {
	color: var(--kleur-schrift);
	font-size: 0.95rem;
	letter-spacing: 0.15em;
}

/* --- Cookie-смуга ------------------------------------------------------- */

/* Full-width смуга внизу екрана, а не плавна карточка в кутку і не модальне
   вікно: так вимагає скіл, і так її видно, не перекриваючи вміст. */
.donjon__koekbalk {
	position: fixed;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 50;
	max-height: 40vh;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.2rem;
	padding: 0.9rem clamp(1rem, 4vw, 2rem);
	border-top: 2px solid var(--kleur-nadruk);
	background: var(--kleur-vlak);
	box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.16);
}

.donjon__koektekst {
	flex: 1 1 22rem;
	min-width: 0;
	max-height: 20vh;
	overflow: auto;
	margin: 0;
	font-size: 0.95rem;
}

.donjon__koektekst a {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
	padding-inline: 0.15rem;
}

.donjon__koekknoppen {
	display: flex;
	flex-wrap: wrap;
	flex: 0 0 auto;
	align-items: stretch;
	gap: 0.6rem;
}

/* --- Підвал ------------------------------------------------------------- */

.donjon {
	margin-top: var(--maat-lucht);
	padding: var(--maat-lucht) 0 1.6rem;
	border-top: var(--maat-rand) solid var(--kleur-rand);
	background: var(--kleur-vlak);
}

.donjon__raster {
	display: grid;
	grid-template-columns: 1.4fr repeat(3, 1fr);
	gap: clamp(1.2rem, 3vw, 2.4rem);
}

.donjon__rubriek h2 {
	margin-bottom: 0.7rem;
	font-size: 1.05rem;
}

.donjon__rubriek ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.donjon__rubriek li {
	margin-bottom: 0.15rem;
}

.donjon__rubriek a {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
	font-size: 0.97rem;
}

.donjon__slot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.8rem;
	margin-top: 2rem;
	padding-top: 1.2rem;
	border-top: var(--maat-rand) solid var(--kleur-rand);
	font-size: 0.9rem;
	color: var(--kleur-schrift-zacht);
}

.donjon__boven {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
}

/* --- Спільна оболонка віджетів -----------------------------------------
 *
 * Тут лежить те, що не залежить від родини: оболонка, органи керування,
 * таблиця результатів і дві візуалізації, які вживають усі чотири родини
 * (смуги й теплова сітка). Специфічне для родини — у widgets/<family>/.
 *
 * Тримати спільне в CSS однієї родини було б помилкою: рендерер підклеює
 * стилі лише задіяних родин, і сайт без цієї родини лишився б без оболонки.
 */

.dossier--hulpmiddel {
	gap: 1rem;
	border-width: 2px;
	background: var(--kleur-grond);
}

.dossier__besturing {
	display: grid;
	gap: 0.9rem;
}

.dossier__regelaar {
	display: grid;
	gap: 0.35rem;
}

/* Слайдер сам по собі нижчий за палець: висота задається явно, інакше проба
   розміру раковини на 390px червоніє. */
.dossier__regelaar input[type='range'] {
	width: 100%;
	min-height: var(--maat-raak);
	accent-color: var(--kleur-nadruk);
}

.dossier__regelaar input[type='number'] {
	width: 6rem;
	min-height: var(--maat-raak);
	padding: 0.4rem 0.5rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 8px;
	background: var(--kleur-grond);
	color: var(--kleur-schrift);
	font: inherit;
	text-align: center;
}

.dossier__regelaar select {
	min-height: var(--maat-raak);
	padding: 0.4rem 0.5rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 8px;
	background: var(--kleur-grond);
	color: var(--kleur-schrift);
	font: inherit;
}

.dossier__stapper {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.dossier__keuzereeks {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.dossier__keuzematrix {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
	gap: 0.5rem;
}

.dossier__keuzereeks [aria-pressed='true'],
.dossier__keuzematrix [aria-pressed='true'] {
	background: var(--kleur-nadruk);
	border-color: var(--kleur-nadruk);
	color: var(--kleur-nadruk-op);
}

.dossier__waarde {
	font-family: var(--schrift-titel);
	font-weight: 700;
}

.dossier__hint {
	font-size: 0.86rem;
	color: var(--kleur-schrift-zacht);
}

.dossier__uitslag caption {
	margin-bottom: 0.5rem;
	font-family: var(--schrift-titel);
	font-size: 1rem;
	text-align: left;
}

/* Жодного transition на елементах, за якими перевіряється контраст: знімок
   інакше ловить проміжний кадр, і проба флейкить. */
.dossier__viz,
.dossier__uitslag,
.dossier__samenvatting {
	transition: none;
	animation: none;
}

.dossier__viz {
	min-height: 8rem;
	min-width: 0;
	max-width: 100%;
}

.dossier__viz svg {
	width: 100%;
	max-width: 24rem;
	height: auto;
}

/* --- Смуги (вживають усі родини) --------------------------------------- */

.dossier__balkrij {
	display: grid;
	grid-template-columns: minmax(0, 10rem) minmax(0, 1fr) auto;
	gap: 0.6rem;
	align-items: center;
	margin-bottom: 0.5rem;
	font-size: 0.95rem;
}

.dossier__balkspoor {
	display: block;
	height: 14px;
	overflow: hidden;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 999px;
	background: var(--kleur-vlak);
}

/* span із заданою висотою нічого не малює без display:block — висота й фон
   просто не застосовуються, і смуга виглядає як список чисел. */
.dossier__balkvulling {
	display: block;
	height: 100%;
	background: var(--kleur-nadruk);
}

.dossier__balkcijfer {
	font-family: var(--schrift-titel);
	font-weight: 700;
}

/* --- Теплова сітка (matrix і map) --------------------------------------- */

.dossier__hitte {
	display: grid;
	gap: 3px;
}

.dossier__hittecel {
	display: block;
	padding: 0.55rem 0.4rem;
	border-radius: 6px;
	background: var(--kleur-nadruk);
	color: var(--kleur-nadruk-op);
	font-family: var(--schrift-titel);
	font-size: 0.9rem;
	text-align: center;
}

@media (max-width: 640px) {
	.dossier__balkrij {
		grid-template-columns: 1fr auto;
	}

	.dossier__balkspoor {
		grid-column: 1 / -1;
	}
}

/* --- Титульний блок сторінки -------------------------------------------- */

.sector--titel {
	padding-bottom: 0;
}

.sector--titel p {
	max-width: 46rem;
	font-size: 1.12rem;
	color: var(--kleur-schrift-zacht);
}

/* --- Юридичні сторінки --------------------------------------------------- */

.sector__akte {
	max-width: 48rem;
}

.sector__akte h2 {
	margin-top: 2.2rem;
	padding-top: 1.2rem;
	border-top: var(--maat-rand) solid var(--kleur-rand);
	font-size: 1.35rem;
}

.sector__akte h2:first-child {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.sector__datum {
	margin: 0 0 1.6rem;
	font-size: 0.9rem;
	color: var(--kleur-schrift-zacht);
}

/* Таблиця з опису cookie на телефоні перевертається у стопку. Обгортка з
   overflow-x працює не завжди: усередині блока з overflow:hidden і
   трансформацією Blink усе одно розтягує сторінку. */
.sector__koektabel caption {
	margin-bottom: 0.6rem;
	font-family: var(--schrift-titel);
	font-size: 1.05rem;
	text-align: left;
}

/* --- Контакти ------------------------------------------------------------ */

.sector--contact .sector__lijf {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.dossier--gegevens dl {
	display: grid;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: 0.4rem 1rem;
	margin: 0;
}

.dossier--gegevens dt {
	font-family: var(--schrift-titel);
	font-size: 0.95rem;
	color: var(--kleur-schrift-zacht);
}

.dossier--gegevens dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.dossier--gegevens a {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
}

/* --- Журнал і окремий запис --------------------------------------------- */

.dossier--stuk h3 {
	font-size: 1.22rem;
}

/* Заголовок-посилання в списку журналу — типовий порушник розміру під палець:
   висота йде від line-height і виходить близько 28px. */
.dossier--stuk h2 a,
.dossier--stuk h3 a,
.sector__navigatie a {
	display: inline-flex;
	align-items: center;
	min-height: var(--maat-raak);
}

/* Специфічність: селектор «клас плюс тег» це (0,1,1) і перебиває селектор
   «клас елемента» (0,1,0). Класичний симптом — мета-рядок картки, який
   отримує розмір абзацу. Лікується :not(), а не переносом правил нижче. */
.dossier--stuk p:not(.dossier__meta) {
	margin: 0;
}

.dossier__meta {
	margin: 0;
	font-size: 0.88rem;
	color: var(--kleur-schrift-zacht);
}

.sector__blad {
	max-width: 44rem;
	font-size: 1.06rem;
}

.sector__navigatie {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.8rem;
	margin-top: 2rem;
}

/* --- Хронологія (мілестони) --------------------------------------------- */

.sector__tijdlijn {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 3px solid var(--kleur-rand);
}

.sector__tijdlijn > li {
	position: relative;
	margin: 0 0 1.3rem;
	padding-left: 1.4rem;
}

.sector__tijdlijn > li::before {
	content: '';
	position: absolute;
	top: 0.55rem;
	left: -8px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	background: var(--kleur-nadruk);
}

/* Рік у хронології — 17px, тобто дрібний текст: колір із ролі text. */
.sector__jaar {
	display: block;
	font-family: var(--schrift-titel);
	font-weight: 700;
	color: var(--kleur-schrift);
}

/* --- Тарифи ------------------------------------------------------------- */

.dossier--tarief {
	border-width: 2px;
}

.dossier--tarief .dossier__cijfer {
	color: var(--kleur-hoofd);
}

.dossier__periode {
	font-family: var(--schrift-tekst);
	font-size: 0.92rem;
	color: var(--kleur-schrift-zacht);
}

/* --- 404 ---------------------------------------------------------------- */

/* Велика цифра 404: селектор «клас секції плюс тег p» має специфічність
   (0,1,1) і перебив би розмір цифри, намалювавши її як звичайний текст.
   Тому цифра описана власним класом елемента, а не тегом. */
.sector--fout .sector__code {
	display: block;
	margin: 0 0 0.4rem;
	font-family: var(--schrift-titel);
	font-size: clamp(4rem, 16vw, 9rem);
	font-weight: 700;
	line-height: 0.9;
	color: var(--kleur-nadruk-tweede);
}

.sector--fout .sector__acties {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
	margin-top: 1.4rem;
}

@media (max-width: 1080px) {
	.sector--grid-row4 .sector__reeks,
	.sector--grid-feature3plus1 .sector__reeks {
		grid-template-columns: repeat(2, minmax(min(16.5rem, 100%), 1fr));
	}

	.donjon__raster {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 900px) {
	.seinkaart__schakelaar {
		display: inline-flex;
	}

	/* Меню на телефоні — панель під шапкою. Кнопка керує атрибутом hidden,
	   а не класом: перевірка бачить is_visible(), а не наявність атрибута. */
	.seinkaart__paneel {
		position: absolute;
		top: var(--maat-kop-hoogte);
		right: 0;
		left: 0;
		padding: 0.6rem clamp(1rem, 4vw, 2rem) 1.2rem;
		border-bottom: var(--maat-rand) solid var(--kleur-rand);
		background: var(--kleur-grond);
		box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
	}

	.seinkaart__paneel ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.seinkaart__paneel a {
		width: 100%;
		padding: 0.3rem 0;
		border-bottom: var(--maat-rand) solid var(--kleur-rand);
	}

	.sector--media-left .sector__lijf,
	.sector--media-right .sector__lijf,
	.sector--contact .sector__lijf {
		grid-template-columns: minmax(0, 1fr);
	}

	.sector--media-left .vizier,
	.sector--media-right .vizier {
		order: 0;
	}
}

@media (max-width: 640px) {
	.sector__reeks,
	.sector--grid-row4 .sector__reeks,
	.sector--grid-pair2x2 .sector__reeks,
	.sector--grid-feature3plus1 .sector__reeks {
		grid-template-columns: minmax(0, 1fr);
	}

	.donjon__raster {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Якщо таблиця лишається display:table, мін-ширина колонок (ім'я cookie
	   в <code>) розпирає 390px навіть після tr { display:block }. Тому сама
	   таблиця стає блоком, комірки — сіткою з minmax(0, …). */
	.sector__koektabel,
	.sector__stapel,
	.dossier__uitslag,
	.dossier__matrix {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.sector__koektabel thead,
	.sector__stapel thead {
		display: none;
	}

	.sector__koektabel tbody,
	.sector__stapel tbody,
	.dossier__uitslag tbody,
	.dossier__matrix tbody {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.sector__koektabel tr,
	.sector__stapel tr {
		display: block;
		width: 100%;
		max-width: 100%;
		margin-bottom: 1rem;
		border: var(--maat-rand) solid var(--kleur-rand);
		border-radius: var(--maat-ronding);
		background: var(--kleur-grond);
	}

	.dossier__uitslag tr,
	.dossier__matrix tr {
		display: block;
		width: 100%;
		max-width: 100%;
	}

	.sector__koektabel td,
	.sector__stapel td {
		display: grid;
		grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
		gap: 0.6rem;
		min-width: 0;
		max-width: 100%;
		overflow-wrap: anywhere;
		border-bottom: 0;
	}

	.sector__koektabel td::before,
	.sector__stapel td::before {
		content: attr(data-kop);
		font-family: var(--schrift-titel);
		font-size: 0.88rem;
		color: var(--kleur-schrift-zacht);
	}

	.donjon__koekbalk {
		flex-direction: column;
		align-items: stretch;
		gap: 0.6rem;
		padding: 0.8rem 1rem;
		overflow: hidden;
	}

	.donjon__koektekst {
		flex: 1 1 auto;
		flex-basis: auto;
		min-height: 0;
		max-height: calc(40vh - 6rem);
		overflow: auto;
		font-size: 0.9rem;
	}

	.donjon__koekknoppen {
		width: 100%;
		flex: 0 0 auto;
	}

	.donjon__koekknoppen .schakelaar {
		flex: 1 1 auto;
	}

	.donjon__koekknoppen a.schakelaar {
		flex: 1 1 100%;
	}

	.sector--data-shape-table .sector__gegevens,
	.sector--data-shape-table .sector__gegevens > li,
	.sector--data-shape-table .sector__gegevens > li > span {
		display: block;
	}
}

/* Родина matrix: легенда рядок×колонка, підсвітка найсильнішої комбінації і
   радар. Оболонка й теплова сітка — у theme/css/45-widgets.css. */

.dossier__matrix {
	font-size: 0.94rem;
}

.dossier__matrix caption {
	margin-bottom: 0.5rem;
	font-family: var(--schrift-titel);
	font-size: 1rem;
	text-align: left;
}

.dossier__matrix td {
	text-align: center;
}

/* Підсвітка робиться фоном і рамкою, не тільки кольором тексту: різниця
   мусить читатись і в чорно-білому друку, і при дальтонізмі. */
.dossier__matrix .is-beste {
	background: var(--kleur-nadruk);
	color: var(--kleur-nadruk-op);
	font-weight: 700;
	outline: 2px solid var(--kleur-nadruk-tweede);
	outline-offset: -2px;
}

/* Дрібний текст — роль text: акцентні відтінки доведені лише до 3:1. */
.dossier__conclusie {
	margin: 0;
	font-family: var(--schrift-titel);
	font-size: 1.08rem;
	font-weight: 700;
	color: var(--kleur-schrift);
}

.dossier--compare .dossier__viz svg {
	max-width: 18rem;
}

/* Родина calc: підсумкове речення і напівкруговий гейдж.
   Оболонка й смуги — у theme/css/45-widgets.css. */

/* Підсумкове речення — дрібний текст, тому колір із ролі text. Акцентні
   ролі гарантовані реєстром лише на 3:1, тобто для великих цифр і заливок. */
.dossier--quiz .dossier__samenvatting {
	margin: 0;
	font-family: var(--schrift-titel);
	font-size: 1.15rem;
	font-weight: 700;
	color: var(--kleur-schrift);
}

.dossier--quiz .dossier__viz svg {
	max-width: 20rem;
}

.dossier--quiz .dossier__viz text {
	font-family: var(--schrift-titel);
}

/* Родина timeline: фази, смуга часу і стек накопичення.
   Оболонка й смуги — у theme/css/45-widgets.css. */

.dossier__fasen {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: fase;
}

.dossier__fase {
	display: grid;
	gap: 0.15rem;
	margin-bottom: 0.6rem;
	padding: 0.65rem 0.8rem 0.65rem 2.4rem;
	position: relative;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: var(--maat-ronding);
	background: var(--kleur-vlak);
	counter-increment: fase;
}

.dossier__fase::before {
	content: counter(fase);
	position: absolute;
	top: 0.65rem;
	left: 0.7rem;
	display: grid;
	place-items: center;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--kleur-rand);
	color: var(--kleur-schrift);
	font-family: var(--schrift-titel);
	font-size: 0.82rem;
	font-weight: 700;
}

.dossier__fase.is-bereikt::before {
	background: var(--kleur-nadruk);
	color: var(--kleur-nadruk-op);
}

.dossier__fase.is-bereikt {
	border-color: var(--kleur-nadruk);
}

.dossier__fasenavigatie {
	display: flex;
	gap: 0.5rem;
	margin: 0;
}

.dossier__strip {
	display: grid;
	gap: 0.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
}

.dossier__stripstap {
	display: grid;
	gap: 0.2rem;
	margin: 0;
	padding: 0.5rem;
	border-top: 4px solid var(--kleur-rand);
	font-size: 0.86rem;
}

.dossier__stripstap.is-bereikt {
	border-top-color: var(--kleur-nadruk);
}

.dossier__stapelbalk {
	display: flex;
	flex-direction: column;
	width: 3.5rem;
	height: 12rem;
	overflow: hidden;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: var(--maat-ronding);
}

.dossier__stapeldeel {
	display: block;
	width: 100%;
	background: var(--kleur-nadruk);
}

@media (max-width: 640px) {
	.dossier__strip {
		grid-auto-flow: row;
	}

	.dossier__stripstap {
		border-top: 0;
		border-left: 4px solid var(--kleur-rand);
	}

	.dossier__stripstap.is-bereikt {
		border-left-color: var(--kleur-nadruk);
	}
}

/* Родина map: перелік територій і схематична карта.
   Оболонка й теплова сітка — у theme/css/45-widgets.css. */

.dossier__gebieden {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.93rem;
}

.dossier__gebieden > li {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	padding: 0.3rem 0.65rem;
	border: var(--maat-rand) solid var(--kleur-rand);
	border-radius: 999px;
	background: var(--kleur-vlak);
}

/* Дрібний текст — роль text: акцентні відтінки доведені лише до 3:1. */
.dossier__gebiedstekst {
	margin: 0;
	min-height: 1.7em;
	font-family: var(--schrift-titel);
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--kleur-schrift);
}

.dossier--boom .dossier__viz svg {
	max-width: 100%;
}

/* Фокус на SVG-групі мусить бути видимим: карта доступна з клавіатури, і без
   цього невидно, яка територія зараз під фокусом. */
.dossier--boom .dossier__viz g:focus-visible {
	outline: 3px solid var(--kleur-nadruk-tweede);
}

.dossier--boom .dossier__viz text {
	font-family: var(--schrift-tekst);
}