/* =====================================================================
   Tema FESTA FAMIGLIE · temi/festa/stile.css
   Un'app per famiglie: tutto tondo, pastello, bolle colorate, carattere
   tondo e grande (Nunito), pulsanti grossi da toccare col pollice, icone
   nei cerchi, pagine come le icone di un'app. Regole del tema in PROMPT.md.
   Colori dalle variabili della palette; le tinte pastello delle tessere
   sono mescolate con la palette, così cambiano con lei.
   ===================================================================== */

@font-face { font-family: "Nunito"; src: url("caratteri/Nunito.woff2") format("woff2"); font-weight: 200 1000; font-style: normal; font-display: swap; }

.tema-festa {
  --pastello-1: color-mix(in srgb, var(--primario) 30%, #fff);
  --pastello-2: color-mix(in srgb, var(--accento) 22%, #fff);
  --pastello-3: #fdf0c4;
  --pastello-4: #e8e0f6;
  --tondo: 999px;
  --ombra-festa: 0 16px 30px -20px rgba(40, 40, 70, .35);
  --ombra-bottone: 0 5px 0 color-mix(in srgb, var(--accento) 70%, #000);
}
.tema-festa.motivo-coriandoli { background:
  radial-gradient(circle at 4% 12%, var(--pastello-2) 0 22px, transparent 23px),
  radial-gradient(circle at 97% 30%, var(--pastello-1) 0 34px, transparent 35px),
  radial-gradient(circle at 92% 72%, var(--pastello-3) 0 18px, transparent 19px),
  radial-gradient(circle at 6% 86%, var(--pastello-4) 0 26px, transparent 27px),
  var(--sfondo); background-attachment: fixed; }

/* ---------- Titoli: tondi, pieni, amichevoli ---------- */
.tema-festa h1, .tema-festa h2, .tema-festa h3 { font-weight: 900; letter-spacing: -.01em; }
.tema-festa .titolo-sezione { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(1.5rem, 3vw, 2rem); }
.tema-festa .titolo-sezione::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--accento); box-shadow: 18px 0 0 var(--primario), 36px 0 0 #f6c945; margin-right: 38px; }

/* ---------- Barra e menu: bianca, staccata, voci a pillola ---------- */
.tema-festa .menu { background: var(--superficie); border-bottom: 0; border-radius: 0 0 28px 28px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.3); }
.tema-festa .menu-marchio span { color: var(--accento); font-weight: 900; }
.tema-festa .menu-voce { border-radius: var(--tondo); font-weight: 800; }
.tema-festa .menu-voce:hover, .tema-festa .menu-sezione details[open] > .menu-voce { background: var(--pastello-1); }
.tema-festa .menu-voce[aria-current], .tema-festa .menu-voce.attiva { background: var(--pastello-1); color: var(--testo); }
.tema-festa .menu-cta { border-radius: var(--tondo); box-shadow: var(--ombra-bottone); font-weight: 900; }
.tema-festa .menu-tendina { border-radius: 0 0 32px 32px; }
.tema-festa .menu-riquadri li:nth-child(4n+1) { --r-bg: var(--pastello-1); }
.tema-festa .menu-riquadri li:nth-child(4n+2) { --r-bg: var(--pastello-2); }
.tema-festa .menu-riquadri li:nth-child(4n+3) { --r-bg: var(--pastello-3); }
.tema-festa .menu-riquadri li:nth-child(4n+4) { --r-bg: var(--pastello-4); }
.tema-festa .menu-riquadri a { border-radius: 28px; }
.tema-festa .menu-riquadri .bi { width: 42px; height: 42px; font-size: 1.2rem; box-shadow: var(--ombra-festa); }
.tema-festa .menu-tutte { border-radius: var(--tondo); }

/* ---------- Barra in basso: come un'app ---------- */
.tema-festa .barra-basso { margin: 0 10px 8px; border-radius: 26px; border-top: 0; box-shadow: 0 10px 30px -10px rgba(0,0,0,.35); bottom: env(safe-area-inset-bottom); padding-bottom: 0; }
.tema-festa .barra-basso a { font-weight: 800; }
.tema-festa .barra-basso a.attiva .bi, .tema-festa .barra-basso a[aria-expanded="true"] .bi { background: var(--pastello-1); }
.tema-festa .foglio { border-radius: 32px 32px 0 0; bottom: calc(76px + env(safe-area-inset-bottom)); }

/* ---------- Pulsanti: grossi, tondi, che si schiacciano ---------- */
.tema-festa .btn { border-radius: var(--tondo); font-weight: 900; padding: .85em 1.5em; box-shadow: var(--ombra-bottone); transition: transform .1s, box-shadow .1s; }
.tema-festa .btn:hover, .tema-festa .btn:focus-visible { background: var(--btn-bg); color: var(--btn-testo); transform: translateY(-1px); }
.tema-festa .btn:active { transform: translateY(4px); box-shadow: 0 1px 0 color-mix(in srgb, var(--accento) 70%, #000); }
.tema-festa .btn-bordo, .tema-festa .btn-bordo:hover { background: var(--superficie); color: var(--testo); border-color: var(--pastello-1); box-shadow: 0 5px 0 var(--pastello-1); }
.tema-festa .btn-piccolo { padding: .6em 1.1em; }

/* ---------- Apertura: una grande bolla con l'illustrazione ---------- */
.tema-festa .eroe { padding-top: 24px; }
.tema-festa .eroe-dentro { background: linear-gradient(135deg, var(--pastello-1), var(--pastello-2)); border-radius: 40px; padding: clamp(18px, 4vw, 44px); position: relative; overflow: hidden; }
.tema-festa .eroe-dentro::before, .tema-festa .eroe-dentro::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; }
.tema-festa .eroe-dentro::before { width: 220px; height: 220px; right: -60px; top: -70px; background: #f6c945; opacity: .45; }
.tema-festa .eroe-dentro::after { width: 120px; height: 120px; left: 38%; bottom: -60px; background: var(--superficie); opacity: .55; }
.tema-festa .eroe-dentro > * { position: relative; z-index: 1; }
.tema-festa .eroe-immagine { margin: 0; }
.tema-festa .eroe-immagine::before { display: none; }
.tema-festa .eroe-immagine img { border-radius: 30px; background: #fff; border: 8px solid #fff; box-shadow: var(--ombra-festa); }
.tema-festa .eroe-adesivo { background: var(--superficie); color: var(--accento); transform: rotate(-2deg); box-shadow: var(--ombra-festa); }
.tema-festa .eroe h1 { font-weight: 900; }
.tema-festa .eroe-claim { font-weight: 700; opacity: 1; }
.tema-festa .eroe-giorni li { border-radius: 28px; background: var(--superficie); box-shadow: var(--ombra-festa); padding: 12px 18px; }
.tema-festa .eroe-giorni strong { color: var(--accento); font-weight: 900; }
.tema-festa .eroe-ore { background: var(--pastello-3); }
.tema-festa .eroe-etichette li { background: var(--superficie); font-weight: 800; }
.tema-festa .eroe-invito { border: 0; border-radius: var(--tondo); padding: 12px 22px; background: var(--accento); color: var(--btn-testo); box-shadow: var(--ombra-bottone); font-weight: 900; }

/* ---------- Blocchi della home ---------- */
/* Tessere: le pagine come le icone di un'app, icona nel cerchio. */
.tema-festa .tessere { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.tema-festa .tessera { align-items: center; text-align: center; padding: 22px 16px; border-radius: 30px; box-shadow: none; }
.tema-festa .tessera:nth-child(4n+1) { background: var(--pastello-1); }
.tema-festa .tessera:nth-child(4n+2) { background: var(--pastello-2); }
.tema-festa .tessera:nth-child(4n+3) { background: var(--pastello-3); }
.tema-festa .tessera:nth-child(4n+4) { background: var(--pastello-4); }
.tema-festa .tessera img { display: none; }
.tema-festa .tessera .tessera-icona { display: grid; opacity: 1; place-items: center; width: 74px; height: 74px; margin-bottom: 6px; border-radius: 50%; background: var(--superficie); font-size: 2rem; color: var(--accento); box-shadow: var(--ombra-festa); }
.tema-festa .tessera strong { font-weight: 900; font-size: 1.12rem; }
.tema-festa .tessera span { font-size: .9rem; }
.tema-festa .tessera:hover { transform: translateY(-4px) rotate(-1deg); }
/* Programma: pillole. */
.tema-festa .adesso-fasce { gap: 10px; }
.tema-festa .adesso-fascia { border-top: 0; background: var(--superficie); border-radius: 28px; padding: 14px 20px; box-shadow: var(--ombra-festa); }
.tema-festa .adesso-fascia.in-corso { background: var(--pastello-3); }
.tema-festa .adesso-ora { color: var(--accento); font-weight: 900; }
.tema-festa .adesso-voce a { font-weight: 800; }
.tema-festa .adesso-live { border-radius: var(--tondo); }
.tema-festa .adesso-contatore { background: transparent; color: var(--testo); gap: 12px; }
.tema-festa .adesso-contatore div { width: clamp(72px, 18vw, 110px); aspect-ratio: 1; display: grid; place-content: center; border-radius: 50%; box-shadow: var(--ombra-festa); }
.tema-festa .adesso-contatore div:nth-child(1) { background: var(--pastello-1); }
.tema-festa .adesso-contatore div:nth-child(2) { background: var(--pastello-2); }
.tema-festa .adesso-contatore div:nth-child(3) { background: var(--pastello-3); }
.tema-festa .adesso-contatore div:nth-child(4) { background: var(--pastello-4); }
.tema-festa .adesso-contatore span { font-weight: 900; font-size: clamp(1.8rem, 5vw, 2.8rem); }
/* Foto e altri blocchi. */
.tema-festa .striscia-foto img, .tema-festa .griglia-foto img { border-radius: 28px; border: 6px solid #fff; box-shadow: var(--ombra-festa); }
.tema-festa .percorso, .tema-festa .mosaico-voce { border-radius: 30px; box-shadow: var(--ombra-festa); border: 0; }
.tema-festa .ricca-numeri li { border-left: 0; background: var(--superficie); border-radius: 26px; padding: 14px 18px; }
.tema-festa .ricca-partner li { border: 0; border-radius: 26px; box-shadow: var(--ombra-festa); }
.tema-festa .home-testo { text-align: center; }
.tema-festa .home-testo .testo-lungo p { margin-inline: auto; font-size: 1.08rem; }

/* ---------- Testa di una pagina: una bolla colorata ---------- */
.tema-festa .pagina-testa { background: transparent; padding: 18px 0 8px; }
.tema-festa .pagina-testa-dentro { background: linear-gradient(135deg, var(--pastello-1), var(--pastello-2)); border-radius: 34px; padding: 26px clamp(18px, 3vw, 34px); }
.tema-festa .pagina-sezione { display: inline-flex; gap: 6px; padding: 4px 12px; border-radius: var(--tondo); background: var(--superficie); text-transform: none; letter-spacing: 0; font-weight: 800; }
.tema-festa .pagina-frase { font-weight: 600; }
.tema-festa .pagina-testa-img img { border-radius: 26px; border: 6px solid #fff; }

/* ---------- Attività: schede tonde, dati come pillole ---------- */
.tema-festa .attivita { border: 0; border-radius: 32px; box-shadow: var(--ombra-festa); padding: 22px 24px; }
.tema-festa .attivita h3 { font-weight: 900; font-size: 1.3rem; }
.tema-festa .attivita-tipo { background: var(--pastello-3); color: var(--testo); border-radius: var(--tondo); font-family: var(--font-testo); font-weight: 900; }
.tema-festa .attivita-fatti li { background: var(--pastello-1); border-radius: 20px; }
.tema-festa .attivita-fatti li:nth-child(even) { background: var(--pastello-4); }
.tema-festa .attivita-fatti li small { letter-spacing: .04em; }
.tema-festa .attivita-caselle span { border-radius: var(--tondo); background: var(--superficie); }
.tema-festa .attivita-foto img { border-radius: 24px; }
.tema-festa .indice-attivita { background: var(--pastello-3); border-radius: 28px; }

/* ---------- Programma ---------- */
.tema-festa .programma-schede button, .tema-festa .programma-chip button { border-radius: var(--tondo); border: 0; background: var(--superficie); box-shadow: var(--ombra-festa); font-weight: 800; }
.tema-festa .programma-schede button[aria-selected="true"], .tema-festa .programma-chip button[aria-pressed="true"] { background: var(--accento); color: var(--btn-testo); }
.tema-festa .programma-voce { border-top: 0; background: var(--superficie); border-radius: 26px; padding: 14px 18px; margin-bottom: 10px; box-shadow: var(--ombra-festa); }
.tema-festa .programma-ora strong { color: var(--accento); font-weight: 900; }

/* Il piede è uguale in tutti i siti (blu InPergine): il tema non lo veste. */
.tema-festa .loghi { border-top: 0; }

@media (max-width: 520px) {
  .tema-festa .eroe-dentro { border-radius: 30px; }
  .tema-festa .tessere { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .tema-festa .tessera:hover, .tema-festa .btn:hover { transform: none; }
  .tema-festa .btn, .tema-festa .tessera { transition: none; }
}