/* ==========================================================================
   EtnAvventura — stili delle funzioni dinamiche
   Estende css/style.css senza modificarlo: barra di stato con meteo,
   modulo di prenotazione, integrazioni al calendario pubblico.
   ========================================================================== */

:root {
  --announcement-height: 42px;
  --verde-aperto: #2f6f3e;
  --verde-aperto-scuro: #24572f;
  --ok: #2f7a3e;
  --ko: #c02020;
}

/* ==========================================================================
   1. Barra di stato del parco
   ========================================================================== */

.park-announcement {
  box-shadow: 0 1px 0 #0000001f;
}

.park-announcement.is-open {
  background: linear-gradient(90deg, var(--verde-aperto-scuro), var(--verde-aperto));
}

.park-announcement.is-closed {
  background: linear-gradient(90deg, var(--red-dark), var(--red));
}

.park-announcement__inner {
  gap: 18px;
}

.park-announcement__today {
  flex: 0 1 auto;
  min-width: 0;
}

.park-announcement__today strong {
  letter-spacing: .1em;
}

/* Pastiglia luminosa: verde/rosso è ridondato dalla forma per chi non
   distingue i colori, e il battito richiama lo stato "in diretta". */
.park-announcement__pulse {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #8ce99a;
  box-shadow: 0 0 0 0 #8ce99a99;
  animation: etna-pulse 2.4s ease-out infinite;
}

.park-announcement.is-closed .park-announcement__pulse {
  background: #ffd3d3;
  box-shadow: 0 0 0 0 #ffd3d399;
  animation: none;
}

@keyframes etna-pulse {
  0%   { box-shadow: 0 0 0 0 #8ce99a99; }
  70%  { box-shadow: 0 0 0 7px #8ce99a00; }
  100% { box-shadow: 0 0 0 0 #8ce99a00; }
}

.park-announcement__date,
.park-announcement__hours {
  opacity: .82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.park-announcement__link {
  color: var(--white);
  opacity: .78;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
  font-size: inherit;
  font-weight: 600;
  white-space: nowrap;
  transition: opacity .18s;
}

.park-announcement__link:hover,
.park-announcement__link:focus-visible {
  opacity: 1;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   2. Widget meteo
   ========================================================================== */

.meteo-widget {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  color: var(--white);
  white-space: nowrap;
}

.meteo-widget__icona {
  width: 20px;
  height: 22px;
  flex: none;
  opacity: .95;
}

.meteo-widget strong {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .04em;
}

.meteo-widget__desc {
  opacity: .78;
}

.meteo-widget__luogo {
  opacity: .55;
  padding-left: 8px;
  border-left: 1px solid #ffffff45;
}

/* ==========================================================================
   3. Modulo di prenotazione
   ========================================================================== */

.booking-form {
  --campo-bordo: #1718132e;
}

.booking-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.booking-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.booking-field--full {
  grid-column: 1 / -1;
}

.booking-field label,
.booking-label {
  display: block;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #17181399;
}

.booking-field input[type="text"],
.booking-field input[type="email"],
.booking-field input[type="tel"],
.booking-field input[type="date"],
.booking-field select,
.booking-field textarea,
.booking-compact-row select,
.booking-compact-row input {
  width: 100%;
  padding: 14px 16px;
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--campo-bordo);
  border-radius: 12px;
  transition: border-color .18s, box-shadow .18s;
}

.booking-field textarea {
  resize: vertical;
  min-height: 90px;
}

.booking-field input:focus,
.booking-field select:focus,
.booking-field textarea:focus {
  outline: 0;
  border-color: var(--red);
  box-shadow: 0 0 0 3px #e4272e26;
}

.booking-field.is-invalid input,
.booking-field.is-invalid select,
.booking-field.is-invalid textarea {
  border-color: var(--ko);
}

.booking-hint {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: #17181399;
}

.booking-hint--center { text-align: center; }
.booking-hint--ok  { color: var(--ok);  font-weight: 600; }
.booking-hint--ko  { color: var(--ko);  font-weight: 600; }

.booking-error {
  margin: 8px 0 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--ko);
}

.booking-error--box {
  grid-column: 1 / -1;
  padding: 14px 16px;
  background: #fdeaea;
  border-radius: 12px;
}

/* -------------------------------------------------- scelta dei percorsi */

.booking-group {
  margin: 0 0 18px;
  padding: 0;
  border: 0;
}

.booking-group legend {
  padding: 0 0 10px;
  font-family: var(--etna-display);
  font-size: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--ink);
}

.booking-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  background: var(--white);
  border: 1px solid var(--campo-bordo);
  border-radius: 14px;
  margin-bottom: 8px;
  transition: border-color .18s, background-color .18s, box-shadow .18s;
}

.booking-option.is-selected {
  border-color: var(--red);
  background: #fff8f8;
  box-shadow: 0 6px 20px #e4272e14;
}

.booking-option__info { min-width: 0; }

.booking-option__info strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.booking-option__info small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #17181399;
}

.booking-option__durata { font-weight: 600; }

.booking-option__prezzo {
  font-family: var(--etna-display);
  font-size: 24px;
  font-weight: 600;
  white-space: nowrap;
}

/* -------------------------------------------------- selettore quantità */

.booking-stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--cream);
  border-radius: 999px;
  padding: 3px;
}

.booking-stepper__btn {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: background-color .16s, color .16s;
}

.booking-stepper__btn:hover,
.booking-stepper__btn:focus-visible {
  background: var(--red);
  color: var(--white);
  outline: 0;
}

.booking-stepper input {
  width: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: center;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  -moz-appearance: textfield;
  appearance: textfield;
}

.booking-stepper input::-webkit-outer-spin-button,
.booking-stepper input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.booking-compact-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
}

/* -------------------------------------------------- totale */

.booking-total {
  padding: 18px 20px;
  background: var(--cream);
  border-radius: 16px;
}

.booking-total__voce,
.booking-total__somma {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 5px 0;
  font-size: 14px;
}

.booking-total__somma {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.booking-total__somma strong {
  font-family: var(--etna-display);
  font-size: 30px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* -------------------------------------------------- privacy e invio */

.booking-privacy label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  font-size: 13.5px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: 0;
  text-transform: none;
  color: #171813c4;
  cursor: pointer;
}

.booking-privacy input {
  flex: none;
  width: 19px;
  height: 19px;
  margin-top: 1px;
  accent-color: var(--red);
}

.booking-submit {
  width: 100%;
  gap: 12px;
}

.booking-submit[disabled] {
  opacity: .6;
  cursor: progress;
  transform: none;
}

/* -------------------------------------------------- esito */

.booking-feedback {
  margin-top: 22px;
  padding: 26px;
  background: var(--cream);
  border-radius: 18px;
  text-align: center;
}

.booking-feedback.is-ok {
  background: #eaf6ec;
}

.booking-feedback__mark {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--ok);
  color: var(--white);
  font-size: 22px;
  font-weight: 700;
}

.booking-feedback h3 {
  margin: 0;
  font-family: var(--etna-display);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.booking-feedback__code {
  margin: 10px 0 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
}

.booking-closed {
  padding: 28px;
  background: var(--cream);
  border-radius: 18px;
}

.booking-closed h3 {
  margin: 6px 0 10px;
  font-family: var(--etna-display);
  font-size: 26px;
  font-weight: 600;
  line-height: 1.15;
}


/* ==========================================================================
   3b. Schede prenotazione / preventivo
   ========================================================================== */

.contact-tabs {
  align-self: center;
  background: var(--paper);
  border-radius: 44px;
  padding: clamp(28px, 4vw, 48px);
  box-shadow: 0 24px 80px #1b1f1814;
}

.contact-tabs__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 28px;
}

.contact-tab {
  display: block;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  transition: background-color .18s, border-color .18s, color .18s;
}

.contact-tab strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}

.contact-tab small {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #17181399;
}

.contact-tab:hover { border-color: var(--red); }

.contact-tab.is-active {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}

.contact-tab.is-active small { color: #ffffffa8; }

/* Senza JavaScript restano visibili entrambi i pannelli, ciascuno raggiungibile
   dal proprio collegamento: la scheda diventa un semplice indice. */
.contact-panel + .contact-panel { margin-top: 40px; padding-top: 34px; border-top: 1px solid var(--line); }
.js-tabs .contact-panel[hidden] { display: none; }
.js-tabs .contact-panel + .contact-panel { margin-top: 0; padding-top: 0; border-top: 0; }

/* Nel riquadro le colonne sono già strette: una sola incolonnatura. */
.contact-tabs .booking-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }

/* -------------------------------------------------- servizi del preventivo */

.booking-servizi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 8px;
}

.booking-servizio {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 11px 14px;
  background: var(--white);
  border: 1px solid var(--campo-bordo, #1718132e);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .16s, background-color .16s;
}

.booking-servizio input {
  flex: none;
  width: 18px;
  height: 18px;
  accent-color: var(--red);
}

.booking-servizio:hover { border-color: var(--red); }
.booking-servizio:has(input:checked) { border-color: var(--red); background: #fff8f8; }

.booking-aside__testo {
  margin: 0 0 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  line-height: 1.6;
  color: #171813c4;
}

/* ==========================================================================
   4. Pagina "Prenota"
   ========================================================================== */

.booking-section {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 64px;
  padding-top: 90px;
  padding-bottom: 100px;
  align-items: start;
}

.booking-section__intro > p {
  max-width: 42ch;
  color: #171813c4;
}

.booking-steps {
  list-style: none;
  margin: 30px 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.booking-steps li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.booking-steps li > span {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-family: var(--etna-display);
  font-size: 17px;
  font-weight: 600;
}

.booking-steps strong { display: block; font-size: 15px; }

.booking-steps small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: #17181399;
}

.booking-aside {
  padding: 22px 24px;
  background: var(--cream);
  border-radius: 18px;
}

.booking-aside a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  transition: color .18s;
}

.booking-aside a:last-child { border-bottom: 0; }
.booking-aside a:hover { color: var(--red); }

.booking-aside a span {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #17181380;
}

.booking-section__form {
  padding: 34px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 24px;
}

/* -------------------------------------------------- conferma a pagina intera */

.booking-success {
  padding-top: 90px;
  padding-bottom: 110px;
}

.booking-success__card {
  max-width: 640px;
  margin: 0 auto;
  padding: 48px 40px;
  background: var(--cream);
  border-radius: 24px;
  text-align: center;
}

.booking-success__mark {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--ok);
  color: var(--white);
  font-size: 28px;
  font-weight: 700;
}

.booking-success__card h2 {
  margin: 6px 0 14px;
  font-family: var(--etna-display);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 600;
  line-height: 1.12;
}

.booking-success__code {
  display: inline-block;
  margin: 0 0 18px;
  padding: 9px 18px;
  background: var(--white);
  border-radius: 999px;
  font-size: 14px;
  letter-spacing: .06em;
}

.booking-success__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}

/* ==========================================================================
   5. Calendario pubblico
   ========================================================================== */

/* Il modulo serve solo a navigare fra i mesi: non deve creare un box. */
.calendar-form {
  margin: 0;
  padding: 0;
  border: 0;
}

.calendar-day.is-past { opacity: .48; }

.calendar-day.is-today {
  box-shadow: inset 0 0 0 3px var(--ink);
}

.calendar-day__nota {
  display: block;
  max-width: 100%;
  margin-top: 2px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.calendar-extra {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 46px;
}

.calendar-extra__box {
  padding: 26px 28px;
  background: var(--cream);
  border-radius: 20px;
}

.calendar-extra__box--cta {
  background: var(--ink);
  color: var(--white);
}

.calendar-extra__box--cta .eyebrow { color: var(--red); }

.calendar-extra__box h3 {
  margin: 8px 0 8px;
  font-family: var(--etna-display);
  font-size: 28px;
  font-weight: 600;
  line-height: 1.1;
}

.calendar-extra__box--cta .button { margin-top: 16px; }

.calendar-extra ul {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
}

.calendar-extra li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}

.calendar-extra li:last-child { border-bottom: 0; }
.calendar-extra li span { color: #17181399; text-align: right; }

/* ==========================================================================
   6. Richiamo finale nella pagina Tariffe
   ========================================================================== */

.pricing-cta {
  padding-top: 20px;
  padding-bottom: 96px;
}

.pricing-cta__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 40px 44px;
  background: var(--ink);
  color: var(--white);
  border-radius: 24px;
}

.pricing-cta__inner .eyebrow { color: var(--red); }

.pricing-cta__inner h2 {
  margin: 8px 0 8px;
  font-family: var(--etna-display);
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 600;
  line-height: 1.05;
}

.pricing-cta__inner p {
  margin: 0;
  max-width: 46ch;
  color: #ffffffb8;
}

/* ==========================================================================
   7. Adattamenti responsive
   ========================================================================== */

@media (max-width: 1100px) {
  .booking-section {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

@media (max-width: 900px) {
  .park-announcement__link { display: none; }
  .meteo-widget__luogo { display: none; }
}

@media (max-width: 760px) {
  :root { --announcement-height: 38px; }

  /* Nascosti data e orari, spariscono anche i puntini che li separavano. */
  .park-announcement__date,
  .park-announcement__hours,
  .park-announcement__dot { display: none; }

  .meteo-widget__desc { display: none; }

  .booking-grid { grid-template-columns: minmax(0, 1fr); }

  .booking-option {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: 12px;
  }

  .booking-option__prezzo { text-align: right; }
  .booking-stepper { grid-column: 1 / -1; justify-self: start; }

  .booking-section__form { padding: 24px 20px; }
  .contact-tabs { padding: 22px 18px; border-radius: 28px; }
  .contact-tabs__nav { grid-template-columns: minmax(0, 1fr); }
  .booking-servizi { grid-template-columns: minmax(0, 1fr); }
  .calendar-extra { grid-template-columns: minmax(0, 1fr); }
  .pricing-cta__inner { padding: 30px 26px; }
  .booking-success__card { padding: 36px 24px; }
}

@media (max-width: 420px) {
  .park-announcement__today strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .booking-compact-row { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   Accesso al pannello di gestione
   Ultima voce della riga di chiusura: deve essere raggiungibile da chi lavora
   al parco e passare inosservata a tutti gli altri.
   ========================================================================== */

.footer-admin {
  color: #ffffff73;
  text-decoration: none;
  transition: color .16s;
}

.footer-admin:hover,
.footer-admin:focus-visible { color: #ffffff; }


/* ==========================================================================
   Mappa nella sezione "Dove siamo" della home
   Il riquadro ospita la mappa di Google al posto del disegno stilizzato.
   Posizionamento assoluto: il contenitore ha già position:relative e la sua
   altezza minima, quindi la mappa lo riempie a ogni dimensione di schermo.
   ========================================================================== */

/* Il riquadro aveva due contorni decorativi disegnati con i pseudo-elementi:
   con la mappa vera davanti non servono più. */
.location__map::before,
.location__map::after { content: none; }

.location__map iframe {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(.78) contrast(.95);
}

/* ==========================================================================
   Ponte fra i blocchi di WordPress e il design del sito
   I contenuti sono blocchi standard (paragrafo, titolo, immagine, pulsante):
   qui il markup che producono viene ricondotto alle regole già esistenti,
   invece di riscrivere il design per adattarlo ai blocchi.
   ========================================================================== */

/* I contenitori dei blocchi non devono aggiungere spaziature proprie. */
.hero.wp-block-group,
.wp-block-group.section-shell { margin-block: 0; }

/* Video di copertina: il blocco video sta dentro il riquadro a tutta pagina. */
.hero__media .wp-block-video,
.hero__media figure { width: 100%; height: 100%; margin: 0; }
.hero__media .wp-block-video video { width: 100%; height: 100%; object-fit: cover; }

/* Pulsanti.
   Le classi stanno sul contenitore del blocco, mentre l'aspetto va dato al
   collegamento che sta dentro: per questo il contrassegno è "etna-btn" e non
   "button", che disegnerebbe anche il contenitore. */
.wp-block-button.etna-btn > .wp-block-button__link,
.etna-btn .elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  min-height: 58px;
  padding: 0 25px;
  border: 0;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition: transform .22s, background-color .22s, color .22s, border-color .22s;
}

.wp-block-button.etna-btn--red > .wp-block-button__link,
.etna-btn--red .elementor-button {
  background: var(--red);
  color: var(--white);
}
.wp-block-button.etna-btn--red > .wp-block-button__link:hover,
.wp-block-button.etna-btn--red > .wp-block-button__link:focus,
.etna-btn--red .elementor-button:hover,
.etna-btn--red .elementor-button:focus {
  background: var(--red-dark);
  color: var(--white);
  transform: translateY(-2px);
}

.wp-block-button.etna-btn--glass > .wp-block-button__link,
.etna-btn--glass .elementor-button {
  color: var(--white);
  background: #ffffff14;
  border: 1px solid #ffffff85;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wp-block-button.etna-btn--glass > .wp-block-button__link:hover,
.wp-block-button.etna-btn--glass > .wp-block-button__link:focus,
.etna-btn--glass .elementor-button:hover,
.etna-btn--glass .elementor-button:focus {
  background: #ffffff29;
  color: var(--white);
  transform: translateY(-2px);
}

.wp-block-button.etna-btn--outline > .wp-block-button__link,
.etna-btn--outline .elementor-button {
  color: var(--white);
  background: transparent;
  border: 1px solid #ffffff61;
}
.wp-block-button.etna-btn--outline > .wp-block-button__link:hover,
.wp-block-button.etna-btn--outline > .wp-block-button__link:focus,
.etna-btn--outline .elementor-button:hover,
.etna-btn--outline .elementor-button:focus {
  background: #ffffff1f;
  color: var(--white);
  border-color: #ffffffb0;
  transform: translateY(-2px);
}

/* La riga di pulsanti dell'hero resta allineata come nel design. */
.hero__actions.wp-block-buttons { flex-wrap: wrap; gap: 10px; }

/* Striscia scorrevole: le voci sono paragrafi, non più <span>. */
.ticker__track > p,
.ticker__track > .wp-block-paragraph { margin: 0; }


/* ==========================================================================
   Barra di stato ancora assente
   L'intestazione è fissata a "altezza della barra + 16px": finché la barra
   verde con apertura e meteo non arriva (fa parte del plugin del parco), quello
   spazio resterebbe vuoto sopra il menu.
   ========================================================================== */

:root { --announcement-height: 0px; }

/* Contenuti generati prima della correzione: il contenitore del blocco portava
   le classi del pulsante e veniva disegnato anche lui. Qui viene neutralizzato,
   così le pagine già create non mostrano la doppia cornice. */
.wp-block-button.button {
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}


/* ==========================================================================
   Elementor
   Ogni widget di Elementor avvolge il proprio contenuto in due contenitori.
   Il design però è costruito su griglie che dispongono i figli diretti delle
   sezioni: con quei contenitori in mezzo, le griglie non vedono più i loro
   elementi. "display: contents" li rende trasparenti al layout, lasciando
   intatto tutto il resto.
   ========================================================================== */

.etna-sez > .elementor-widget,
.etna-sez > .elementor-widget > .elementor-widget-container {
  display: contents;
}

/* I contenitori di Elementor non devono aggiungere spaziature o direzioni
   proprie: dispone il CSS della sezione. */
.etna-sez.hero,
.etna-sez.intro,
.etna-sez.experiences,
.etna-sez.feature,
.etna-sez.picnic,
.etna-sez.groups,
.etna-sez.party,
.etna-sez.relax,
.etna-sez.location,
.etna-sez.quote-section,
.etna-sez.ticker { gap: 0; }

/* Il nome della variabile del carattere dei titoli era "--display", lo stesso
   che Elementor usa per la disposizione dei suoi contenitori: dentro una
   sezione Elementor i titoli finivano in un carattere con grazie perché
   var(--display) valeva "flex". Rinominata in --etna-display. */

/* I contenitori di Elementor centrano i figli: nel design gli elementi occupano
   tutta la larghezza disponibile. Attenzione a non toccare "justify-content":
   diverse sezioni sono griglie e lì quella proprietà decide dove sta la colonna,
   non l'allineamento del testo. */
.etna-sez { align-items: stretch; }

/* Elementor azzera i margini dei contenitori dal foglio del kit, che viene
   caricato per ultimo: qui serve !important, altrimenti le sezioni a larghezza
   massima resterebbero incollate al bordo sinistro. */
.elementor .etna-sez.section-shell,
.elementor .etna-sez .section-shell { margin-inline: auto !important; }

/* Elementor impone height:auto a tutte le immagini (.elementor img): le foto di
   copertina, che nel design riempiono la sezione, vanno riaffermate. */
.elementor [class*="hero__image"],
.elementor .quick-card img,
.elementor .course-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sulle copertine scure il titolo deve prendere il colore della sezione: il kit
   di Elementor lo forzerebbe al colore dei titoli, spezzando l'ereditarietà. */
/* Il kit di Elementor impone un colore ai titoli e ai testi: dentro le nostre
   sezioni deve vincere il colore della sezione, altrimenti sulle fasce scure
   (parco avventura, relax, copertine) si legge nero su nero. */
.etna-sez .elementor-heading-title,
.etna-sez .elementor-widget-text-editor,
.etna-sez .elementor-widget-text-editor p,
.etna-sez .elementor-widget-text-editor li,
.etna-sez .elementor-widget-text-editor strong { color: inherit; }


/* I pulsanti non devono allungarsi per riempire la riga: nel design hanno
   un'altezza propria di 58px, qui venivano stirati dal contenitore flex.
   L'allineamento va messo sul collegamento, non sul widget che lo contiene:
   quel contenitore è reso trasparente al layout, quindi l'elemento della riga
   flex è il collegamento stesso. */
.etna-sez .etna-btn .elementor-button { align-self: center; }

/* Il widget immagine di Elementor porta con sé una larghezza al 100%: dove il
   design dà all'immagine una geometria propria va ripristinata la sua. */
.etna-sez .party__visual img { width: 90%; height: 90%; }

/* Fra il contenuto e il piè di pagina WordPress inserisce lo spazio fra blocchi
   (24px sul contenitore della parte di template): nel design la sezione della
   mappa tocca il piè di pagina, senza stacco. */
.wp-site-blocks > *,
main.wp-block-group > *,
.wp-block-template-part { margin-block-start: 0; }

/* ======================================================================
   Selettori con figlio diretto

   Il design usa spesso «A > B»: dentro le sezioni costruite con i widget quel
   legame si spezza, perché Elementor infila i suoi contenitori fra i due. Qui le
   stesse regole sono riscritte in forma discendente, con le media query di
   partenza: senza, le varianti per schermi piccoli si applicherebbero ovunque.
   ====================================================================== */

.etna-sez .hero__bottom p { max-width:560px;margin:0;font-size:clamp(15px,1.3vw,18px);line-height:1.65 }
.etna-sez .intro__copy p { letter-spacing:-.025em;margin:0 0 36px;font-size:clamp(20px,2vw,28px);line-height:1.4 }
.etna-sez .feature__content .eyebrow { margin-bottom:52px }
.etna-sez .picnic__content .eyebrow { margin-bottom:50px }
.etna-sez .party__content .eyebrow { margin-bottom:50px }
.etna-sez .picnic__content p:not(.eyebrow) { max-width:600px;margin:34px 0 0;font-size:17px;line-height:1.7 }
.etna-sez .groups__content p:not(.eyebrow) { margin:0 0 18px;font-size:16px;line-height:1.7 }
.etna-sez .party__content p:not(.eyebrow) { max-width:650px;margin:30px 0 0;font-size:17px;line-height:1.7 }
.etna-sez .relax__content p:not(.eyebrow) { max-width:550px;margin:0;font-size:18px;line-height:1.7 }
.etna-sez .park-map__heading p:last-child { grid-area:2/1;max-width:380px;margin:20px 0 0;font-size:18px;line-height:1.7 }
.etna-sez .park-map__canvas img { object-fit:cover;width:100%;height:100% }
.etna-sez .map-modal__card p:last-child { max-width:420px;margin:0;font-size:17px;line-height:1.65 }
.etna-sez .contact__intro p:not(.eyebrow) { max-width:520px;margin:34px 0;font-size:18px;line-height:1.7 }
.etna-sez .location__content p:not(.eyebrow) { max-width:570px;margin:0;font-size:17px;line-height:1.7 }
.etna-sez .site-footer__nav div { flex-direction:column;align-items:flex-start;gap:10px;display:flex }
.etna-sez .adventure-hero__content .eyebrow { margin-bottom:28px;animation:.8s .14s both fadeUp }
.etna-sez .adventure-hero__footer p { max-width:640px;margin:0;font-size:clamp(18px,1.7vw,25px);line-height:1.45 }
.etna-sez .course-map__heading p:last-child { max-width:360px;margin:0;font-size:17px }
.etna-sez .course-map__canvas img { width:100%;height:auto }
.etna-sez .adventure-summary__copy p { margin:0 0 32px;font-size:clamp(21px,2vw,29px);line-height:1.45 }
.etna-sez .course-card__toggle span { min-width:0;font-family:var(--etna-display);letter-spacing:-.035em;white-space:nowrap;text-transform:uppercase;font-size:clamp(24px,2.15vw,36px);font-weight:500;line-height:.96 }
.etna-sez .course-modal__image span { background:var(--red);color:var(--white);letter-spacing:.11em;text-transform:uppercase;border-radius:999px;padding:9px 14px;font-size:10px;font-weight:600;position:absolute;bottom:24px;left:24px }
.etna-sez .course-modal__content p { margin:0 0 17px;font-size:15px;line-height:1.68 }
.etna-sez .activities-hero__content .eyebrow { color:#ffffffd1;margin-bottom:28px }
.etna-sez .activities-hero__footer p { max-width:640px;margin:0;font-size:clamp(18px,1.7vw,25px);line-height:1.45 }
.etna-sez .quad-section__intro p { color:#fffc;margin:0 0 22px;font-size:17px;line-height:1.72 }
.etna-sez .pricing-hero__content .eyebrow { color:#ffffffd1;margin-bottom:28px }
.etna-sez .pricing-hero__footer p { max-width:660px;margin:0;font-size:clamp(18px,1.55vw,24px);line-height:1.45 }
.etna-sez .promo-panel__copy p { margin:0 0 30px;font-size:clamp(22px,2vw,31px);font-weight:500;line-height:1.42 }
.etna-sez .all-experience__details p { color:#ffffffad;max-width:720px;margin:0 0 40px;font-size:15px;line-height:1.65 }
.etna-sez .all-experience__details dl div { border-top:1px solid #ffffff2e;grid-template-columns:145px 1fr;gap:30px;padding:18px 0;display:grid }
.etna-sez .all-experience__details dl div:last-child dd { color:#e7ff72;font-family:var(--etna-display);font-size:42px;line-height:.85 }
.etna-sez .calendar-hero__content .eyebrow { color:#ffffffc2;margin-bottom:24px }
.etna-sez .calendar-intro__copy p { color:#171813b8;max-width:540px;margin:0;font-size:18px }
.etna-sez .contacts-map-section__content dl div { border-top:1px solid var(--line);grid-template-columns:80px 1fr;gap:18px;padding:15px 0;display:grid }
@media (width<=760px) {
  .etna-sez .course-modal__image span { bottom:16px;left:18px }
}
@media (width<=820px) {
  .etna-sez .tariff-table__row :nth-child(n+2):before { color:#1718137a;letter-spacing:.09em;text-transform:uppercase;margin-bottom:5px;font-size:10px;font-weight:800;display:block }
  .etna-sez .tariff-table__row :nth-child(2):before { content:"Chi può farlo" }
  .etna-sez .tariff-table__row :nth-child(3):before { content:"Durata del ticket" }
  .etna-sez .tariff-table__row :nth-child(4):before { content:"Prezzo" }
}
@media (width<=560px) {
  .etna-sez .pricing-hero__content .eyebrow { margin-bottom:22px }
  .etna-sez .promo-panel__copy p { font-size:21px }
  .etna-sez .all-experience__details dl div { grid-template-columns:1fr;gap:7px }
}
@media (width<=520px) {
  .etna-sez .contacts-map-section__content dl div { grid-template-columns:62px 1fr;gap:12px }
}
@media (width<=560px) {
  .etna-sez .adventure-hero__footer p { font-size:17px }
  .etna-sez .course-card__toggle span { font-size:clamp(22px,7vw,34px) }
}
@media (width<=820px) {
  .etna-sez .feature__content .eyebrow { margin-bottom:42px }
  .etna-sez .park-map__heading p:last-child { grid-area:auto/1 }
  .etna-sez .park-map__heading p:last-child { margin-top:0 }
  .etna-sez .site-footer__top p { grid-area:2/1/auto/-1 }
}
@media (width<=560px) {
  .etna-sez .hero__bottom p { font-size:14px }
}

/* ======================================================================
   Posizione dei pulsanti

   I pulsanti del design si chiamano .button, quelli costruiti con Elementor
   portano .etna-btn: le regole che li posizionano valgono per entrambi.
   ====================================================================== */

.etna-sez .party__content .etna-btn { margin-top:40px }
.etna-sez .pricing-hero__footer .etna-btn { margin-left:auto }
.etna-sez .contacts-collab__copy .etna-btn { margin-top:18px }
.etna-sez .where-map__panel .etna-btn { align-self:flex-start }
@media (width<=820px) {
  .etna-sez .pricing-hero__footer .etna-btn { margin-left:0 }
  .etna-sez .calendar-hero__footer .etna-btn { justify-self:start }
}
@media (width<=520px) {
  .etna-sez .calendar-editor__footer .etna-btn { justify-content:center;width:100% }
}
@media (width<=820px) {
  .etna-sez .hero__actions .etna-btn { gap:14px;min-height:52px;padding:0 18px;font-size:12px }
}


/* ======================================================================
   Galleria: le foto sono sfalsate

   Elementor azzera i margini di ogni <figure> dentro i suoi widget con una
   regola più forte di quella del design, e le foto pari perdevano i 70px di
   sfalsamento. Qui la regola del design viene riaffermata con la precedenza
   necessaria. Il design ha un solo valore, 70px, anche su schermi piccoli.
   ====================================================================== */

/* La regola di Elementor è «.elementor .elementor-widget:not(…):not(…) figure»:
   pesa quattro classi più un elemento. Per superarla senza !important qui si
   nomina anche l'elemento (figure) e si aggiunge .elementor in testa. */
.elementor .etna-sez .gallery-track figure.gallery-card { margin: 0; }
.elementor .etna-sez .gallery-track figure.gallery-card:nth-child(2n) { margin-top: 70px; }


/* ======================================================================
   Aria fra i titoli e il testo che li segue

   Nel sito attuale il paragrafo parte incollato al titolo: con caratteri di
   questa dimensione le lettere discendenti finiscono sulla prima riga. Qui il
   distacco viene portato a 28px, lo stesso valore che il design usa altrove
   fra titolo e testo.
   ====================================================================== */

.booking-section__intro h2 + p,
.activity-info-card__body h2 + p,
.course-map__heading h2 + p,
.adventure-intro__copy h3 + p { margin-top: 28px; }


/* ======================================================================
   Intestazione sempre piena

   Il design la voleva trasparente sopra la foto di apertura, piena solo dopo
   lo scorrimento. Il logo però ha il fondo trasparente e sulle foto chiare si
   perdeva: ora la barra è bianca fin dall'inizio, e lo stato «scorrimento»
   cambia solo la distanza dal bordo.
   ====================================================================== */

.site-header,
.site-header.is-scrolled {
  color: var(--ink);
  background: #fff;
  border-color: #1718131f;
  box-shadow: 0 10px 34px #10161118;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}


/* ======================================================================
   Avviso a comparsa

   Il riquadro gestito da Parco → Avvisi a comparsa. Il markup lo stampa il
   plugin: qui c'è solo la veste, con la stessa carta, gli stessi angoli e lo
   stesso pulsante del resto del sito.
   ====================================================================== */

.etna-avviso {
  z-index: 200;
  place-items: center;
  padding: 20px;
  display: grid;
  position: fixed;
  inset: 0;
}

.etna-avviso[hidden] { display: none; }

.etna-avviso__velo {
  background: #0c100c99;
  position: absolute;
  inset: 0;
}

.etna-avviso__card {
  background: var(--paper, #fbf9f2);
  color: var(--ink);
  border-radius: 28px;
  width: min(560px, 100%);
  max-height: calc(100vh - 40px);
  overflow: auto;
  box-shadow: 0 30px 80px #0c10104d;
  position: relative;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .35s, transform .35s;
}

.etna-avviso.is-open .etna-avviso__card {
  opacity: 1;
  transform: none;
}

.etna-avviso__chiudi {
  z-index: 2;
  background: #fffffff0;
  color: var(--ink);
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  width: 38px;
  height: 38px;
  font-size: 24px;
  line-height: 1;
  position: absolute;
  top: 14px;
  right: 14px;
}

.etna-avviso__foto {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.etna-avviso__foto img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
}

.etna-avviso__testo { padding: 34px 36px 38px; }

.etna-avviso__testo h2 {
  font-family: var(--etna-display);
  letter-spacing: -.02em;
  text-transform: uppercase;
  margin: 0 0 18px;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 500;
  line-height: 1;
}

.etna-avviso__testo p {
  margin: 0 0 16px;
  font-size: 16px;
  line-height: 1.68;
}

.etna-avviso__testo .button { margin-top: 10px; }

@media (width<=560px) {
  .etna-avviso__testo { padding: 26px 24px 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .etna-avviso__card { transition: none; transform: none; }
}

/* Home: il pulsante sotto le card delle esperienze non deve toccare la griglia. */
.etna-sez.experiences > .etna-btn .elementor-button { margin-top: clamp(32px, 4vw, 56px); }

/* Fascia del logo bianca a tutta larghezza (il logo ha il testo nero), il resto del footer resta scuro. */
.site-footer { padding-top: 0; }
.site-footer__top {
  padding-top: 70px;
  background: #fff;
  color: var(--ink);
  border-bottom: 0;
  box-shadow: 0 0 0 100vmax #fff;
  clip-path: inset(0 -100vmax);
}
.site-footer__top p { color: var(--ink); opacity: .7; }
.site-footer__top .footer-top-link { border-color: #000; color: #000; }
.site-footer__top .footer-top-link:hover { background: var(--red); border-color: var(--red); color: #fff; }
@media (width <= 820px) { .site-footer__top { padding-top: 64px; } }

/* Con privacy e cookie policy la riga in fondo al footer ha sei voci: su schermi stretti va a capo. */
.site-footer__bottom { flex-wrap: wrap; gap: 12px 30px; }
.site-footer__bottom a:hover { color: #fff; }

/* Footer a scoperta: la fascia del logo scorre sopra la parte scura, che sta ferma in fondo alla finestra (classe messa da site.js). */
.footer-reveal .wp-site-blocks { margin-bottom: var(--footer-h); }
.footer-reveal .site-footer { background: transparent; padding-bottom: 0; }
.footer-reveal .site-footer__dark {
  position: fixed;
  inset: auto 0 0;
  z-index: -1;
  padding: 0 max(40px, 50vw - 670px) 28px;
  background: var(--ink);
  color: var(--white);
}
@media (width <= 820px) { .footer-reveal .site-footer__dark { padding-inline: 24px; } }