/* Consent placeholder — what sits in the 16:9 box until the visitor asks for the video.
   It reuses .video-embed's sizing, so swapping the iframe in (video-consent.js) changes
   nothing about the layout: no shift, no reflow of the text below it. */
.video-embed--consent {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Not pure black: the placeholder is text people have to read, and #000 behind body copy is
     needlessly harsh next to the rest of the page. */
  background: #1b1b1b;
}
.video-consent {
  max-width: 34rem;
  padding: 1.5rem 1.25rem;
  text-align: center;
  /* Il colore va dichiarato QUI e non solo sul contenitore: `.article-body` e i suoi discendenti
     portano il colore del testo normale (quasi nero), e su questo fondo scuro sparisce. È il
     motivo per cui il riquadro si leggeva nero su nero. Ogni figlio lo eredita da qui. */
  color: #fff;
}
.video-consent__title {
  margin: 0 0 .5rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
}
.video-consent__icon {
  display: inline-block;
  margin-right: .4rem;
  font-size: .9em;
  opacity: .75;
}
.video-consent__text {
  margin: 0 0 1.1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #f0f0f0;
}
.video-consent__btn,
.video-consent__once {
  /* Un <button> porta il fondo grigio chiaro del browser, e il bianco su quello è invisibile:
     entrambi i colori vanno dichiarati, mai ereditati. */
  border-radius: 4px;
  padding: 0.65rem 1.5rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
/* L'azione principale: accettare, che è ciò che la maggior parte delle persone vuole quando
   apre la pagina di un corso per vedere le lezioni. */
.video-consent__btn {
  background: #a71a1d;
  color: #fff;
  border: 0;
}
.video-consent__btn:hover,
.video-consent__btn:focus-visible { background: #8a1518; }
/* La seconda: guardarne uno senza decidere per tutti. Meno vistosa ma non nascosta — deve
   restare chiaramente cliccabile, o diventa la spinta che il Garante chiama dark pattern. */
.video-consent__once {
  display: block;
  margin: .6rem auto 0;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.video-consent__once:hover,
.video-consent__once:focus-visible { background: rgba(255,255,255,.12); border-color: #fff; }
.video-consent__note {
  margin: 1.1rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: #c9c9c9;
}
.video-consent__note a { color: #fff; text-decoration: underline; }

/* --- Banner di consenso per i video --------------------------------------------------------
   Costruito da video-consent.js e aggiunto in fondo al <body>, solo sulle pagine che contengono
   un video e solo se la scelta non è già stata fatta. Parte fuori schermo e sale: comparire di
   colpo sotto il dito di chi sta già leggendo è peggio che arrivare mezzo secondo dopo.
   I due pulsanti hanno la stessa dimensione e lo stesso peso; cambia solo il colore. Rendere
   "Continua senza" più piccolo o più pallido sarebbe la spinta che le Linee guida del Garante
   del 10 giugno 2021 vietano espressamente. */
.cookie-bar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  padding: 1rem 1.25rem;
  background: #1b1b1b;
  color: #f2f2f2;
  box-shadow: 0 -2px 14px rgba(0,0,0,.28);
  transform: translateY(100%);
  transition: transform .28s ease;
}
.cookie-bar.is-open { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .cookie-bar { transition: none; }
}
.cookie-bar__text {
  margin: 0;
  max-width: 46rem;
  font-size: .9rem;
  line-height: 1.5;
}
.cookie-bar__text a { color: #fff; text-decoration: underline; }
.cookie-bar__actions { display: flex; gap: .6rem; flex-shrink: 0; }
.cookie-bar__btn {
  border-radius: 4px;
  padding: .6rem 1.4rem;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cookie-bar__btn--yes { background: #a71a1d; color: #fff; border: 0; }
.cookie-bar__btn--yes:hover, .cookie-bar__btn--yes:focus-visible { background: #8a1518; }
.cookie-bar__btn--no {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.55);
}
.cookie-bar__btn--no:hover, .cookie-bar__btn--no:focus-visible {
  background: rgba(255,255,255,.12);
  border-color: #fff;
}
/* Sotto i 620px i pulsanti vanno a capo sotto al testo e si allargano: su un telefono due
   pulsanti affiancati diventano due bersagli troppo stretti per il pollice. */
@media (max-width: 620px) {
  .cookie-bar { gap: .85rem; padding: .9rem 1rem 1.1rem; }
  .cookie-bar__actions { width: 100%; }
  .cookie-bar__btn { flex: 1; padding: .7rem 1rem; }
}

/* Stato del consenso in /cookie-policy: il testo lo scrive video-consent.js, perché solo il
   browser sa cosa ha scelto questa persona. Senza JS il riquadro resta vuoto e la pagina si
   legge lo stesso — il paragrafo accanto spiega comunque come cambiare idea. */
.video-prefs {
  margin: 1.2rem 0 1.6rem;
  padding: 1.1rem 1.25rem;
  background: #f6f6f6;
  border: 1px solid #e3e3e3;
  border-radius: 5px;
}
.video-prefs__state { margin: 0 0 .8rem; font-weight: 600; }
