/*
Theme Name: Andrea Veramonti
Theme URI: https://andreaveramonti.it/
Description: Tema child di Hello Elementor per andreaveramonti.it. Porta lo stile e i comportamenti del sito statico (barra, menu, footer, preloader, transizioni, cursore, scorrimento, archivio) attorno alle pagine costruite con i widget nativi di Elementor.
Author: Andrea Veramonti
Author URI: https://andreaveramonti.it/
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 7.4
Text Domain: andreaveramonti
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

/* Lo stile del sito sta in assets/comune.css, identico al sito statico.
   Qui c'e' solo quello che serve ad accordarlo con il markup di Elementor
   e le classi da dare ai widget (Avanzate → Classi CSS), perche' Elementor
   free non ha il CSS personalizzato per widget. */

/* ============================================================
   ELEMENTOR E WORDPRESS
   ============================================================ */

/* Elementor mette html{scroll-behavior:smooth}. Con Lenis e' la causa dello
   scroll che parte in ritardo: ogni fotogramma Lenis sposta la pagina, il
   browser trasforma lo spostamento in una sua animazione morbida, il
   fotogramma dopo la interrompe e ne comincia un'altra. La pagina avanza di
   due pixel alla volta finche' Lenis non ha quasi finito, poi scatta. */
html.lenis, html.lenis body{scroll-behavior:auto!important}
html.lenis{height:auto}

/* I contenitori di Elementor 4 portano anche la classe .e-con dei vecchi
   container, che imposta display, posizione, misure, overflow e margini
   attraverso variabili: le stesse regole che il sito scrive per conto suo,
   con la stessa forza. Qui le variabili tornano neutre, cosi' decide il CSS
   del sito. Gli stili dati dall'editor non passano da queste variabili:
   Elementor li scrive su una classe propria del widget, e restano validi. */
.e-con.e-atomic-element{
  --display:block; --position:static; --width:auto; --height:auto;
  --min-height:auto; --overflow:visible; --z-index:auto;
  --margin-block-start:0; --margin-block-end:0;
  --margin-inline-start:0; --margin-inline-end:0;
  --padding-inline-start:0; --padding-inline-end:0;
  --padding-block-start:0; --padding-block-end:0;
  --flex-grow:0; --flex-shrink:1; --flex-basis:auto;
  --background-overlay:none;
}
/* Il link fatto con un contenitore e' un <a>: in linea, come nel sito. */
a.e-con.e-atomic-element{--display:inline-block}

/* I contenitori di Elementor sono div, non section: stesso margine di
   scroll che comune.css da' a main > section, per i link alle ancore. */
main .e-con[id], main .elementor-section[id]{scroll-margin-top:var(--nav-h)}

/* I widget ereditano carattere e colore dalla sezione in cui stanno, come
   i titoli del sito statico. Chi vuole un colore diverso lo sceglie nel
   widget, e quello vince. */
.elementor-widget-heading .elementor-heading-title,
.elementor-widget-text-editor{color:inherit;font-family:inherit}
.elementor-widget-text-editor p:last-child{margin-bottom:0}

/* Barra di amministrazione, solo da collegati: la barra e il menu sono
   fissi in cima e finirebbero sotto. */
body.admin-bar #nav{top:32px}
body.admin-bar #menu{top:32px}
@media (max-width:782px){
  body.admin-bar #nav, body.admin-bar #menu{top:46px}
}

/* Nell'editor non parte niente: tutto quello che il JavaScript fa entrare
   (titoli che salgono, righe mascherate) deve essere gia' al suo posto,
   altrimenti si lavora su una pagina vuota. */
.elementor-editor-active [data-rev],
.elementor-editor-active .av-rev,
.elementor-editor-active .line > *{opacity:1!important;transform:none!important;clip-path:none!important}
.elementor-editor-active #cursor,
.elementor-editor-active #preloader,
.elementor-editor-active #velo{display:none!important}

/* ============================================================
   CLASSI PER I WIDGET
   Si scrivono in Avanzate → Classi CSS, separate da uno spazio.
   ============================================================ */

/* Fondi. Sul contenitore: decidono anche il colore del testo e quello del
   marchio nella barra, che legge la luminosita' di cio' che ha sotto. */
.av-scuro{background-color:var(--ink);color:var(--white)}
.av-chiaro{background-color:var(--paper);color:var(--ink)}

/* Caratteri */
.av-serif, .av-serif .elementor-heading-title{
  font-family:var(--f-serif)!important;font-weight:var(--w-serif)!important;letter-spacing:-.012em;
}
.av-sans, .av-sans .elementor-heading-title{
  font-family:var(--f-display)!important;font-weight:var(--w-display)!important;letter-spacing:-.045em;
}
.av-mono, .av-mono .elementor-heading-title, .av-mono .elementor-widget-container{
  font-family:var(--f-mono)!important;font-weight:400;font-size:12px;letter-spacing:.18em;
  text-transform:uppercase;font-variant-numeric:tabular-nums;
}
.av-arancio, .av-arancio .elementor-heading-title{color:var(--orange)!important}
.av-dim, .av-dim .elementor-heading-title{color:var(--dim)!important}

/* Entrata allo scroll: la stessa di [data-rev] sul sito statico. Il tema
   aggiunge data-rev da solo a chi porta questa classe. */
.av-rev{will-change:transform,opacity}

/* Il bottone Elementor vestito da pillola, come "Parliamone" nella barra.
   av-pill per il bordo, av-pill-piena per il fondo arancione. */
.av-pill .elementor-button,
.av-pill-piena .elementor-button{
  font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  border-radius:999px;padding:14px 22px;transition:background-color .3s var(--ease),color .3s var(--ease);
}
.av-pill .elementor-button{background:transparent;color:inherit;border:1px solid currentColor}
.av-pill .elementor-button:hover{background:var(--orange);border-color:var(--orange);color:var(--ink)}
.av-pill-piena .elementor-button{background:var(--orange);color:var(--ink);border:1px solid var(--orange)}
.av-pill-piena .elementor-button:hover{background:transparent;color:var(--orange)}

/* Immagini dei progetti a tutta larghezza del loro contenitore. */
.av-piena img{width:100%;height:auto;display:block}

/* ============================================================
   LISTE CHE ELEMENTOR NON SCRIVE
   Elementor non ha ul, li, dl: nelle pagine legali e nei contatti le
   voci sono contenitori e paragrafi. Qui prendono la forma che legale.css
   e contatti.css danno a li, dt e dd.
   ============================================================ */
.lg-lista > *{position:relative;padding-left:22px}
.lg-lista > * + *{margin-top:.7em}
.lg-lista > *::before{
  content:"";position:absolute;left:0;top:.72em;
  width:11px;height:1px;background:var(--orange);
}
.lg-terzi .lg-dt{color:var(--white)}
.lg-terzi .lg-dd{margin:0;color:rgba(244,244,242,.72);font-size:.94em}
.lg-corpo code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.92em}
.ct-recapiti > * + *{margin-top:clamp(8px,1.4vh,16px)}

/* ============================================================
   ENTRATE DEI TESTI (assets/testi.js)
   Ogni parola sta in una maschera alta una riga. La maschera e' un
   clip-path e non overflow:hidden con un padding: il ritaglio non tocca
   l'impaginazione, quindi le righe durante l'entrata stanno esattamente
   dove staranno dopo, e quando gli span se ne vanno il testo non salta.
   Il ritaglio sborda un po' in basso per non tagliare g, p e q.
   Gli span esistono solo durante l'entrata: alla fine il testo torna com'era.
   ============================================================ */
/* line-height:1 tiene la maschera piu' bassa della riga: cosi' l'altezza
   della riga la decide il paragrafo, non le maschere, e non cambia. */
.tx-m{display:inline-block;line-height:1;clip-path:inset(-.2em -.08em -.3em -.08em)}
.tx-p{display:inline-block;will-change:transform}
/* Un foglio che dice "span{display:block}" dentro un blocco (succedeva a
   .contact-note) non deve spezzare le parole una per riga. */
.tx-pronto .tx-m, .tx-pronto .tx-p{display:inline-block!important;width:auto!important;margin:0!important;border:0!important}