/* ═══════════════════════════════════════════════════════════════════
   Navigazione da telecomando.

   Su un televisore si guarda da tre metri di distanza: quello che sul
   computer è un contorno discreto, da lontano non si vede. Qui il
   segno di dove ti trovi è deliberatamente vistoso.

   Questi stili si applicano solo quando la navigazione a frecce è
   attiva, cioè da quando premi una direzione. Con il puntatore la
   pagina resta com'è sempre stata.
   ═══════════════════════════════════════════════════════════════════ */

.modo-telecomando :focus {
  outline: 4px solid #ff2c2c;
  outline-offset: 3px;
  border-radius: 3px;
}

/* Copertine e schede: oltre al contorno si ingrandiscono, così da
   lontano si capisce al volo quale è selezionata. */
.modo-telecomando .thumb:focus,
.modo-telecomando .card:focus {
  outline: 5px solid #ff2c2c;
  outline-offset: 4px;
  transform: scale(1.08);
  box-shadow: 0 10px 32px rgba(0, 0, 0, 0.75);
  z-index: 5;
  position: relative;
}

/* Arrivare su una miniatura deve fare quello che fa il passaggio del
   mouse: l'immagine si scurisce appena, e il titolo sotto risalta.
   Su una parete di copertine tutte uguali il solo contorno si nota
   meno di quanto sembri. */
.modo-telecomando .thumb:focus .thumb-img {
  opacity: 0.8;
}

/* Voci di menu e pulsanti: sfondo pieno, non solo il bordo. */
.modo-telecomando .menu a:focus,
.modo-telecomando .user-dropdown a:focus,
.modo-telecomando .season-btn:focus,
.modo-telecomando .episode-btn:focus,
.modo-telecomando .btn-search:focus,
.modo-telecomando .btn-primary-watch:focus {
  background: #ff2c2c;
  color: #fff;
  outline-offset: 2px;
}

/* Il player selezionato: il contorno abbraccia tutto il riquadro, così
   da lontano si vede che il prossimo OK avvia il video. */
.modo-telecomando .video-js:focus {
  outline: 5px solid #ff2c2c;
  outline-offset: 4px;
}

/* Comandi del player */
.modo-telecomando .video-js .vjs-control:focus {
  outline: 3px solid #ff2c2c;
  outline-offset: -3px;
  background-color: rgba(255, 44, 44, 0.25);
}

/* Video.js nasconde la barra dopo qualche secondo di immobilità. Se
   però il fuoco è lì dentro, nasconderla significa far sparire da
   sotto gli occhi il pulsante che stai per premere. */
.modo-telecomando .video-js .vjs-control-bar:focus-within {
  opacity: 1;
  visibility: visible;
  transition: none;
}

/* Campi di testo e menu a tendina.

   Sono due stati diversi e devono sembrarlo: "sono passato di qui" e
   "sto scrivendo qui dentro". Con le frecce ci si limita a passare;
   si entra solo premendo OK. */
.modo-telecomando input:focus,
.modo-telecomando select:focus,
.modo-telecomando textarea:focus {
  outline: 4px solid #ff2c2c;
  outline-offset: 2px;
  background: #1a1a1a;
  color: #fff;
}

/* Campo aperto: bordo pieno e alone, come una luce accesa. */
.modo-telecomando .in-modifica {
  outline: 4px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 7px rgba(255, 44, 44, 0.55);
  background: #000;
}

/* Mentre si scrive, il resto della pagina si fa da parte: evita di
   cercare con lo sguardo dove si sta digitando. */
.modo-telecomando.campo-aperto :focus:not(.in-modifica) {
  outline-color: transparent;
}

/* Il riquadro del prossimo episodio è il punto in cui si deve poter
   rispondere in fretta: i suoi pulsanti si vedono più degli altri. */
.modo-telecomando .next-episode button:focus {
  outline: 4px solid #fff;
  outline-offset: 2px;
}

/* ─── Schermi grandi ─────────────────────────────────────────────── */

/* Sopra i 1600 pixel siamo quasi certamente su un televisore: testo e
   comandi crescono, perché la distanza di lettura è diversa. */
@media (min-width: 1600px) {
  .modo-telecomando .menu a {
    font-size: 1.15rem;
  }

  .modo-telecomando .video-js .vjs-control-bar {
    height: 4em;
    font-size: 1.2em;
  }

  .modo-telecomando .thumb-title,
  .modo-telecomando .thumb-info {
    font-size: 1.05rem;
  }
}

/* Chi preferisce evitare i movimenti mantiene il contorno, che è
   l'informazione utile, e perde solo l'ingrandimento. */
@media (prefers-reduced-motion: reduce) {
  .modo-telecomando .thumb:focus,
  .modo-telecomando .card:focus {
    transform: none;
  }
}