/* Meteo Hilversum, vormgeving versie 5 */

:root {
	--ink: #0f1f33;
	--ink-2: #46546a;
	--ink-3: #626f85;
	--line: #e3e8ef;
	--line-2: #eef1f6;
	--surface: #ffffff;
	--page: #e1edfb;
	--card-line: #c7d7ec;
	--brand: #1d6fd8;
	--brand-dark: #0f2f66;
	--brand-soft: #e8f1fc;
	--sun: #f59a23;
	--mark-low: #2f6fb8;
	--mark-mid: #d9811a;
	--mark-high: #c8402f;
	--ok: #1c7f4b;
	--ok-soft: #e6f5ec;
	--danger: #a82a1c;
	--danger-soft: #fce9e6;
	--radius: 12px;
	--shadow: 0 1px 2px rgba(15, 31, 51, .07), 0 2px 10px rgba(15, 31, 51, .06);
	--font: Inter, "Segoe UI", Roboto, Arial, sans-serif;
}

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
	-webkit-text-size-adjust: 100%;
}

html body {
	margin: 0;
	/* Heldere lucht: bovenaan hemelsblauw dat overgaat in een licht blauwe achtergrond. Het scrolt mee met de pagina. */
	background:
		linear-gradient(180deg, #b6d8fa 0, #cde4fb 300px, var(--page) 720px) no-repeat,
		var(--page);
	color: var(--ink);
	font-family: var(--font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	/* Minstens zo hoog als het venster: bij een korte pagina (zoals 'Alleen actueel') vult main de ruimte op
	   en staat de footer onderaan het venster in plaats van halverwege */
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100dvh;
}

h1, h2, h3, p, dl, dd, ul { margin: 0; padding: 0; }
ul { list-style: none; }
img { max-width: 100%; }
font { color: inherit !important; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; }

.wrap {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
}

.skiplink {
	position: absolute;
	left: 16px;
	top: -60px;
	z-index: 200;
	padding: 8px 14px;
	background: var(--brand-dark);
	color: #fff;
	border-radius: 8px;
}
.skiplink:focus { top: 8px; }


/* Kopbalk */

.topbar {
	position: sticky;
	top: 0;
	z-index: 100;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.topbar-inner {
	display: flex;
	align-items: center;
	gap: 28px;
	min-height: 72px;
}

.logo { display: block; flex: none; line-height: 0; }
/* Het logo is 530 x 118 pixels: op 265 px breed blijft het ook op schermen met hoge resolutie scherp */
.logo img { width: 265px; height: auto; }

/* Het menu staat direct na het logo, zodat 'Actueel' op zijn plek blijft als de andere items verdwijnen */
.mainnav {
	display: flex;
	gap: 2px;
}

.mainnav a {
	padding: 7px 11px;
	border-radius: 8px;
	color: var(--ink-2);
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
}
.mainnav a:hover { background: var(--line-2); color: var(--ink); text-decoration: none; }
.mainnav a.is-active { background: var(--brand-soft); color: #14539f; }

/* Schakelaar 'Alleen actueel' */
.alleen-actueel .uitgebreid { display: none !important; }
/* Met alleen de actuele gegevens zichtbaar hoeft de ruimte boven de footer niet groter dan die tussen de tegels */
.alleen-actueel main.wrap { padding-bottom: 32px; }
.regelbreuk { display: none; }

.schakelaar {
	position: relative;
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-2);
	cursor: pointer;
	white-space: nowrap;
	user-select: none;
}
.schakelaar input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.schakelaar-baan {
	position: relative;
	flex: none;
	width: 34px;
	height: 20px;
	border-radius: 10px;
	background: #c3ccd8;
	transition: background .2s;
}
.schakelaar-baan::after {
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(15, 31, 51, .25);
	transition: transform .2s;
}
.schakelaar input:checked + .schakelaar-baan { background: var(--brand); }
.schakelaar input:checked + .schakelaar-baan::after { transform: translateX(14px); }
.schakelaar input:checked ~ .schakelaar-tekst { color: var(--ink); }
.schakelaar input:focus-visible + .schakelaar-baan { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Menu-item 'Actueel' met de schakelaar erin: één knopje in plaats van een losse schakelaar met tekst */
.nav-actueel { display: inline-flex; align-items: center; flex: none; border-radius: 8px; }
.nav-actueel a { padding-right: 6px; }
.nav-actueel:has(a.is-active) { background: var(--brand-soft); }
.nav-actueel a.is-active { background: transparent; }
.schakelaar-mini { padding: 4px 9px 4px 0; }
.schakelaar-mini .schakelaar-baan { width: 26px; height: 16px; border-radius: 8px; }
.schakelaar-mini .schakelaar-baan::after { width: 12px; height: 12px; }
.schakelaar-mini input:checked + .schakelaar-baan::after { transform: translateX(10px); }

.tijdchip {
	flex: none;
	margin-left: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.3em; /* ongeveer één gewone spatie */
	padding: 6px 12px;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-2);
}
.tijd-waarde { font-variant-numeric: tabular-nums; color: var(--ink); }


/* Meldingen */

main.wrap { flex: 1 0 auto; padding-top: 20px; padding-bottom: 56px; }

.notice {
	margin-bottom: 12px;
	padding: 12px 16px;
	background: transparent;
	border: 1px solid #b3261e;
	color: #b3261e;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 700;
	text-align: center;
}

/* Langzaam knipperende tekst in sub/mededeling.txt: 5,5 seconden per keer, waarvan ruim 3 seconden volledig zichtbaar */
.fade-blink { animation: fade-blink-animation 5.5s ease-in-out infinite; }
.notice .fade-blink { color: inherit; }

@keyframes fade-blink-animation {
	0%, 61.54% { opacity: 1; }
	76.92% { opacity: 0; }
	92.31%, 100% { opacity: 1; }
}

.alarm {
	display: flex;
	align-items: center;
	gap: 11px;
	margin-bottom: 16px;
	padding: 11px 16px;
	border: 1px solid transparent;
	border-radius: 10px;
	box-shadow: var(--shadow);
	font-size: 14px;
}
.alarm-text { flex: 1; min-width: 0; font-weight: 500; }
.alarm-text div[style] { font-size: inherit !important; font-weight: inherit !important; display: block !important; }
.alarm-text p { margin: 2px 0; }
.alarm-text p + p { margin-top: 6px; }
.alarm-text .knmi-tijd { font-size: 12px; font-weight: 400; opacity: .85; }
.alarm-source { flex: none; font-size: 12.5px; color: inherit; opacity: .85; }

.alarm-icon { flex: none; width: 18px; height: 18px; border-radius: 50%; background: currentColor; position: relative; }
.alarm-icon::after { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-size: 12px; font-weight: 700; line-height: 1; }

.alarm-ok { background: var(--ok-soft); border-color: #b5dfc5; color: #155f39; }
.alarm-ok .alarm-icon::after { content: "\2713"; }
.alarm-yellow, .alarm-orange, .alarm-red { align-items: flex-start; }
.alarm-yellow .alarm-icon::after, .alarm-orange .alarm-icon::after, .alarm-red .alarm-icon::after { content: "!"; }
.alarm-yellow { background: #fff7cf; border-color: #ecdc8b; color: #665400; }
.alarm-orange { background: #ffe8d1; border-color: #f4c596; color: #94460a; }
.alarm-red { background: var(--danger-soft); border-color: #f0b8b0; color: var(--danger); }


/* Hoofdblok */

.hero {
	display: grid;
	grid-template-columns: 1.9fr 1fr;
	background: linear-gradient(120deg, #0f2f66 0%, #15488f 58%, #1d63bb 100%);
	color: #fff;
	border-radius: 16px;
	overflow: hidden;
}

/* Beide delen verticaal gecentreerd, zodat ze ook bij een afwijkende inhoud in balans blijven */
.hero-main, .hero-side { display: flex; flex-direction: column; justify-content: center; }
.hero-main { padding: 24px 30px; }

.eyebrow { font-size: 14px; font-weight: 500; color: #c6d8f3; }

.hero-figure {
	display: flex;
	align-items: flex-start;
	margin: 2px 0 22px;
	font-size: 76px;
	font-weight: 600;
	line-height: 1.08;
	letter-spacing: -.03em;
}
.hero-unit { margin: 9px 0 0 5px; font-size: 30px; font-weight: 500; letter-spacing: 0; color: #dbe7f8; }
.hero-figure .trend { align-self: center; margin-left: 16px; letter-spacing: 0; }

.hero-side {
	padding: 24px;
	border-left: 1px solid rgba(255, 255, 255, .13);
	background: rgba(6, 22, 52, .16);
}
.hero-title { margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #c6d8f3; }

.almanac-row {
	display: grid;
	grid-template-columns: 1.1fr 1fr 1fr;
	align-items: center;
	gap: 8px;
	padding: 9px 0;
	border-bottom: 1px solid rgba(255, 255, 255, .11);
}
.almanac-head { padding: 0 0 4px; font-size: 12px; color: #b7cbea; }
.almanac-name { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #e5eefb; }
.almanac-name svg { flex: none; }
.almanac-row strong { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.almanac-daylight { margin-top: 11px; font-size: 13px; color: #e5eefb; }
.almanac-daylight em { font-style: normal; color: #b7cbea; }


/* Meters */

.gauge { position: relative; padding-top: 11px; }
.gauge-marks { position: absolute; top: 0; left: 0; right: 0; height: 10px; }
.gauge-mark {
	position: absolute;
	top: 1px;
	width: 0;
	height: 0;
	margin-left: -5px;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 8px solid var(--mark-high);
	transition: left .5s ease;
}
.gauge-mark.low { border-top-color: var(--mark-low); }
.gauge-mark.mid { border-top-color: var(--mark-mid); }

.gauge-track {
	position: relative;
	height: 12px;
	border-radius: 6px;
	overflow: hidden;
	background: var(--line-2);
}
.gauge-bg, .gauge-fill { position: absolute; inset: 0; }
.gauge-bg { opacity: .3; }
.gauge-fill { transition: clip-path .5s ease; }

.gauge-ticks { position: relative; height: 18px; margin-top: 4px; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gauge-ticks span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.gauge-ticks span:first-child { transform: none; }
.gauge-ticks span:last-child { transform: translateX(-100%); }

.hero .gauge-track { background: rgba(255, 255, 255, .13); }
.hero .gauge-bg { opacity: .35; }
.hero .gauge-ticks { color: #c6d8f3; }
.hero .gauge-mark { border-top-color: #ff9d8c; }
.hero .gauge-mark.low { border-top-color: #9fd0ff; }

.marks-key {
	display: flex;
	flex-wrap: wrap;
	gap: 3px 16px;
	margin-top: 6px;
	font-size: 12.5px;
	color: var(--ink-2);
}
.marks-key li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.marks-key strong { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

.mark { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--mark-high); }
.mark-low { border-top-color: var(--mark-low); }
.mark-mid { border-top-color: var(--mark-mid); }

.hero .marks-key { color: #d5e3f7; }
.hero .marks-key strong { color: #fff; }
.hero .mark-high { border-top-color: #ff9d8c; }
.hero .mark-low { border-top-color: #9fd0ff; }


/* Tegels */

.tiles {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	margin-top: 16px;
}

.tile, .card {
	background: var(--surface);
	border: 1px solid var(--card-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

.tile { padding: 16px 20px 15px; }

.tile-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 28px;
}
.tile-head h2 { font-size: 14px; font-weight: 500; color: var(--ink-2); }

.tile-value {
	margin: 2px 0 11px;
	font-size: 32px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: -.02em;
}
.tile-value small { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.tile-extra { margin-left: 6px; font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }

.trend { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.trend svg { display: block; }
.hero .trend { font-size: 14px; color: #dbe7f8; }

.winddir { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; font-weight: 600; line-height: 1; color: var(--ink); }
#windPijl { width: 26px; height: 26px; transition: transform .5s ease; color: var(--brand); }

.is-changed { color: #32cd32 !important; transition: color .3s; }

/* Strook met aanvullende gegevens onder de tegels */
.more {
	margin-top: 16px;
	padding: 13px 20px;
	background: var(--surface);
	border: 1px solid var(--card-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}
/* De laatste kolom is breder: de regenhoeveelheid kan oplopen tot tientallen miljoenen liters */
.more-list { display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; gap: 10px 24px; }
.more-list > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.more-list > div + div { padding-left: 24px; border-left: 1px solid #c3ccd8; }
.more-list dt { font-size: 13px; color: var(--ink-2); }
.more-list dt small { display: block; font-size: 11.5px; color: var(--ink-3); }
.more-list dd { flex: none; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }


/* Secties */

section { margin-top: 40px; }
section#live { margin-top: 0; }

.section-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 20px;
	margin-bottom: 14px;
}
.section-head h2 { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.section-head p { font-size: 13.5px; color: var(--ink-2); }

.grid-2, .grid-3 { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); margin-bottom: 16px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }

.card { min-width: 0; overflow: hidden; }

.card-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--line-2);
}
.card-head h3 { font-size: 14.5px; font-weight: 600; }
.card-head a { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
.card-head a:hover { color: var(--brand); }


/* Grafiek 72 uur */

.chart-card { padding: 18px 20px 14px; }

.segmented { display: flex; flex-wrap: wrap; gap: 4px; }
.segmented button {
	padding: 6px 12px;
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--line-2);
	color: var(--ink-2);
	font: 500 13px var(--font);
	cursor: pointer;
}
.segmented button:hover { background: var(--line); color: var(--ink); }
.segmented button[aria-pressed="true"] { background: var(--brand); color: #fff; }
/* De grafiek die 'Automatisch' nu toont: lichter gemarkeerd dan een eigen keuze */
.segmented button.auto-gekozen { background: var(--brand-soft); border-color: var(--brand); color: #14539f; }

.chart-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.chart-stats { display: flex; flex-wrap: wrap; gap: 6px 34px; min-height: 48px; margin: 16px 0 10px; }

/* Schaalkeuze: twee aaneengesloten opties, rustiger dan de grootheid-knoppen */
.schaalkeuze { display: inline-flex; flex: none; align-items: center; gap: 8px; }
.schaal-label { font-size: 12.5px; color: var(--ink-2); }
.schaal-knoppen { display: inline-flex; padding: 3px; border-radius: 9px; background: var(--line-2); }
.schaal-knoppen button {
	-webkit-appearance: none;
	appearance: none;
	padding: 4px 11px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--ink-2);
	font: 500 12.5px var(--font);
	cursor: pointer;
}
.schaal-knoppen button:hover { color: var(--ink); }
.schaal-knoppen button[aria-pressed="true"] {
	background: #fff;
	color: var(--ink);
	box-shadow: 0 1px 2px rgba(15, 31, 51, .16);
}
.chart-stats dt { font-size: 12.5px; color: var(--ink-2); }
.chart-stats dd { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chart-stats dd small { margin-left: 5px; font-size: 12px; font-weight: 400; color: var(--ink-3); }

.chart-box { position: relative; height: 300px; }
.chart-card iframe { border: 0; }


/* Verwachting */

.widget { display: flex; justify-content: center; min-height: 266px; padding: 8px 16px; }
.widget > div { padding: 0 !important; display: flex; justify-content: center; width: 100%; }
/* De Weerplaza-widgets passen zich aan de breedte aan; sub/weerplaza-*.php geeft ze een vaste breedte van 260 pixels mee.
   De hoogte van 250 pixels snijdt de blauwe balk 'Meer Hilversum' onderaan weg; die begint net daaronder.
   Hier vastgelegd, zodat dat zo blijft als het fragment ooit verandert. */
.widget iframe { border: 0; display: block; width: 100%; height: 250px; }

/* Geen focusrand om widgets en kaarten van anderen als erop wordt geklikt */
.widget iframe:focus, .widget iframe:focus-visible,
.map iframe:focus, .map iframe:focus-visible { outline: none; }

/* De enige link van de Weerplaza-widgets (de blauwe knop 'Meer Hilversum') wordt weggesneden.
   Een doorzichtige link over beide widgets opent dezelfde Weerplaza-pagina. */
.widget-houder { position: relative; }
.widget-link { position: absolute; inset: 0; z-index: 1; }
.widget-link:focus-visible { outline-offset: -4px; }

.forecast-head { flex-wrap: wrap; align-items: center; justify-content: flex-start; padding-top: 10px; padding-bottom: 10px; }
.forecast-head .schaalkeuze { margin-left: auto; }

.forecast-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.forecast-panel { min-width: 0; padding: 14px 18px 12px; }
.forecast-panel + .forecast-panel { border-left: 1px solid var(--line-2); }
.forecast-panel h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 500; color: var(--ink-2); }
.forecast { position: relative; height: 240px; }
.forecast-fout { position: absolute; inset: 0; padding-top: 40px; background: #fff; text-align: center; font-size: 14px; color: var(--ink-2); }
#grafiekReserve { display: block; margin-top: 12px; border: 0; }


/* Kaarten */

.map { display: block; position: relative; aspect-ratio: 1; overflow: hidden; background: var(--line-2); }

/* Grootte en positie van de kaarten rekent script-nieuw1.js per vakgrootte uit */
.map-radar iframe {
	position: absolute;
	border: 0;
	transform-origin: 0 0;
	transition: opacity .3s;
}

.map-pressure { background: #fff; }
.map-pressure img {
	position: absolute;
	top: 55%;
	left: 50%;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 70% center;
	transform: translate(-50%, -50%) scale(1.11);
}

/* Doorzichtige laag over de Windy-kaart. Alleen pointer-events: none op het iframe is niet genoeg:
   sommige mobiele browsers (vooral Safari op iPhone) geven een aanraking dan toch aan het iframe, waardoor
   de pagina niet scrolt. Een echte laag erboven vangt de aanraking op, zodat scrollen en doorklikken werken. */
.map-wind::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.map-wind iframe {
	position: absolute;
	top: 0;
	left: 0;
	border: 0;
	transform-origin: 0 0;
	pointer-events: none;
}


/* Tabellen */

/* Recordtabellen: periode links, waarden rechts uitgelijnd zodat de cijfers onder elkaar staan,
   met het tijdstip of de datum klein eronder en om en om een lichte achtergrond per rij */
.wd-data { display: table; width: 100%; border-collapse: collapse; }
.wd-data-row { display: table-row; }

.wd-data-cell-titel, .wd-data-cell {
	display: table-cell;
	padding: 9px 12px;
	font-size: 13.5px;
	vertical-align: middle;
}
.wd-data-cell-titel { padding-left: 18px; color: var(--ink-2); }
.wd-data-cell {
	text-align: right;
	font-weight: 600;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.wd-data-cell:last-child { padding-right: 18px; }

.wd-data-row:nth-child(odd):not(:first-child) > div { background: #f5f7fb; }

/* Kolomkoppen */
.wd-data-row:first-child > div {
	padding-top: 10px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--line);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--ink-3);
}
.wd-data-row:first-child b { font-weight: 600; }
.kop-min::before, .kop-mid::before, .kop-max::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 6px;
	border-radius: 2px;
	vertical-align: 0;
}
.kop-min::before { background: var(--mark-low); }
.kop-mid::before { background: var(--mark-mid); }
.kop-max::before { background: var(--mark-high); }

.wd-data .when { display: block; margin-top: 1px; font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
/* Rij zonder datum: de ruimte van de datumregel (ongeveer 18 pixels) verdeeld over boven en onder */
.wd-data-cell.zonder-datum { padding-top: 18px; padding-bottom: 18px; }
.wd-data sup { vertical-align: top; font-size: smaller; }


/* Archief */

.archive {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 20px 48px;
	padding: 22px 24px;
}
.archive h2 { margin-bottom: 4px; font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.archive p { max-width: 62ch; font-size: 14px; color: var(--ink-2); }
.archive-form label { display: block; margin-bottom: 4px; font-size: 12.5px; color: var(--ink-2); }
.archive-controls { display: flex; align-items: flex-end; gap: 8px; }
#jaarSelect { width: 92px; }
#monthSelect { width: 140px; }

select {
	height: 38px;
	padding: 0 10px;
	border: 1px solid #c7d0dc;
	border-radius: 8px;
	background: #fff;
	color: var(--ink);
	font: 400 14px var(--font);
}

.btn {
	height: 38px;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: var(--brand);
	color: #fff;
	font: 500 14px var(--font);
	cursor: pointer;
}
.btn:hover { background: #175fbb; }
.btn-quiet { background: var(--line-2); color: var(--ink); }
.btn-quiet:hover { background: var(--line); }

.archive-dialog {
	width: min(900px, calc(100vw - 32px));
	padding: 0;
	border: 0;
	border-radius: 14px;
	box-shadow: 0 20px 60px rgba(15, 31, 51, .3);
}
.archive-dialog::backdrop { background: rgba(15, 31, 51, .5); }
.archive-dialog-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 18px; border-bottom: 1px solid var(--line); }
#modalIframe { display: block; width: 100%; height: 70vh; border: 0; }


/* Voettekst */

.footer { border-top: 1px solid var(--line); background: #fff; font-size: 13px; color: var(--ink-2); }
.footer .footer-inner { padding-top: 24px; padding-bottom: 24px; text-align: center; }
.footer p + p { margin-top: 8px; }
.footer-kolommen {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px 40px;
	margin-top: 10px;
}
.footer .footer-kolommen p { margin: 0; }
/* Dunne scheidslijn midden in de tussenruimte */
.footer .footer-kolommen p + p { margin-left: -20px; padding-left: 20px; border-left: 1px solid #c3ccd8; }
.footer-line { height: 0; margin: 14px 0; border: 0; border-top: 1px solid #c3ccd8; }
.footer strong { color: var(--ink); font-weight: 600; }
.footer a { font-weight: 500; }
.footer .heel { white-space: nowrap; }

/* Melding 'geen waarschuwingen': op mobiel de korte versie */
.alarm-kort { display: none; }

.dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin: 0 0 0 5px;
	border-radius: 50%;
	vertical-align: 0;
}
.up { background: #22a35e; }
.down { background: var(--mark-high); }


/* Naar boven */

#scrollBtn {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 90;
	display: none;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 0;
	border-radius: 50%;
	background: var(--brand-dark);
	color: #fff;
	box-shadow: 0 4px 14px rgba(15, 31, 51, .3);
	cursor: pointer;
}
#scrollBtn.is-visible { display: grid; }


/* Smallere schermen */

/* Kopbalk zo lang mogelijk op één regel: eerst wordt hij stapsgewijs compacter */
@media (max-width: 1120px) {
	.topbar-inner { gap: 16px; }
	.mainnav a { padding: 7px 8px; }
	.nav-actueel a { padding-right: 5px; }
}

@media (max-width: 1020px) {
	.tijd-label { display: none; }
}

/* Pas als het ook compact niet meer past: het menu op een tweede regel */
@media (max-width: 900px) {
	.topbar .topbar-inner { flex-wrap: wrap; gap: 0 16px; padding-top: 8px; }
	.tijdchip { margin-left: auto; }
	.regelbreuk { display: block; order: 2; flex-basis: 100%; height: 0; }
	.mainnav {
		order: 3;
		flex: 1 1 0;
		min-width: 0;
		margin: 6px 0 6px;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.mainnav::-webkit-scrollbar { display: none; }
	html { scroll-padding-top: 124px; }
}

@media (max-width: 1100px) {
	.more-list { grid-template-columns: repeat(2, 1fr); }
	.more-list > div:nth-child(odd) { padding-left: 0; border-left: 0; }
}

@media (max-width: 1040px) {
	.hero { grid-template-columns: 1.4fr 1fr; }

	.tiles, .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 820px) {
	.forecast-grid { grid-template-columns: 1fr; }
	.forecast-panel + .forecast-panel { border-left: 0; border-top: 1px solid var(--line-2); }
}

@media (max-width: 680px) {
	.wrap { padding: 0 16px; }
	.topbar { position: static; }
	html { scroll-padding-top: 12px; }
	/* Op smalle telefoons krimpt het logo, zodat de tijd ernaast blijft staan */
	.logo img { width: min(265px, calc(100vw - 125px)); }
	.tijdchip { padding: 4px 9px; font-size: 12px; }
	.tijd-label { display: none; }
	.alarm-lang { display: none; }
	.alarm-kort { display: inline; }

	main.wrap { padding-top: 12px; padding-bottom: 40px; }
	.alarm { flex-wrap: wrap; }
	.alarm-text { flex-basis: calc(100% - 30px); }
	.alarm-source { margin-left: 29px; }

	.hero { grid-template-columns: 1fr; }
	.hero-main { padding: 20px 18px; }
	.hero-side { padding: 18px; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .13); }
	.hero-figure { font-size: 64px; }

	.more-list { grid-template-columns: 1fr; gap: 0; }
	.more-list > div, .more-list > div + div { padding: 8px 0; border-left: 0; border-top: 1px solid var(--line-2); }
	.more-list > div:first-child { border-top: 0; }

	.tiles, .grid-2, .grid-3 { grid-template-columns: 1fr; }
	.tile { padding: 14px 16px; }

	section { margin-top: 32px; }
	.chart-card { padding: 14px 12px 10px; }
	.segmented { flex-wrap: nowrap; overflow-x: auto; margin: 0 -12px; padding: 0 12px 2px; scrollbar-width: none; }
	.segmented::-webkit-scrollbar { display: none; }
	.segmented button { flex: none; }
	.chart-toolbar { display: block; }
	.chart-toolbar .schaalkeuze { margin-top: 10px; }
	.chart-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
	.forecast-head .schaalkeuze { width: 100%; margin-left: 0; }
	.chart-stats dd { font-size: 14.5px; }
	.chart-stats dd small { display: block; margin-left: 0; }
	.chart-box { height: 250px; }

	.archive { grid-template-columns: 1fr; padding: 18px; }
	#jaarSelect { width: 84px; }
	.archive-field:nth-child(2) { flex: 1; min-width: 0; }
	#monthSelect { width: 100%; }
	.footer-kolommen { grid-template-columns: 1fr; }
	.footer .footer-kolommen p + p { margin-left: 0; padding-left: 0; border-left: 0; }
	/* Ruimte zodat de knop 'Naar boven' niet over de laatste regel valt */
	.footer .footer-inner { padding-bottom: 72px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	/* De melding bij verouderde gegevens blijft bewust knipperen: die moet opvallen, en een langzame fade is geen bewegend beeld */
	*:not(.fade-blink), *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
	.topbar { position: static; }
	#scrollBtn, .mainnav { display: none !important; }
}