/* ==================================================
   WEATHER – 10 DAAGSE (2 × 5) MET VASTE LABELKOLOM
   Fixes:
   1) °C als echte Unicode (geen ° in tekst nodes)
   2) icon perfect centreren
   3) mobiel compacter + geen overflow door paddings
================================================== */

:root{
  --border-light: color-mix(in srgb, var(--border) 50%, transparent);
  --row-alt: color-mix(in srgb, var(--border) 22%, transparent);
  --bg-alt: color-mix(in srgb, var(--border) 25%, transparent);
}

/* compacter block */
.weather-article{
  background: var(--bg);
  padding: 0!important;
  border-radius: var(--radius);
  max-width: 728px;
}

.weather-header{
  margin-bottom: 0rem;
}

.weather-header h1{
  margin-top: 16px;color: var(--brand);
}

.weather-place{
  color: var(--txt);
  font-size: 1.15rem;
  margin: -12px 0 1rem;font-weight:500;
}

.weather-table{
  margin: 0 0 2rem 0;
}

.weather-table:last-of-type{
  margin: 0;
}

/* grid: rij-voor-rij */
.weather-grid{
  display: grid;
  grid-template-columns: 220px repeat(5, minmax(72px, 1fr));
  grid-auto-flow: row;
  border-radius: var(--radius);
  overflow: hidden;
  border-top: 1px solid var(--border);border-left: 1px solid var(--border);
  background: var(--bg);

  /* voorkom dat padding/borders overflowen op mobiel */
  max-width: 100%;
  box-sizing: border-box;
}

/* wrapper voor zebra (display: contents) */
.weather-row{
  display: contents;
}

.weather-label{
  padding: .5rem .6rem;
  font-size: .95rem;
  font-weight: 500;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
}

.weather-label.empty{
  background: transparent;
  border-bottom: none;
}

.weather-cell{
  padding: .5rem .4rem;
  text-align: center;
  font-size: .95rem;
  border-bottom: 1px solid var(--border-light);
}

.weather-cell.day{
  font-weight: 700;
}

.weather-cell.day small{
  display:block;
  font-weight: 600;
  font-size: .9rem;
  color: var(--txt);
  margin-top: .1rem;
}

.weather-cell.icon {
    padding: 0 !important;          /* geen padding die verschuift */
    margin: 0 !important;

    display: flex !important;       /* flex wint altijd */
    align-items: center !important; /* verticaal exact midden */
    justify-content: center !important; /* horizontaal exact midden */

    text-align: center !important;
}

.weather-cell.icon img {
    display: block !important;      /* GEEN inline img */
    margin: 0 auto !important;
    padding: 0 !important;

    width: 60px;
    height: 60px;

    line-height: 1 !important;
    vertical-align: middle !important;
}

/* zebra per rij */
.weather-row--odd > .weather-label,
.weather-row--odd > .weather-cell{
  background: var(--bg);border-right: 1px solid var(--border);
}

.weather-row--even > .weather-label,
.weather-row--even > .weather-cell{
  background: var(--bg-alt);border-right: 1px solid var(--border);
}

/* =========================
   MOBIEL: minder ruimte + geen buiten-scherm
   - labelkolom smaller
   - cellen compacter
   - horizontaal scrollen binnen de tabel (niet de pagina)
========================= */
@media (max-width: 900px){

  .weather-article{
      padding: 0;
      border-radius: var(--radius);
  }

  .weather-grid{
      grid-template-columns:
          120px                        /* labelkolom */
          repeat(5, minmax(44px, 1fr));/* dagen: automatisch */

      gap: 0;
      font-size: 0.85rem;

      overflow-x: auto;
      max-width: 100%;
  }
	
.weather-place{
  color: var(--txt);
  font-size: 0.95rem;
  margin: .25rem  0 1rem;
}

  /* labels links */
  .weather-label{
      padding: 0.35rem 0.35rem !important;
      font-size: 0.8rem;
      line-height: 1.2;
      white-space: normal;   /* mag afbreken */
  }

  /* data cellen */
  .weather-cell{
      padding: 0.35rem 0.1rem !important;
      font-size: 0.85rem;
      line-height: 1.2;
  }

  /* dag + datum compacter */
  .weather-cell.day small{
      font-size: 0.75rem;
      margin-top: 0;
  }

  /* icon nog iets kleiner op mobiel */
  .weather-cell.icon img{
      width: 48px;
      height: 48px;
  }
}

/* ==========================================
   WEER PAGINA – ZELFDE BREEDTE ALS DOCUMENT
========================================== */

/* desktop: zelfde leesbreedte als .doc */
.weather-page .section--left .weather-article{
    max-width: 900px;
}

/* mobiel: volle breedte, weinig zijruimte */
@media (max-width: 767.98px){
    .weather-page .section--left .weather-article{
        max-width: 100%;
        
    }
}

/* Linkerkolom limiter */
.weather-page .section.section--left{
  width:100%;
  max-width: var(--feed-col-max, 800px);
  justify-self:start;
}

/* ==================================================
   WEATHER PAGINA – LINKER KOLOM ZELFDE GEDRAG ALS FEED
================================================== */

.page-grid .weather-page{
  --weather-col-max: 100%;
}

/* Linkerkolom limiter + links uitlijnen */
.page-grid .weather-page .section.section--left{
  width: 100%;
  max-width: var(--weather-col-max);
  justify-self: start;
}

/* =========================
   MOBIEL: minder ruimte + geen buiten-scherm
   - labelkolom smaller
   - cellen compacter
   - horizontaal scrollen binnen de tabel (niet de pagina)
========================= */
@media (max-width: 400px){

  .weather-article{
      padding: 0;
      border-radius: var(--radius);
  }

  .weather-grid{
      grid-template-columns:
          100px                        /* labelkolom */
          repeat(5, minmax(44px, 1fr));/* dagen: automatisch */

      gap: 0;
      font-size: 0.75rem;

      overflow-x: auto;
      max-width: 100%;
  }

  /* labels links */
  .weather-label{
      padding: 0.35rem 0.35rem !important;
      font-size: 0.7rem;
      line-height: 1.2;
      white-space: normal;   /* mag afbreken */
  }

  /* data cellen */
  .weather-cell{
      padding: 0.35rem 0.1rem !important;
      font-size: 0.75rem;
      line-height: 1.2;
  }

  /* dag + datum compacter */
  .weather-cell.day small{
      font-size: 0.75rem;
      margin-top: 0;
  }

  /* icon nog iets kleiner op mobiel */
  .weather-cell.icon img{
      width: 44px;
      height: 44px;
  }
}
.weather-knmi{
  margin-bottom: 1.5rem;
  padding: 1px 12px;background: color-mix(in srgb, var(--border) 25%, transparent);border: 1px solid var(--border);border-radius: var(--radius);
}

.knmi-block + .knmi-block{
  margin-top: 1rem;
}

.knmi-text{
  font-size: inherit;
  line-height: 1.45;
  color: var(--text);
}

.knmi-text:empty::before {
  content: "Laden…";
  color: var(--muted);
  font-style: italic;
}

.source-weather {display:block;text-align: end; text-transform: uppercase;font-size:0.88rem;}
.source-weather a {font-weight:700;}


/* Linksboven-cel ("Deel 1/Deel 2") exact centreren */
.weather-row:first-child .weather-label {
  display: flex;
  align-items: center;      /* verticaal */
  justify-content: center;  /* horizontaal */
  text-align: center;
}
/* WINDRICHTING */
.weather-cell.wind{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}

/* de wrapper die jij roteert */
.winddir{
  width:18px;
  height:18px;
  display:inline-block;
  transform: rotate(var(--deg, 0deg));
  transform-origin: 50% 50%;
  line-height:0;

  /* belangrijke: kleur komt hiervandaan */
  color: inherit;
}

/* svg zelf */
.winddir svg{
  width:100%;
  height:100%;
  display:block;
}

/* dit is de echte sleutel: de vorm vult met currentColor */
.winddir svg path{
  fill: currentColor;
}

.winddir-ltr{
  font-size:12px;
  opacity:.85;
}