/* =========================================================
   COMPATIBILITÀ CON ELEMENTOR

   Il foglio di stile botta.css arriva dal sito statico, dove
   l'impaginazione era imposta da .wrap e .section. Dentro
   Elementor spaziature e larghezze devono restare governate
   dall'editor, altrimenti chi modifica non riesce più a
   controllare margini e colonne.
   ========================================================= */

/* Nota: .wrap resta com'è. Lo usano i blocchi che riproducono una
   fascia intera (testata, richiamo finale), che devono centrare da soli
   il contenuto perché stanno in un contenitore a tutta larghezza. */

.elementor .section,
.elementor .section--tight {
  padding: 0;
}

/* Le classi delle sezioni restano utili per sfondo e colore del testo
   (section--dark, section--cream2), ma senza imporre spaziature. */
.elementor .section--dark,
.elementor .section--cream2 {
  padding: 0;
}

/* Le griglie del sito statico diventano contenitori di Elementor. */
.elementor .split {
  display: block;
}

/* Nell'editor le immagini devono poter essere ridimensionate
   con i controlli di Elementor. */
.elementor img,
.elementor svg {
  max-width: 100%;
}

/* I margini dei titoli e dei paragrafi tornano sotto il controllo
   dei campi "Spaziatura" di Elementor. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor p:last-child {
  margin: 0;
}

/* Lo stile globale dei pulsanti di Elementor (Impostazioni sito →
   Pulsanti) vale per ogni <button> della pagina, quindi colorava di
   marrone anche il pulsante a tre righe del menu. Qui glielo togliamo:
   quel pulsante deve restare solo l'icona, senza sfondo né contorno.
   I selettori sono più lunghi apposta, per avere la meglio su Elementor. */
.elementor .header .burger,
.elementor .header .burger:hover,
.elementor .header .burger:focus {
  padding: 0.5rem;
  border: 0;
  border-radius: 0;
  background: none;
  color: var(--ink);
  box-shadow: none;
  width: auto;
}

/* Sui telefoni il nome accanto al logo e il pulsante del menu devono
   stare nella stessa riga senza stringersi troppo. */
@media (max-width: 620px) {
  .elementor .header .wrap {
    gap: 0.75rem;
  }
  .elementor .header .brand {
    min-width: 0;
  }
}

/* Dentro l'editor tutto deve essere visibile: le animazioni di
   comparsa allo scroll non devono nascondere gli elementi. */
.elementor-editor-active .reveal,
body.elementor-editor-active .reveal {
  opacity: 1;
  transform: none;
}