/*
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
   ============================================================ */

/* 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:11px;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}