/* ==================================================================
   NASTRO — fascia di notizie sotto la testata.
   Da appendere al foglio di stile principale (e ricordarsi VER_CSS).

   Il nastro e' un elemento di contorno: deve farsi notare al primo
   sguardo e poi sparire dalla coscienza di chi legge. Da qui tutte le
   scelte sotto — altezza bassa, testo piccolo ma non illeggibile,
   nessun colore saturo tranne sulle voci del sito, che sono il motivo
   per cui il nastro esiste.
   ================================================================== */

.nastro {
  --nastro-h: 40px;
  --nastro-dur: 60s;            /* ricalcolata da JS sulla larghezza vera */
  --nastro-fondo: #f6f8fc;
  --nastro-bordo: #e4eaf2;
  --nastro-testo: #3d4859;
  --nastro-tenue: #8e9bb0;

  position: relative;
  display: flex;
  align-items: stretch;
  height: var(--nastro-h);
  background: var(--nastro-fondo);
  border-top: 1px solid var(--nastro-bordo);
  border-bottom: 1px solid var(--nastro-bordo);
  font-size: 13.5px;
  line-height: 1;
  overflow: hidden;
  /* Il nastro non deve mai allargare la pagina: il contenuto interno e'
     largo quanto vuole, ma qui dentro resta. */
  contain: content;
}

/* ---------- etichetta fissa a sinistra ---------- */

.nastro__eti {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  padding: 0 13px 0 15px;
  background: var(--nastro-fondo);
  border-right: 1px solid var(--nastro-bordo);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--nastro-tenue);
  /* sta sopra al nastro che le scorre sotto */
  position: relative;
  z-index: 2;
}

.nastro__spia {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22d3ee;
  box-shadow: 0 0 0 0 rgba(34, 211, 238, .55);
  animation: nastro-spia 2.4s ease-out infinite;
}

@keyframes nastro-spia {
  0%        { box-shadow: 0 0 0 0   rgba(34, 211, 238, .55); }
  70%, 100% { box-shadow: 0 0 0 7px rgba(34, 211, 238, 0); }
}

/* ---------- la pista che scorre ---------- */

.nastro__vista {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  /* Sfuma le due estremita': senza, i titoli sembrano tagliati con
     l'accetta contro l'etichetta e contro il pulsante. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}

.nastro__pista {
  display: flex;
  width: max-content;
  height: 100%;
  animation: nastro-scorri var(--nastro-dur) linear infinite;
  will-change: transform;
  -webkit-backface-visibility: hidden;   /* forza il layer su Safari iOS */
}

/* Due copie identiche della fila, e lo spostamento si ferma a meta':
   quando la prima copia e' uscita, la seconda si trova esattamente dove
   stava la prima e il salto all'indietro e' invisibile. */
@keyframes nastro-scorri {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* La pausa al passaggio del mouse vale solo dove un mouse c'è davvero.
   Su touch il :hover si appiccica dopo un tocco — e resta — quindi il
   nastro si fermava al primo sfioramento e non ripartiva più. */
@media (hover: hover) and (pointer: fine) {
  .nastro:hover .nastro__pista { animation-play-state: paused; }
}

/* :focus-visible invece di :focus-within: il tocco non lo attiva, la
   tastiera sì. Chi naviga con il tab continua a poter fermare il nastro
   per leggere il link su cui si trova, anche da tablet. */
.nastro:has(:focus-visible) .nastro__pista { animation-play-state: paused; }

/* La pausa esplicita, quella del pulsante, vale ovunque. */
.nastro.is-fermo .nastro__pista { animation-play-state: paused; }

.nastro__fila {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---------- la singola voce ---------- */

.nastro__v {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  white-space: nowrap;
  position: relative;
}

/* separatore: un filo, non un carattere — si allinea sempre */
.nastro__v + .nastro__v::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1px;
  height: 13px;
  margin-top: -6.5px;
  background: var(--nastro-bordo);
}

.nastro__v a {
  color: var(--nastro-testo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}

.nastro__v a:hover,
.nastro__v a:focus-visible {
  color: #1b2432;
  border-bottom-color: #3a7bd5;
}

.nastro__v a:focus-visible {
  outline: 2px solid #3a7bd5;
  outline-offset: 3px;
  border-radius: 2px;
}

.nastro__fonte {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--nastro-tenue);
  flex: 0 0 auto;
}

/* ---------- le voci del sito ---------- */

.nastro__v--mio .nastro__fonte {
  color: #fff;
  padding: 3px 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, #4fc3f7, #3a7bd5 55%, #7b5ec7);
}

.nastro__v--mio a {
  color: #1b2432;
  font-weight: 600;
}

/* il lucchetto dei contenuti riservati, se la voce ne e' uno */
.nastro__chiuso {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  opacity: .5;
}

/* ---------- pulsante di pausa ---------- */

/* Non e' un vezzo: un contenuto che si muove da solo per piu' di cinque
   secondi deve poter essere fermato (WCAG 2.2.2). Senza questo pulsante
   il nastro sarebbe in contraddizione con il pannello di lettura
   facilitata che gia' c'e' sul sito. */
.nastro__pausa {
  flex: 0 0 auto;
  width: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-left: 1px solid var(--nastro-bordo);
  background: var(--nastro-fondo);
  color: var(--nastro-tenue);
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.nastro__pausa:hover { color: var(--nastro-testo); }

.nastro__pausa:focus-visible {
  outline: 2px solid #3a7bd5;
  outline-offset: -3px;
}

.nastro__pausa svg { width: 13px; height: 13px; fill: currentColor; }
.nastro__pausa .i-play,
.nastro.is-fermo .nastro__pausa .i-pausa { display: none; }
.nastro.is-fermo .nastro__pausa .i-play  { display: block; }

/* ---------- schermi stretti ---------- */

@media (max-width: 640px) {
  .nastro       { --nastro-h: 36px; font-size: 12.5px; }
  .nastro__eti  { padding: 0 9px 0 11px; font-size: 10px; letter-spacing: .06em; }
  .nastro__v    { padding: 0 13px; gap: 6px; }
  .nastro__fonte{ font-size: 9.5px; }
  .nastro__pausa{ width: 32px; }
}

/* Sotto i 560px l'etichetta testuale sparisce e resta la sola spia.
   Su un telefono "NOVITÀ" si mangia un quarto della fascia per dire una
   cosa che i titoli che scorrono dicono gia' da soli; il nome esteso
   resta nell'aria-label per chi usa uno screen reader. */
@media (max-width: 560px) {
  .nastro__eti span { display: none; }
  .nastro__eti      { padding: 0 11px; }
}

/* ---------- chi non vuole animazioni ---------- */

@media (prefers-reduced-motion: reduce) {
  .nastro__pista { animation: none; width: auto; }
  .nastro__vista { overflow-x: auto; scrollbar-width: thin; }
  .nastro__spia  { animation: none; }
  /* La copia di servizio non serve piu' e raddoppierebbe lo scorrimento
     manuale. */
  .nastro__fila[aria-hidden="true"] { display: none; }
  .nastro__pausa { display: none; }
}

/* Stesso trattamento quando la lettura facilitata e' attiva.
   ADATTA IL SELETTORE: qui va la classe o l'attributo che il pannello di
   accessibilita' mette su <html> o su <body>. */
html.lettura-facile .nastro__pista,
body.lettura-facile .nastro__pista { animation: none; width: auto; }
html.lettura-facile .nastro__vista,
body.lettura-facile .nastro__vista { overflow-x: auto; }
html.lettura-facile .nastro__spia,
body.lettura-facile .nastro__spia  { animation: none; }
html.lettura-facile .nastro__fila[aria-hidden="true"],
body.lettura-facile .nastro__fila[aria-hidden="true"] { display: none; }

/* ---------- stampa ---------- */

@media print { .nastro { display: none; } }

/* ---------- blindatura contro le regole mobile della testata ----------
   Il nastro vive dentro l'intestazione, e quasi ogni sito ha una regola
   che su schermo stretto nasconde le <ul> del menu. Se prende anche le
   file del nastro, la fascia resta disegnata ma vuota: bordo, spia e
   pulsante al loro posto, e in mezzo il nulla — esattamente il sintomo.

   Tre classi battono «.testata ul» per specificità, quindi non serve
   !important, che in un foglio condiviso è un debito che si paga dopo. */
.nastro .nastro__pista .nastro__fila { display: flex; }
.nastro .nastro__fila .nastro__v     { display: flex; }