/* Avviso di servizio — v. apply/build-avviso.mjs */

/* ⚠⚠ La distanza dall'alto scavalca la TESTATA invece di sovrapporsi: misurata alta 69px, un avviso a
   16px ne copriva SETTE voci — Home, Prodotti e servizi, Assistenza, Certificazioni — cioe' chi arriva
   sul sito trovava la navigazione primaria nascosta. Scorrendo, la testata resta appiccicata in cima e
   l'avviso le sta appena sotto.
   ⚠⚠ z-index 40, cioe' SOTTO la testata (50): un avviso non deve vincere sulla NAVIGAZIONE. Misurato con
   una tendina aperta (alta 460px) l'avviso le stava sopra e ne copriva le prime voci. Sotto la testata la
   tendina passa davanti, e l'avviso resta comunque sopra il contenuto della pagina, che non ha strati. */
.avviso {
  position: fixed; top: 5.5rem; left: 50%; transform: translateX(-50%);
  /* 44rem: misurata. Alla taglia di testo attuale il messaggio chiede 389px per stare su UNA riga, e il
     resto del riquadro (marchio, respiro, bottone) ne occupa circa 315: sotto questa larghezza la frase
     si spezza a meta' di una data, che si legge come un intoppo. */
  z-index: 40; width: min(44rem, calc(100vw - var(--space-5)));
}
/* Il filetto rosso in cima e' il segno del verticale (lo portano testata e schede): l'avviso lo eredita
   invece di introdurre un colore suo. */
.avviso__box {
  display: flex; align-items: center; gap: var(--space-5);
  background: var(--paper); color: var(--ink);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
  padding: var(--space-5) var(--space-6);
}
/* ⚠ Le stesse misure stanno anche negli attributi width/height del markup: servono al browser per
   riservare lo spazio prima che il file arrivi, e divergendo tornerebbe il salto di layout. */
.avviso__logo { flex: none; width: 131px; height: 36px; }
.avviso__testo { flex: 1 1 auto; min-width: 0; }
.avviso__tit { font-weight: 600; font-size: var(--text-md); line-height: 1.3; }
/* ⚠ La misura di lettura sta sul PARAGRAFO, non sul contenitore. */
/* ⚠ Bilanciamento e non solo «pretty»: su due righe corte il ritorno a capo naturale spezzava la data
   («venerdì / 28 agosto»), che si legge come un intoppo. Bilanciare le righe tiene insieme le unita'. */
.avviso__msg { margin-top: .3rem; color: var(--ink-muted); font-size: var(--text-base); line-height: 1.5; max-width: 46ch; text-wrap: balance; }
/* Bersaglio di tocco pieno: l'area cliccabile non e' il solo glifo. */
.avviso__x {
  flex: none; width: 3rem; height: 3rem; display: grid; place-items: center;
  background: none; border: 0; border-radius: var(--radius-pill); color: var(--ink-muted); cursor: pointer;
}
.avviso__x svg { width: 22px; height: 22px; }
.avviso__x:hover { background: var(--surface); color: var(--ink); }
.avviso__x:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Lo stato «chiuso» lo mette lo script nella TESTA, prima che il corpo si dipinga: senza, chi l'ha gia'
   chiuso vedrebbe l'avviso comparire e sparire a ogni pagina. */
.fp-avviso-chiuso .avviso { display: none; }

/* ⚠⚠ Su schermo stretto l'avviso NON si sovrappone: misurato a 390px, il riquadro copriva la testata
   INTERA (y 12-118 contro y 0-63), cioe' il marchio e il bottone del menu — la navigazione primaria
   diventava irraggiungibile finche' non lo si chiudeva. In flusso invece lo precede e lo spinge giu':
   la testata resta appiccicata e torna in cima appena si scorre. */
@media (max-width: 640px) {
  .avviso { position: static; transform: none; top: auto; left: auto; width: auto; }
  .avviso__box {
    gap: var(--space-3); padding: var(--space-4); align-items: flex-start;
    border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--line);
  }
  /* Su schermo stretto il marchio ruba larghezza al testo, che e' l'informazione. */
  .avviso__logo { display: none; }
}
/* Chi ha chiesto meno movimento non deve comunque perdere l'avviso: qui non c'e' animazione da spegnere,
   la regola esiste per dichiararlo a chi legge il foglio. */