/* Veliki Slatnik: ploska, uredniška postavitev brez kartic in senc. Zgradbo dajo naslovi, tanke črte in
   tabele, kot na portalu Vreme od Kolpe do Barja. Velikosti v rem, da sledijo nastavitvi pisave.
   Samo svetla tema. Barve temperature (tt-0…9) so iste kot na portalu, kontrast vsaj 4,5 : 1. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(pisava/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(pisava/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  color-scheme: light;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --serif: "Iowan Old Style", Charter, "Sitka Text", Cambria, "Noto Serif", Georgia, serif;
  --stran: #f6f5f0;
  --mehko: #ecebe3;
  --crta: #dad9cf;
  --besedilo: #17232a;
  --besedilo-2: #46545b;
  --besedilo-3: #59666c;
  --povezava: #1d5c86;
  --zlata: #8a6100;
  --opozorilo: #b0510c;
  --napaka: #b3201c;
  --c-temp: #b4532a;
  --c-vlaga: #24718d;
  --c-tlak: #6f52a0;
  --c-veter: #2f7552;
  --c-dez: #2a5fb3;
  --c-sonce: #a87500;
  --c-primerjava: #6b7378;
  --c-topla: #b3201c;
  --c-hladna: #2a55b3;
  --luna: #e9d9a0;
  --tt-0: #33297a;
  --tt-1: #2c3e9e;
  --tt-2: #2a55b3;
  --tt-3: #235f9e;
  --tt-4: #8c5e00;
  --tt-5: #a34a00;
  --tt-6: #b23a14;
  --tt-7: #b3201c;
  --tt-8: #a1162b;
  --tt-9: #8e1537;
}
.tt-0 { color: var(--tt-0); }
.tt-1 { color: var(--tt-1); }
.tt-2 { color: var(--tt-2); }
.tt-3 { color: var(--tt-3); }
.tt-4 { color: var(--tt-4); }
.tt-5 { color: var(--tt-5); }
.tt-6 { color: var(--tt-6); }
.tt-7 { color: var(--tt-7); }
.tt-8 { color: var(--tt-8); }
.tt-9 { color: var(--tt-9); }

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--stran);
  color: var(--besedilo);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  overflow-wrap: break-word;
}
img {
  max-width: 100%;
  height: auto;
}
h1,
h2,
h3 {
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
h2 {
  font-size: 1.375rem;
  font-weight: 700;
}
p,
dl,
dd,
figure,
blockquote {
  margin: 0;
}
a {
  color: var(--povezava);
  text-underline-offset: 0.2em;
}
:focus-visible {
  outline: 2px solid var(--povezava);
  outline-offset: 2px;
}
button {
  font: inherit;
  color: inherit;
}
.tiho {
  color: var(--besedilo-2);
}
.opomba {
  margin-top: 0.75rem;
  color: var(--besedilo-3);
  font-size: 0.875rem;
}
.napaka {
  color: var(--napaka);
}
.opozorilo {
  margin-top: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--opozorilo);
  background: var(--mehko);
}
.nadnaslov {
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.povezava {
  font-weight: 600;
  text-decoration: none;
}
.povezava::after {
  content: " →";
}
.povezava:hover {
  text-decoration: underline;
}
.preskok {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 10;
  padding: 0.5rem 0.75rem;
  background: var(--besedilo);
  color: var(--stran);
}
.preskok:focus {
  top: 0.5rem;
}

.okvir {
  width: 100%;
  max-width: 72rem;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ——— glava ——— */
.glava {
  border-bottom: 1px solid var(--crta);
}
.glava-vrstica {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
  padding-block: 0.625rem;
}
.znak {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-right: auto;
  color: inherit;
  text-decoration: none;
}
.znak {
  min-width: 0;
}
/* logotip v px, da pri povečani pisavi ime postaje ostane v okvirju */
.znak img {
  flex: none;
  width: 44px;
  height: 44px;
}
.znak span {
  min-width: 0;
}
.znak b {
  display: block;
  /* na najožjih zaslonih s povečano pisavo se ime ne lomi sredi besede */
  font-size: min(1rem, 5.6vw);
  line-height: 1.2;
}
.znak small {
  display: block;
  color: var(--besedilo-2);
  font-size: 0.8125rem;
}
.meni {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
}
.meni a {
  padding-block: 0.375rem;
  border-bottom: 2px solid transparent;
  color: var(--besedilo-2);
  font-weight: 550;
  text-decoration: none;
}
.meni a:hover {
  color: var(--besedilo);
}
.meni a[aria-current] {
  border-bottom-color: var(--zlata);
  color: var(--besedilo);
}
@media (max-width: 47.99em) {
  .meni {
    order: 3;
    width: 100%;
    border-top: 1px solid var(--crta);
    padding-top: 0.25rem;
  }
}

main {
  display: block;
  padding-bottom: 1rem;
}
main:focus {
  outline: none;
}
.nalaganje {
  padding-block: 3rem;
  color: var(--besedilo-2);
}

/* ——— uvod s fotografijo ———
   Ozko (tudi 280 px in povečana pisava): fotografija 3 : 2 v celi višini, izrez desno, da je hišica z drogom
   v sliki; naslov pod njo. Široko: cela fotografija, naslov levo čez temni gozd, hišica desno ostane čista.
   Meja je v em okvirja, zato pri povečani pisavi ostane ozka postavitev. */
.uvod {
  container: uvod / inline-size;
}
.uvod-notranje {
  position: relative;
}
.uvod-slika {
  display: block;
  width: 100%;
  height: auto;
  /* na telefonu kvadratni izrez poletne fotografije hišice: cela hišica z vetromerom */
  aspect-ratio: 1 / 1;
  /* svh: najmanjša višina zaslona, da se slika ne spreminja, ko brskalnik med drsenjem skrije naslovno vrstico */
  max-height: 62vh;
  max-height: 62svh;
  object-fit: cover;
  object-position: 50% 45%;
  background: #4b6b3f;
}
/* ozko: naslov v temnem pasu pod fotografijo, ločen od meritev (na širokem je čez fotografijo) */
.uvod-besedilo {
  padding-block: 0.875rem 1rem;
  background: #1f3329;
  color: #fff;
}
.uvod-besedilo p {
  color: #dfe8e1;
}
.uvod .nadnaslov {
  color: var(--zlata);
}
.uvod h1 {
  font-family: var(--serif);
  /* pri povečani pisavi na najožjih zaslonih ime ostane v eni besedi (»Slatnik« se ne prelomi) */
  font-size: min(clamp(1.625rem, 6vw, 3.5rem), 9vw);
  font-weight: 600;
  letter-spacing: -0.015em;
}
.uvod p:last-child {
  margin-top: 0.25rem;
  /* na ozkem zaslonu s povečano pisavo ostane podnaslov manjši od naslova */
  font-size: min(1rem, 5.6vw);
}
@container uvod (min-width: 48em) {
  .uvod-notranje {
    display: grid;
    align-items: end;
    /* do ~1770 px cela fotografija (razmerje 1715 : 620), širše odrezano zgoraj in spodaj */
    min-height: min(36.15cqw, 40rem);
    overflow: hidden;
  }
  .uvod-slika {
    position: absolute;
    inset: 0;
    height: 100%;
    /* omejitev višine velja le za telefon; tu fotografija pokrije ves uvod */
    max-height: none;
    aspect-ratio: auto;
    object-position: 76% 62%;
  }
  .uvod-notranje::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(6, 14, 10, 0.72) 0%, rgba(6, 14, 10, 0.42) 32%, rgba(6, 14, 10, 0) 58%);
  }
  .uvod-besedilo {
    position: relative;
    z-index: 1;
    background: none;
    padding-block: 2rem 2.25rem;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  }
  .uvod-besedilo > * {
    max-width: 30rem;
  }
  .uvod-besedilo p {
    color: #fff;
  }
  .uvod-besedilo h1 {
    max-width: 40rem;
  }
  .uvod .nadnaslov {
    color: #f3d27a;
  }
}

/* ——— razdelki ——— */
main > section.okvir,
main > .okvir > section {
  margin-top: 2.5rem;
}
/* tanka črta nad razdelkom, poravnana z besedilom (ne z robom okvirja) */
main > section.okvir + section.okvir,
.napoved,
.nebo,
.radar,
.fotografije,
.spomin-del {
  padding-top: 2rem;
  background: linear-gradient(var(--crta), var(--crta)) top center / calc(100% - 2 * clamp(1rem, 4vw, 2rem)) 1px no-repeat;
}
.uvod + .zdaj {
  background: none;
  margin-top: 1.75rem;
}
.vrstica-naslov {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
  margin-bottom: 1rem;
}
.glava-strani {
  padding-block: 2rem 0.5rem;
}
.glava-strani h1 {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 600;
}
.glava-strani .tiho {
  margin-top: 0.375rem;
}
.glava-strani + section.okvir {
  margin-top: 1rem;
  padding-top: 0;
  background: none;
}

/* ——— zdaj ——— */
.zdaj-mreza {
  display: grid;
  gap: 2rem 3rem;
}
@media (min-width: 60em) {
  .zdaj-mreza {
    grid-template-columns: minmax(17rem, 22rem) 1fr;
  }
  .meritve {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.velika {
  font-size: min(5.5rem, max(2.5rem, 17vw));
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: tabular-nums;
}
.velika small {
  margin-left: 0.08em;
  font-size: 0.38em;
  font-weight: 550;
  letter-spacing: 0;
  vertical-align: 0.95em;
}
.velika-vrsta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.5rem;
}
.trend {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 0.375rem;
  align-items: baseline;
  font-size: 1.25rem;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.trend small {
  grid-column: 2;
  color: var(--besedilo-2);
  font-size: 0.875rem;
  font-weight: 400;
}
.trend-znak {
  grid-row: span 2;
  align-self: center;
  width: 1.75rem;
  height: 1.75rem;
}
.trend-gor .trend-znak {
  color: var(--c-temp);
  animation: trend-gor 1.8s ease-in-out infinite;
}
.trend-dol .trend-znak {
  color: var(--c-hladna);
  animation: trend-dol 1.8s ease-in-out infinite;
}
.trend-ust .trend-znak {
  color: var(--besedilo-2);
  animation: trend-ust 2.4s ease-in-out infinite;
}
@keyframes trend-gor {
  0%, 100% { transform: translateY(2px); }
  50% { transform: translateY(-4px); }
}
@keyframes trend-dol {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(4px); }
}
@keyframes trend-ust {
  0%, 100% { transform: translateX(-2px); }
  50% { transform: translateX(3px); }
}
/* uporabnik z nastavitvijo »zmanjšaj gibanje« dobi mirno puščico */
@media (prefers-reduced-motion: reduce) {
  .trend-znak {
    animation: none !important;
  }
}
.zdaj-nebo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.5rem;
  margin-top: 0.5rem;
  font-size: 1.0625rem;
}
.zdaj-nebo img {
  width: 2.5rem;
  height: 2.5rem;
}
.zdaj-nebo .tiho {
  font-size: 0.875rem;
}
/* Najnižja, najvišja, povprečje: vse tri vrstice so vedno enako oblikovane. Dovolj široko: oznaka in vrednost
   v isti vrstici; ozko (po širini okvirja, tudi pri povečani pisavi): pri vseh treh oznaka nad vrednostjo. */
.skrajnosti {
  margin-top: 1.25rem;
  container: skrajnosti / inline-size;
}
.skrajnosti div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0.75rem;
  padding-block: 0.375rem;
  border-top: 1px solid var(--crta);
}
.skrajnosti dt {
  color: var(--besedilo-2);
}
.skrajnosti dd {
  white-space: nowrap;
}
.skrajnosti b {
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}
/* najnižja je vedno modra, najvišja vedno rjavo-rdeča (kot v napovedi) */
.skrajnosti .t-min-dan {
  color: var(--c-hladna);
}
.skrajnosti .t-max-dan {
  color: var(--c-temp);
}
@container skrajnosti (max-width: 21.5em) {
  .skrajnosti div {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }
  .skrajnosti dd {
    white-space: normal;
  }
}
.meritve {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.75rem), 1fr));
  gap: 1.5rem 2rem;
  align-content: start;
}
.meritev {
  padding-top: 0.625rem;
  border-top: 1px solid var(--crta);
}
/* vrstice meritev (naslov, številka, lestvica, podatki, razlaga) poravnane čez stolpce */
@supports (grid-template-rows: subgrid) {
  .meritve {
    row-gap: 0;
  }
  .meritev {
    display: grid;
    grid-row: span 5;
    grid-template-rows: subgrid;
    align-content: start;
    padding-bottom: 1.5rem;
  }
}
.meritev dt {
  color: var(--besedilo-2);
  font-size: 1rem;
  font-weight: 600;
}
.vrednost {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.25rem;
  font-size: 2.125rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vrednost small {
  color: var(--besedilo-2);
  font-size: 1rem;
  font-weight: 550;
  letter-spacing: 0;
}
.meritev-vrsta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.75rem;
}
.pomen {
  display: inline-flex;
  align-items: flex-start;
  gap: 0.375rem;
  font-size: 1rem;
  font-weight: 650;
}
.pomen i {
  flex: none;
  margin-top: 0.4em;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
}
/* lestvica: barvni pas, krogec na trenutni vrednosti */
.lestvica {
  max-width: 18rem;
  margin-top: 0.625rem;
}
.lestvica-pas {
  position: relative;
  display: flex;
  gap: 2px;
  height: 0.5rem;
}
.lestvica-pas i {
  flex: 1;
}
.lestvica-pas i:first-child {
  border-radius: 999px 0 0 999px;
}
.lestvica-pas i:last-of-type {
  border-radius: 0 999px 999px 0;
}
.lestvica-kazalec {
  position: absolute;
  top: 50%;
  width: 1.125rem;
  height: 1.125rem;
  border: 3px solid var(--besedilo);
  border-radius: 50%;
  background: var(--stran);
  transform: translate(-50%, -50%);
}
.lestvica-meje {
  position: relative;
  height: 1.2rem;
  margin-top: 0.3rem;
  color: var(--besedilo-3);
  font-size: 0.75rem;
  font-variant-numeric: tabular-nums;
}
.lestvica-meje span {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  white-space: nowrap;
}
/* gumb ⓘ ob naslovu meritve odpre razlago */
.info {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin: -0.25rem 0 -0.25rem 0.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--povezava);
  vertical-align: middle;
  cursor: pointer;
}
.info:hover,
.info[aria-expanded="true"] {
  background: var(--mehko);
}
.razlaga {
  margin-top: 0.5rem;
  padding: 0.75rem 0.875rem;
  border-left: 3px solid var(--povezava);
  background: var(--mehko);
}
.razlaga > p:first-child {
  margin-top: 0;
}
.razlaga > p {
  margin-block: 0.5rem;
  color: var(--besedilo-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.legenda {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  line-height: 1.4;
}
.legenda li {
  display: flex;
  gap: 0.5rem;
  padding-block: 0.3rem;
  border-top: 1px solid var(--crta);
  color: var(--besedilo-2);
}
.legenda i {
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  margin-top: 0.2rem;
  border-radius: 50%;
}
.legenda b {
  color: var(--besedilo);
}
.legenda .meja {
  color: var(--besedilo-3);
}
.legenda .zdaj b {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}
.zdaj-oznaka {
  color: var(--besedilo);
  font-weight: 600;
}
.smer-vetra {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.smer-vetra svg {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--besedilo);
}
.meritev .pod {
  margin-top: 0.5rem;
  color: var(--besedilo-2);
  font-size: 0.875rem;
  line-height: 1.45;
}

/* ——— izbire (gumbi) ——— */
.izbire {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  margin-bottom: 0.75rem;
}
.izbira {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.izbira button,
.arhiv-izbor button {
  min-height: 2.25rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--crta);
  border-radius: 999px;
  background: transparent;
  font-size: 0.9375rem;
  cursor: pointer;
}
.izbira button:hover {
  border-color: var(--besedilo-3);
}
.izbira button[aria-pressed="true"] {
  border-color: var(--besedilo);
  background: var(--besedilo);
  color: var(--stran);
}

/* ——— graf ——— */
.s-temp { --b: var(--c-temp); }
.s-vlaga { --b: var(--c-vlaga); }
.s-tlak { --b: var(--c-tlak); }
.s-veter { --b: var(--c-veter); }
.s-dez { --b: var(--c-dez); }
.s-sonce { --b: var(--c-sonce); }
.s-primerjava { --b: var(--c-primerjava); }
.s-topla { --b: var(--c-topla); }
.s-hladna { --b: var(--c-hladna); }
.graf + .graf {
  margin-top: 1rem;
}
.graf-izpis {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.125rem 1.25rem;
  min-height: 1.6em;
  font-size: 0.9375rem;
}
.graf-cas {
  color: var(--besedilo-2);
}
/* ozek graf: čas vedno v svoji vrstici, vrednosti pod njim, da izpis med premikanjem ne skače */
.graf {
  container: graf / inline-size;
}
@container graf (max-width: 34em) {
  .graf-cas {
    flex-basis: 100%;
  }
  .graf-izpis {
    min-height: 3.2em;
    align-content: flex-start;
  }
}
.graf-vrednost i {
  display: inline-block;
  width: 0.875rem;
  height: 3px;
  margin-right: 0.375rem;
  vertical-align: middle;
  background: var(--b);
}
.graf-vrednost b {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.graf-platno {
  position: relative;
  margin-top: 0.25rem;
  touch-action: pan-y;
  cursor: crosshair;
}
.graf-platno.graf-drsi {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  touch-action: pan-x pan-y;
  padding-bottom: 0.375rem;
}
.graf-platno.graf-drsi svg {
  width: auto;
  max-width: none;
}
.graf-platno svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.graf-mreza {
  stroke: var(--crta);
  stroke-width: 1;
}
.graf-os {
  fill: var(--besedilo-3);
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
}
.graf-crta {
  fill: none;
  stroke: var(--b);
  stroke-width: 2.25;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.graf-crta.crtkano {
  stroke-width: 2;
  stroke-dasharray: 6 4;
}
.graf-locilo {
  stroke: var(--besedilo-3);
  stroke-width: 1;
}
.graf-stolpec {
  fill: var(--b);
}
.graf-stolpec.s-primerjava {
  opacity: 0.7;
}
.graf-kazalec line {
  stroke: var(--besedilo-3);
  stroke-dasharray: 3 3;
}
.graf-kazalec circle {
  fill: var(--stran);
  stroke: var(--b);
  stroke-width: 2.5;
}
.graf-prazno {
  padding-block: 3rem;
  color: var(--besedilo-2);
  text-align: center;
}
.kljukica {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-top: 0.75rem;
  cursor: pointer;
}
.kljukica input {
  flex: none;
  margin: 0.2em 0 0;
  width: 1.125rem;
  height: 1.125rem;
  accent-color: var(--besedilo);
}
details > summary {
  cursor: pointer;
}
.tabela-urne {
  margin-top: 1rem;
}
.tabela-urne > summary {
  color: var(--povezava);
  font-weight: 600;
}
.tabela-urne .drsnik {
  max-height: 24rem;
  margin-top: 0.5rem;
  overflow-y: auto;
}

/* ——— tabele ——— */
.drsnik {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}
table {
  border-collapse: collapse;
  font-size: 0.9375rem;
  font-variant-numeric: tabular-nums;
}
th,
td {
  padding: 0.4rem 0.75rem;
  text-align: right;
  vertical-align: top;
  white-space: nowrap;
}
th:first-child,
td:first-child {
  padding-left: 0;
}
thead th {
  border-bottom: 1px solid var(--besedilo-3);
  color: var(--besedilo-2);
  font-weight: 600;
  vertical-align: bottom;
}
thead small,
td small {
  color: var(--besedilo-3);
  font-size: 0.75rem;
  font-weight: 400;
}
td small {
  display: block;
}
tbody tr {
  border-bottom: 1px solid var(--crta);
}
tbody th {
  text-align: left;
  font-weight: 550;
}
tbody th small {
  display: block;
  color: var(--besedilo-3);
  font-size: 0.75rem;
  font-weight: 400;
}
tr.priblizno th span {
  color: var(--besedilo-3);
}
.tabela-urne thead th {
  position: sticky;
  top: 0;
  background: var(--stran);
}

/* ——— napoved ——— */
.trak {
  margin-inline: calc(-1 * clamp(1rem, 4vw, 2rem));
  padding-inline: clamp(1rem, 4vw, 2rem);
}
.ure {
  display: flex;
  margin: 0;
  padding: 0 0 0.5rem;
  list-style: none;
}
.ure li {
  display: grid;
  flex: 0 0 auto;
  justify-items: center;
  gap: 0.125rem;
  min-width: 3.75rem;
  padding: 0.25rem 0.375rem;
  text-align: center;
}
.ure li + li {
  border-left: 1px solid var(--crta);
}
.ure time {
  color: var(--besedilo-2);
  font-size: 0.875rem;
}
.ure img {
  width: 2.25rem;
  height: 2.25rem;
}
.ure b {
  font-size: 1.125rem;
}
.ure small {
  color: var(--c-dez);
  font-size: 0.75rem;
}
#graf-napoved-t {
  margin-top: 1.5rem;
}
.dnevi {
  margin: 1.5rem 0 0;
  padding: 0;
  list-style: none;
  container: dnevi / inline-size;
}
.dnevi > li {
  border-top: 1px solid var(--crta);
}
.dnevi > li:last-child {
  border-bottom: 1px solid var(--crta);
}
/* Vrstica dneva. Ozko: ikona | dan in pod njim opis | temperatura | puščica; stolpci so enako široki v vseh
   vrsticah, zato se temperature poravnajo. Široko: vsak podatek v svojem stolpcu. */
.dnevi .dan-vrsta {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 5.5rem 0.75rem;
  grid-template-areas:
    "img dan temp znak"
    "img vec vec znak";
  align-items: center;
  gap: 0.125rem 0.75rem;
  padding-block: 0.625rem;
  list-style: none;
}
.dnevi .dan-vrsta::-webkit-details-marker {
  display: none;
}
.dnevi .dan-vrsta::after {
  content: "";
  grid-area: znak;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--besedilo-3);
  border-bottom: 2px solid var(--besedilo-3);
  transform: rotate(45deg) translate(-25%, -25%);
}
.dnevi details[open] .dan-vrsta::after {
  transform: rotate(-135deg);
}
a.dan-vrsta {
  color: inherit;
  text-decoration: none;
}
.dnevi .dan-vrsta.brez-povezave::after {
  content: none;
}
.dnevi .dan-vrsta:hover .dan b,
.dnevi a.dan-vrsta:focus-visible .dan b {
  text-decoration: underline;
}
.dnevi .dan {
  grid-area: dan;
}
.dnevi .dan b {
  margin-right: 0.5rem;
}
.dnevi .dan small {
  color: var(--besedilo-2);
  font-size: 0.875rem;
}
.dnevi .dan-vrsta img {
  grid-area: img;
  align-self: start;
  width: 2.5rem;
  height: 2.5rem;
}
.dnevi .temp {
  grid-area: temp;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
/* najvišja in najnižja dneva: enaka velikost, stalni barvi (popoldne toplo rjavo-rdeča, jutro modra) */
.dnevi .temp {
  /* na najožjih zaslonih s povečano pisavo omejeno s širino zaslona, da stolpca ostaneta v vrstici */
  font-size: min(1.25rem, 7vw);
}
.dnevi .temp b {
  font-size: 1em;
}
.dnevi .t-max {
  color: var(--c-temp);
}
/* najnižja in najvišja v stalnih stolpcih, poravnani desno: enomestne, dvomestne in negativne vrednosti
   so v vseh vrsticah pod seboj */
.dnevi .temp {
  display: inline-grid;
  grid-template-columns: 3.4ch 3.4ch;
  column-gap: 0.625rem;
  justify-content: end;
}
.dnevi .temp b {
  text-align: right;
}
.dnevi .t-min {
  color: var(--c-hladna);
}
.dnevi .podrobno {
  grid-area: vec;
  color: var(--besedilo-2);
  font-size: 0.875rem;
}
.dnevi .podrobno > span + span::before {
  content: " · ";
}
/* najožje (povečana pisava na majhnem zaslonu): temperatura pod imenom dneva */
@container dnevi (max-width: 22em) {
  /* ime dneva in opis čez vso širino, ikona ob temperaturi, da se besede ne lomijo */
  .dnevi .dan-vrsta {
    grid-template-columns: 2.5rem minmax(0, 1fr) 0.75rem;
    grid-template-areas:
      "dan dan dan"
      "img temp znak"
      "vec vec vec";
    column-gap: 0.5rem;
  }
  .dnevi .dan-vrsta img {
    align-self: center;
  }
  .dnevi .temp {
    text-align: left;
    justify-content: start;
  }
}
@container dnevi (min-width: 50em) {
  .dnevi .dan-vrsta {
    grid-template-columns: 9rem 2.5rem 5.5rem minmax(7rem, 10rem) minmax(0, 1fr) 0.75rem;
    grid-template-areas: "dan img temp dez veter znak";
    gap: 0 1rem;
  }
  .dnevi .dan-vrsta img {
    align-self: center;
  }
  .dnevi .dan b {
    display: block;
  }
  .dnevi .podrobno {
    display: contents;
  }
  .dnevi .podrobno > span + span::before {
    content: none;
  }
  .dnevi .dez { grid-area: dez; color: var(--besedilo-2); font-size: 1rem; }
  .dnevi .veter { grid-area: veter; color: var(--besedilo-2); font-size: 0.9375rem; }
}
.dnevi .drsnik {
  padding-bottom: 0.75rem;
}
/* urna tabela zapolni širino telefona, na širokem zaslonu pa ostane pregledno strnjena */
.tabela-ur {
  width: 100%;
  max-width: 44rem;
}
.tabela-ur thead th:first-child {
  text-align: left;
}
.skrito {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tabela-ur td.vreme {
  text-align: left;
}
.tabela-ur td.vreme img {
  width: 1.75rem;
  height: 1.75rem;
  vertical-align: middle;
}
.opis-ure {
  margin-left: 0.375rem;
}
.tabela-ur td b {
  font-size: 1.0625rem;
}
.tabela-ur .ni {
  color: var(--besedilo-3);
}
.veter-celica {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.puscica {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
}
.kratica {
  color: var(--besedilo-3);
  font-size: 0.8125rem;
}
/* urna tabela na ozkem zaslonu: brez opisa vremena in vlage, da je pregledna brez pomikanja */
.okvir-tabele {
  container-type: inline-size;
}
.tabela-ur .kratko {
  display: none;
}
.tabela-ur thead th:nth-child(2) {
  text-align: left;
}
@container (max-width: 20em) {
  .sunki-ure,
  .kratica {
    display: none;
  }
}
@container (max-width: 34em) {
  .opis-ure,
  .stolpec-vlaga,
  .skrito-ozko,
  .tabela-ur .dolgo {
    display: none;
  }
  .tabela-ur .kratko {
    display: inline;
  }
  .tabela-ur th,
  .tabela-ur td {
    padding-inline: 0.5rem;
  }
}

/* ——— Sonce in Luna ——— */
.nebo h2 {
  margin-bottom: 1rem;
}
.nebo-mreza {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 3rem;
}
.sonce-pot {
  container-type: inline-size;
}
@media (min-width: 56em) {
  .nebo-mreza {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    align-items: start;
  }
}
.sonce-platno {
  position: relative;
  height: 8rem;
}
.sonce-platno svg {
  display: block;
  width: 100%;
  height: 100%;
}
.sonce-krivulja {
  fill: none;
  stroke: var(--c-sonce);
  stroke-width: 2.5;
  vector-effect: non-scaling-stroke;
}
.sonce-krivulja.pod {
  stroke: var(--besedilo-3);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.obzorje {
  stroke: var(--besedilo-3);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.sonce-zdaj {
  stroke: var(--besedilo-3);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  vector-effect: non-scaling-stroke;
}
.sonce-pika {
  position: absolute;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: 50%;
  background: var(--c-sonce);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-sonce) 25%, transparent);
  transform: translate(-50%, -50%);
}
.sonce-osi {
  display: flex;
  justify-content: space-between;
  margin-top: 0.25rem;
  color: var(--besedilo-3);
  font-size: 0.8125rem;
}
@container (max-width: 20em) {
  .sonce-osi span:nth-child(even) {
    display: none;
  }
}
.nebo-podatki,
.povzetek {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 10rem), 1fr));
  gap: 1rem 1.5rem;
}
.nebo-podatki > div,
.povzetek > div {
  padding-top: 0.5rem;
  border-top: 1px solid var(--crta);
}
.nebo-podatki dt,
.povzetek dt {
  color: var(--besedilo-2);
  font-size: 0.9375rem;
}
.nebo-podatki dd,
.povzetek dd {
  /* na najožjih zaslonih s povečano pisavo naj se besede ne lomijo sredi besede */
  font-size: min(1.375rem, 8.5vw);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.nebo-podatki small,
.povzetek small {
  display: block;
  color: var(--besedilo-2);
  font-size: 0.875rem;
  font-weight: 400;
}
.povzetek b {
  font-weight: 650;
}
.luna-vrstica {
  grid-column: 1 / -1;
}
.luna-vrstica dd {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem 0.75rem;
}
.luna-vrstica dd span {
  min-width: 0;
}
.luna {
  flex: none;
  width: 3rem;
  height: 3rem;
}
.luna-temna {
  fill: color-mix(in srgb, var(--besedilo) 14%, var(--stran));
}
.luna-svetla {
  fill: var(--luna);
}

/* ——— radar ——— */
.radar .izbira {
  margin-bottom: 1rem;
}
.radar img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 960 / 768;
  max-width: 48rem;
  background: var(--mehko);
}
.radar figcaption,
.galerija span {
  margin-top: 0.375rem;
  color: var(--besedilo-2);
  font-size: 0.875rem;
}

/* ——— v spomin (pas) ——— */
.spomin-pas {
  margin-top: 3rem;
  padding-block: 2.5rem;
  background: #18242b;
  color: #edf1ee;
}
.spomin-vrstica {
  display: grid;
  gap: 1.5rem 2.5rem;
  align-items: center;
}
@media (min-width: 44em) {
  .spomin-vrstica {
    grid-template-columns: 13rem 1fr;
  }
}
.spomin-vrstica img {
  width: 100%;
  max-width: 13rem;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 20%;
}
.spomin-vrstica .nadnaslov {
  color: #f0c35a;
}
.spomin-vrstica h2 {
  margin-top: 0.25rem;
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 600;
}
.spomin-vrstica blockquote {
  margin-block: 0.5rem 0.75rem;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-style: italic;
}
.spomin-vrstica p:not(.nadnaslov) {
  max-width: 40rem;
  color: #d3dbd9;
}
.spomin-vrstica .povezava {
  display: inline-block;
  margin-top: 1rem;
  color: #f0c35a;
}

/* ——— fotografije ——— */
.fotografije h2 {
  margin-bottom: 1rem;
}
.galerija {
  display: grid;
  /* telefon 2 stolpca, sicer 3: šest fotografij v enakomernih vrstah */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 40em) {
  .galerija {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.galerija a {
  display: block;
}
.galerija img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.galerija span {
  display: block;
}

/* ——— arhiv ——— */
.arhiv-izbor {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 0.75rem 1rem;
}
.arhiv-izbor label {
  flex: 1 1 10rem;
  min-width: 0;
  max-width: 14rem;
  display: grid;
  gap: 0.25rem;
  color: var(--besedilo-2);
  font-size: 0.9375rem;
}
.arhiv-izbor input {
  width: 100%;
  min-width: 0;
  min-height: 2.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--crta);
  border-radius: 0.375rem;
  background: var(--stran);
  color: var(--besedilo);
  font: inherit;
}
.arhiv-izbor button[type="submit"],
#csv {
  min-height: 2.5rem;
  padding: 0.4rem 1rem;
  border: 1px solid var(--besedilo);
  border-radius: 0.375rem;
  background: var(--besedilo);
  color: var(--stran);
  font-weight: 600;
  cursor: pointer;
}
#arhiv-vsebina {
  margin-top: 1.5rem;
}
#arhiv-vsebina .povzetek {
  margin-bottom: 1.5rem;
}
.arhiv-izvoz {
  margin-block: 1.5rem 0.75rem;
}

/* ——— v spomin (stran) ——— */
.spomin .glava-strani .nadnaslov {
  margin-bottom: 0.375rem;
  color: var(--zlata);
}
.spomin-del {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem 3rem;
  margin-top: 2rem;
}
.glava-strani + .spomin-del {
  background: none;
  padding-top: 0;
  margin-top: 1rem;
}
@media (min-width: 52em) {
  .spomin-del {
    grid-template-columns: 15rem minmax(0, 1fr);
  }
  .spomin-del.brez-slike .besedilo {
    grid-column: 2;
  }
}
.spomin-del img {
  width: 100%;
  max-width: 18rem;
}
.spomin-del h2 {
  margin-bottom: 1rem;
  font-family: var(--serif);
  font-size: 1.625rem;
  font-weight: 600;
}
.besedilo {
  max-width: 42rem;
}
.besedilo p {
  margin-bottom: 1rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.podpis {
  font-style: italic;
}

/* ——— noga ——— */
.noga {
  margin-top: 3rem;
  padding-block: 2rem 2.5rem;
  border-top: 1px solid var(--crta);
  color: var(--besedilo-2);
  font-size: 0.9375rem;
}
.noga-vrstice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem 3rem;
}
@media (min-width: 52em) {
  .noga-vrstice {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
/* e-naslov se na najožjih zaslonih s povečano pisavo lahko prelomi */
.noga a {
  overflow-wrap: anywhere;
}
.noga b {
  color: var(--besedilo);
}
.noga-povezave {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.noga-viri {
  color: var(--besedilo-3);
  font-size: 0.875rem;
}

/* ——— povečava fotografije ——— */
.povecava {
  max-width: 100vw;
  max-height: 100vh;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-out;
}
.povecava::backdrop {
  background: rgba(10, 14, 16, 0.9);
}
.povecava[open] {
  display: grid;
  place-items: center;
}
.povecava img {
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 5rem);
  object-fit: contain;
}
.povecava .zapri {
  position: fixed;
  top: 0.75rem;
  right: 0.75rem;
  width: 3rem;
  height: 3rem;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: #17232a;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
}

.brez-loma {
  white-space: nowrap;
}

/* ——— rekordi, meseci, ta dan lani ——— */
.rekordi,
.meseci {
  padding-top: 2rem;
  background: linear-gradient(var(--crta), var(--crta)) top center / calc(100% - 2 * clamp(1rem, 4vw, 2rem)) 1px no-repeat;
  margin-top: 2.5rem;
}
.rekordi h2,
.meseci h2 {
  margin-bottom: 1rem;
}
.rekordi-seznam {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.tabela-meseci th small {
  display: block;
}
.lani {
  margin-top: 0.75rem;
  color: var(--besedilo-2);
  font-size: 0.9375rem;
}
.lani b {
  color: var(--besedilo);
}
.lani span {
  font-weight: 650;
  white-space: nowrap;
}
.t-min-dan {
  color: var(--c-hladna);
}
.t-max-dan {
  color: var(--c-temp);
}

.ucna-seznam {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.ucna-seznam li + li {
  margin-top: 0.375rem;
}

/* preklop pogledov arhiva */
.arhiv-pogledi {
  margin-top: 1rem;
}
.arhiv-pogledi a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0.3rem 0.95rem;
  border: 1px solid var(--crta);
  border-radius: 999px;
  color: var(--besedilo);
  font-size: 0.9375rem;
  text-decoration: none;
}
.arhiv-pogledi a:hover {
  border-color: var(--besedilo-3);
}
.arhiv-pogledi a[aria-current] {
  border-color: var(--besedilo);
  background: var(--besedilo);
  color: var(--stran);
}
.glava-strani + .rekordi,
.glava-strani + .meseci {
  margin-top: 1rem;
  padding-top: 0;
  background: none;
}