/* ==========================================================================
   Säätiedot – teematyylit
   Teeman voi vaihtaa sivun valitsimesta. Oletusteema on Miami Vice.
   Uuden teeman lisääminen: kopioi :root[data-teema="..."]-lohko ja anna
   sille omat värit, sekä lisää vaihtoehto index.php:n valitsimeen.
   ========================================================================== */

:root {
  /* Miami Vice (oletus) – pehmeä meranvihreä + koralli/syaani */
  --tausta1:#e6f3ee; --tausta2:#c6e4dc; --pohja:#dcece7;
  --teksti:#0d3b39; --muted:#537f7a;
  --korostus:#ff6f5e;
  --lampo-vari:var(--teksti);
  --lammin:#ff6f5e; --kylma:#20a7dd;
  --hehku-lammin:rgba(255,111,94,.22); --hehku-kylma:rgba(32,167,221,.22);
  --reuna:rgba(13,59,57,.12);
}

:root[data-teema="klassinen"] {
  /* Klassinen – alkuperäisen sääsivun taivaansininen + limenkeltainen */
  --tausta1:#6a9eea; --tausta2:#6a9eea; --pohja:#6a9eea;
  --teksti:#ffffff; --muted:#d3e4fb;
  --korostus:#cde84a;
  --lampo-vari:#cde84a;
  --lammin:#cde84a; --kylma:#1b3f8f;
  --hehku-lammin:rgba(205,232,74,.28); --hehku-kylma:rgba(27,63,143,.22);
  --reuna:rgba(255,255,255,.3);
}

* { box-sizing:border-box; }

body {
  margin:0; min-height:100vh; color:var(--teksti);
  background:linear-gradient(160deg,var(--tausta1),var(--tausta2)) fixed;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
main { max-width:34rem; margin:0 auto; padding:2rem 1.1rem 4rem; }
.otsikko { font-size:.95rem; font-weight:600; margin:0 0 1.2rem; color:var(--muted); }
a:focus-visible, .rivi:focus-visible { outline:2px solid var(--korostus); outline-offset:3px; border-radius:4px; }

/* Teemavalitsin */
.teemapalkki { display:flex; justify-content:flex-end; margin:0 0 1.4rem; }
.teemapalkki label { font-size:.8rem; color:var(--muted); display:inline-flex; align-items:center; gap:.4rem; }
.teemapalkki select {
  font:inherit; font-size:.85rem; color:var(--teksti);
  background:transparent; border:1px solid var(--reuna); border-radius:6px;
  padding:.3rem .5rem; cursor:pointer;
}

/* Lista */
.lista { list-style:none; margin:0; padding:0; }
.rivi { display:block; text-decoration:none; color:inherit; padding:1.35rem .3rem; border-bottom:1px solid var(--reuna); }
.rivi:hover .lampo, .rivi:focus-visible .lampo { color:var(--korostus); }
.nimi { display:block; font-size:1.05rem; color:var(--muted); margin-bottom:.1rem; }
.lampo {
  display:block; color:var(--lampo-vari); font-weight:300; line-height:1; letter-spacing:-.02em;
  font-size:clamp(3rem,13vw,4.75rem); font-variant-numeric:tabular-nums;
  transition:color .15s ease;
}
.yks { font-size:.32em; color:var(--muted); font-weight:400; letter-spacing:0; }
.aika { display:block; margin-top:.5rem; font-size:.9rem; color:var(--muted); }
.tyhja { color:var(--muted); }

/* Tagisivu */
.takaisin { margin:0 0 1.4rem; }
.takaisin a { color:var(--muted); text-decoration:none; font-size:.9rem; }
.takaisin a:hover { color:var(--korostus); }
.nimi-iso { font-size:clamp(2rem,8vw,3rem); font-weight:700; letter-spacing:-.015em; line-height:1.05; margin:.2rem 0 1rem; }

.mittari-kehys { position:relative; }
.mittari-kehys::before {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:radial-gradient(closest-side, var(--hehku-lammin), transparent 72%);
}
.mittari-kehys.kylma::before {
  background:radial-gradient(closest-side, var(--hehku-kylma), transparent 72%);
}

.mittari { position:relative; z-index:1; width:100%; max-width:320px; height:auto; display:block; margin:.5rem auto 0; }
.mittari path, .mittari circle { stroke:var(--lammin); }
.mittari.kylma path, .mittari.kylma circle { stroke:var(--kylma); }
.m-keski { text-anchor:middle; dominant-baseline:central; font-size:46px; font-weight:600; fill:var(--lammin); }
.mittari.kylma .m-keski { fill:var(--kylma); }
.m-paa { text-anchor:middle; dominant-baseline:middle; font-size:15px; fill:var(--muted); }

.aika-iso { text-align:center; color:var(--muted); margin:.5rem 0 2.2rem; font-size:1rem; }
.tiedot { display:grid; grid-template-columns:1fr 1fr; gap:1.3rem 1.5rem; margin:0; }
.tiedot dt { font-size:.85rem; color:var(--muted); margin-bottom:.15rem; }
.tiedot dd { margin:0; font-size:1.2rem; font-variant-numeric:tabular-nums; }
.klo { font-size:.8rem; color:var(--muted); }

/* Klassinen-teeman erityispiirteet – alkuperäisen sääsivun tyyli */
:root[data-teema="klassinen"] body {
  background:linear-gradient(to bottom,
    #3f6bb0 0, #6a9eea 2.2%, #6a9eea 93%, #2f5596 100%) fixed;
}
:root[data-teema="klassinen"] .nimi { color:#fff; font-weight:700; font-size:1.25rem; }
:root[data-teema="klassinen"] .lampo { font-weight:700; letter-spacing:-.01em; }