/* ComeOggi - grafica delle altre pagine (PATCH23-GRAFICA2, 04/10/2026).
 *
 * La scheda comune e' stata rifinita in 1.0 con v1-premium.css. Questo foglio
 * porta lo stesso livello alle altre pagine: home, radar del comune, hub
 * regionali e provinciali, mappa, notifiche, allerta meteo, precisione.
 * NON si carica sulla scheda comune (lo include _seo_head.html solo su quei
 * percorsi, e notifiche.html direttamente): la scheda resta identica.
 *
 * Perche' i selettori iniziano con "html.a2 body.a2": su radar, hub, mappa e
 * allerta il foglio arriva PRIMA di v2.css e a2.css (sta nell'include della
 * testa), quindi deve vincere per specificita', non per ordine.
 *
 * Cosa corregge (misurato sugli screenshot di site47, 04/10/2026):
 *  - tema scuro: --c-brand-forte restava #0a3c5e (blu notte) su fondo #101a21:
 *    il bottone "Cerca" (home, hub) aveva testo scuro su blu scuro, le
 *    temperature delle citta' negli hub, i link del radar comune e il
 *    "torna al meteo" erano invisibili; --nat-osservato (#0b5f92) rendeva
 *    illeggibili le etichette OSSERVATO della mappa;
 *  - link col blu di default del browser (#0000ee) su allerta, notifiche e
 *    dentro il riquadro verde del radar: contrasto 2:1 al buio e sul verde;
 *  - notifiche e allerta usavano variabili inesistenti (--card, --bordo,
 *    --t-dim) e colori fissi: al buio riquadri BIANCHI con testo bianco;
 *  - radar comune: nel riquadro della risposta la parola "osservazione"
 *    diventava un titolo a capo (regola di a2.css su ogni <b>); l'elenco
 *    "in numeri" usava una variabile inesistente (--ink) ed era nero sul nero;
 *    la tabella tagliava "sotto 3 non ci fidiamo abbastan..." a 390 px;
 *  - precisione: colori fissi (#6b6256, #4a453c, #e6e1d6) illeggibili al buio
 *    e la tabella dei metodi usciva dallo schermo su telefono;
 *  - mappa: la barra del tempo restava bianca al buio con l'ora bianca sopra;
 *  - hub: elenco delle province in una colonna sola anche dove ne stanno due.
 * Togliere il link che lo carica riporta tutto com'era: nessun dato, nessun
 * testo, nessun title o description cambia.
 */

/* --- token: gli stessi ruoli di v1-premium.css ------------------------- */
html.a2 body.a2 {
  --v1-link: #0b5f92;               /* 6,6:1 su --fondo */
  --v1-link-hover: #0a3c5e;
  --v1-icona: #0b5f92;
  --v1-forte: #0a3c5e;
  --v1-tinta-brand: #eaf4fb;
  --v1-bordo-brand: #a8d5f2;
  --v1-ombra: 0 1px 2px rgba(18, 32, 42, .05), 0 8px 24px -14px rgba(18, 32, 42, .18);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.a2 {
    --v1-link: #8cc8f0;             /* 9,5:1 su #101a21 */
    --v1-link-hover: #b9ddf6;
    --v1-icona: #5aa9dc;
    --v1-forte: #a9d6f5;
    --v1-tinta-brand: #122b3b;
    --v1-bordo-brand: #2b5c7d;
    --v1-ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -14px rgba(0, 0, 0, .65);
    --nat-osservato: #7cc0ec;
    --c-brand-forte: #8cc8f0;
  }
}
:root[data-theme="dark"] body.a2 {
  --v1-link: #8cc8f0; --v1-link-hover: #b9ddf6; --v1-icona: #5aa9dc; --v1-forte: #a9d6f5;
  --v1-tinta-brand: #122b3b; --v1-bordo-brand: #2b5c7d;
  --v1-ombra: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 26px -14px rgba(0, 0, 0, .65);
  --nat-osservato: #7cc0ec; --c-brand-forte: #8cc8f0;
}

/* --- comune a tutte: link, titoli, testata ----------------------------- */
/* solo i link DENTRO il testo (paragrafi, elenchi, tabelle, didascalie): i titoli
   delle notizie in home e il percorso restano col loro colore */
html.a2 body.a2 main :is(p, li, td, dd, figcaption) a:not([class]) {
  color: var(--v1-link);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
html.a2 body.a2 main :is(p, li, td, dd, figcaption) a:not([class]):hover { color: var(--v1-link-hover); text-decoration-color: currentColor; }
html.a2 body.a2 main a:focus-visible,
html.a2 body.a2 .a2-testata a:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 2px; border-radius: 6px; }
html.a2 body.a2 main h1 { text-wrap: balance; }
html.a2 body.a2 main p { text-wrap: pretty; }
/* il pulsante a pillola in testata ("Precisione", "Mappa", "Meteo Milano")
   era sottolineato come un link nel testo */
html.a2 body.a2 .a2-testata__az a { text-decoration: none; color: var(--c-testo); }
html.a2 body.a2 .a2-testata__az a:hover { border-color: var(--c-bordo-forte); }
@media (max-width: 479px) {
  html.a2 body.a2 .a2-testata { gap: 10px; }
  html.a2 body.a2 .a2-marchio__n { white-space: nowrap; }
}
html.a2 body.a2 .v2-chip__v { transition: border-color var(--mov-veloce), background var(--mov-veloce); }
html.a2 body.a2 .v2-chip__v:hover { background: var(--c-superficie-2); }

/* --- invito agli avvisi (home): superficie del marchio, mai del rischio - */
html.a2 body.a2 .g2-invito {
  display: grid; gap: var(--s3); align-items: center;
  padding: var(--s4) var(--s5);
  border-radius: var(--raggio-l);
  background: var(--v1-tinta-brand);
  border: 1px solid var(--v1-bordo-brand);
  border-left: 4px solid var(--c-brand);
  box-shadow: var(--v1-ombra);
}
@media (min-width: 600px) {
  html.a2 body.a2 .g2-invito { grid-template-columns: auto 1fr auto; column-gap: var(--s4); }
}
html.a2 body.a2 .g2-invito__i { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c-superficie); color: var(--v1-icona); border: 1px solid var(--v1-bordo-brand); }
html.a2 body.a2 .g2-invito__t { margin: 0; font-family: var(--f-display); font-size: var(--t-h2); line-height: 1.25; color: var(--c-testo); }
html.a2 body.a2 .g2-invito__s { margin: 4px 0 0; font-size: var(--t-piccolo); line-height: 1.55; color: var(--c-testo-soft); max-width: 62ch; }
html.a2 body.a2 .g2-invito .v2-bottone {
  background: var(--blu-600); border-color: var(--blu-600); color: #fff;   /* 4,6:1 */
  min-height: 48px; justify-self: start; white-space: nowrap; text-decoration: none;
}
html.a2 body.a2 .g2-invito .v2-bottone:hover { background: var(--blu-700); border-color: var(--blu-700); }

/* ========================================================================
   HOME
   ======================================================================== */
html.a2 body.a2 .a2-home-sub { max-width: 52ch; }
html.a2 body.a2 .a2-radar-copy, html.a2 body.a2 .a2-prec { box-shadow: var(--v1-ombra); }
html.a2 body.a2 .v2-valore { border-radius: var(--raggio-l); }
html.a2 body.a2 .v2-valore h3 { text-wrap: balance; }
html.a2 body.a2 .v2-valore > a { font-weight: 600; }
html.a2 body.a2 .v2-news__v { box-shadow: var(--v1-ombra); }
html.a2 body.a2 .v2-testo-seo { max-width: 70ch; line-height: 1.6; }

/* ========================================================================
   RADAR DEL COMUNE (/comune/<slug>/radar)
   ======================================================================== */
/* la risposta: il grassetto DENTRO il paragrafo resta grassetto, non titolo */
html.a2 body.a2 .it-verdetto { box-shadow: var(--v1-ombra); }
html.a2 body.a2 .it-verdetto p b {
  display: inline; font-family: inherit; font-size: inherit; line-height: inherit; margin: 0;
}
html.a2 body.a2 main .it-verdetto p a:not([class]) { color: #fff; text-decoration-color: rgba(255, 255, 255, .7); font-weight: 600; }
/* la cartolina e i riquadri: stessa superficie e stessa ombra della scheda */
html.a2 body.a2 .it-cartolina { background: var(--c-superficie); border: 1px solid var(--c-bordo); box-shadow: var(--v1-ombra); }
html.a2 body.a2 .it-cartolina figcaption { color: var(--c-testo-soft); }
html.a2 body.a2 .it-box { border-radius: var(--raggio-l); box-shadow: var(--v1-ombra); padding: var(--s4) var(--s5); }
@media (max-width: 479px) { html.a2 body.a2 .it-box { padding: var(--s4); } }
html.a2 body.a2 .it-box h2 { font-size: 1.2rem; }
html.a2 body.a2 .it-punti { color: var(--c-testo); font-size: var(--t-corpo); }
html.a2 body.a2 .it-punti li::marker { color: var(--v1-icona); }
/* la tabella "cosa vede il radar": il valore va a capo invece di uscire */
html.a2 body.a2 .it-tab:not(.it-tab-ore) { min-width: 0; }
html.a2 body.a2 .it-tab:not(.it-tab-ore) td { white-space: normal; overflow-wrap: anywhere; }
html.a2 body.a2 .it-tab:not(.it-tab-ore) tbody th { width: 38%; }
html.a2 body.a2 .it-quando > div { border-radius: var(--raggio-m); }
html.a2 body.a2 .it-nota { border-radius: var(--raggio-m); }
html.a2 body.a2 .it-bc a, html.a2 body.a2 .a2-hub .breadcrumb a { min-height: 24px; display: inline-flex; align-items: center; }

/* ========================================================================
   HUB REGIONALI E PROVINCIALI (/comuni/...)
   ======================================================================== */
html.a2 body.a2 .a2-hub .card { box-shadow: var(--v1-ombra); }
html.a2 body.a2 .a2-hub .dayh { color: var(--c-testo); font-size: var(--t-corpo); font-weight: 700; }
html.a2 body.a2 .a2-hub .cm-city { box-shadow: 0 1px 0 var(--c-bordo); }
html.a2 body.a2 .a2-hub .cm-city span { color: var(--v1-forte); font-variant-numeric: tabular-nums; }
html.a2 body.a2 .a2-hub .cm-city:hover, html.a2 body.a2 .a2-hub .hubitem:hover,
html.a2 body.a2 .a2-hub .regidx-i:hover, html.a2 body.a2 .a2-hub .paesi-i:hover { background: var(--c-superficie-2); }
/* due colonne di province anche su un telefono da 390 px */
html.a2 body.a2 .a2-hub .regidx, html.a2 body.a2 .a2-hub .paesi-l, html.a2 body.a2 .a2-hub .hublist {
  grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr));
}
/* titolo e conteggio delle sezioni lunghe: uno sotto l'altro, non schiacciati */
html.a2 body.a2 .a2-hub .place { flex-wrap: wrap; row-gap: 2px; }
html.a2 body.a2 .a2-hub .place h2 { flex: 1 1 18rem; }
html.a2 body.a2 .a2-hub .chip:hover { background: var(--c-superficie-2); }
html.a2 body.a2 .a2-hub .chips-fitti .chip { min-height: 36px; padding: 7px 12px; }

/* ========================================================================
   MAPPA (/mappa): la barra del tempo segue il tema
   ======================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) body.a2.v2--mappa .v2-tempo {
    background: color-mix(in srgb, var(--c-superficie) 94%, transparent);
    border-color: var(--c-bordo-forte);
  }
  :root:not([data-theme="light"]) body.a2.v2--mappa .v2-mappa-guscio { border-color: var(--c-bordo-forte); }
}
:root[data-theme="dark"] body.a2.v2--mappa .v2-tempo {
  background: color-mix(in srgb, var(--c-superficie) 94%, transparent);
  border-color: var(--c-bordo-forte);
}

/* ========================================================================
   ALLERTA METEO (/allerta-meteo)
   ======================================================================== */
html.a2 body.a2 .alm h1 { font-family: var(--f-display); font-size: var(--t-display); line-height: 1.12; }
html.a2 body.a2 .alm h2 { font-family: var(--f-display); font-size: 1.3rem; line-height: 1.25; }
html.a2 body.a2 .alm-nota {
  background: var(--v1-tinta-brand); border: 1px solid var(--v1-bordo-brand);
  border-left: 4px solid var(--c-brand); border-radius: var(--raggio-l);
  padding: var(--s4) var(--s5); color: var(--c-testo);
}
html.a2 body.a2 .alm-lista {
  background: var(--c-superficie); border: 1px solid var(--c-bordo);
  border-radius: var(--raggio-l); padding: 0 var(--s4); box-shadow: var(--v1-ombra);
}
html.a2 body.a2 .alm-lista li { border-top-color: var(--c-bordo); padding: 12px 0; }
html.a2 body.a2 .alm-lista a { min-height: 24px; display: inline; }
html.a2 body.a2 .alm small { color: var(--c-testo-soft); }
html.a2 body.a2 .alm-colori li::marker { color: var(--c-testo-soft); }

/* ========================================================================
   PRECISIONE (/precisione): i colori scritti in linea al buio
   ======================================================================== */
html.a2 body.a2 main [style*="color:#6b6256"],
html.a2 body.a2 main [style*="color:#4a453c"] { color: var(--c-testo-soft) !important; }
html.a2 body.a2 main [style*="border-top:1px solid #e6e1d6"] { border-top-color: var(--c-bordo) !important; }
html.a2 body.a2 main table[style*="border-collapse"] { table-layout: fixed; }
html.a2 body.a2 main table[style*="border-collapse"] :is(td, th) { overflow-wrap: anywhere; vertical-align: top; }
html.a2 body.a2 main progress { accent-color: var(--c-brand); }