/* ═══ Basisstijl — de schil en het nu-scherm ═══════════════════════════════
 *
 * Overgenomen uit het ontwerp "Weerstation Astene.dc.html": Nunito, een licht
 * blad met witte kaarten, cyaan voor de metingen en geel voor alles waar een
 * voorbehoud bij hoort. De hele site is één pagina met vier tabbladen.
 *
 * Het ontwerp is bewust licht en kent geen donkere variant. Er is er hier dus
 * ook geen verzonnen: kleuren die alleen in een media-query bestaan, gaan bij
 * de eerste wijziging uit elkaar lopen met de rest.
 */

/* Nunito staat lokaal — geen verbinding met Google per bezoeker. Eén variabel
   bestand van 39 kB dekt alle diktes van 400 tot 900. */
@font-face {
  font-family: Nunito;
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url(/fonts/nunito-latin.woff2) format('woff2');
}

:root {
  --bg: #FAFCFD;
  --kaart: #FFFFFF;
  --lijn: #E3E8EC;
  --lijn-zacht: #F0F2F4;
  --vlak: #F7FAFB;
  --ink: #14181C;
  --ink-zacht: #2A2F34;
  --muted: #667085;
  --flauw: #98A2B3;

  --cyaan: #00A9CC;
  --diep: #00637A;
  --link: #0089A8;
  --geel: #FFC800;
  --geel-vlak: #FFF3C4;
  --geel-ink: #7A5B00;

  --let-op-vlak: #FFF4E5;
  --let-op-lijn: #F0C36B;
  --let-op-ink: #9A5B00;
  --let-op-ink-diep: #7A4D00;

  --groen: #22C55E;
  --groen-vlak: #F0FBF6;
  --groen-lijn: #BEEBD2;

  --sans: Nunito, system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
  --rond: 14px;
}

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 { letter-spacing: -0.01em; }

@keyframes leeft {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.45); }
  70%  { box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

:focus-visible { outline: 3px solid var(--diep); outline-offset: 3px; border-radius: 6px; }

/* ══ kop ══════════════════════════════════════════════════════════════════ */

.kop {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px clamp(14px, 3vw, 28px);
  border-bottom: 1px solid var(--lijn);
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  background: rgba(250, 252, 253, 0.94);
  backdrop-filter: blur(6px);
  z-index: 20;
}

.merk {
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  flex: none;
}

.merk img { height: 40px; width: auto; display: block; border-radius: 10px; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }

.tab {
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  color: #4A5560;
}

.tab:hover { background: var(--vlak); color: var(--ink); }

.tab[aria-current='page'] { background: var(--ink); color: #fff; }
.tab[aria-current='page']:hover { background: var(--ink); color: #fff; }

.kop-rechts {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.plaatsregel { font-size: 13px; color: var(--muted); }

.taalknop {
  border: 1px solid var(--lijn);
  background: var(--kaart);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
  color: var(--ink);
}

.taalknop:hover { border-color: var(--diep); color: var(--diep); }

/* ══ blad ═════════════════════════════════════════════════════════════════ */

main {
  flex: 1;
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 28px clamp(14px, 3vw, 20px) 60px;
}

.tabblad[hidden] { display: none; }

.kaart {
  background: var(--kaart);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 18px;
}

.blok-titel {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin: 0;
}

h1.paginatitel { font-size: 28px; font-weight: 900; margin: 0 0 6px; }
h2.sectietitel { font-size: 18px; font-weight: 800; margin: 28px 0 12px; }

.inleiding {
  color: var(--muted);
  font-size: 14.5px;
  margin: 0 0 22px;
  max-width: 62ch;
}

.voetnoot {
  font-size: 12.5px;
  color: var(--flauw);
  line-height: 1.6;
  max-width: 68ch;
  margin: 22px 2px 0;
}

/* ══ nu — de hero ═════════════════════════════════════════════════════════ */

.hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.graden {
  font-size: clamp(56px, 9vw, 108px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}

.graden small { font-size: 0.4em; font-weight: 800; color: var(--muted); }

/* Geen meting is geen reden voor een streepje van honderd pixels. */
.graden.leeg { font-size: clamp(40px, 6vw, 64px); color: var(--flauw); }

.hero-bij {
  font-size: 17px;
  color: var(--muted);
  margin: 8px 0 0;
  max-width: 46ch;
}

.leeft-blok {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  min-width: 160px;
}

.leeft {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--groen-vlak);
  border: 1px solid var(--groen-lijn);
  border-radius: 999px;
  padding: 5px 12px;
}

.leeft span:last-child { font-size: 13px; font-weight: 700; color: var(--ink); }

.stip {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--groen);
  animation: leeft 2s infinite;
  flex: none;
}

/* Oud of onbereikbaar mag niet als "live" ogen: de kleur is het eerste wat je
   ziet, en een groene stip boven een meting van gisteren is een leugen.
   "Te druk" krijgt dezelfde gele toon als "oud" en niet het rood van "weg":
   er is niets stuk, we mogen het station alleen even niet opnieuw bevragen. */
.leeft.oud, .leeft.druk { background: var(--let-op-vlak); border-color: var(--let-op-lijn); }
.leeft.oud .stip, .leeft.druk .stip { background: var(--geel); animation: none; }
.leeft.weg { background: #FEF2F2; border-color: #FCA5A5; }
.leeft.weg .stip { background: #DC2626; animation: none; }

.leeft-sub { font-size: 11.5px; color: var(--flauw); }

/* ══ nu — de meetkaarten ══════════════════════════════════════════════════ */

.metingen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.meting-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.meting-waarde {
  font-size: 26px;
  font-weight: 800;
  margin-top: 6px;
  font-variant-numeric: tabular-nums;
}

/* Een sensor die niet werkt levert een woord, geen getal — dus ook niet de
   typografie van een getal. */
.meting.stuk .meting-waarde { font-size: 15px; font-weight: 700; color: #B7BEC7; }

.meting-bij { font-size: 12px; color: var(--flauw); margin: 4px 0 0; }

.infoknop {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--let-op-lijn);
  background: var(--let-op-vlak);
  color: var(--let-op-ink);
  font-family: inherit;
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
  flex: none;
}

.meting-noot {
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--let-op-ink);
  background: var(--let-op-vlak);
  border-radius: 8px;
  padding: 8px 10px;
  line-height: 1.4;
}

/* ══ nu — wind ════════════════════════════════════════════════════════════ */

.wind { margin-top: 14px; }

.wind-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
}

.bft-chip {
  font-size: 12.5px;
  font-weight: 800;
  background: var(--geel-vlak);
  color: var(--geel-ink);
  padding: 4px 10px;
  border-radius: 999px;
}

.wind-lijf { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 12px; }

/* align-content houdt de cijfers bovenaan wanneer ze op een tussenbreedte over
   twee regels vallen; zonder dat worden ze over de hoogte van het kaartje
   uitgesmeerd en lijkt er iets te ontbreken. */
.wind-cijfers {
  display: flex;
  gap: 14px 20px;
  flex-wrap: wrap;
  align-content: flex-start;
  flex: 1;
  min-width: 180px;
}
.wind-cijfers .label { font-size: 12px; color: var(--muted); }
.wind-cijfers .getal { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }

.roos { width: 320px; flex-shrink: 0; }

/* Het kaartje: één stilstaand beeld van OpenStreetMap met de wijzer erover.
   De verhouding staat vast op die van het beeld, zodat er tijdens het laden
   niets verspringt. */
.kaartje {
  position: relative;
  width: 100%;
  aspect-ratio: 640 / 500;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--lijn);
}

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

/* Een kaart is druk. Een sluier eroverheen houdt de wijzer leesbaar zonder de
   kaart zelf te bewerken — zo blijft het beeld het onbewerkte origineel. */
.kaartje .sluier {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.kaartje .streek {
  position: absolute;
  font-size: 11px;
  font-weight: 800;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  padding: 1px 5px;
  border-radius: 4px;
  pointer-events: none;
}

.kaartje .streek.n { top: 4px; left: 50%; transform: translateX(-50%); }
.kaartje .streek.z { bottom: 4px; left: 50%; transform: translateX(-50%); }
.kaartje .streek.w { left: 4px; top: 50%; transform: translateY(-50%); }
.kaartje .streek.o { right: 4px; top: 50%; transform: translateY(-50%); }

.kaartje .wijzer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.35));
  pointer-events: none;
}

.roos-bij { font-size: 12px; color: var(--muted); margin: 6px 0 0; text-align: center; }

.roos-bron { font-size: 10.5px; color: var(--flauw); margin: 2px 0 0; text-align: center; }
.roos-bron a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.roos-bron a:hover { color: var(--link); }

/* De lijngrafiek 'Verloop vandaag' is op 30-08-2026 van het Nu-tabblad
   gehaald — onleesbaar zonder tijdas — en daarmee ook haar opmaak.
   Alleen dit ene klasje blijft: het archieftabblad gebruikt het bij de
   jaargrafiek, en dat is een andere grafiek met een eigen as. */
.verloop-tik { font-size: 12px; color: var(--flauw); }

.gezondheid {
  font-size: 12px;
  color: var(--flauw);
  margin: 14px 2px 0;
  line-height: 1.6;
}

/* ══ nu — kleur bij de temperatuur ════════════════════════════════════════
   Opmaak, geen uitspraak: de grenzen zijn die van het menselijk oordeel.
   De kleuren komen uit het palet van de site, zodat de hero niet plots een
   zesde tint introduceert die nergens anders voorkomt. */

.graden .vries { color: #0369A1; }
.graden .koud  { color: #199FD6; }
.graden .mild  { color: var(--ink); }
.graden .warm  { color: #B07A00; }
.graden .heet  { color: #EA580C; }
.graden .brand { color: #DC2626; }

/* ══ nu — de vochtigheidsring ═════════════════════════════════════════════ */

.ring-wrap {
  position: relative;
  width: 96px;
  margin: 6px auto 0;
}

.ring { width: 100%; height: auto; display: block; transform: rotate(-90deg); }

.ring-achter, .ring-voor {
  fill: none;
  stroke-width: 9;
  stroke-linecap: round;
}
.ring-achter { stroke: var(--lijn-zacht); }
.ring-voor { stroke: var(--cyaan); transition: stroke-dashoffset .8s ease; }

.ring-getal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 20px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* ══ nu — de verwachting ══════════════════════════════════════════════════
   Het enige blok dat redeneert in plaats van meet. Geel is op deze site de
   kleur van voorbehoud, dus krijgt deze kaart een gele rand — dezelfde taal
   als de noot bij een defecte sensor. */

.verwachting {
  margin-top: 14px;
  border-color: var(--let-op-lijn);
  background: linear-gradient(180deg, var(--let-op-vlak) 0%, var(--kaart) 60%);
}
.verwachting[hidden] { display: none; }

.vw-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.vw-kop .blok-titel { margin-right: auto; }

.vw-trend {
  font-size: 12px;
  font-weight: 700;
  color: var(--let-op-ink-diep);
  font-variant-numeric: tabular-nums;
}
.vw-trend[hidden] { display: none; }

.vw-pil {
  font-size: 12px;
  font-weight: 800;
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.vw-slecht  { color: #B42318; background: #FEE4E2; }
.vw-minder  { color: var(--let-op-ink); background: #FFE9C7; }
.vw-stabiel { color: var(--diep); background: #DFF3F8; }
.vw-goed    { color: #15803D; background: var(--groen-vlak); }
.vw-nog     { color: var(--muted); background: var(--vlak); }

.vw-regels { list-style: none; margin: 12px 0 0; padding: 0; }

.vw-regels li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 7px;
  max-width: 70ch;
}

.vw-regels li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--geel);
}

.vw-voorbehoud {
  font-size: 12px;
  color: var(--let-op-ink);
  margin: 12px 0 0;
  padding-top: 10px;
  border-top: 1px solid var(--let-op-lijn);
  max-width: 70ch;
}

/* ══ nu — hoogste en laagste ══════════════════════════════════════════════ */

.uitersten { margin-top: 14px; }

.mm-paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 10px;
}

.mm-kolom {
  background: var(--vlak);
  border: 1px solid var(--lijn-zacht);
  border-radius: 10px;
  padding: 12px;
}

.mm-dag { font-size: 13px; font-weight: 800; margin-bottom: 8px; }

.mm-waarde {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 3px 0;
}

.mm-label { font-size: 11px; color: var(--flauw); width: 62px; flex: none; }
.mm-waarde strong { font-size: 19px; font-weight: 800; font-variant-numeric: tabular-nums; }
.mm-waarde.max strong { color: #B07A00; }
.mm-waarde.min strong { color: var(--cyaan); }

/* De neerslag staat los van het temperatuurpaar: geen tijdstip erbij, want
   het is een dagtotaal en geen moment. Iets zachter dan de twee erboven,
   zodat het paar hoogste/laagste het beeld blijft dragen. */
.mm-waarde.regen { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--lijn); }
.mm-waarde.regen strong { font-size: 17px; color: var(--ink); }
.mm-tijd { font-size: 12px; color: var(--flauw); font-variant-numeric: tabular-nums; }

.mm-tel { font-size: 11.5px; color: var(--flauw); margin: 8px 0 0; }
.mm-leeg { font-size: 12.5px; color: var(--flauw); margin: 4px 0 0; }
.mm-bij { font-size: 12px; color: var(--flauw); margin: 12px 0 0; line-height: 1.6; max-width: 70ch; }

/* ══ nu — de regenradar ═══════════════════════════════════════════════════
   Het enige onderdeel dat bij derden aanklopt, en pas na een klik. De
   waarschuwing staat er altijd, ook als de radar dicht is: ze is de reden dat
   er een knop staat in plaats van een kaart. */

.radar { margin-top: 14px; }

.radar-kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.radar-schakelaar {
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--diep);
  background: #DFF3F8;
  border: 1px solid #B9E4EE;
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
}
.radar-schakelaar:hover { background: #CCEBF2; }

.radar-waarschuwing {
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 0;
  line-height: 1.6;
  max-width: 70ch;
}

.radar-melding { font-size: 12.5px; color: var(--muted); margin: 10px 0 0; }
.radar-melding.mislukt { color: var(--let-op-ink); }
.radar-melding[hidden] { display: none; }

.radar-paneel[hidden] { display: none; }

.radar-doek {
  height: 380px;
  margin-top: 12px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--lijn);
  background: var(--vlak);
}

/* Leaflet zet zijn eigen font en z-index; die laatste mag niet boven de
   kopbalk uitkomen als de pagina scrollt. */
.radar-doek .leaflet-container { font-family: inherit; }
.radar-doek .leaflet-pane, .radar-doek .leaflet-top, .radar-doek .leaflet-bottom { z-index: 1; }

.radar-bediening {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.radar-bediening[hidden] { display: none; }

.radar-knop {
  width: 34px;
  height: 34px;
  flex: none;
  border-radius: 50%;
  border: 1px solid var(--lijn);
  background: var(--kaart);
  color: var(--diep);
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}
.radar-knop:hover { background: var(--vlak); }

.radar-schuif { flex: 1; accent-color: var(--cyaan); }

.radar-tijd {
  font-size: 13px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 92px;
  text-align: right;
}
/* Een nowcast is geen meting. Hij mag er dus ook niet uitzien als een meting. */
.radar-tijd.verwacht { color: var(--let-op-ink); font-style: italic; }

.radar-bron { font-size: 11px; color: var(--flauw); margin: 8px 0 0; }

@media (max-width: 560px) {
  .mm-paar { grid-template-columns: 1fr; }
  .radar-doek { height: 300px; }
  .radar-kop { flex-wrap: wrap; }
}

/* ══ voet ═════════════════════════════════════════════════════════════════ */

.voet {
  border-top: 1px solid var(--lijn);
  padding: 18px clamp(14px, 3vw, 28px);
  font-size: 12px;
  color: var(--flauw);
  text-align: center;
}

.voet p { margin: 0; }

@media (max-width: 560px) {
  .kop { gap: 12px; padding-bottom: 10px; }
  .kop-rechts { margin-left: auto; }
  .plaatsregel { display: none; }
  .tabs { order: 3; width: 100%; }
  /* Zonder bovengrens wordt het kaartje op een telefoon een halve schermhoogte
     hoog, en dat is niet waar die pagina om draait. */
  .roos { width: 100%; max-width: 340px; margin: 0 auto; }
}