/* =====================================================================
   Tema NATURA · temi/natura/stile.css
   Una rivista all'aperto: carta, titoli con le grazie (Fraunces), niente
   contorni, forme a foglia (un angolo stretto e tre morbidi), tanta aria,
   linee sottili al posto dei riquadri. Regole del tema in PROMPT.md.
   Colori sempre dalle variabili della palette.
   ===================================================================== */

@font-face { font-family: "Fraunces"; src: url("caratteri/Fraunces.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("caratteri/Fraunces-corsivo.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }

.tema-natura {
  --foglia: 34px 34px 34px 6px;          /* la forma del tema */
  --foglia-piccola: 18px 18px 18px 4px;
  --linea-natura: color-mix(in srgb, var(--testo) 18%, transparent);
  --tenue: color-mix(in srgb, var(--testo) 68%, var(--sfondo));
  --verde-chiaro: color-mix(in srgb, var(--primario) 32%, var(--sfondo));
}

/* ---------- Titoli: grazie, pesi leggeri, corsivo per i dettagli ---------- */
.tema-natura h1, .tema-natura h2, .tema-natura h3 { font-weight: 450; letter-spacing: -.015em; font-variation-settings: "opsz" 96; }
.tema-natura h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); line-height: 1.02; }
.tema-natura .titolo-sezione { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 400; margin-top: 64px; }
.tema-natura .titolo-sezione::after { content: ""; display: block; width: 56px; height: 3px; margin-top: 12px; border-radius: 3px; background: var(--primario); }

/* ---------- Barra e menu: sottile, sulla carta, voce attiva sottolineata ---------- */
.tema-natura .menu { background: color-mix(in srgb, var(--sfondo) 94%, transparent); border-bottom: 1px solid var(--linea-natura); }
.tema-natura .menu-marchio span { font-style: italic; font-weight: 600; color: var(--accento); font-size: 1.5rem; }
.tema-natura .menu-voce { font-family: var(--font-titoli); font-weight: 450; font-size: 1.02rem; border-radius: 0; padding: 10px 12px; border-bottom: 2px solid transparent; }
.tema-natura .menu-voce:hover, .tema-natura .menu-sezione details[open] > .menu-voce { background: transparent; border-bottom-color: var(--primario); }
.tema-natura .menu-voce[aria-current], .tema-natura .menu-voce.attiva { background: transparent; color: var(--accento); border-bottom-color: var(--accento); }
.tema-natura .menu-cta { border-radius: var(--foglia-piccola); font-family: var(--font-testo); font-weight: 700; }
.tema-natura .menu-tendina { background: var(--sfondo); }
.tema-natura .menu-riquadri li { --r-bg: var(--superficie); }
.tema-natura .menu-riquadri li:nth-child(3n+1) { --r-bg: var(--verde-chiaro); }
.tema-natura .menu-riquadri a { border-radius: var(--foglia-piccola); box-shadow: none; }
.tema-natura .menu-riquadri a:hover, .tema-natura .menu-riquadri a:focus-visible { transform: translateY(-2px); box-shadow: 0 14px 26px -18px color-mix(in srgb, var(--accento) 60%, transparent); }
.tema-natura .menu-riquadri .bi { color: var(--accento); }
.tema-natura .riquadro-nome { font-weight: 500; }
.tema-natura .menu-tutte { border-radius: var(--foglia-piccola); background: transparent; border: 1px solid var(--linea-natura); }

/* ---------- Barra in basso (telefono) e fogli ---------- */
.tema-natura .barra-basso { background: var(--sfondo); border-top: 1px solid var(--linea-natura); box-shadow: none; }
.tema-natura .barra-basso a { font-family: var(--font-testo); font-weight: 600; }
.tema-natura .barra-basso a.attiva .bi, .tema-natura .barra-basso a[aria-expanded="true"] .bi { background: var(--verde-chiaro); color: var(--accento); border-radius: 14px 14px 14px 4px; }
.tema-natura .foglio { border-radius: 34px 34px 0 0; }
.tema-natura .foglio h2 { font-weight: 450; }

/* ---------- Pulsanti: a foglia, pieni o con un filo ---------- */
.tema-natura .btn { border-radius: var(--foglia-piccola); font-weight: 700; letter-spacing: .01em; }
.tema-natura .btn:hover, .tema-natura .btn:focus-visible { background: color-mix(in srgb, var(--accento) 10%, var(--superficie)); color: var(--accento); }
.tema-natura .btn-bordo { color: var(--accento); background: transparent; border-width: 1.5px; }
.tema-natura .btn-bordo:hover { background: var(--accento); color: var(--btn-testo); }

/* ---------- Apertura: come la copertina di una rivista ---------- */
.tema-natura .eroe { padding-top: clamp(36px, 6vw, 80px); }
.tema-natura .eroe-adesivo { background: transparent; color: var(--accento); transform: none; padding: 0; border-radius: 0; font: 600 .78rem var(--font-testo); letter-spacing: .22em; }
.tema-natura .eroe-adesivo::before, .tema-natura .eroe-adesivo::after { content: "~"; margin: 0 .6em; color: var(--primario); }
.tema-natura .eroe h1 { font-size: clamp(3rem, 7.5vw, 6rem); font-weight: 380; }
.tema-natura .eroe-claim { font-family: var(--font-titoli); font-style: italic; font-size: clamp(1.15rem, 2vw, 1.5rem); color: var(--tenue); opacity: 1; max-width: 36ch; }
/* Giornate come una riga di testo in corsivo, non come biglietti. */
.tema-natura .eroe-giorni { gap: 6px 0; }
.tema-natura .eroe-giorni li { background: transparent; box-shadow: none; min-width: 0; padding: 4px 14px; border-radius: 0; border-left: 1px solid var(--linea-natura); display: flex; align-items: baseline; gap: 5px; }
.tema-natura .eroe-giorni li:first-child { border-left: 0; }
.tema-natura .eroe-giorni strong { font-size: 1.6rem; font-weight: 450; }
.tema-natura .eroe-sett, .tema-natura .eroe-mese { font: italic 500 1rem var(--font-titoli); text-transform: none; letter-spacing: 0; color: var(--tenue); }
.tema-natura .eroe-ore { display: none; }
.tema-natura .eroe-quando { font-family: var(--font-titoli); font-style: italic; }
.tema-natura .eroe-etichette { gap: 4px 0; }
.tema-natura .eroe-etichette li { background: transparent; padding: 2px 14px; border-radius: 0; border-left: 1px solid var(--linea-natura); color: var(--accento); }
.tema-natura .eroe-etichette li:first-child { border-left: 0; }
.tema-natura .eroe-invito { font-family: var(--font-titoli); font-style: italic; font-weight: 500; font-size: 1.35rem; border-bottom: 1px solid var(--accento); color: var(--accento); }
/* Illustrazione in una cornice ad arco: l'arco è dietro, l'immagine resta intera. */
.tema-natura .eroe-immagine { margin: 12px auto 0; padding: 26px 26px 0; }
.tema-natura .eroe-immagine::before { inset: 0 0 -26px 0; border-radius: 999px 999px 28px 28px; background: var(--verde-chiaro); }
.tema-natura .eroe-immagine img { border-radius: var(--foglia); box-shadow: 0 30px 50px -34px color-mix(in srgb, var(--accento) 70%, transparent); }
@media (max-width: 860px) { .tema-natura .eroe-immagine::before { inset: 0 0 -14px 0; } .tema-natura .eroe-immagine { padding: 14px 14px 0; margin-right: 0; } }

/* ---------- Blocchi della home ---------- */
/* Programma: una linea del tempo con le foglie al posto dei punti. */
.tema-natura .adesso-fasce { border-left: 2px solid var(--primario); margin-left: 8px; }
.tema-natura .adesso-fascia { border-top: 0; position: relative; padding-left: 26px; grid-template-columns: 110px 1fr; }
.tema-natura .adesso-fascia::before { content: ""; position: absolute; left: -9px; top: 20px; width: 16px; height: 16px; border-radius: 10px 10px 10px 2px; background: var(--primario); }
.tema-natura .adesso-fascia.in-corso::before { background: var(--accento); }
.tema-natura .adesso-ora { font-weight: 450; font-style: italic; color: var(--accento); }
.tema-natura .adesso-voce a { font-family: var(--font-titoli); font-weight: 500; font-size: 1.12rem; }
.tema-natura .adesso-live { border-radius: 12px 12px 12px 3px; background: var(--accento); }
.tema-natura .adesso-giorno { font-family: var(--font-titoli); font-style: italic; }
/* Conto alla rovescia: cifre grandi con le grazie, separate da linee sottili. */
.tema-natura .adesso-contatore { background: transparent; color: var(--testo); gap: 0; }
.tema-natura .adesso-contatore div { padding: 0 clamp(14px, 3vw, 34px); border-left: 1px solid var(--linea-natura); }
.tema-natura .adesso-contatore div:first-child { border-left: 0; }
.tema-natura .adesso-contatore span { font-weight: 350; font-size: clamp(3rem, 8vw, 5rem); color: var(--accento); }
.tema-natura .adesso-contatore small { font-family: var(--font-titoli); font-style: italic; text-transform: none; font-size: .95rem; letter-spacing: 0; }
.tema-natura .adesso-attesa .titolo-sezione::after { margin-inline: auto; }

/* Percorsi: pagine come articoli. Il primo grande su un fondo a foglia, gli altri in colonna con una linea sopra. */
.tema-natura .percorsi { grid-template-columns: 1.3fr 1fr; gap: 0 36px; }
.tema-natura .percorso { background: transparent; box-shadow: none; border-radius: 0; border-top: 1px solid var(--linea-natura); padding: 18px 0; grid-template-columns: 84px 1fr auto; }
.tema-natura .percorso:first-child { grid-row: span 4; align-self: start; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 30px; border: 0; border-radius: var(--foglia); background: var(--verde-chiaro); }
.tema-natura .percorso:first-child img { width: 100%; max-height: 300px; object-fit: contain; }
.tema-natura .percorso:first-child strong { font-size: 1.8rem; }
.tema-natura .percorso img { border-radius: var(--foglia-piccola); }
.tema-natura .percorso strong { font-family: var(--font-titoli); font-weight: 500; font-size: 1.25rem; }
.tema-natura .percorso:hover { transform: none; }
.tema-natura .percorso:hover strong { color: var(--accento); }
@media (max-width: 900px) { .tema-natura .percorsi { grid-template-columns: 1fr; } .tema-natura .percorso:first-child { grid-row: auto; } }
.tema-natura .tessera, .tema-natura .mosaico-voce { border-radius: var(--foglia); box-shadow: none; border: 0; }
.tema-natura .mosaico-titolo, .tema-natura .tessera strong { font-weight: 500; }
.tema-natura .griglia-foto img, .tema-natura .ricca-festival-foto img, .tema-natura .locandine img { border-radius: var(--foglia-piccola); }
.tema-natura .ricca-numeri { background: transparent; border-top: 1px solid var(--linea-natura); border-bottom: 1px solid var(--linea-natura); }
.tema-natura .ricca-numeri li { border-left: 1px solid var(--linea-natura); }
.tema-natura .ricca-numeri strong { font-weight: 350; color: var(--accento); }
.tema-natura .ricca-partner li { border: 0; border-radius: var(--foglia-piccola); }
.tema-natura .home-testo { text-align: center; }
.tema-natura .home-testo .testo-lungo p { margin-inline: auto; font-size: 1.1rem; }

/* ---------- Testa di una pagina: titolo da rivista, niente fascia piena ---------- */
body.tema-natura .pagina-testa { background: transparent; color: var(--testo); border-bottom: 1px solid var(--linea-natura); padding: 40px 0 30px; }
.tema-natura .pagina-sezione { color: var(--accento); letter-spacing: .2em; font-size: .75rem; }
.tema-natura .pagina-frase { font-family: var(--font-titoli); font-style: italic; font-size: 1.25rem; color: var(--tenue); }
.tema-natura .pagina-testa-img img { border-radius: var(--foglia); }

/* ---------- Attività: schede a foglia, dati come righe di un articolo ---------- */
.tema-natura .attivita { border: 0; border-radius: 6px 40px 6px 40px; box-shadow: 0 16px 34px -30px color-mix(in srgb, var(--accento) 80%, transparent); padding: 24px 28px; }
.tema-natura .elenco-attivita.alternato .attivita:nth-child(even) { border-radius: 40px 6px 40px 6px; }
.tema-natura .attivita h3 { font-family: var(--font-titoli); font-weight: 500; font-size: 1.45rem; }
.tema-natura .attivita-tipo { background: transparent; color: var(--accento); padding: 0; border-radius: 0; font-family: var(--font-testo); letter-spacing: .16em; font-size: .7rem; }
.tema-natura .attivita-fatti { gap: 0 20px; }
.tema-natura .attivita-fatti li { background: transparent; border-radius: 0; border-bottom: 1px solid var(--linea-natura); padding: 6px 0; }
.tema-natura .attivita-fatti li small { font-family: var(--font-titoli); font-style: italic; text-transform: none; letter-spacing: 0; font-size: .82rem; font-weight: 500; color: var(--accento); opacity: 1; }
.tema-natura .attivita-fatti li.gratis { background: transparent; }
.tema-natura .attivita-caselle span { border-radius: 10px 10px 10px 3px; }
.tema-natura .attivita-foto img { border-radius: var(--foglia-piccola); }
.tema-natura .attivita-nota { font-family: var(--font-titoli); font-style: italic; }
.tema-natura .indice-attivita { background: transparent; border: 1px solid var(--linea-natura); border-radius: var(--foglia-piccola); }
.tema-natura .indice-attivita h3 { font-weight: 500; }
.tema-natura .titolo-elenco { font-weight: 400; }

/* ---------- Programma ---------- */
.tema-natura .programma-schede button, .tema-natura .programma-chip button { border-radius: 14px 14px 14px 4px; border-width: 1.5px; border-color: var(--linea-natura); }
.tema-natura .programma-schede button[aria-selected="true"], .tema-natura .programma-chip button[aria-pressed="true"] { background: var(--accento); color: var(--btn-testo); border-color: var(--accento); }
.tema-natura .programma-data { font-weight: 450; font-style: italic; color: var(--accento); }
.tema-natura .programma-voce { border-top-color: var(--linea-natura); }
.tema-natura .programma-ora strong { font-weight: 450; font-style: italic; color: var(--accento); }
.tema-natura .programma-corpo h3 { font-weight: 500; }

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

@media (prefers-reduced-motion: reduce) {
  .tema-natura .menu-riquadri a { transition: none; }
}

/* ---------- Telefono ---------- */
@media (max-width: 520px) {
  .tema-natura .adesso-fascia { grid-template-columns: 58px 1fr; gap: 8px; padding-left: 18px; }
  .tema-natura .eroe-etichette { flex-direction: column; align-items: center; }
  .tema-natura .eroe-etichette li { border-left: 0; }
  .tema-natura .adesso-contatore div { padding: 0 10px; }
}