/* Weer Klimaat Trend.
   Structuur: gecentreerde cellen met raster, blauwe titel- en kopbalk.
   Kleuren, afgeronde hoeken en tekst: zoals de "Dag"-tabel van Weer Geschiedenis.
   - .wkt-theme-klassiek (standaard): licht, blauwe balken.
   - .wkt-theme-donker: navy/mint-kaartstijl. */

.wkt-widget {
	--wkt-bar: #1a5fa0;
	--wkt-bar-text: #ffffff;
	--wkt-panel: #ffffff;
	--wkt-row-a: #f5f6f8;
	--wkt-row-b: #ffffff;
	--wkt-border: #c9ced6;
	--wkt-text: #1c2430;
	--wkt-dim: #5b6472;
	--wkt-up: #1f9d3a;
	--wkt-down: #e02020;
	--wkt-same: #8a8a8a;
	--wkt-tab-bg: #e6ebf1;
	--wkt-tab-hover: #d3dce8;
	--wkt-tab-text: #3a475a;

	max-width: 1200px;
	margin: 0 auto 1.5em;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 12.5px;
	line-height: 1.25;
	color: var(--wkt-text);
	box-sizing: border-box;
}

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

.wkt-widget.wkt-theme-donker {
	--wkt-bar: #5f8b97;
	--wkt-panel: #232b3d;
	--wkt-row-a: #2b3550;
	--wkt-row-b: #161b28;
	--wkt-border: #333d54;
	--wkt-text: #e9ecf2;
	--wkt-dim: #8b93a7;
	--wkt-up: #3fcda0;
	--wkt-down: #ff6b6b;
	--wkt-same: #8b93a7;
	--wkt-tab-bg: #2a3346;
	--wkt-tab-hover: #34405a;
	--wkt-tab-text: #b9c1d3;
}

.wkt-scroll {
	overflow-x: auto;
}

.wkt-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--wkt-panel);
	margin: 0;
	border: 1px solid var(--wkt-border);
	border-radius: 6px;
	overflow: hidden;
}

/* Titelbalk */
.wkt-caption {
	caption-side: top;
	background: var(--wkt-bar);
	color: var(--wkt-bar-text);
	font-weight: 700;
	font-size: 13px;
	text-align: center;
	padding: 10px 12px;
	border-radius: 6px 6px 0 0;
}

/* Kopbalk */
.wkt-table thead th {
	background: var(--wkt-bar);
	color: var(--wkt-bar-text);
	font-weight: 700;
	font-size: 12.5px;
	text-align: center;
	padding: 7px 12px;
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	border-right: 1px solid rgba(255, 255, 255, 0.35);
	white-space: nowrap;
}
.wkt-table thead th:last-child { border-right: 0; }

/* Cellen: gecentreerd, raster */
.wkt-table tbody th,
.wkt-table tbody td,
.wkt-table tfoot td {
	padding: 5px 12px;
	text-align: center;
	vertical-align: middle;
	border: 0;
	border-right: 1px solid var(--wkt-border);
	border-bottom: 1px solid var(--wkt-border);
}
.wkt-table tbody th:last-child,
.wkt-table tbody td:last-child { border-right: 0; }

.wkt-table tbody tr:nth-child(odd) > * { background: var(--wkt-row-a); }
.wkt-table tbody tr:nth-child(even) > * { background: var(--wkt-row-b); }

/* Label (gedempt) en waarde (vet) */
.wkt-label {
	color: var(--wkt-dim);
	font-weight: 400;
	white-space: nowrap;
}

.wkt-value {
	color: var(--wkt-text);
	font-weight: 700;
	white-space: nowrap;
}

/* Jaartal tussen haakjes: klein en gedempt */
.wkt-sub {
	display: inline-block;
	font-weight: 400;
	font-size: 11px;
	color: var(--wkt-dim);
	margin-left: 6px;
}

/* Samenvattingsregels: gedempte zin, vette waarde, over de volle breedte */
.wkt-table tfoot td {
	color: var(--wkt-dim);
	border-right: 0;
	padding: 7px 12px;
}
.wkt-table tfoot tr:nth-child(odd) td { background: var(--wkt-row-b); }
.wkt-table tfoot tr:nth-child(even) td { background: var(--wkt-row-a); }
.wkt-table tfoot tr:last-child td { border-bottom: 0; }

.wkt-arrow {
	display: inline-block;
	margin-left: 4px;
	font-size: 0.8em;
	line-height: 1;
	vertical-align: middle;
}
.wkt-up { color: var(--wkt-up); }
.wkt-down { color: var(--wkt-down); }
.wkt-same { color: var(--wkt-same); }

.wkt-error {
	color: var(--wkt-dim);
	padding: 8px 0;
	margin: 0;
}

@media (max-width: 600px) {
	.wkt-table thead th,
	.wkt-table tbody th,
	.wkt-table tbody td,
	.wkt-table tfoot td { padding: 5px 8px; }
	.wkt-table thead th { white-space: normal; }
}

/* ---------- Tabbladen (Temperatuur | Neerslag) ---------- */
/* Echte "map"-tabs: de actieve tab loopt zonder tussenruimte over in de blauwe
   titelbalk van de tabel, de andere tab is zichtbaar als aanklikbaar tabblad. */

.wkt-tabs {
	display: flex;
	align-items: flex-end;
	gap: 3px;
	margin: 0;
	padding: 0;
}

.wkt-tabs .wkt-tab {
	appearance: none;
	-webkit-appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: var(--wkt-tab-bg) !important;
	background-image: none !important;
	border: 1px solid var(--wkt-border) !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none;
	letter-spacing: normal;
	border-radius: 8px 8px 0 0;
	color: var(--wkt-tab-text) !important;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	padding: 8px 18px 9px;
	margin: 4px 0 0;
	cursor: pointer;
	transition: background-color 0.12s ease;
}
.wkt-tabs .wkt-tab svg {
	flex: none;
	display: block;
}
.wkt-tabs .wkt-tab:hover {
	background: var(--wkt-tab-hover) !important;
	color: var(--wkt-text) !important;
}
.wkt-tabs .wkt-tab.wkt-tab-active,
.wkt-tabs .wkt-tab.wkt-tab-active:hover {
	background: var(--wkt-bar) !important;
	border-color: var(--wkt-bar) !important;
	color: var(--wkt-bar-text) !important;
	font-weight: 700;
	margin-top: 0;
	padding-top: 11px;
	cursor: default;
}
.wkt-tabs .wkt-tab:focus-visible {
	outline: 2px solid var(--wkt-bar);
	outline-offset: 2px;
}

/* De tabel sluit direct aan op de tabs: linksboven geen afronding */
.wkt-tabbed .wkt-table {
	border-top-left-radius: 0;
	border-top-color: var(--wkt-bar);
}
.wkt-tabbed .wkt-caption {
	border-top-left-radius: 0;
}

.wkt-tabpanel[hidden] {
	display: none;
}

/* Grafieken in een tabblad: onder de tabel, naast elkaar (onder elkaar op smalle schermen) */
.wkt-tabpanel .wkt-charts-grid {
	margin-top: 16px;
}

/* Buiten tabbladen (tabs="nee" of toon="wind"): rozen en grafieken onder elkaar met ruimte ertussen */
.wkt-widget > .wkt-charts-grid + .wkt-charts-grid {
	margin-top: 16px;
}

/* Tabblad zonder tabel (Wind): de eerste kaart sluit direct aan op de tab, net als de tabel bij
   Temperatuur en Neerslag: geen tussenruimte, geen afronding linksboven en de blauwe
   titelbalk loopt door in de actieve tab. */
.wkt-tabpanel > .wkt-charts-grid:first-child {
	margin-top: 0;
}
.wkt-tabpanel > .wkt-charts-grid:first-child > .wkt-chart:first-child {
	border-top-left-radius: 0;
	border-top-color: var(--wkt-bar);
}

/* ---------- Grafieken (dag- en maandgrafiek) ---------- */

.wkt-widget.wkt-charts {
	max-width: 1200px;
}

.wkt-charts-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 372px), 1fr));
	gap: 16px;
}

.wkt-chart {
	position: relative;
	background: var(--wkt-panel);
	border: 1px solid var(--wkt-border);
	border-radius: 6px;
	overflow: hidden;
	min-width: 0;
}

.wkt-chart-title {
	background: var(--wkt-bar);
	color: var(--wkt-bar-text);
	font-weight: 700;
	font-size: 13px;
	text-align: center;
	padding: 10px 12px;
}

.wkt-svg {
	display: block;
	width: 100%;
	height: auto;
	touch-action: pan-y;
	outline: none;
}
.wkt-svg:focus-visible {
	outline: 2px solid var(--wkt-bar);
	outline-offset: -2px;
}

.wkt-band { fill: var(--wkt-row-a); }
.wkt-widget.wkt-theme-donker .wkt-band { fill: var(--wkt-row-b); }
.wkt-grid { stroke: var(--wkt-border); stroke-width: 1; }
.wkt-zero { stroke: var(--wkt-dim); stroke-width: 1; opacity: 0.6; }
.wkt-axis { fill: var(--wkt-dim); font-size: 11px; font-family: inherit; }

.wkt-line {
	fill: none;
	stroke-width: 1.6;
	stroke-linejoin: round;
	stroke-linecap: round;
}
.wkt-line-daily { stroke-width: 1.2; }

.wkt-lbl {
	font-size: 10px;
	font-weight: 700;
	font-family: inherit;
	paint-order: stroke;
	stroke: var(--wkt-panel);
	stroke-width: 3px;
	stroke-linejoin: round;
}

/* Interactiviteit (alleen actief met wkt-script.js) */
.wkt-hover-line {
	stroke: var(--wkt-dim);
	stroke-width: 1;
	stroke-dasharray: 3 3;
}
.wkt-dot {
	stroke: var(--wkt-panel);
	stroke-width: 1.5;
}
.wkt-off { display: none; }
.wkt-hover-band { fill: var(--wkt-dim); opacity: 0.14; }
.wkt-bar { stroke: #3b82d6; stroke-width: 1; fill-opacity: 0.88; }

.wkt-tip {
	position: absolute;
	z-index: 5;
	pointer-events: none;
	min-width: 190px;
	padding: 8px 10px;
	background: var(--wkt-panel);
	color: var(--wkt-text);
	border: 1px solid var(--wkt-border);
	border-radius: 6px;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	font-size: 12px;
	line-height: 1.35;
	white-space: nowrap;
}
.wkt-tip[hidden] { display: none; }
.wkt-tip-title {
	font-weight: 700;
	margin-bottom: 4px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--wkt-border);
}
.wkt-tip-row {
	display: flex;
	align-items: center;
	gap: 7px;
}
.wkt-tip-sw {
	display: inline-block;
	width: 10px;
	height: 3px;
	border-radius: 2px;
	flex: none;
}
.wkt-tip-label {
	color: var(--wkt-dim);
	flex: 1 1 auto;
}
.wkt-tip-val {
	font-weight: 700;
	margin-left: 10px;
}

/* Legenda */
.wkt-legend {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 12px;
	margin: 0;
	padding: 4px 12px 12px;
}
.wkt-legend li {
	margin: 0;
	padding: 0;
	list-style: none;
}
.wkt-legend-sw {
	display: inline-block;
	width: 18px;
	height: 3px;
	border-radius: 2px;
}
/* Knoppen: thema-stijlen bewust overschrijven */
.wkt-legend .wkt-legend-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	appearance: none;
	-webkit-appearance: none;
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-transform: none;
	letter-spacing: normal;
	color: var(--wkt-dim) !important;
	font: inherit;
	font-size: 11.5px;
	line-height: 1.3;
	padding: 2px 4px;
	margin: 0;
	border-radius: 4px;
	cursor: default;
}
.wkt-js .wkt-legend .wkt-legend-btn { cursor: pointer; }
.wkt-js .wkt-legend .wkt-legend-btn:hover { color: var(--wkt-text) !important; }
.wkt-legend .wkt-legend-btn:focus-visible { outline: 2px solid var(--wkt-bar); }
.wkt-legend .wkt-legend-btn.wkt-legend-off {
	opacity: 0.45;
	text-decoration: line-through;
}

/* Donkere stijl: lichtere waardekleuren voor voldoende contrast */
.wkt-theme-donker .wkt-lbl[data-s="rh"] { fill: #ff7b7b; }
.wkt-theme-donker .wkt-lbl[data-s="ah"] { fill: #ff8fb8; }
.wkt-theme-donker .wkt-lbl[data-s="mt"] { fill: #57e08a; }
.wkt-theme-donker .wkt-lbl[data-s="al"] { fill: #9db0ff; }
.wkt-theme-donker .wkt-lbl[data-s="rl"] { fill: #8ea0ff; }
.wkt-theme-donker .wkt-lbl[data-s="rr"] { fill: #8fb8ff; }
.wkt-theme-donker .wkt-lbl[data-s="ar"] { fill: #8fb8ff; }

/* ---------- Windroos (gestapeld per snelheidsklasse) ---------- */

.wkt-rose-toolbar {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 16px 0;
	font-size: 12.5px;
	color: var(--wkt-dim);
}
.wkt-rose-toolbar[hidden] { display: none; }
.wkt-rose-toolbar label {
	font-weight: 600;
}
.wkt-rose-select {
	appearance: auto;
	-webkit-appearance: menulist;
	font: inherit;
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.3;
	min-width: 160px;
	margin: 0;
	padding: 6px 10px;
	color: var(--wkt-text);
	background-color: var(--wkt-panel);
	border: 1px solid var(--wkt-border);
	border-radius: 6px;
	box-shadow: none;
	cursor: pointer;
}
.wkt-rose-select:focus-visible {
	outline: 2px solid var(--wkt-bar);
	outline-offset: 1px;
}

.wkt-rose-body {
	padding: 4px 16px 18px;
	text-align: center;
}

.wkt-rose-svg {
	display: block;
	width: 100%;
	max-width: 600px;
	height: auto;
	margin: 0 auto;
	touch-action: pan-y;
}

.wkt-rose-ring,
.wkt-rose-spoke {
	fill: none;
	stroke: var(--wkt-border);
	stroke-width: 1;
}
.wkt-rose-outer {
	fill: none;
	stroke: var(--wkt-text);
	stroke-width: 1.2;
}
.wkt-rose-hole {
	fill: var(--wkt-panel);
	stroke: var(--wkt-border);
	stroke-width: 1;
}
.wkt-rose-calm-l {
	fill: var(--wkt-dim);
	font-size: 12px;
}
.wkt-rose-calm-v {
	fill: var(--wkt-text);
	font-size: 15px;
	font-weight: 700;
}
.wkt-rose-card {
	font-weight: 700;
	font-size: 13px;
	fill: var(--wkt-text);
}
.wkt-rose-arrow {
	fill: var(--wkt-panel);
	stroke: var(--wkt-text);
	stroke-width: 1.1;
	stroke-linejoin: round;
}
.wkt-rose-rlbl {
	font-size: 11px;
	paint-order: stroke;
	stroke: var(--wkt-panel);
	stroke-width: 3px;
	stroke-linejoin: round;
}

.wkt-seg {
	stroke: var(--wkt-panel);
	stroke-width: 0.5;
	pointer-events: none;
	transition: opacity 0.12s ease;
}
/* Bij hover op een sector worden de andere gedempt; bij hover op een klasse in de lijst
   blijft alleen die kleur over. */
.wkt-rose-svg.wkt-focus .wkt-seg:not(.wkt-hot) { opacity: 0.35; }
.wkt-rose-svg.wkt-dim .wkt-seg:not(.wkt-on) { opacity: 0.12; }
.wkt-hit {
	fill: transparent;
	stroke: none;
	cursor: pointer;
}

.wkt-rose-summary {
	margin: 14px 0 0;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--wkt-dim);
}
.wkt-rose-summary strong {
	color: var(--wkt-text);
}

/* Legenda onder de roos */
.wkt-rose-legend {
	margin: 10px auto 0;
	padding: 10px 8px 8px;
	max-width: 600px;
	border: 1px solid var(--wkt-border);
	border-radius: 6px;
}
.wkt-rose-legtitle {
	margin: 0 0 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--wkt-text);
}
/* De legenda staat op één rij. Alles in de rij (tekst, kleurvlakjes, tussenruimte) is in "em"
   uitgedrukt en de lettergrootte volgt de breedte van de kaart (die is een "container"), zodat de
   rij altijd precies past. Pas als de kaart echt te smal wordt (mobiel) mag de legenda over meer rijen. */
.wkt-rose {
	container-type: inline-size;
	--wkt-leg-k: 42.5;
}
.wkt-rose-legitems {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	gap: 0.3em 0.75em;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: min(12px, calc((100cqi - 52px) / var(--wkt-leg-k)));
}
.wkt-leg {
	display: inline-flex;
	flex: none;
	align-items: center;
	gap: 0.4em;
	margin: 0;
	padding: 0.15em 0.2em;
	border-radius: 4px;
	font-size: 1em;
	white-space: nowrap;
	list-style: none;
	color: var(--wkt-text);
}
@container (max-width: 460px) {
	.wkt-rose-legitems {
		flex-wrap: wrap;
		font-size: 12px;
	}
}
/* Browsers zonder container queries: vaste grootte, bij gebrek aan ruimte over meer rijen. */
@supports not (container-type: inline-size) {
	.wkt-rose-legitems {
		flex-wrap: wrap;
		font-size: 12px;
	}
}
.wkt-js .wkt-leg:hover {
	background: var(--wkt-row-a);
}
.wkt-rose-sw {
	display: block;
	width: 1em;
	height: 0.8em;
	border-radius: 2px;
	flex: none;
}

.wkt-rose-note {
	margin: 10px 0 0;
	font-size: 11.5px;
	color: var(--wkt-dim);
}

/* Beide windrozen: titelbalken even hoog, ook als de ene titel over twee regels loopt */
.wkt-rose .wkt-chart-title {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 53px;
	text-wrap: balance;
}

.wkt-tip-total {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid var(--wkt-border);
}


@media (prefers-reduced-motion: reduce) {
	.wkt-seg { transition: none; }
}
.wkt-theme-donker .wkt-lbl[data-s="rg"] { fill: #8fb8ff; }
.wkt-theme-donker .wkt-lbl[data-s="ag"] { fill: #ff8fb8; }
.wkt-theme-donker .wkt-lbl[data-s="da"] { fill: #57e08a; }

/* ---------- Klimaat: klimatogram en evolutie van de jaartemperatuur ---------- */

.wkt-axis-t { fill: #c23b3f; }
.wkt-axis-p { fill: #1f5fa8; }
.wkt-theme-donker .wkt-axis-t { fill: #ff9b9b; }
.wkt-theme-donker .wkt-axis-p { fill: #8fb8ff; }
.wkt-line-t {
	stroke-width: 2.4;
}
.wkt-line-trend {
	stroke-width: 3.2;
}
.wkt-pt {
	stroke: var(--wkt-panel);
	stroke-width: 1.3;
}
.wkt-lbl-bar {
	fill: #ffffff;
	font-size: 10px;
	font-weight: 700;
	font-family: inherit;
	pointer-events: none;
}
.wkt-theme-donker .wkt-lbl-bar { fill: #0d2240; }
.wkt-theme-donker .wkt-lbl[data-s="p"] { fill: #8fb8ff; }

/* Temperatuurwaarden in het klimatogram: rode tekst op een lichte achtergrond met rode rand */
.wkt-lbl-bg {
	fill: #ffffff;
	stroke: #e5484d;
	stroke-width: 1;
	stroke-opacity: 0.55;
}
.wkt-lbl-t {
	fill: #b5252a;
	font-size: 11px;
	font-weight: 700;
	font-family: inherit;
	pointer-events: none;
}
.wkt-theme-donker .wkt-lbl-bg {
	fill: #1b2230;
	stroke: #ff9b9b;
	stroke-opacity: 0.7;
}
.wkt-theme-donker .wkt-lbl-t { fill: #ffb3b3; }

.wkt-chart-note {
	padding: 0 14px 14px;
	font-size: 12px;
	line-height: 1.6;
	text-align: center;
	color: var(--wkt-dim);
}
.wkt-chart-note strong {
	color: var(--wkt-text);
}
.wkt-note-small {
	font-size: 11.5px;
}