/* METEOPROOF -- gedeelde hoofding + footer in de stijl van de nieuwe Overview (2026-09-27).
   Alles onder .sk-* zodat het niet botst met Tailwind op de oudere pagina's.
   Licht/donker volgt <html class="dark"> (zelfde thema-toggle als voorheen, shared.js wisselThema()). */
/* Inter sitebreed (2026-10-11, zoals de startpagina): elke pagina laadt Inter zelf via <link> (geen @import, die laadt pas na deze CSS).
   "Inter Fallback" = Arial met de maten van Inter, zodat de lettertypewissel niets doet verspringen (CLS). */
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans");
             size-adjust: 107.06%; ascent-override: 90.49%; descent-override: 22.56%; line-gap-override: 0%; }

:root {
  --sk-papier: #f6f5f1; --sk-inkt: #16181c; --sk-inkt2: #4a4f57; --sk-inkt3: #676c74;
  --sk-lijn: #dcd9d1; --sk-lijn2: #ebe8e1; --sk-accent: #d9643f; --sk-paneel: #fdfcf9;
  --sk-sans: "Inter", "Inter Fallback", system-ui, sans-serif; --sk-mono: "Inter", "Inter Fallback", system-ui, sans-serif;
}
html.dark {
  --sk-papier: #111418; --sk-inkt: #eceae4; --sk-inkt2: #aeb3ba; --sk-inkt3: #7b818a;
  --sk-lijn: #2a3038; --sk-lijn2: #20252c; --sk-accent: #e8774f; --sk-paneel: #181c22;
}
/* width:100% (2026-09-27): op pagina's met <body class="flex flex-col"> kromp de kop anders tot zijn inhoud en stond hij in het midden */
/* paginaachtergrond in dezelfde papiertint als de nieuwe Overview (enkel pagina's met de nieuwe kop) */
html:not(.dark) body.sk-pagina { background: var(--sk-papier); }
/* Inter heeft proportionele cijfers; tabelcijfers sitebreed zodat kolommen (vroeger IBM Plex Mono) blijven uitlijnen */
body { font-feature-settings: "tnum" 1; }

.sk-kop { position: relative; z-index: 40; width: 100%; box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 18px 20px; display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  font: 15px/1.5 var(--sk-sans); color: var(--sk-inkt); -webkit-font-smoothing: antialiased; }
.sk-kop *, .sk-voet * { box-sizing: border-box; }
.sk-merk { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--sk-inkt); }
.sk-merk .sk-logo { width: 28px; height: 20px; background: url(/Meteoproof_logo_blkgrd_crop.png) center / contain no-repeat; }
.sk-merk b { font-weight: 600; letter-spacing: .08em; font-size: 16px; }

.sk-nav { display: flex; align-items: center; gap: 22px; font-size: 14px; }
.sk-nav > a, .sk-menu > button { font: inherit; text-decoration: none; color: var(--sk-inkt2); background: none; border: 0; border-bottom: 2px solid transparent;
  padding: 4px 0; white-space: nowrap; cursor: pointer; }
.sk-nav > a:hover, .sk-menu:hover > button, .sk-menu.open > button { color: var(--sk-inkt); }
.sk-nav .actief, .sk-menu.actief > button { color: var(--sk-inkt); border-bottom-color: var(--sk-accent); }
.sk-menu { position: relative; }
.sk-menu > button::after { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 1px 3px 7px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: rotate(45deg); transition: transform .15s; }
.sk-menu.open > button::after { transform: rotate(225deg); margin-bottom: 0; }
.sk-paneel { display: none; position: absolute; top: 100%; left: -14px; z-index: 60; min-width: 270px; margin-top: 6px; padding: 6px 0;
  background: var(--sk-paneel); border: 1px solid var(--sk-lijn); box-shadow: 0 8px 24px rgba(0,0,0,.10); }
.sk-paneel::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
@media (hover: hover) { .sk-menu:hover .sk-paneel { display: block; } }
.sk-menu.open .sk-paneel { display: block; }
.sk-paneel a { display: block; padding: 8px 14px; color: var(--sk-inkt); text-decoration: none; border-left: 2px solid transparent; }
.sk-paneel a:hover { background: color-mix(in oklab, var(--sk-inkt) 6%, transparent); }
.sk-paneel a.actief { border-left-color: var(--sk-accent); background: color-mix(in oklab, var(--sk-accent) 7%, transparent); }
.sk-paneel a b { display: block; font-weight: 500; font-size: 14px; }
.sk-paneel a span { display: block; font-size: 12px; color: var(--sk-inkt3); }
.sk-paneel a.sk-alles { margin-top: 4px; padding-top: 10px; border-top: 1px solid var(--sk-lijn2); font-size: 13px; color: var(--sk-inkt2); }

.sk-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--sk-inkt2); }
.sk-rechts button { font: inherit; color: var(--sk-inkt2); background: none; border: 0; cursor: pointer; padding: 0; }
.sk-rechts button:hover { color: var(--sk-inkt); }
.sk-taal [aria-pressed="true"] { color: var(--sk-inkt); font-weight: 500; }
.sk-thema { display: inline-flex; width: 18px; height: 18px; align-items: center; justify-content: center; }
.sk-thema svg { width: 16px; height: 16px; }
.sk-thema .zon { display: none; } html.dark .sk-thema .zon { display: block; } html.dark .sk-thema .maan { display: none; }

.sk-voet { width: 100%; box-sizing: border-box; max-width: 1160px; margin: 0 auto; padding: 18px 20px 40px; border-top: 1px solid var(--sk-lijn); font: 12px/1.5 var(--sk-sans); color: var(--sk-inkt3);
  display: flex; flex-direction: column; gap: 10px; text-align: left; }
.sk-voetlinks { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.sk-voetlinks a { color: var(--sk-inkt2); text-decoration: none; }
.sk-voetlinks a:hover { color: var(--sk-accent); }
.sk-voetmerk { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--sk-inkt) !important; }
.sk-voetmerk .sk-logo { width: 20px; height: 14px; background: url(/Meteoproof_logo_blkgrd_crop.png) center / contain no-repeat; }
.sk-voetinfo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; }
.sk-voetinfo strong { color: var(--sk-inkt2); font-weight: 500; }

@media (max-width: 900px) {
  .sk-kop { row-gap: 10px; }
  .sk-nav { order: 3; width: 100%; flex-wrap: wrap; gap: 4px 18px; }
  /* paneel over de volle breedte van de kop i.p.v. per knop (anders valt het buiten beeld) */
  .sk-menu { position: static; }
  .sk-paneel { left: 16px; right: 16px; min-width: 0; }
}
@media (max-width: 520px) {
  .sk-kop { gap: 10px 14px; padding: 14px 16px; }
  .sk-nav { font-size: 13px; gap: 4px 14px; }
  .sk-voet { padding: 16px 16px 32px; }
}

/* CLS (2026-09-27): de kop wordt pas door site-kop.js (onderaan de pagina) ingevuld; tot dan zijn hoogte vrijhouden,
   anders schuift de hele pagina ~70-100 px omlaag. Gemeten eindhoogtes: >900 px 67, 521-900 101, <=520 92 (smaller dan ~360 px: 125). */
#site-kop:not(.sk-kop) { display: block; min-height: 67px; }
@media (max-width: 900px) { #site-kop:not(.sk-kop) { min-height: 101px; } }
@media (max-width: 520px) { #site-kop:not(.sk-kop) { min-height: 92px; } }
/* CLS (2026-09-27): de voet staat anders al in beeld zolang de pagina-inhoud nog leeg is en schuift dan weg
   (tools/run-compare, 850-airmass, methodology). Met main minstens schermhoog start de voet onder de rand. */
body:has(#site-voet) main { min-height: 100vh; }

/* Keuzeknoppen sitebreed (2026-10-11, zoals de startpagina): grijze balk, actieve knop wit en licht verhoogd.
   Actief = .aan, [aria-pressed="true"] of [aria-current="page"]. Loopt door op een 2e regel als het niet past. */
.seg { display: inline-flex; flex-wrap: wrap; max-width: 100%; box-sizing: border-box; background: var(--sk-lijn2); border-radius: 8px; padding: 3px; }
.seg > button, .seg > a { border: 0; background: none; font: 500 14px var(--sk-sans); color: var(--sk-inkt2); padding: 6px 12px; border-radius: 6px; cursor: pointer; text-decoration: none; white-space: nowrap; }
.seg > button:hover, .seg > a:hover { color: var(--sk-inkt); }
.seg > .aan, .seg > [aria-pressed="true"], .seg > [aria-current="page"] { background: var(--sk-paneel); color: var(--sk-inkt); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 600; }
.seg > :focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 1px; }
.seg > :disabled { opacity: .5; cursor: not-allowed; }
.seg.klein > button, .seg.klein > a { font-size: 12.5px; padding: 4px 9px; }
/* .seg.los: dezelfde knoppen als losse knopjes zonder doorlopende balk (lange rijen, bv. de parameters op Daily/Monthly). */
.seg.los { background: none; padding: 0; gap: 6px; border-radius: 0; }
.seg.los > button, .seg.los > a { background: var(--sk-lijn2); border: 1px solid transparent; border-radius: 8px; }
.seg.los > .aan, .seg.los > [aria-pressed="true"], .seg.los > [aria-current="page"] { background: var(--sk-paneel); border-color: var(--sk-lijn); }