/* =====================================================================
   Tema POP FUMETTO · temi/pop/stile.css
   L'albo a fumetti: vignette con contorno e ombra piena, didascalie
   gialle, titoli stretti in maiuscolo, retino a puntini, un po' di
   inclinazione. Regole del tema in PROMPT.md (stessa cartella).

   Scelte che restano (DECISIONI.md, 24/09/2026): menu CHIARO, contorni
   2px, ombre corte, il nero solo per testo e contorni. Colori sempre
   dalle variabili della palette (--primario, --accento, --testo...):
   i colori fissi qui sotto sono solo le tinte delle vignette.
   ===================================================================== */

.tema-pop {
  /* Tinte delle vignette, a rotazione su mosaico, riquadri e giornate. */
  --pop-1: #9dd8f3;
  --pop-2: #fbe97f;
  --pop-3: #f6b178;
  --pop-4: #9fd694;
  --pop-5: #f4c4dc;
  --pop-contorno: 2px solid var(--testo);
  --pop-ombra: 4px 4px 0 var(--testo);
  --pop-retino: radial-gradient(color-mix(in srgb, var(--testo) 11%, transparent) 1.1px, transparent 1.5px) 0 0 / 10px 10px;
}
.tema-pop.motivo-retino { background: var(--pop-retino), var(--sfondo); }

/* ---------- Titoli: stretti, maiuscoli, compatti ---------- */
.tema-pop h1, .tema-pop h2 { text-transform: uppercase; letter-spacing: 0; }
.tema-pop h1 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); line-height: .95; }
.tema-pop h2 { line-height: 1; }
/* Titoli di sezione come didascalie del fumetto: riquadro giallo inclinato. */
.tema-pop .titolo-sezione {
  display: inline-block; margin-top: 48px; padding: 4px 14px 6px;
  background: var(--primario); color: var(--su-primario);
  border: var(--pop-contorno); box-shadow: 3px 3px 0 var(--testo);
  transform: rotate(-1.2deg);
}

/* ---------- Barra e menu ---------- */
.tema-pop .menu { background: var(--superficie); border-bottom: 3px solid var(--testo); backdrop-filter: none; }
.tema-pop .menu-logo { border: var(--pop-contorno); box-shadow: 3px 3px 0 var(--testo); transform: rotate(-2deg); border-radius: var(--raggio); }
.tema-pop .menu-marchio span { text-transform: uppercase; background: var(--primario); border: var(--pop-contorno); padding: 2px 10px; box-shadow: 3px 3px 0 var(--testo); transform: rotate(-2deg); }
.tema-pop .menu-voce { text-transform: uppercase; font-size: 1.08rem; border-radius: var(--raggio); }
.tema-pop .menu-voce:hover, .tema-pop .menu-sezione details[open] > .menu-voce { background: color-mix(in srgb, var(--primario) 55%, transparent); }
.tema-pop .menu-voce[aria-current], .tema-pop .menu-voce.attiva { background: var(--primario); color: var(--su-primario); box-shadow: inset 0 0 0 2px var(--testo); }
.tema-pop .menu-cta { border: var(--pop-contorno); border-radius: var(--raggio); box-shadow: 3px 3px 0 var(--testo); text-transform: uppercase; transition: transform .12s, box-shadow .12s; }
.tema-pop .menu-cta:hover { background: var(--btn-bg); color: var(--btn-testo); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--testo); }
.tema-pop .menu-tendina { background: var(--pop-retino), var(--sfondo); border-bottom: 3px solid var(--testo); }
.tema-pop .menu-riquadri li:nth-child(5n+1) { --r-bg: var(--pop-1); }
.tema-pop .menu-riquadri li:nth-child(5n+2) { --r-bg: var(--pop-2); }
.tema-pop .menu-riquadri li:nth-child(5n+3) { --r-bg: var(--pop-3); }
.tema-pop .menu-riquadri li:nth-child(5n+4) { --r-bg: var(--pop-4); }
.tema-pop .menu-riquadri li:nth-child(5n+5) { --r-bg: var(--pop-5); }
.tema-pop .menu-riquadri a { color: #1d1b1a; border: var(--pop-contorno); border-radius: var(--raggio); box-shadow: 3px 3px 0 var(--testo); }
.tema-pop .menu-riquadri a:hover, .tema-pop .menu-riquadri a:focus-visible { transform: translate(-2px, -2px) rotate(-.6deg); box-shadow: 6px 6px 0 var(--testo); }
.tema-pop .menu-riquadri .bi { border: var(--pop-contorno); background: #fff; }
.tema-pop .riquadro-nome { text-transform: uppercase; }
.tema-pop .menu-tutte { border: var(--pop-contorno); border-radius: var(--raggio); background: var(--superficie); text-transform: uppercase; }

/* ---------- Barra in basso (telefono) e fogli ---------- */
.tema-pop .barra-basso { background: var(--superficie); border-top: 3px solid var(--testo); box-shadow: none; }
.tema-pop .barra-basso a { text-transform: uppercase; font-size: .7rem; letter-spacing: .02em; }
.tema-pop .barra-basso a.attiva .bi, .tema-pop .barra-basso a[aria-expanded="true"] .bi { background: var(--primario); color: var(--su-primario); box-shadow: inset 0 0 0 2px var(--testo); }
.tema-pop .foglio { border: 3px solid var(--testo); border-bottom: 0; border-radius: var(--raggio) var(--raggio) 0 0; }
.tema-pop .foglio h2 { text-transform: uppercase; }
.tema-pop .foglio a .bi { color: var(--testo); }

/* ---------- Pulsanti: adesivi che si schiacciano ---------- */
.tema-pop .btn {
  border: var(--pop-contorno); border-radius: var(--raggio);
  background: var(--primario); color: var(--su-primario);
  box-shadow: 3px 3px 0 var(--testo); text-transform: uppercase; font-weight: 800;
  transition: transform .12s ease, box-shadow .12s ease;
}
.tema-pop .btn:hover, .tema-pop .btn:focus-visible { background: var(--primario); color: var(--su-primario); transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--testo); }
.tema-pop .btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--testo); }
.tema-pop .btn-bordo, .tema-pop .btn-bordo:hover { background: var(--superficie); color: var(--testo); }
.tema-pop .btn-iscrizioni, .tema-pop .btn-iscrizioni:hover { background: var(--accento); color: var(--btn-testo); }

/* ---------- Apertura della home ---------- */
.tema-pop .eroe { background: var(--pop-retino), color-mix(in srgb, var(--primario) 22%, var(--sfondo)); border-bottom: 3px solid var(--testo); }
.tema-pop .eroe-immagine { transform: rotate(-1.5deg); }
.tema-pop .eroe-immagine::before { background: var(--pop-1); border: 3px solid var(--testo); border-radius: var(--raggio); }
.tema-pop .eroe-immagine img { border: 3px solid var(--testo); border-radius: var(--raggio); box-shadow: none; }
.tema-pop .eroe-adesivo { background: var(--accento); color: var(--btn-testo); border: var(--pop-contorno); box-shadow: 3px 3px 0 var(--testo); }
.tema-pop .eroe h1 { font-size: clamp(2.8rem, 6.4vw, 5.4rem); }
/* Lo slogan come nuvoletta del fumetto. */
.tema-pop .eroe-claim { position: relative; padding: 10px 16px; background: var(--superficie); border: var(--pop-contorno); border-radius: 18px; font-weight: 700; opacity: 1; }
.tema-pop .eroe-claim::after { content: ""; position: absolute; left: 26px; bottom: -11px; width: 18px; height: 18px; background: var(--superficie); border-right: var(--pop-contorno); border-bottom: var(--pop-contorno); transform: skewX(35deg) rotate(45deg); }
.tema-pop .eroe-giorni li { border: var(--pop-contorno); border-radius: var(--raggio); box-shadow: var(--pop-ombra); color: #1d1b1a; }
.tema-pop .eroe-giorni li:nth-child(odd) { background: var(--pop-2); transform: rotate(-1.5deg); }
.tema-pop .eroe-giorni li:nth-child(even) { background: var(--pop-3); transform: rotate(2deg); }
.tema-pop .eroe-giorni strong { font-size: 2.6rem; }
.tema-pop .eroe-ore { background: #fff; border: 1.5px solid var(--testo); }
.tema-pop .eroe-etichette li { background: var(--superficie); border: var(--pop-contorno); }
.tema-pop .eroe-invito { text-transform: uppercase; border: var(--pop-contorno); border-radius: var(--raggio); padding: 10px 18px; background: var(--accento); color: var(--btn-testo); box-shadow: var(--pop-ombra); }
.tema-pop .eroe-invito:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--testo); }

/* ---------- Blocchi della home ---------- */
/* Presentazione: foto come vignette. */
.tema-pop .ricca-festival h2 { text-transform: uppercase; }
.tema-pop .ricca-festival-foto img, .tema-pop .griglia-foto img, .tema-pop .locandine img { border: var(--pop-contorno); border-radius: var(--raggio); box-shadow: 3px 3px 0 var(--testo); }
.tema-pop .locandine li:nth-child(3n+1) { transform: rotate(-1deg); }
.tema-pop .locandine li:nth-child(3n+2) { transform: rotate(1deg); }

/* Programma a orari: una striscia di vignette. */
.tema-pop .adesso-fasce { gap: 12px; }
.tema-pop .adesso-fascia { background: var(--superficie); border: var(--pop-contorno); border-radius: var(--raggio); box-shadow: var(--pop-ombra); padding: 12px 16px; }
.tema-pop .adesso-fascia.in-corso { background: var(--pop-2); color: #1d1b1a; }
.tema-pop .adesso-ora { font-stretch: 75%; text-transform: uppercase; }
.tema-pop .adesso-live { background: var(--accento); border: var(--pop-contorno); border-radius: var(--raggio); }
.tema-pop .adesso-voce a { font-weight: 800; }
.tema-pop .adesso-giorno { font-weight: 800; text-transform: uppercase; font-size: .9rem; letter-spacing: .03em; }

/* Numeri: bollini da copertina. */
.tema-pop .ricca-numeri { background: var(--superficie); border-top: 3px solid var(--testo); border-bottom: 3px solid var(--testo); }
.tema-pop .ricca-numeri li { border: var(--pop-contorno); border-radius: var(--raggio); padding: 12px 16px; box-shadow: 3px 3px 0 var(--testo); color: #1d1b1a; }
.tema-pop .ricca-numeri li:nth-child(4n+1) { background: var(--pop-1); }
.tema-pop .ricca-numeri li:nth-child(4n+2) { background: var(--pop-2); transform: rotate(1deg); }
.tema-pop .ricca-numeri li:nth-child(4n+3) { background: var(--pop-3); }
.tema-pop .ricca-numeri li:nth-child(4n+4) { background: var(--pop-4); transform: rotate(-1deg); }

/* Mosaico delle aree: tavola a fumetti, ogni vignetta il suo colore. */
.tema-pop .mosaico { gap: 14px; }
.tema-pop .mosaico-voce { border: var(--pop-contorno); border-radius: var(--raggio); box-shadow: var(--pop-ombra); color: #1d1b1a; }
.tema-pop .mosaico-voce:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--testo); }
.tema-pop .mosaico-voce img { border-bottom: var(--pop-contorno); background: #fff; }
.tema-pop .mosaico-voce:nth-child(5n+1) { background: var(--pop-1); }
.tema-pop .mosaico-voce:nth-child(5n+2) { background: var(--pop-2); }
.tema-pop .mosaico-voce:nth-child(5n+3) { background: var(--pop-3); }
.tema-pop .mosaico-voce:nth-child(5n+4) { background: var(--pop-4); }
.tema-pop .mosaico-voce:nth-child(5n+5) { background: var(--pop-5); }
.tema-pop .mosaico-voce.grande { transform: rotate(-.6deg); }
.tema-pop .mosaico-voce.grande:hover { transform: rotate(-.6deg) translate(-2px, -2px); }
.tema-pop .mosaico-titolo { text-transform: uppercase; font-weight: 800; }

/* Percorsi e tessere (se il tema li usa). */
.tema-pop .percorso, .tema-pop .tessera { border: var(--pop-contorno); border-radius: var(--raggio); box-shadow: var(--pop-ombra); }
.tema-pop .percorso strong, .tema-pop .tessera strong { text-transform: uppercase; }

/* Partner. */
.tema-pop .ricca-partner li { border: var(--pop-contorno); border-radius: var(--raggio); background: #fff; }

/* ---------- Testa di una pagina: fascia a retino ---------- */
body.tema-pop .pagina-testa { background: var(--pop-retino), color-mix(in srgb, var(--primario) 45%, var(--sfondo)); color: var(--testo); border-bottom: 3px solid var(--testo); }
.tema-pop .pagina-sezione { display: inline-block; padding: 2px 10px; background: var(--superficie); border: var(--pop-contorno); border-radius: var(--raggio); }
.tema-pop .pagina-testa-img img { border: var(--pop-contorno); box-shadow: 3px 3px 0 var(--testo); }

/* ---------- Attività: vignette ---------- */
.tema-pop .attivita { border: var(--pop-contorno); border-radius: var(--raggio); box-shadow: var(--pop-ombra); }
.tema-pop .attivita h3 { font-family: var(--font-testo); font-weight: 800; text-transform: none; font-stretch: 100%; }
.tema-pop .attivita-tipo { background: var(--primario); color: var(--su-primario); border: 1.5px solid var(--testo); border-radius: var(--raggio); }
.tema-pop .attivita-fatti li { background: color-mix(in srgb, var(--primario) 18%, var(--superficie)); border: 1.5px solid var(--testo); border-radius: var(--raggio); }
.tema-pop .attivita-foto img { border: var(--pop-contorno); border-radius: var(--raggio); }
.tema-pop .elenco-attivita.alternato .attivita:nth-child(4n+2) { transform: rotate(.3deg); }
.tema-pop .elenco-attivita.alternato .attivita:nth-child(4n+4) { transform: rotate(-.3deg); }
.tema-pop .indice-attivita { border: 2px dashed var(--testo); background: color-mix(in srgb, var(--primario) 16%, var(--superficie)); }

/* ---------- Programma ---------- */
.tema-pop .programma-corpo h3 { text-transform: none; font-stretch: 100%; font-family: var(--font-testo); font-weight: 800; }
.tema-pop .programma-schede button, .tema-pop .programma-chip button { border-radius: var(--raggio); font-family: var(--font-titoli); font-stretch: 85%; text-transform: uppercase; }
.tema-pop .programma-schede button[aria-selected="true"], .tema-pop .programma-chip button[aria-pressed="true"] { background: var(--primario); color: var(--su-primario); box-shadow: 2px 2px 0 var(--testo); }
.tema-pop .programma-voce { border-top: var(--pop-contorno); }
.tema-pop .programma-ora strong { font-stretch: 75%; }

/* Il piede è uguale in tutti i siti (blu InPergine): il tema non lo veste. */
.tema-pop .loghi { border-top: 3px solid var(--testo); background: var(--superficie); }

/* ---------- Meno movimento ---------- */
@media (prefers-reduced-motion: reduce) {
  .tema-pop .btn, .tema-pop .mosaico-voce, .tema-pop .menu-cta { transition: none; }
  .tema-pop .mosaico-voce.grande, .tema-pop .mosaico-voce.grande:hover { transform: none; }
}
/* Sul telefono niente inclinazioni sulle attività: il testo resta dritto. */
@media (max-width: 760px) {
  .tema-pop .elenco-attivita .attivita { transform: none !important; }
}

/* Conto alla rovescia del blocco programma: vignette con le cifre. */
.tema-pop .adesso-contatore { background: transparent; color: var(--testo); gap: 12px; }
.tema-pop .adesso-contatore div { background: var(--superficie); border: var(--pop-contorno); border-radius: var(--raggio); box-shadow: var(--pop-ombra); padding: 10px 14px; min-width: 88px; }
.tema-pop .adesso-contatore div:nth-child(1) { background: var(--pop-2); color: #1d1b1a; transform: rotate(-1.5deg); }
.tema-pop .adesso-contatore div:nth-child(2) { background: var(--pop-1); color: #1d1b1a; transform: rotate(1deg); }
.tema-pop .adesso-contatore div:nth-child(3) { background: var(--pop-3); color: #1d1b1a; transform: rotate(-1deg); }
.tema-pop .adesso-contatore div:nth-child(4) { background: var(--pop-4); color: #1d1b1a; transform: rotate(1.5deg); }
.tema-pop .adesso-contatore span { font-stretch: 75%; }
.tema-pop .adesso-attesa .adesso-giorno { font-weight: 800; }