/* ComeOggi V1 - grafica premium della scheda comune (V1-GRAFICA-PREMIUM).
 *
 * Si carica DOPO v2.css, a2.css e image-layout.css e solo nella scheda
 * comune. Togliere la riga <link> che lo carica riporta la pagina com'era:
 * nessun dato, nessun testo, nessun title/description cambia.
 *
 * Cosa corregge (misurato sugli screenshot di site45, 01/10/2026):
 *  - tema scuro: la parte alta dell'hero mescolava il 38% di BIANCO
 *    nel gradiente (banda grigia chiara); link, "Altre previsioni",
 *    etichetta "Osservato ora", percentuali di pioggia orarie, numeri
 *    dell'accuratezza e "Vedi tutte le attivita'" restavano blu scuro su
 *    fondo scuro (contrasto 2-3:1, sotto WCAG AA);
 *  - link nel testo col blu di default del browser (#0000ee), illeggibili
 *    al buio;
 *  - riquadro notifiche col fondo ambra del RISCHIO: un invito non e' un
 *    pericolo (regola di v2.css: i colori di rischio solo col motore);
 *  - su 390 px il marchio andava a capo e schiacciava il nome del comune;
 *  - su desktop hero e testata andavano da bordo a bordo, le sezioni sotto
 *    stavano in 1120 px: due allineamenti diversi nella stessa pagina;
 *  - risposte di approfondimento a 17 px e righe da 150 caratteri.
 *
 * Gli stili .v1-adesso / .v1-radar / .v1-allerta / .v1-tendenza /
 * .v1-notifiche sono pronti per i blocchi degli altri cantieri V1.
 * Zero dipendenze, zero immagini, zero font in piu'.
 */

/* --- token propri: SOLO ruoli di testo, i colori di base restano di v2 --- */
.a2 {
  --v1-link: #0b5f92;               /* 6,6:1 su --fondo */
  --v1-link-hover: #0a3c5e;
  --v1-oss: #0b5f92;                /* natura: osservato (testo) */
  --v1-acqua-testo: #0b5f92;        /* % pioggia, "pioggia 40%" */
  --v1-icona: #0b5f92;              /* simboli del tempo (currentColor) */
  --v1-forte: #0a3c5e;              /* numeri e titoli in blu profondo */
  --v1-tinta-brand: #eaf4fb;        /* superfici informative, non di rischio */
  --v1-bordo-brand: #a8d5f2;
  --v1-ombra: 0 1px 2px rgba(18, 32, 42, .05), 0 8px 24px -14px rgba(18, 32, 42, .18);
  --v1-lampo-testo: #8a5a12;
  --v1-evol-testo: #5a4b8a;
  --v1-gutter: max(var(--s4), calc((100% - var(--largh-app)) / 2 + var(--s4)));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .a2 {
    --v1-link: #8cc8f0;
    --v1-link-hover: #b9ddf6;
    --v1-oss: #7cc0ec;
    --v1-acqua-testo: #7cc0ec;
    --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);
    --v1-lampo-testo: #e8b95c;
    --v1-evol-testo: #c2b4ee;
    --nat-osservato: #7cc0ec;
    --c-brand-forte: #8cc8f0;
  }
}
:root[data-theme="dark"] .a2 {
  --v1-link: #8cc8f0; --v1-link-hover: #b9ddf6; --v1-oss: #7cc0ec;
  --v1-acqua-testo: #7cc0ec; --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);
  --v1-lampo-testo: #e8b95c; --v1-evol-testo: #c2b4ee;
  --nat-osservato: #7cc0ec; --c-brand-forte: #8cc8f0;
}

/* --- tipografia: a capo bilanciati, numeri allineati --------------------- */
.a2 .a2-concl, .a2 .v2-sez__t, .a2 .a2-voce__t { text-wrap: balance; }
.a2 main p { text-wrap: pretty; }
.a2 .a2-stat__v, .a2 .a2-ora__t, .a2 .a2-giorno__t, .a2 .a2-minmax { font-variant-numeric: tabular-nums; }

/* --- link nel testo: colore del marchio, mai il blu del browser ---------- */
.a2 main 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);
}
.a2 main a:not([class]):hover { color: var(--v1-link-hover); text-decoration-color: currentColor; }
/* il percorso resta sommesso: e' navigazione, non testo */
.a2 main .a2-breadcrumb a { color: var(--c-testo-soft); text-decoration: none; }
.a2 main .a2-breadcrumb a:hover { color: var(--v1-link); text-decoration: underline; }

/* --- testata: il marchio non va a capo, il comune ha spazio -------------- */
.a2 .a2-marchio__n { white-space: nowrap; }
.a2 .a2-luogo { flex: 1; }
.a2 .a2-luogo__n { font-size: 21px; line-height: 1.15; }
.a2 .a2-luogo__m { line-height: 1.45; }
.a2 .a2-luogo__m small { font-size: 1em; opacity: .8; }
@media (max-width: 479px) {
  /* il logo resta (e il link ha aria-label col nome): il testo del marchio
     lasciava al comune 120 px e lo mandava su tre righe */
  .a2 .a2-testata .a2-marchio__n { display: none; }
  .a2 .a2-testata { gap: 10px; padding-block: 12px; }
}

/* --- desktop: testata, percorso e hero allineati alle sezioni ------------ */
@media (min-width: 900px) {
  .a2 .a2-testata { padding-inline: var(--v1-gutter); }
  .a2 .a2-breadcrumb { padding-inline: var(--v1-gutter); }
  .a2 .a2-hero { padding-inline: var(--v1-gutter); }
  .a2 .a2-hero__griglia { gap: var(--s6); align-items: start; }
}

/* --- hero ---------------------------------------------------------------- */
.a2 .a2-hero { border-bottom: 1px solid color-mix(in srgb, var(--c-bordo) 70%, transparent); }
.a2 .a2-icona-grande, .a2 .a2-ora__i, .a2 .a2-giorno__i { color: var(--v1-icona); }
.a2 .a2-ora--ora .a2-ora__i { color: #fff; }
.a2 .a2-cond { color: var(--c-testo); opacity: .78; }
.a2 .a2-stat__i {
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border-radius: var(--raggio-l);
}
.a2 .a2-stat__k { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
.a2 .a2-concl--osserva { color: var(--v1-forte); }
.a2 .a2-hero .v2-tag { background: color-mix(in srgb, var(--c-superficie) 85%, transparent); }

/* "Adesso, sul tuo punto": e' un'OSSERVAZIONE, e lo si vede dalla forma.
   Il markup ha stili in linea (fondo, bordo, raggio): qui si aggiunge solo
   cio' che quelle regole non toccano, cosi' le patch degli altri cantieri
   trovano il blocco identico. */
.a2 .a2-adesso {
  box-shadow: inset 4px 0 0 var(--v1-oss), var(--v1-ombra);
  padding-left: 18px !important;   /* l'inset da 4 px non deve toccare il testo */
}
.a2 .a2-adesso > div:first-child { display: flex; align-items: center; gap: 8px; }
.a2 .a2-adesso > div:first-child::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--v1-oss);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v1-oss) 22%, transparent);
}
/* i tre colori scritti in linea sono scuri: al buio sparivano */
.a2 .a2-adesso [style*="#0a4f86"] { color: var(--v1-acqua-testo) !important; }
.a2 .a2-adesso [style*="#5a4b8a"] { color: var(--v1-evol-testo) !important; }
.a2 .a2-adesso [style*="#8a5a12"] { color: var(--v1-lampo-testo) !important; }

/* tema scuro: niente bianco nel gradiente dell'hero */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .a2 .a2-hero {
    background:
      radial-gradient(90% 70% at 84% -6%, color-mix(in srgb, var(--i-sole) 14%, transparent) 0%, transparent 50%),
      linear-gradient(160deg, var(--atm-1) 0%, var(--atm-2) 70%, var(--c-fondo) 100%);
  }
  :root:not([data-theme="light"]) .a2 .a2-stat__i { background: color-mix(in srgb, var(--c-superficie) 70%, transparent); }
}
:root[data-theme="dark"] .a2 .a2-hero {
  background:
    radial-gradient(90% 70% at 84% -6%, color-mix(in srgb, var(--i-sole) 14%, transparent) 0%, transparent 50%),
    linear-gradient(160deg, var(--atm-1) 0%, var(--atm-2) 70%, var(--c-fondo) 100%);
}

/* --- radar in pagina ------------------------------------------------------ */
.a2 .a2-radar__vista { box-shadow: var(--v1-ombra); }
.a2 .a2-radar__meta .v2-motivo { line-height: 1.5; }

/* --- sezioni: ritmo, titoli, testo a misura d'occhio --------------------- */
.a2 main .v2-sez { margin-top: var(--s7); }
.a2 main .v2-guscio > .v2-sez:first-child { margin-top: var(--s5); }
.a2 .v2-guscio .a2-motivo { font-size: var(--t-corpo); line-height: 1.6; max-width: 70ch; }
.a2 .v2-sez__t { font-size: 1.375rem; line-height: 1.2; }
.a2 .v2-sez__t small {
  font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: var(--raggio-pill);
  background: var(--c-superficie-2); border: 1px solid var(--c-bordo);
  transform: translateY(-2px); white-space: nowrap;
}

/* la risposta di oggi: una scheda, e' la prima cosa che si legge sotto l'hero */
.a2 .a2-risposta-oggi {
  padding: var(--s4) var(--s4) var(--s4) var(--s5);
  border-radius: var(--raggio-l);
  background: var(--c-superficie); border: 1px solid var(--c-bordo);
  box-shadow: var(--v1-ombra);
}
.a2 .a2-risposta-oggi .v2-sez__t { margin-bottom: var(--s2); }

/* domande frequenti: voci separate, non un muro di testo */
.a2 section[aria-labelledby="h-faq"] > div > div + div {
  border-top: 1px solid var(--c-bordo); padding-top: var(--s3);
}
.a2 section[aria-labelledby="h-faq"] h3 { line-height: 1.35; margin-bottom: 4px !important; }

/* --- prossime ore: la striscia arriva al bordo e dice che scorre --------- */
.a2 .a2-ore {
  margin-inline: calc(-1 * var(--s4));
  padding-inline: var(--s4);
  scroll-padding-inline: var(--s4);
  scrollbar-width: thin;
  scrollbar-color: var(--c-bordo-forte) transparent;
}
.a2 .a2-ore::after { content: ""; flex: 0 0 1px; }
@media (max-width: 899px) {
  .a2 .a2-ore {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
            mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent);
  }
  .a2 .a2-ore::after { flex-basis: 28px; }
}
.a2 .a2-ora__p, .a2 .a2-ora__nota { color: var(--v1-acqua-testo); }
.a2 .a2-ora--ora .a2-ora__p { color: #dbeafe; }
.a2 .a2-ora--ora .a2-ora__nota { color: #fff; }

/* --- giorni ------------------------------------------------------------- */
.a2 .a2-giorno__fen--acqua { color: var(--v1-acqua-testo); }
.a2 .a2-giorno { box-shadow: var(--v1-ombra); }
@media (max-width: 480px) {
  /* "Domani" e "sab 3/10" andavano a capo o finivano sotto l'icona */
  .a2 .a2-giorno { grid-template-columns: 4.25rem 34px minmax(0, 1fr) auto; gap: var(--s2); }
  .a2 .a2-giorno__g { font-size: 15px; white-space: nowrap; }
  .a2 .a2-giorno__i { width: 34px; height: 34px; }
  .a2 .a2-giorno__t { gap: 7px; }
  .a2 .a2-arco { width: 36px; }
}

/* --- cosa posso fare: esiti leggibili anche al buio ---------------------- */
.a2 .a2-altre > summary {
  color: var(--v1-link); min-height: 44px; display: flex; align-items: center; gap: 8px;
  list-style: none;
}
.a2 .a2-altre > summary::-webkit-details-marker { display: none; }
.a2 .a2-altre > summary::before {
  content: ""; width: 7px; height: 7px; flex: none;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform var(--mov-veloce);
}
.a2 .a2-altre[open] > summary::before { transform: rotate(45deg); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .a2 .a2-esito--si { background: var(--r-nessuno-bg); color: var(--r-nessuno); }
  :root:not([data-theme="light"]) .a2 .a2-esito--forse,
  :root:not([data-theme="light"]) .a2 .a2-esito--aspetta { background: var(--r-attesa-bg); color: var(--r-attesa); }
}
:root[data-theme="dark"] .a2 .a2-esito--si { background: var(--r-nessuno-bg); color: var(--r-nessuno); }
:root[data-theme="dark"] .a2 .a2-esito--forse,
:root[data-theme="dark"] .a2 .a2-esito--aspetta { background: var(--r-attesa-bg); color: var(--r-attesa); }

/* --- accuratezza misurata ------------------------------------------------ */
.a2 .a2-acc { box-shadow: var(--v1-ombra); background: var(--c-superficie); }
.a2 .a2-acc__n b { color: var(--v1-forte); }

/* --- altre previsioni e vicini ------------------------------------------ */
.a2 .v2-intenti a { color: var(--v1-link); font-weight: 600; }
.a2 .v2-intenti a::after { content: "›"; margin-left: auto; padding-left: var(--s3); opacity: .55; }
.a2 .v2-chip__v { transition: border-color var(--mov-veloce), background var(--mov-veloce); }
.a2 .v2-chip__v:hover { background: var(--c-superficie-2); }

/* --- invito alle notifiche: superficie del marchio, NON colore di rischio - */
.a2 section[aria-labelledby="h-avvisi"] .a2-voce {
  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);
}
.a2 section[aria-labelledby="h-avvisi"] .a2-voce__d { color: var(--c-testo-soft); }
.a2 section[aria-labelledby="h-avvisi"] .v2-bottone,
.a2 .v1-notifiche .v2-bottone {
  background: var(--blu-600); border-color: var(--blu-600); color: #fff;   /* 4,6:1 */
}
.a2 section[aria-labelledby="h-avvisi"] .v2-bottone:hover,
.a2 .v1-notifiche .v2-bottone:hover { background: var(--blu-700); border-color: var(--blu-700); }

/* ========================================================================
   BLOCCHI DEGLI ALTRI CANTIERI V1
   Convenzione (facoltativa): __t titolo, __s sottotitolo, __v valore,
   .v1-fonte riga di fonte/eta'. La natura del dato si dice con i v2-tag
   esistenti (--osservato cerchio, --previsto quadrato, --stimato rombo).
   ======================================================================== */
.a2 .v1-adesso, .a2 .v1-radar, .a2 .v1-allerta, .a2 .v1-tendenza, .a2 .v1-notifiche {
  display: grid; gap: var(--s2);
  padding: var(--s4);
  border-radius: var(--raggio-l);
  background: var(--c-superficie);
  border: 1px solid var(--c-bordo);
  box-shadow: var(--v1-ombra);
  color: var(--c-testo);
}
.a2 :is(.v1-adesso, .v1-radar, .v1-allerta, .v1-tendenza, .v1-notifiche) > :first-child { margin-top: 0; }
.a2 :is(.v1-adesso, .v1-radar, .v1-allerta, .v1-tendenza, .v1-notifiche) [class$="__t"] {
  font-weight: 700; font-size: var(--t-h3); line-height: 1.3; margin: 0;
}
.a2 :is(.v1-adesso, .v1-radar, .v1-allerta, .v1-tendenza, .v1-notifiche) [class$="__s"] {
  font-size: var(--t-piccolo); color: var(--c-testo-soft); margin: 0;
}
.a2 :is(.v1-adesso, .v1-radar, .v1-allerta, .v1-tendenza, .v1-notifiche) [class$="__v"] {
  font-size: 1.75rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.a2 .v1-fonte { font-size: var(--t-micro); color: var(--c-testo-soft); margin: 0; line-height: 1.5; }

/* adesso: osservazione sul punto (accento a sinistra, puntino "dal vivo") */
.a2 .v1-adesso { box-shadow: inset 4px 0 0 var(--v1-oss), var(--v1-ombra); padding-left: 20px; }
.a2 .v1-adesso__k {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--c-testo-soft);
}
.a2 .v1-adesso__k::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--v1-oss);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--v1-oss) 22%, transparent);
}
.a2 .v1-adesso__griglia { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: var(--s2); }
.a2 .v1-adesso__cella {
  padding: 10px 12px; border-radius: var(--raggio-m);
  background: var(--c-superficie-2); border: 1px solid var(--c-bordo);
}

/* radar: la mappa e' il contenuto, il testo e' la didascalia */
.a2 .v1-radar { padding: var(--s3); }
.a2 .v1-radar img, .a2 .v1-radar canvas { display: block; max-width: 100%; height: auto; border-radius: var(--raggio-m); }
.a2 .v1-radar__comandi { display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center; }

/* allerta UFFICIALE (Protezione Civile): il livello si dice con la parola,
   il colore ripete; la fonte sta sempre in .v1-allerta__ente */
.a2 .v1-allerta { border-left: 6px solid var(--v1-liv, var(--c-bordo-forte)); background: var(--v1-liv-bg, var(--c-superficie)); }
.a2 .v1-allerta--verde     { --v1-liv: #2e7d32; --v1-liv-bg: var(--r-nessuno-bg); }
.a2 .v1-allerta--gialla    { --v1-liv: #e0b100; --v1-liv-bg: var(--r-attesa-bg); }
.a2 .v1-allerta--arancione { --v1-liv: #e8710a; --v1-liv-bg: var(--r-rilievo-bg); }
.a2 .v1-allerta--rossa     { --v1-liv: #c62828; --v1-liv-bg: var(--r-alto-bg); }
.a2 .v1-allerta__liv {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 3px 10px; border-radius: var(--raggio-pill);
  background: var(--c-superficie); color: var(--c-testo); border: 1px solid var(--v1-liv, var(--c-bordo));
}
.a2 .v1-allerta__liv::before { content: ""; width: 9px; height: 9px; border-radius: 2px; background: var(--v1-liv, currentColor); }
.a2 .v1-allerta__ente { font-size: var(--t-micro); color: var(--c-testo-soft); }
.a2 .v1-allerta ul { margin: 0; padding-left: 1.1em; }

/* tendenza: oltre la previsione affidabile -> bordo tratteggiato, toni spenti */
.a2 .v1-tendenza { border-style: dashed; border-color: var(--c-bordo-forte); box-shadow: none; background: transparent; }
.a2 .v1-tendenza .a2-giorno { box-shadow: none; background: var(--c-superficie-2); }
.a2 .v1-tendenza .a2-giorno__max, .a2 .v1-tendenza .a2-giorno__min { font-weight: 600; }

/* notifiche: invito, superficie del marchio */
.a2 .v1-notifiche {
  background: var(--v1-tinta-brand); border-color: var(--v1-bordo-brand);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 600px) {
  .a2 .v1-notifiche { grid-template-columns: 1fr auto; column-gap: var(--s5); }
}