/* =========================================================
   Aggiunte ai blocchi su misura.

   Il grosso dello stile arriva dal foglio del tema (botta.css),
   che è quello del sito originale. Qui ci sono solo le poche
   regole in più che servono dentro Elementor.
   ========================================================= */

/* Testi chiari su sfondo scuro, senza portarsi dietro
   lo sfondo e le spaziature di .section--dark. */
.botta-chiaro,
.botta-chiaro p {
  color: var(--cream);
}
.botta-chiaro h1,
.botta-chiaro h2,
.botta-chiaro h3,
.botta-chiaro h4 {
  color: var(--white);
}
.botta-chiaro .eyebrow {
  color: var(--wood-light);
}

/* Allineamento al centro applicato dal pannello di Elementor. */
.botta-align-center .botta-intestazione,
.botta-align-center .botta-intestazione .lead {
  text-align: center;
  margin-inline: auto;
}
.botta-align-center .botta-intestazione .rule {
  margin-inline: auto;
}

/* Gruppo di pulsanti affiancati. */
.botta-azioni {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.botta-align-center .botta-azioni {
  justify-content: center;
}

/* Le foto della galleria oltre la copertina servono solo alla
   finestra di ingrandimento: non devono occupare spazio. */
.botta-slide-nascosta {
  display: none;
}

/* Avviso mostrato soltanto dentro l'editor di Elementor. */
.botta-avviso {
  padding: 1.5rem;
  border: 1px dashed var(--line);
  color: var(--muted);
  text-align: center;
}

/* ---------- Varianti della comparsa allo scroll ---------- */

/* Per le foto: oltre a sfumare si avvicina appena. */
.reveal--zoom {
  transform: scale(0.985);
}
.reveal--zoom.is-in {
  transform: none;
}

/* Solo sfumatura, senza movimento: per i testi lunghi. */
.reveal--sfuma {
  transform: none;
}

/* Chi ha chiesto meno animazioni non deve vedere nulla muoversi. */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal--zoom,
  .reveal--sfuma {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* La linea sotto i titoli.
   Elementor azzera lo sfondo di tutti gli <hr> con ".elementor hr",
   perciò la disegniamo con un <div>: nessun conflitto e il colore
   resta modificabile dal pannello del blocco. */
.rule {
  display: block;
  border: 0;
}

/* Voci della barra contatti nascoste fino al tablet: sui schermi piccoli
   la barra resta una riga sola con i contatti rapidi. */
@media (max-width: 1000px) {
  .botta-solo-grandi {
    display: none;
  }
}

/* ---------- Schede contatti (recapiti, orari, modulo, social) ---------- */

/* Spazio sotto i titoli delle schede, come nel sito originale. */
.elementor-widget-botta-recapiti .info-card h3 {
  margin-bottom: 1.6rem;
}
.elementor-widget-botta-modulo .info-card h3 {
  margin-bottom: 0.6rem;
}

/* Testo di presentazione del modulo. */
.elementor-widget-botta-modulo .modulo-desc {
  color: var(--muted);
  font-size: 0.96rem;
  margin-bottom: 1.8rem;
}

/* Pulsante in fondo ai recapiti. */
.elementor-widget-botta-recapiti .recapiti-azione {
  margin-top: 1.8rem;
}