/*
Theme Name: U-Stal
Theme URI: https://u-stal.nl
Author: U-Stal
Description: Thema voor U-Stal: fietsenstallingen, depots, nieuws en intranet. Werkt samen met de plugin U-Stal Core.
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: ustal
*/

/* ---------- Lettertype (lokaal, geen Google Fonts) ---------- */
@font-face { font-family: "Overpass"; src: url("assets/fonts/overpass-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("assets/fonts/overpass-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("assets/fonts/overpass-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Overpass"; src: url("assets/fonts/overpass-latin-800-normal.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

/* ---------- Tokens ---------- */
:root {
	--c-blue: #00548a;       /* bordblauw */
	--c-blue-deep: #003a60;
	--c-blue-soft: #e3eef6;
	--c-ink: #17222b;
	--c-muted: #56636e;
	--c-line: #d3dbe1;
	--c-paper: #f1f4f6;
	--c-white: #fff;
	--c-signal: #ffc800;     /* alleen voor meldingen */
	--c-signal-soft: #fff5cc;

	--f: "Overpass", "Helvetica Neue", Arial, sans-serif;
	--wrap: 72rem;
	--gutter: clamp(1rem, 4vw, 2rem);
	--r-bord: 14px;
	--r: 6px;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--c-white);
	color: var(--c-ink);
	font: 400 1.0625rem/1.6 var(--f);
	font-feature-settings: "kern", "tnum";
}
img, svg, iframe { max-width: 100%; }
img { height: auto; }
a { color: var(--c-blue); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-blue-deep); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--c-signal); outline-offset: 2px; border-radius: 2px; }
h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.1rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.35rem, 1.15rem + .8vw, 1.7rem); }
h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
.icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -4rem; background: var(--c-ink); color: #fff; padding: .6rem 1rem; z-index: 100; border-radius: var(--r); }
.skip:focus { top: 1rem; }
.site-main:focus { outline: none; }
[hidden] { display: none !important; }

/* ---------- Knoppen en links ---------- */
.ustal-button, .wp-block-button__link {
	display: inline-flex; align-items: center; gap: .5rem;
	padding: .75rem 1.15rem .65rem;
	background: var(--c-blue); color: #fff;
	font: 600 1rem/1.2 var(--f);
	border: 2px solid var(--c-blue); border-radius: var(--r);
	text-decoration: none; cursor: pointer;
}
.ustal-button:hover, .wp-block-button__link:hover { background: var(--c-blue-deep); border-color: var(--c-blue-deep); color: #fff; }
.ustal-button--light { background: #fff; color: var(--c-blue-deep); border-color: #fff; }
.ustal-button--light:hover { background: var(--c-blue-soft); border-color: var(--c-blue-soft); color: var(--c-blue-deep); }
.ustal-button--ghost { background: transparent; color: var(--c-blue); }
.ustal-button--ghost:hover { background: var(--c-blue); color: #fff; }
.text-link { font-weight: 600; }
.back-link { margin-top: 2.5rem; }

/* ---------- Topbalk en kop ---------- */
.topbar { background: var(--c-blue-deep); color: #cfe0ec; font-size: .875rem; }
.topbar__inner { display: flex; justify-content: flex-end; gap: 1.5rem; padding-top: .4rem; padding-bottom: .35rem; }
.topbar a { color: #fff; text-decoration: none; }
.topbar a:hover { text-decoration: underline; }
.topbar__item { display: inline-flex; align-items: center; gap: .35rem; }
.topbar__item .icon { width: 1rem; height: 1rem; }

.site-header { background: #fff; border-bottom: 1px solid var(--c-line); position: relative; z-index: 20; }
.site-header__inner { display: flex; align-items: center; gap: 1.5rem; min-height: 4.75rem; }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; color: var(--c-ink); margin-right: auto; }
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__name { font-weight: 800; font-size: 1.55rem; letter-spacing: -.02em; color: var(--c-blue); }
.brand__tag { font-size: .8rem; color: var(--c-muted); margin-top: .25rem; }

.main-nav { display: flex; align-items: center; gap: 1rem; }
.main-nav__list, .main-nav .sub-menu { list-style: none; margin: 0; padding: 0; }
.main-nav__list { display: flex; align-items: center; }
.main-nav__list > li { position: relative; display: flex; align-items: center; }
.main-nav__list > li > a { display: block; padding: 1.6rem .75rem 1.5rem; font-weight: 600; color: var(--c-ink); text-decoration: none; border-bottom: 3px solid transparent; }
.main-nav__list > li > a:hover,
.main-nav__list > .current-menu-item > a,
.main-nav__list > .current-menu-ancestor > a,
.main-nav__list > .current-menu-parent > a { color: var(--c-blue); border-bottom-color: var(--c-blue); }
.sub-toggle { background: none; border: 0; padding: .25rem; margin-left: -.5rem; color: var(--c-muted); cursor: pointer; border-radius: 4px; }
.sub-toggle svg { display: block; transition: transform .15s; }
.sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.main-nav .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 15rem;
	background: #fff; border: 1px solid var(--c-line); border-top: 3px solid var(--c-blue);
	padding: .4rem 0; display: none;
	box-shadow: 0 12px 24px -12px rgba(0, 58, 96, .35);
}
.main-nav .sub-menu a { display: block; padding: .55rem 1rem; color: var(--c-ink); text-decoration: none; }
.main-nav .sub-menu a:hover, .main-nav .sub-menu .current-menu-item > a { background: var(--c-blue-soft); color: var(--c-blue-deep); }
.main-nav li.is-open > .sub-menu { display: block; }
@media (hover: hover) and (min-width: 60.01rem) {
	.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { display: block; }
}

.nav-search { display: flex; border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; }
.nav-search input { border: 0; font: inherit; padding: .45rem .7rem .35rem; width: 8.5rem; background: transparent; }
.nav-search button { border: 0; background: none; padding: 0 .6rem; color: var(--c-muted); cursor: pointer; }
.nav-search:focus-within { border-color: var(--c-blue); }

.nav-toggle { display: none; align-items: center; gap: .4rem; background: none; border: 2px solid var(--c-line); border-radius: var(--r); padding: .45rem .7rem .35rem; font: 600 1rem var(--f); color: var(--c-ink); cursor: pointer; }
.nav-toggle__close { display: none; }
.nav-open .nav-toggle__open { display: none; }
.nav-open .nav-toggle__close { display: inline; }
.nav-toggle .icon { vertical-align: -.3em; }

@media (max-width: 60rem) {
	.nav-toggle { display: inline-flex; }
	.main-nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; border-bottom: 1px solid var(--c-line); flex-direction: column; align-items: stretch; padding: .5rem var(--gutter) 1.25rem; box-shadow: 0 16px 24px -16px rgba(0, 58, 96, .4); }
	.nav-open .main-nav { display: flex; }
	.main-nav__list { flex-direction: column; align-items: stretch; }
	.main-nav__list > li { flex-wrap: wrap; border-bottom: 1px solid var(--c-line); }
	.main-nav__list > li > a { flex: 1; padding: .9rem 0; border-bottom: 0; }
	.sub-toggle { padding: .75rem; }
	.main-nav .sub-menu { position: static; width: 100%; box-shadow: none; border: 0; border-left: 3px solid var(--c-blue); margin: 0 0 .75rem; padding: 0; }
	.nav-search { margin-top: 1rem; }
	.nav-search input { width: 100%; flex: 1; padding: .7rem; }
	.brand__tag { display: none; }
}

/* ---------- Het bord (blauw met witte binnenrand) ---------- */
.bord {
	background: var(--c-blue);
	color: #fff;
	border-radius: var(--r-bord);
	box-shadow: inset 0 0 0 7px var(--c-blue), inset 0 0 0 10px #fff;
	padding: clamp(1.75rem, 4vw, 3rem);
}
.bord a { color: #fff; }

/* ---------- Voorpagina ---------- */
.hero { background: var(--c-paper); padding: clamp(1.5rem, 4vw, 3rem) 0; }
.hero__bord { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.hero__title { margin: 0; max-width: 15ch; font-size: clamp(2.1rem, 1.3rem + 3.6vw, 3.6rem); line-height: 1.02; }
@media (min-width: 52rem) {
	.hero__bord { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); column-gap: 3rem; align-items: start; }
	.hero__title { grid-row: 1 / span 2; align-self: center; }
}

.wegwijzer { list-style: none; margin: 0; padding: 0; }
.wegwijzer li + li { border-top: 2px solid rgba(255, 255, 255, .35); }
.wegwijzer a { display: flex; align-items: baseline; gap: 1rem; padding: .7rem .1rem .55rem; text-decoration: none; }
.wegwijzer__plaats { font-weight: 800; font-size: clamp(1.25rem, 1rem + 1vw, 1.65rem); letter-spacing: -.01em; }
.wegwijzer__aantal { margin-left: auto; font-size: .95rem; color: #cfe0ec; white-space: nowrap; }
.wegwijzer__pijl { align-self: center; width: 1.6rem; height: 1.6rem; stroke-width: 2.4; transition: transform .15s; }
.wegwijzer a:hover .wegwijzer__pijl, .wegwijzer a:focus-visible .wegwijzer__pijl { transform: translateX(4px); }
.wegwijzer a:hover .wegwijzer__plaats { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }

.bord__search label { display: block; font-weight: 600; margin-bottom: .45rem; color: #cfe0ec; }
.bord__search-row { display: flex; background: #fff; border-radius: var(--r); overflow: hidden; }
.bord__search input { flex: 1; min-width: 0; border: 0; font: inherit; padding: .8rem .9rem .7rem; color: var(--c-ink); }
.bord__search button { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: var(--c-blue-deep); color: #fff; font: 600 1rem var(--f); padding: 0 1rem; cursor: pointer; }
.bord__search button:hover { background: var(--c-ink); }
@media (max-width: 30rem) { .bord__search button span { display: none; } }

.abo { background: var(--c-blue-deep); color: #fff; }
.abo__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1.5rem; padding-top: 1rem; padding-bottom: 1rem; }
.abo p { margin: 0; font-weight: 600; }

.section { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.section--tight { padding-block-start: clamp(1.5rem, 4vw, 2.5rem); }
.section--paper { background: var(--c-paper); }
.section__title { margin-bottom: 1.5rem; }

.taken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); column-gap: 2.5rem; }
.taken li { border-top: 1px solid var(--c-line); }
.taken a { display: flex; gap: 1rem; padding: 1.15rem 0 1.1rem; text-decoration: none; color: var(--c-ink); }
.taken__icon { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r); background: var(--c-blue-soft); color: var(--c-blue); flex: none; }
.taken a:hover .taken__icon { background: var(--c-blue); color: #fff; }
.taken__title { display: block; font-weight: 800; font-size: 1.15rem; color: var(--c-blue); }
.taken a:hover .taken__title { text-decoration: underline; }
.taken__text { display: block; color: var(--c-muted); margin-top: .1rem; }
.taken--compact a { align-items: center; }

.split { display: grid; gap: 2.5rem; }
@media (min-width: 52rem) { .split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 4rem; } }
.news-title { font-size: 1.35rem; }
.news-list { list-style: none; margin: 0 0 1rem; padding: 0; }
.news-list li { padding: .9rem 0; border-top: 1px solid var(--c-line); }
.news-list time { display: block; color: var(--c-muted); font-size: .875rem; }
.news-list a { font-weight: 600; text-decoration: none; }
.news-list a:hover { text-decoration: underline; }

.werk { background: #fff; border-top: 1px solid var(--c-line); }
.werk__inner { display: grid; gap: 1rem 2rem; padding-top: 2.75rem; padding-bottom: 2.75rem; align-items: center; }
@media (min-width: 52rem) { .werk__inner { grid-template-columns: auto minmax(0, 1fr) auto; } }
.werk__icon { display: grid; place-items: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--c-signal); color: var(--c-ink); }
.werk__icon .icon { width: 1.6rem; height: 1.6rem; }
.werk h2 { margin-bottom: .25rem; }
.werk p { margin: 0; color: var(--c-muted); max-width: 52ch; }

/* ---------- Paginakop en kruimelpad ---------- */
.page-head { background: var(--c-paper); padding: 1.25rem 0 2rem; border-bottom: 1px solid var(--c-line); }
.page-head h1 { margin-bottom: .3em; max-width: 24ch; }
.page-head__date { color: var(--c-muted); margin: 0 0 .4rem; }
.lead { font-size: 1.2rem; color: var(--c-muted); max-width: 60ch; margin: 0; }
.crumbs ol { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-wrap: wrap; font-size: .9rem; }
.crumbs li + li::before { content: "/"; margin: 0 .5rem; color: var(--c-line); }
.crumbs a { color: var(--c-muted); text-decoration: none; }
.crumbs a:hover { color: var(--c-blue); text-decoration: underline; }
.tag { display: inline-flex; align-items: center; gap: .35rem; font-size: .9rem; font-weight: 600; padding: .25rem .6rem .15rem; border-radius: 99px; margin: 0 0 .75rem; }
.tag--intranet { background: var(--c-ink); color: #fff; }
.tag .icon { width: 1rem; height: 1rem; }

/* ---------- Lopende tekst uit de editor ---------- */
.prose { max-width: 44rem; }
.prose > * + h2 { margin-top: 1.75em; }
.prose > * + h3 { margin-top: 1.5em; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1.2em; }
.prose li { margin-bottom: .35em; }
.prose li::marker { color: var(--c-blue); font-weight: 800; }
.prose figure { margin: 1.5em 0; }
.prose .wp-block-table { overflow-x: auto; }
.prose table, .kv { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.prose .wp-block-table th, .prose .wp-block-table td, .prose th, .prose td { border: 0; border-bottom: 1px solid var(--c-line); text-align: left; padding: .6rem .75rem .5rem 0; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.prose .wp-block-table thead, .prose thead th { border-bottom: 2px solid var(--c-ink); font-weight: 800; }
.prose .wp-block-table table { border: 0; }
.prose td:last-child, .prose th:last-child { padding-right: 0; }
.prose .wp-block-buttons { margin: 1.75em 0; }
.prose blockquote { margin: 1.5em 0; padding: .25em 0 .25em 1.25em; border-left: 4px solid var(--c-blue); }
.feature-image { border-radius: var(--r); margin-bottom: 1.5rem; }

/* ---------- Locaties: lijst ---------- */
.filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1rem 1.5rem; padding-bottom: 1.5rem; border-bottom: 2px solid var(--c-ink); margin-bottom: 1rem; }
.filter__group label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.filter select { font: inherit; padding: .55rem 2.2rem .45rem .75rem; border: 1px solid var(--c-line); border-radius: var(--r); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356636e' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right .6rem center / 1rem; appearance: none; min-width: 12rem; }
.filter__count { margin: 0 0 .5rem auto; color: var(--c-muted); }
.loc-group { margin-top: 2rem; }
.loc-group__title { font-size: 1.25rem; margin-bottom: .25rem; }
.loc-list { list-style: none; margin: 0; padding: 0; }
.loc-row { border-bottom: 1px solid var(--c-line); }
.loc-row__link { display: flex; align-items: center; gap: 1rem; padding: 1rem .25rem .9rem; text-decoration: none; color: var(--c-ink); }
.loc-row__link:hover { background: var(--c-paper); }
.section--paper .loc-row__link:hover { background: #fff; }
.loc-row__icon { color: var(--c-blue); display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--r); background: var(--c-blue-soft); flex: none; }
.loc-row__main { display: flex; flex-direction: column; min-width: 0; }
.loc-row__name { font-weight: 800; font-size: 1.1rem; color: var(--c-blue); }
.loc-row__link:hover .loc-row__name { text-decoration: underline; }
.loc-row__meta { color: var(--c-muted); font-size: .95rem; }
.loc-row__tel { margin-left: auto; color: var(--c-muted); white-space: nowrap; font-size: .95rem; }
.loc-row__go { color: var(--c-blue); margin-left: .5rem; }
.loc-row__main + .loc-row__go { margin-left: auto; }
@media (max-width: 40rem) { .loc-row__tel { display: none; } .loc-row__go { margin-left: auto; } }
.flag { align-self: flex-start; display: inline-block; margin-top: .3rem; padding: .15rem .5rem .05rem; background: var(--c-signal); color: var(--c-ink); font-size: .85rem; font-weight: 600; border-radius: 3px; }
.empty { color: var(--c-muted); padding: 2rem 0; }

/* ---------- Locatie: detail ---------- */
.loc-head { background: var(--c-paper); padding: 1.25rem 0 0; }
.loc-head__bord { position: relative; top: 1.5rem; margin-top: -.25rem; }
.loc-head__bord h1 { margin: .35rem 0 .3rem; }
.loc-head__soort { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: #cfe0ec; }
.loc-head__adres { margin: 0; font-size: 1.15rem; }
.loc { display: grid; gap: 2rem; padding-block: 3.5rem; }
@media (min-width: 56rem) { .loc { grid-template-columns: minmax(0, 1fr) 21rem; gap: 4rem; } }
.loc__side { display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 56rem) { .loc__side { position: sticky; top: 1.5rem; align-self: start; } }

.loc-block + .loc-block { margin-top: 2.25rem; }
.loc-block h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.35rem; padding-bottom: .5rem; border-bottom: 2px solid var(--c-ink); margin-bottom: 0; }
.loc-block h2 .icon { color: var(--c-blue); }
.loc-block.prose h2 { display: block; border: 0; padding: 0; margin-bottom: .5em; }
.loc-block__note { color: var(--c-muted); margin: .75rem 0 0; }
.kv th, .kv td { text-align: left; padding: .7rem 0 .6rem; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.kv th { font-weight: 400; color: var(--c-muted); padding-right: 1.5rem; width: 45%; }
.kv td { font-weight: 600; }
.kv--compact th { width: auto; }

.plekken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); border-left: 1px solid var(--c-line); }
.plekken li { padding: .9rem 1rem .75rem; border-right: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); }
.plekken__n { display: block; font-weight: 800; font-size: 1.9rem; line-height: 1; color: var(--c-blue); font-variant-numeric: tabular-nums; }
.plekken__label { display: block; color: var(--c-muted); margin-top: .3rem; font-size: .95rem; }
.plekken li.is-no .plekken__n { color: var(--c-line); }
.plekken em { font-style: normal; display: block; font-size: .85rem; }

.checks { list-style: none; margin: 0; padding: 0; columns: 2 14rem; column-gap: 2rem; }
.checks li { display: flex; gap: .5rem; padding: .6rem 0 .5rem; border-bottom: 1px solid var(--c-line); break-inside: avoid; }
.checks .icon { color: var(--c-blue); margin-top: .1rem; }

.notice { display: flex; align-items: flex-start; gap: .6rem; background: var(--c-signal-soft); border-left: 5px solid var(--c-signal); padding: .9rem 1rem .75rem; border-radius: 0 var(--r) var(--r) 0; margin-bottom: 2rem; }

.side-card { border: 1px solid var(--c-line); border-radius: var(--r); overflow: hidden; }
.side-card__adres { display: flex; gap: .6rem; margin: 0; padding: 1rem 1.1rem; background: var(--c-paper); }
.side-card__adres .icon { color: var(--c-blue); margin-top: .15rem; }
.side-card__action { display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem .75rem; border-top: 1px solid var(--c-line); font-weight: 600; text-decoration: none; }
.side-card__action:hover { background: var(--c-blue); color: #fff; }
.side-card .kv { margin: 0; }
.side-card .kv th, .side-card .kv td { padding-left: 1.1rem; padding-right: 1.1rem; }

.map { border: 1px dashed var(--c-line); border-radius: var(--r); padding: 1.25rem; text-align: center; color: var(--c-muted); font-size: .95rem; }
.map.is-loaded { padding: 0; border: 0; }
.map iframe { display: block; width: 100%; height: 18rem; border: 0; border-radius: var(--r); }

/* ---------- Nieuws en vacatures ---------- */
.article-list { list-style: none; margin: 0; padding: 0; max-width: 46rem; }
.article-list li { border-bottom: 1px solid var(--c-line); padding: 1.5rem 0 1.25rem; }
.article-list li:first-child { padding-top: 0; }
.article-list time, .article-list__meta { display: block; color: var(--c-muted); font-size: .9rem; margin-bottom: .25rem; }
.article-list h2 { font-size: 1.4rem; margin-bottom: .35rem; }
.article-list h2 a { text-decoration: none; }
.article-list h2 a:hover { text-decoration: underline; }
.article-list p { margin: 0; }
.empty-state { max-width: 40rem; padding: 2rem; border: 1px solid var(--c-line); border-radius: var(--r); }
.empty-state h2 { font-size: 1.35rem; }
.nav-links { display: flex; gap: 1rem; margin-top: 2rem; }
.page-numbers { padding: .35rem .7rem; border: 1px solid var(--c-line); border-radius: var(--r); text-decoration: none; }
.page-numbers.current { background: var(--c-blue); color: #fff; border-color: var(--c-blue); }

.search-big { display: flex; gap: .5rem; max-width: 36rem; margin-top: 1rem; }
.search-big input { flex: 1; min-width: 0; font: inherit; padding: .7rem .9rem .6rem; border: 1px solid var(--c-line); border-radius: var(--r); }
.subpages { margin-top: 2.5rem; max-width: 44rem; }

/* ---------- Formulieren ---------- */
.ustal-form { max-width: 34rem; margin-top: 1.5rem; }
.ustal-form__row { margin: 0 0 1.1rem; }
.ustal-form label { display: block; font-weight: 600; margin-bottom: .3rem; }
.ustal-form__optional { font-weight: 400; color: var(--c-muted); }
.ustal-form input, .ustal-form textarea { width: 100%; font: inherit; padding: .65rem .8rem .55rem; border: 1px solid #b7c3cc; border-radius: var(--r); background: #fff; }
.ustal-form input:focus, .ustal-form textarea:focus { border-color: var(--c-blue); outline: 3px solid var(--c-blue-soft); outline-offset: 0; }
.ustal-form__count { display: block; font-size: .85rem; color: var(--c-muted); margin-top: .3rem; }
.ustal-form__hp { position: absolute; left: -9999px; }
.ustal-form-notice { padding: .9rem 1rem .75rem; border-radius: var(--r); margin: 1rem 0; max-width: 34rem; }
.ustal-form-notice.is-success { background: #e2f3e6; border-left: 5px solid #2e7d3c; }
.ustal-form-notice.is-error { background: #fbe4e2; border-left: 5px solid #b32d2e; }

/* ---------- Voettekst ---------- */
.site-footer { background: var(--c-blue-deep); color: #cfe0ec; font-size: .95rem; }
.site-footer a { color: #fff; }
.site-footer__grid { display: grid; gap: 2rem; padding-top: 3rem; padding-bottom: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.site-footer__brand { grid-column: span 2; max-width: 26rem; }
@media (max-width: 30rem) { .site-footer__brand { grid-column: auto; } }
.site-footer__brand .mark { margin-bottom: .75rem; }
.site-footer__brand .mark rect:first-child { fill: var(--c-blue); }
.site-footer__h { color: #fff; font-size: 1rem; margin-bottom: .6rem; }
.site-footer__menu { list-style: none; margin: 0; padding: 0; }
.site-footer__menu li { margin-bottom: .4rem; }
.site-footer__base { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 1rem; padding-bottom: 1.25rem; font-size: .85rem; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
	.topbar, .site-header, .site-footer, .map, .nav-toggle { display: none; }
	.bord { background: none; color: #000; box-shadow: none; border: 2px solid #000; }
	.bord a, .loc-head__soort { color: #000; }
}

/* ---------- Intranet en URO ---------- */
.page-head--intranet { background: #e7ecef; }
.intranet { display: grid; gap: 2rem; }
@media (min-width: 60rem) { .intranet { grid-template-columns: 15rem minmax(0, 1fr); gap: 3rem; } }
.intranet__main { min-width: 0; }
.intranet-nav { font-size: .95rem; }
.intranet-nav ul { list-style: none; margin: 0; padding: 0; }
.intranet-nav__title { margin: 0 0 .5rem; font-weight: 800; font-size: 1.1rem; }
.intranet-nav__title a { color: var(--c-ink); text-decoration: none; }
.intranet-nav > ul > li { border-top: 1px solid var(--c-line); padding: .5rem 0; }
.intranet-nav__group { display: block; font-weight: 800; color: var(--c-ink); padding: .25rem 0; }
.intranet-nav a { display: block; padding: .3rem .5rem; margin: 0 -.5rem; border-radius: 4px; text-decoration: none; }
.intranet-nav li li a { padding-left: .9rem; }
.intranet-nav a:hover { background: var(--c-blue-soft); }
.intranet-nav a[aria-current="page"] { background: var(--c-blue); color: #fff; font-weight: 600; }
@media (max-width: 59.99rem) {
	.intranet__side { order: 2; border-top: 2px solid var(--c-ink); padding-top: 1rem; }
}
.prose--wide { max-width: none; }

.uro-intro { color: var(--c-muted); }
.uro-msg { padding: .9rem 1rem .75rem; border-radius: var(--r); margin: 0 0 1.5rem; max-width: 44rem; }
.uro-msg ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.uro-msg.is-success { background: #e2f3e6; border-left: 5px solid #2e7d3c; }
.uro-msg.is-error { background: #fbe4e2; border-left: 5px solid #b32d2e; }
.uro-msg:focus { outline: 3px solid var(--c-signal); }

.uro-form { max-width: 40rem; }
.uro-field { margin: 0 0 1.35rem; }
.uro-field > label, .uro-field legend { display: block; font-weight: 600; margin-bottom: .35rem; padding: 0; }
.uro-field fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.uro-req { color: #b32d2e; }
.uro-opt { font-weight: 400; color: var(--c-muted); font-size: .9rem; }
.uro-form input[type=text], .uro-form input[type=email], .uro-form input[type=number], .uro-form input[type=date], .uro-form input[type=time], .uro-form input[type=datetime-local], .uro-form input[type=month], .uro-form input[type=search], .uro-form select, .uro-form textarea {
	width: 100%; font: inherit; padding: .65rem .8rem .55rem; border: 1px solid #b7c3cc; border-radius: var(--r); background: #fff; color: var(--c-ink);
}
.uro-form input[type=date], .uro-form input[type=time], .uro-form input[type=datetime-local], .uro-form input[type=month], .uro-form input[type=number], .uro-form .uro-num { max-width: 16rem; }
.uro-form input:focus, .uro-form select:focus, .uro-form textarea:focus { border-color: var(--c-blue); outline: 3px solid var(--c-blue-soft); outline-offset: 0; }
.uro-filter { margin-bottom: .4rem; }
.uro-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.uro-choice { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .9rem .45rem; border: 1px solid #b7c3cc; border-radius: var(--r); background: #fff; cursor: pointer; font-weight: 400; }
.uro-choice:has(input:checked) { border-color: var(--c-blue); background: var(--c-blue-soft); box-shadow: inset 0 0 0 1px var(--c-blue); }
.uro-choice input { accent-color: var(--c-blue); width: 1.1rem; height: 1.1rem; margin: 0; }
.uro-staff { max-height: 15rem; overflow-y: auto; border: 1px solid #b7c3cc; border-radius: var(--r); padding: .4rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .25rem; }
.uro-staff .uro-choice { border: 0; padding: .35rem .5rem; }
.uro-staff-count { font-size: .9rem; color: var(--c-muted); margin: .35rem 0 0; }
.uro-help { font-size: .9rem; color: var(--c-muted); margin: .35rem 0 0; }
.uro-field.has-error input, .uro-field.has-error select, .uro-field.has-error textarea, .uro-field.has-error .uro-choice { border-color: #b32d2e; }
.uro-field.has-error .uro-help strong { color: #b32d2e; }
.uro-section { font-size: 1.2rem; margin: 2rem 0 1rem; padding-bottom: .4rem; border-bottom: 2px solid var(--c-ink); }
.uro-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line); }
.uro-delete { margin: 0 0 0 auto; }
.ustal-button--danger { background: #fff; color: #b32d2e; border-color: #b32d2e; }
.ustal-button--danger:hover { background: #b32d2e; border-color: #b32d2e; color: #fff; }
.uro-files { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.uro-files li { display: flex; flex-direction: column; gap: .3rem; max-width: 14rem; }
.uro-files img { width: 14rem; height: 10rem; object-fit: cover; border-radius: var(--r); border: 1px solid var(--c-line); }
.uro-files--edit { flex-direction: column; gap: .3rem; margin-bottom: .6rem; }
.uro-files--edit li { flex-direction: row; max-width: none; gap: 1rem; }

.uro-search { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .75rem 1rem; padding: 1rem; background: var(--c-paper); border-radius: var(--r); margin-bottom: 1rem; }
.uro-search__field label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; }
.uro-search__field input, .uro-search__field select { font: inherit; padding: .5rem .65rem .4rem; border: 1px solid #b7c3cc; border-radius: var(--r); background: #fff; max-width: 14rem; }
.uro-search__field--grow { flex: 1 1 14rem; }
.uro-search__field--grow input { width: 100%; max-width: none; }
.uro-listbar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; align-items: baseline; margin-bottom: .5rem; }
.uro-count { margin: 0; color: var(--c-muted); }
.uro-table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--r); }
.uro-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.uro-table th, .uro-table td { text-align: left; padding: .65rem .8rem .55rem; border-bottom: 1px solid var(--c-line); vertical-align: top; }
.prose .uro-table th, .prose .uro-table td { padding: .65rem .8rem .55rem; }
.uro-table thead th { background: var(--c-paper); font-weight: 600; white-space: nowrap; border-bottom: 2px solid var(--c-ink); }
.uro-table tbody tr:hover { background: var(--c-blue-soft); }
.uro-table__date { white-space: nowrap; }
.uro-table__go a { font-weight: 600; }
.uro-thumb { min-width: 4.5rem; width: 4.5rem; height: 3.25rem; object-fit: cover; border-radius: 4px; display: block; }
.uro-pages { display: flex; gap: .4rem; margin-top: 1rem; flex-wrap: wrap; }
.uro-detail__title { margin-top: .5rem; }
.uro-detail__meta { color: var(--c-muted); }
.uro-detail { max-width: 44rem; }
.uro-detail__section th { font-weight: 800; color: var(--c-ink) !important; padding-top: 1.25rem !important; border-bottom: 2px solid var(--c-ink) !important; }
.back-link--top { margin: 0 0 .5rem; }

@media print {
	.intranet__side, .uro-actions, .back-link, .tag { display: none; }
	.intranet { display: block; }
}