/* MeteoMio — foglio di stile
   Token di colore, tipografia, layout dei pannelli. */

:root{
  --ink:#141a24;
  --ink-soft:#4a5567;
  --ink-faint:#7d879b;
  --paper:ghostwhite;   /* #f8f8ff */
  --panel:#ffffff;
  --line:#dcdad3;
  --line-soft:#e8e6e0;
  --brand:#17a794;       /* teal del logo */
  --brand-gold:#d1a300;  /* oro del logo */
  --brand-sky:#4db8e6;   /* azzurro del logo */
  --accent:#0e7a6e;      /* teal scurito: leggibile come testo e link */
  --accent-soft:#dcf0ec;
  --warm:#c25a2b;        /* temperatura */
  --wet:#2f7d92;         /* precipitazioni */
  --good:#3f7d4e;
  --warn:#b5820f;
  --crit:#a63a2c;
  --shadow:0 1px 2px rgba(20,26,36,.06), 0 8px 24px -16px rgba(20,26,36,.35);
  --radius:6px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e8e9ec; --ink-soft:#a8b0bf; --ink-faint:#7c8598;
    --paper:#12151b; --panel:#191d25; --line:#2c323d; --line-soft:#232833;
    --brand:#2bc3ae; --brand-gold:#e8bd2e; --brand-sky:#6ec8ee;
    --accent:#4ecdbc; --accent-soft:#12332f;
    --warm:#e08a5c; --wet:#63b6c9; --good:#69ad79; --warn:#d8ab45; --crit:#dd7a6a;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --ink:#e8e9ec; --ink-soft:#a8b0bf; --ink-faint:#7c8598;
  --paper:#12151b; --panel:#191d25; --line:#2c323d; --line-soft:#232833;
  --brand:#2bc3ae; --brand-gold:#e8bd2e; --brand-sky:#6ec8ee;
  --accent:#4ecdbc; --accent-soft:#12332f;
  --warm:#e08a5c; --wet:#63b6c9; --good:#69ad79; --warn:#d8ab45; --crit:#dd7a6a;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 30px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--paper) !important; color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:960px; margin:0 auto; padding:20px 20px 10px}

/* ---------- testata ---------- */
header.masthead{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px 20px; flex-wrap:wrap;
  border-bottom:2px solid var(--brand); padding-bottom:12px; margin-bottom:20px;
}
.brand{display:inline-flex; align-items:center; text-decoration:none}
.brand img{display:block; width:auto; height:38px}
.brand:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:3px}
.tagline{
  margin:0; font-family:"Newsreader",Georgia,serif; font-style:italic;
  font-size:18px; color:var(--ink-soft);
}
.pagehead{margin:0 0 20px}
.pagehead h1{
  font-family:"Newsreader",Georgia,serif; font-weight:600; font-size:32px;
  margin:0; letter-spacing:-.01em; text-wrap:balance; line-height:1.15;
}
.pagehead .kicker{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint);
  margin:6px 0 0;
}

/* ---------- form ---------- */
form.query{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:16px;
  display:grid; gap:14px;
  grid-template-columns:minmax(220px,2.2fr) minmax(140px,1fr) minmax(110px,.8fr) auto;
  align-items:end;
}
@media (max-width:720px){ form.query{grid-template-columns:1fr 1fr} .field.place{grid-column:1/-1} button.go{grid-column:1/-1} }
.field{display:flex; flex-direction:column; gap:6px; position:relative; min-width:0}
label{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint);
}
input, select{
  font:inherit; color:var(--ink); background:transparent;
  border:1px solid var(--line); border-radius:4px; padding:9px 10px; width:100%;
}
input:focus-visible, select:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent)}
input[type=date], select#t{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:14px}
select#t{height:41px; cursor:pointer}
button.go{
  font:inherit; font-weight:600; cursor:pointer;
  background:var(--accent); color:#fff; border:1px solid var(--accent);
  border-radius:4px; padding:10px 20px; height:41px; white-space:nowrap;
}
:root[data-theme="dark"] button.go{color:#0f1319}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) button.go{color:#0f1319} }
button.go:hover{filter:brightness(1.08)}
button.go:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
button.go[disabled]{opacity:.55; cursor:progress}

.suggest{
  position:absolute; z-index:20; top:100%; left:0; right:0; margin-top:4px;
  background:var(--panel); border:1px solid var(--line); border-radius:4px;
  box-shadow:var(--shadow); max-height:260px; overflow-y:auto;
}
.suggest[hidden]{display:none}
.suggest button{
  display:block; width:100%; text-align:left; font:inherit; cursor:pointer;
  background:none; border:0; border-bottom:1px solid var(--line-soft);
  padding:8px 10px; color:var(--ink);
}
.suggest button:last-child{border-bottom:0}
.suggest button:hover,.suggest button:focus-visible{background:var(--accent-soft); outline:none}
.suggest .sub{color:var(--ink-faint); font-size:12.5px}

.msg{margin-top:14px; font-size:14px; color:var(--crit)}
.msg:empty{display:none}

/* ---------- risultato ---------- */
#out{margin-top:26px; display:flex; flex-direction:column; gap:22px}
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.panel > h2{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint);
  margin:0; padding:12px 18px; border-bottom:1px solid var(--line-soft); font-weight:500;
}

/* sinossi */
.synopsis{padding:20px 18px; display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:center}
.synopsis .glyph{width:76px; height:76px; flex:none}
.synopsis .headline{min-width:0}
.headline .place{font-family:"Newsreader",Georgia,serif; font-size:24px; font-weight:600; line-height:1.2; margin:0}
.when{font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; color:var(--ink-faint); letter-spacing:.05em; margin:2px 0 8px}
.cond{font-size:17px; margin:0}
.temp{font-family:"Newsreader",Georgia,serif; font-size:52px; line-height:1; font-weight:400; font-variant-numeric:tabular-nums; color:var(--warm)}
.temp small{font-size:22px; color:var(--ink-soft)}

.metrics{
  display:grid; grid-template-columns:repeat(4,1fr); margin:0;
}
.metric{
  padding:12px 18px;
  border-top:1px solid var(--line-soft);
  border-right:1px solid var(--line-soft);
}
.metric:nth-child(4n){border-right:0}
@media (max-width:640px){
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metric:nth-child(4n){border-right:1px solid var(--line-soft)}
  .metric:nth-child(2n){border-right:0}
}
.metric dt{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); margin:0 0 3px;
}
.metric dd{margin:0; font-size:17px; font-variant-numeric:tabular-nums; display:flex; align-items:center; gap:6px}
.metric .unit{font-size:12px; color:var(--ink-soft)}

/* bollettino */
.bulletin{padding:18px; font-family:"Newsreader",Georgia,serif; font-size:18px; line-height:1.6; max-width:66ch}
.bulletin b{font-weight:600}

/* grafico */
.chartbox{padding:16px 10px 10px; overflow-x:auto}
.chartbox svg{display:block; min-width:560px; width:100%; height:auto}
.legend{
  display:flex; gap:18px; flex-wrap:wrap; padding:0 18px 14px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px; color:var(--ink-faint);
}
.legend span{display:inline-flex; align-items:center; gap:6px}
.swatch{width:14px; height:3px; border-radius:2px; display:inline-block}

/* mappa wxcharts */
.mapbox{padding:14px 14px 12px}
.mapbox iframe{
  width:100%; aspect-ratio:16/10; min-height:360px; border:1px solid var(--line-soft);
  border-radius:4px; background:var(--line-soft); display:block;
}
.mapnote{
  margin:8px 0 0; font-size:12px; color:var(--ink-faint);
  font-family:"IBM Plex Mono",ui-monospace,monospace; line-height:1.5;
}
.mapnote a{color:var(--accent)}

/* tabella oraria */
.hours{width:100%; border-collapse:collapse; font-variant-numeric:tabular-nums}
.hours th,.hours td{padding:8px 12px; text-align:right; border-bottom:1px solid var(--line-soft); white-space:nowrap}
.hours th{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px; letter-spacing:1px;
  text-transform:uppercase; color:var(--ink-faint); font-weight:500;
}
.hours th:first-child,.hours td:first-child{text-align:left}
.hours tbody tr.now{background:var(--accent-soft)}
.hours tbody tr:last-child td{border-bottom:0}
.tablebox{overflow-x:auto}
.pill{
  display:inline-block; padding:1px 7px; border-radius:999px; font-size:11.5px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;
}
.pill.dry{color:var(--ink-faint); background:var(--line-soft)}
.pill.wet{color:#fff; background:var(--wet)}
:root[data-theme="dark"] .pill.wet{color:#0f1319}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .pill.wet{color:#0f1319} }

footer.note{
  margin-top:30px; padding-top:12px; border-top:1px solid var(--line);
  font-size:12px; color:var(--ink-faint);
}
footer.note a{color:var(--accent)}
.skeleton{opacity:.5}
@media (prefers-reduced-motion:no-preference){
  #out > .panel{animation:rise .35s ease-out both}
  @keyframes rise{from{opacity:.3; transform:translateY(6px)} to{opacity:1; transform:none}}
}

/* ---------- classi introdotte con la modularizzazione ---------- */
.bulletin .lead{margin:0}
.bulletin .dateline{margin:10px 0 0; font-size:14px; color:var(--ink-soft)}
.swatch-sq{width:8px; height:8px; border-radius:2px}

/* ---------- pannello mappa: link e nota ---------- */
.maplinks{display:flex; gap:14px; align-items:flex-start; margin-top:10px; flex-wrap:wrap}
.maplink{
  flex:none; display:inline-block; text-decoration:none; white-space:nowrap;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px; letter-spacing:.04em;
  color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent); border-radius:4px; padding:7px 12px;
}
.maplink:hover{background:var(--accent); color:var(--panel)}
.maplink:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.maplinks .mapnote{margin:0; flex:1 1 260px}

/* ---------- pagine generate lato server ---------- */
.intro{max-width:66ch; margin:26px 0 0}
.intro h2{font-family:"Newsreader",Georgia,serif; font-size:22px; font-weight:600; margin:0 0 8px}
.intro p{margin:0 0 12px; line-height:1.65}
.synopsis--noicon{grid-template-columns:1fr}
.headline .place .prov{font-family:"IBM Plex Sans",sans-serif; font-size:16px; font-weight:400; color:var(--ink-faint)}
.citta, .nearby{margin-top:26px}
.citta h2, .nearby h2{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; letter-spacing:1px;
  text-transform:uppercase; color:var(--ink-faint); font-weight:500; margin:0 0 10px;
}
.citta ul, .nearby ul{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:2px 14px;
}
.citta a, .nearby a{color:var(--accent); text-decoration:none; font-size:14px; line-height:1.9}
.citta a:hover, .nearby a:hover{text-decoration:underline}
footer.note p{margin:0 0 6px}
.hours a{color:var(--accent)}
footer.note .credit{margin-top:10px; padding-top:8px; border-top:1px solid var(--line-soft)}

/* ---------- condivisione del bollettino ---------- */
.share{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  padding:0 18px 16px; margin-top:-4px;
}
.share-btn{
  font-family:"IBM Plex Sans",sans-serif; font-size:13px; line-height:1;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  color:var(--accent); background:transparent;
  border:1px solid var(--line); border-radius:999px; padding:7px 13px;
}
.share-btn:hover{border-color:var(--accent); background:var(--accent-soft)}
.share-btn:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.share-primary{background:var(--accent); border-color:var(--accent); color:var(--panel); font-weight:600}
.share-primary:hover{filter:brightness(1.08); background:var(--accent); color:var(--panel)}
.share-esito{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11.5px; color:var(--ink-faint);
}

/* data accanto al titolo del pannello (allineata a destra, non sotto) */
.panel > h2{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.panel > h2 .dateline{
  margin:0; font-family:"IBM Plex Sans",sans-serif; font-size:12px;
  text-transform:none; letter-spacing:0; color:var(--ink-faint); font-weight:400;
}

/* nota introduttiva sopra l'elenco dei comuni */
.citta-nota{
  margin:0 0 12px; max-width:66ch; font-size:13.5px; color:var(--ink-soft); line-height:1.55;
}
.citta-nota a{color:var(--accent); white-space:nowrap}

/* ---------- banner dei partner ---------- */
.partner{
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--panel); box-shadow:var(--shadow); padding:14px 18px 16px;
}
.partner h2{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px; font-weight:500;
  letter-spacing:1px; text-transform:uppercase; color:var(--ink-faint); margin:0 0 12px;
}
.partner-loghi{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px 24px; align-items:center;
}
.partner-logo{
  display:flex; align-items:center; justify-content:center;
  padding:10px 14px; border:1px solid var(--line-soft); border-radius:4px;
  transition:border-color .15s ease;
}
.partner-logo:hover{border-color:var(--accent)}
.partner-logo:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.partner-logo img{width:auto; height:34px; max-width:100%; object-fit:contain}
/* i loghi sono scuri: nel tema scuro perderebbero contrasto sul fondo */
:root[data-theme="dark"] .partner-logo{background:#f7faf9}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .partner-logo{background:#f7faf9}
}