/* ==========================================================================
   1. INSTELLINGEN & VARIABELEN (Base)
   ========================================================================== */

:root {
  --ink: #e9f4ff;
  --muted: #93aabe;
  --base: #071829;
  --base2: #0a2033;
  --card: rgba(16, 47, 70, .72);
  --edge: rgba(180, 226, 255, .14);
  --cyan: #51c4ff;
  --mint: #6ae8bd;
  --warm: #fb9c4a;
  --shadow: 0 18px 55px rgba(0, 0, 0, .25);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  color: var(--ink);
  font: 15px/1.5 Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  background: radial-gradient(circle at 18% -5%, #17577a 0, transparent 34%), 
              linear-gradient(135deg, var(--base), var(--base2));
}


/* ==========================================================================
   2. SITE STRUCTUUR & LAYOUT
   ========================================================================== */

.site-header, 
main, 
footer {
  position: relative;
  max-width: 1320px;
  margin: auto;
}

main {
  padding: 48px 28px 30px;
}


/* ==========================================================================
   3. ACHTERGROND & ANIMATIES (Sky effects)
   ========================================================================== */

.sky {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: .5;
  background: radial-gradient(ellipse at 85% 5%, rgba(98, 208, 255, .14), transparent 30%);
}

.sky span {
  position: absolute;
  width: 230px;
  height: 65px;
  border-radius: 50%;
  background: rgba(204, 239, 255, .035);
  filter: blur(14px);
  animation: float 25s linear infinite;
}

.sky span:nth-child(1) { top: 14%; left: -12%; }
.sky span:nth-child(2) { top: 27%; left: 32%; animation-delay: -8s; }
.sky span:nth-child(3) { top: 9%; left: 79%; animation-delay: -16s; }

@keyframes float {
  to { transform: translateX(115vw); }
}


/* ==========================================================================
   4. HEADER COMPONENTEN (Navigatie & Branding)
   ========================================================================== */

.site-header {
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 28px;
  border-bottom: 1px solid var(--edge);
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

.brand svg {
  width: 36px;
  fill: none;
  stroke: var(--cyan);
  stroke-width: 3;
  stroke-linecap: round;
}

.brand strong, 
.brand small {
  display: block;
  line-height: 1.05;
}

.brand strong {
  font-size: 17px;
  letter-spacing: .08em;
}

.brand small {
  margin-top: 4px;
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--muted);
}

.site-header nav {
  display: flex;
  gap: 8px;
}

.site-header nav a {
  padding: 8px 13px;
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;
  font-weight: 650;
}

.site-header nav a:hover, 
.site-header nav .active {
  color: var(--ink);
  background: rgba(137, 207, 245, .11);
}

.header-actions {
  display: flex;
  gap: 13px;
  align-items: center;
}

.icon-button {
  border: 0;
  background: transparent;
  color: var(--ink);
  font-size: 20px;
  cursor: pointer;
}


/* ==========================================================================
   5. HERO SECTIE & TITELS
   ========================================================================== */

.hero {
  display: grid;
  grid-template-columns: 1.25fr .9fr;
  gap: 25px;
  align-items: stretch;
  margin-bottom: 25px;
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 10px;
  letter-spacing: .17em;
  color: var(--cyan);
  font-weight: 800;
}

.hero h1, 
.page-title h1 {
  margin: 12px 0 18px;
  font-size: clamp(70px, 10vw, 126px);
  line-height: .85;
  letter-spacing: -.09em;
}

.hero h1 sup {
  margin-left: 8px;
  font-size: .34em;
  vertical-align: top;
  letter-spacing: -.04em;
  color: var(--cyan);
}

.condition {
  margin: 0 0 9px;
  font-size: 19px;
}

.update {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}


/* ==========================================================================
   6. ALGEMENE KAARTEN (Cards)
   ========================================================================== */

.card {
  background: linear-gradient(135deg, rgba(28, 69, 96, .72), var(--card));
  border: 1px solid var(--edge);
  box-shadow: var(--shadow);
  border-radius: 22px;
  backdrop-filter: blur(12px);
}


/* ==========================================================================
   7. METRICS & STATISTIEKEN (Grid + Data)
   ========================================================================== */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 25px;
}

.metric {
  position: relative;
  overflow: hidden;
  padding: 20px;
  min-height: 100px; /* Hersteld voor flexibiliteit */
}

.metric-top, 
.section-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
}

.metric-icon {
  font-size: 22px;
  color: var(--cyan);
}

.metric strong {
  display: block;
  margin: 25px 0 5px;
  font-size: 38px;
  letter-spacing: -.07em;
}

.metric small {
  margin-left: 3px;
  font-size: 14px;
  letter-spacing: 0;
  color: var(--muted);
}

.metric p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.metric p b {
  color: var(--ink);
}


/* ==========================================================================
   8. VISUELE COMPONENTEN (Weerstation & Grafieken)
   ========================================================================== */

/* Wind Scene Container */
.wind-scene {
  position: relative;
  overflow: hidden;
  min-height: 220px;
  padding: 24px;
}

.wind-scene:after {
  content: "";
  position: absolute;
  right: -70px;
  top: -80px;
  width: 200px;
  height: 200px;
  background: var(--cyan);
  filter: blur(100px);
  opacity: .13;
}

.scene-copy {
  position: relative;
  z-index: 1;
}

.scene-copy strong {
  display: block;
  font-size: 32px;
  letter-spacing: -.05em;
}

.scene-copy small {
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
}

.scene-copy > span {
  font-size: 13px;
  color: var(--muted);
}

/* Weerstation SVG Elementen */
.weather-station {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 78%;
  height: 89%;
}

.hill { fill: #0a2d3a; }
.mast { stroke: #bedfeb; stroke-width: 5; stroke-linecap: round; }
.vane { fill: var(--cyan); }
  /* Verwijder de oude ".vane + circle" regel hier als die conflicteert */
.sock { fill: var(--warm); }
.sock-line { fill: none; stroke: #ffe1bd; stroke-width: 2; }

/* REPARATIE: Geforceerde lichtere kleur voor de donkere onderdelen van het station */
svg .station-dark,
svg path.station-dark { 
  fill: #c2c7cf !important; 
}

/* GEALINEERD: De animatietijd is nu dynamisch en luistert naar het JavaScript-bestand */
#davis-cups {
  transform-origin: 244px 21px !important;
  animation: spin var(--cups-speed, 3s) linear infinite;
}

/* GEALINEERD: Activeert 3D-ruimte zodat de vaan horizontaal (om de Y-as) kan draaien */
#davis-vane-new {
  transform-origin: 0px 0px !important;
  transform-style: preserve-3d;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Thermometer Component */
.thermal {
  position: absolute;
  bottom: 16px;
  left: 20px;
  right: 20px;
  height: 5px;
  background: rgba(255, 255, 255, .1);
  border-radius: 5px;
  overflow: hidden;
}

.thermal i {
  display: block;
  width: 44%;
  height: 100%;
  background: linear-gradient(90deg, #51c4ff, var(--mint), var(--warm));
  border-radius: inherit;
  transition: width .8s;
}

/* Druppels / Luchtvochtigheid Component */
.droplets {
  position: absolute;
  right: 16px;
  bottom: 15px;
  display: flex;
  align-items: end;
  gap: 5px;
  height: 35px;
}

.droplets i {
  width: 8px;
  background: var(--cyan);
  opacity: .3;
  border-radius: 8px 8px 2px 2px;
}

.droplets i:nth-child(1) { height: 13px; }
.droplets i:nth-child(2) { height: 24px; opacity: .55; }
.droplets i:nth-child(3) { height: 34px; opacity: .85; }
.droplets i:nth-child(4) { height: 19px; }

/* Sparkline / Grafiek Component */
.spark {
  position: absolute;
  bottom: 13px;
  left: 20px;
  right: 20px;
  width: calc(100% - 40px);
  height: 37px;
}

.spark path {
  fill: none;
  stroke: var(--cyan);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}


/* ==========================================================================
   9. STATUS KLASSEN & UTILITIES (Badges)
   ========================================================================== */

.live {
  font-size: 11px;
  letter-spacing: .1em;
  font-weight: 800;
  color: var(--mint);
}

.live i, 
.ok {
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--mint);
  border-radius: 50%;
  box-shadow: 0 0 13px var(--mint);
  margin-right: 6px;
}

.live i {
  animation: pulse 1.9s infinite;
}

@keyframes pulse {
  50% {
    opacity: .35;
    box-shadow: none;
  }
}
  /* ==========================================================================
   10. SPECIFIEKE WEER-ELEMENTEN (Regen & Wind)
   ========================================================================== */

/* Regen Staafdiagram Component */
.rain-bars {
  position: absolute;
  bottom: 16px;
  display: flex;
  gap: 5px;
  align-items: end;
  height: 22px;
}

.rain-bars i {
  width: 6px;
  background: var(--cyan);
  border-radius: 4px;
}

.rain-bars i:nth-child(1) { height: 8px; }
.rain-bars i:nth-child(2) { height: 14px; }
.rain-bars i:nth-child(3) { height: 21px; }
.rain-bars i:nth-child(4) { height: 11px; }
.rain-bars i:nth-child(5) { height: 17px; }

/* Wind Kompas Component */
.wind-card {
  padding: 25px;
}

.wind-content {
  display: flex;
  gap: 30px;
  align-items: center;
  margin-top: 18px;
}

.compass {
  position: relative;
  flex: none;
  width: 155px;
  height: 155px;
  border: 1px solid rgba(180, 226, 255, .24);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(81, 196, 255, .1), transparent 55%);
}

.compass span {
  position: absolute;
  font-size: 11px;
  font-weight: 800;
  color: var(--muted);
}

.north { top: 8px; left: 50%; transform: translateX(-50%); }
.east  { top: 50%; right: 9px; transform: translateY(-50%); }
.south { bottom: 8px; left: 50%; transform: translateX(-50%); }
.west  { top: 50%; left: 9px; transform: translateY(-50%); }

.compass i {
  position: absolute;
  top: 21px;
  left: calc(50% - 2px);
  width: 4px;
  height: 57px;
  background: linear-gradient(var(--warm) 0 48%, var(--cyan) 48%);
  transform-origin: 50% 100%;
  transition: transform 1s cubic-bezier(.2, .8, .2, 1);
  clip-path: polygon(50% 0, 100% 22%, 70% 100%, 30% 100%, 0 22%);
}

.compass b {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 15px;
}

.wind-readout strong {
  font-size: 34px;
  letter-spacing: -.06em;
}

.wind-readout p, 
.wind-readout span {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

.wind-readout div {
  margin-top: 13px;
}


/* ==========================================================================
   11. PAGINA LAY-OUTS & GRIDS (Lower grid & Records)
   ========================================================================== */

.lower-grid {
  display: grid;
  grid-template-columns: 1.25fr .8fr;
  gap: 18px;
}

/* Status Card Component */
.status-card {
  padding: 25px;
}

.status-card ul {
  margin: 21px 0 0;
  padding: 0;
  list-style: none;
}

.status-card li {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  padding: 12px 0;
  border-top: 1px solid var(--edge);
  font-size: 12px;
  color: var(--muted);
}

.status-card li b {
  color: var(--ink);
  font-weight: 600;
}

/* Hoogtepunten (Highlights) */
.highlights {
  grid-column: 1 / -1;
  padding: 25px;
}

.highlights .section-heading a {
  font-size: 12px;
  color: var(--cyan);
  text-decoration: none;
}

.mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 23px;
}

.mini-stats div {
  padding: 14px;
  border-radius: 13px;
  background: rgba(0, 0, 0, .13);
}

.mini-stats span {
  display: block;
  font-size: 11px;
  color: var(--muted);
}

.mini-stats b {
  display: block;
  margin-top: 4px;
  font-size: 20px;
}


/* ==========================================================================
   12. RECORD SECTIE & INTERNE STATISTIEKEN
   ========================================================================== */

.page-title {
  margin: 12px 0 40px;
}

.page-title h1 {
  margin-bottom: 14px;
  font-size: clamp(42px, 6vw, 76px);
}

.page-title > p:last-child {
  margin: 0;
  color: var(--muted);
}

.record-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-bottom: 22px;
}

.record {
  padding: 22px;
}

.record span {
  font-size: 12px;
  color: var(--muted);
}

.record strong {
  display: block;
  margin: 17px 0 3px;
  font-size: 30px;
  letter-spacing: -.06em;
}

.record p {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* Record Kleur-modifiers */
.warm strong { color: #ffb66e; }
.cold strong { color: #79d6ff; }
.wind strong { color: var(--mint); }
.wet strong  { color: #a6dfff; }


/* ==========================================================================
   13. TABELLEN (Historische gegevens)
   ========================================================================== */
   
   /* Extra styling voor NOAA Parser elementen */
.noaa-summary-block {
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid var(--edge);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
}

.noaa-summary-card {
  background: rgba(0, 0, 0, .13);
  padding: 15px;
  border-radius: 12px;
  border: 1px solid var(--edge);
}

.noaa-summary-card h4 {
  margin: 0 0 10px 0;
  font-size: 12px;
  color: var(--cyan);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.noaa-summary-card p {
  margin: 5px 0;
  font-size: 13px;
  color: var(--muted);
}

.noaa-summary-card p b {
  color: var(--ink);
}

.history-table {
  padding: 25px;
}

.table-wrap {
  margin-top: 20px;
  overflow: auto;
}

table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

th, 
td {
  padding: 14px 10px;
  text-align: left;
  border-bottom: 1px solid var(--edge);
}

th {
  font-size: 10px;
  letter-spacing: .12em;
  color: var(--muted);
}

td {
  font-size: 13px;
}

td:not(:first-child) {
  font-weight: 650;
}


/* ==========================================================================
   14. GRAFIEKEN (Charts)
   ========================================================================== */

.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.chart {
  padding: 24px;
  min-height: 315px;
}

.chart .section-heading > span {
  font-size: 11px;
  color: var(--muted);
}

.chart svg {
  margin-top: 28px;
  width: 100%;
  height: 190px;
  overflow: visible;
}

.chart-line {
  fill: none;
  stroke: var(--warm);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.chart-area {
  fill: url(#tempGrad);
}

#pressure-chart .chart-line {
  stroke: var(--cyan);
}

#pressure-chart .chart-area {
  fill: url(#pressureGrad);
}

.chart-note {
  margin: 20px 0;
  font-size: 12px;
  color: var(--muted);
}


/* ==========================================================================
   15. ALGEMENE ELEMENTEN (Koppen, Badges, Footer)
   ========================================================================== */

.section-heading h2 {
  margin: 0;
  font-size: 19px;
  letter-spacing: -.03em;
  color: var(--ink);
}

.badge {
  padding: 5px 8px;
  border: 1px solid rgba(106, 232, 189, .35);
  border-radius: 7px;
  font-size: 11px;
  color: var(--mint);
}

footer {
  padding: 25px 28px 35px;
  font-size: 11px;
  color: var(--muted);
}

footer span {
  margin: 0 7px;
  color: var(--cyan);
}


/* ==========================================================================
   16. THEMA-MODIFIERS (Lichte Modus)
   ========================================================================== */

body.light {
  --ink: #0d2a3c;
  --muted: #587287;
  --base: #e6f5fb;
  --base2: #c8e6f4;
  --card: rgba(250, 254, 255, .75);
  --edge: rgba(13, 71, 101, .14);
  --shadow: 0 16px 45px rgba(17, 75, 101, .13);
}

body.light .hill {
  fill: #c5e1e6;
}

body.light .mast {
  stroke: #3c6274;
}


/* ==========================================================================
   17. MEDIA QUERIES (Responsiviteit)
   ========================================================================== */

/* Tablets en kleinere desktops (max 900px) */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }
  
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .lower-grid {
    grid-template-columns: 1fr;
  }
  
  .status-card {
    grid-row: 3;
  }
  
  .record-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .chart-grid {
    grid-template-columns: 1fr;
  }
}

/* Smartphones (max 620px) */
@media (max-width: 620px) {
  .site-header {
    height: auto;
    padding: 16px 18px;
    gap: 15px;
    flex-wrap: wrap;
  }
  
  .site-header nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
  }
  
  .site-header nav a {
    padding: 7px 4px;
    font-size: 12px;
  }
  
  .header-actions {
    margin-left: auto;
  }
  
  .icon-button {
    display: none;
  }
  
  main {
    padding: 35px 18px 25px;
  }
  
  .hero h1 {
    font-size: 82px;
  }
  
  .wind-scene {
    min-height: 185px;
  }
  
  .metrics {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  
  .metric {
    padding: 16px;
    min-height: 170px;
  }
  
  .metric strong {
    font-size: 30px;
  }
  
  .lower-grid {
    gap: 12px;
  }
  
  .wind-content {
    gap: 16px;
  }
  
  .compass {
    width: 130px;
    height: 130px;
  }
  
  .compass i {
    top: 18px;
    height: 47px;
  }
  
  .mini-stats {
    gap: 8px;
  }
  
  .mini-stats div {
    padding: 10px;
  }
  
  .mini-stats b {
    font-size: 16px;
  }
  
  .record-grid {
    gap: 12px;
  }
  
  .record {
    padding: 16px;
  }
  
  .record strong {
    font-size: 24px;
  }
  
  .chart {
    padding: 18px;
  }
  
  footer {
    padding: 25px 18px;
  }
}