/* Adattamenti del design system al markup di Elementor. SCRITTO A MANO.
   Qui stanno solo le regole che servono perché le pagine fatte di container e widget
   si vedano come il sito statico. Il CSS del sito sta in dbyte.css (generato).

   Regola generale: specificità bassa, così quello che si imposta nel pannello di Elementor vince. */

/* ------------------------------------------------------------------ *
 * 1. Larghezza dei container: la regola sta nel CSS generato (dbyte.css),
 *    che porta il valore predefinito di --width a auto. Così i pannelli
 *    con i margini negativi si allargano come nel sito statico e la
 *    larghezza impostata nel pannello di Elementor continua a vincere.
 *    Qui restano solo i widget che devono poter sbordare.
 * ------------------------------------------------------------------ */
.elementor.elementor .e-con > .elementor-widget:is(.fcta__panel, .cards, .flowchips, .lab__win) {
	width: auto;
	max-width: none;
}

/* ------------------------------------------------------------------ *
 * 2bis. Le liste dentro un widget non sono un livello di impaginazione:
 *    la classe del design system sta sul contenitore del widget, quindi
 *    le voci devono diventare figlie sue (griglie e flex del sito).
 *    role="list" nel markup conserva la semantica di elenco.
 * ------------------------------------------------------------------ */
.elementor-widget[class*="blocco-"] > ul:not([class]),
.elementor-widget[class*="blocco-"] > ol:not([class]) {
	display: contents;
}

/* ------------------------------------------------------------------ *
 * 3. Titoli: le classi del sito stanno sul contenitore del widget,
 *    il tag interno deve ereditarne riga, tracking e peso
 *    (.elementor-heading-title impone line-height: 1).
 * ------------------------------------------------------------------ */
.elementor-widget-heading .elementor-heading-title {
	line-height: inherit;
	letter-spacing: inherit;
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
	text-wrap: inherit;
}

/* il max-width in ch va sempre sul titolo, mai sul contenitore: i ch del contenitore sono diversi */
.elementor-widget-heading:is(.h1, .h2, .h1-xl, .display-l, .display-xl, .intro__title) > .elementor-heading-title {
	max-width: inherit;
}

/* ------------------------------------------------------------------ *
 * 4. Elementor azzera il margine sotto i widget dentro un container:
 *    si ripristina dove il design system lo usa, a pari specificità.
 * ------------------------------------------------------------------ */
.e-con .elementor-widget.elementor-widget.intro__title { margin-block-end: clamp(60px, 8vw, 120px); }
.e-con .elementor-widget.elementor-widget.fcol__title { margin-block-end: 14px; }
.e-con .elementor-widget.elementor-widget.related__head { margin-block-end: 44px; }
.e-con .elementor-widget.elementor-widget.pillar__title { margin-block-end: 10px; }
.e-con .elementor-widget.elementor-widget.sec-head__hint { margin-block-end: 0; }

/* ------------------------------------------------------------------ *
 * 5. Elementor forza max-width: 100% sui widget nei container:
 *    si ripristinano le misure di lettura del sito.
 * ------------------------------------------------------------------ */
.elementor.elementor .e-con > .elementor-widget.intro__title { max-width: 24ch; margin-inline: auto; }
.elementor.elementor .e-con > .elementor-widget.sec-head__hint { max-width: 52ch; }
.elementor.elementor .e-con > .elementor-widget.hero__lead { max-width: 46ch; }
.elementor.elementor .e-con > .elementor-widget.process__sub { max-width: 42ch; }
.elementor.elementor .e-con.split__sticky > .elementor-widget.body-l { max-width: 34ch; }
.elementor.elementor .e-con.ops__text > .elementor-widget.body-l { max-width: 40ch; }
.elementor.elementor .e-con.phero--center > .elementor-widget.phero__lead,
.elementor.elementor .e-con.phero--center .e-con > .elementor-widget.phero__lead { max-width: 52ch; }
.elementor.elementor .e-con > .elementor-widget.b2b-intro__quote { max-width: 60ch; }

/* i titoli dentro una testa di sezione: posizione nella griglia e misura di lettura
   (nel sito la regola è .sec-head > h2, qui il figlio della griglia è il widget) */
.e-con.sec-head > .elementor-widget:is(.h1, .h2, .display-l, .display-xl) {
	grid-column: 1;
	max-width: 18ch;
}
.e-con.world--aziende .e-con.sec-head > .elementor-widget:is(.h1, .display-l),
.world--aziende .e-con.sec-head > .elementor-widget:is(.h1, .display-l) { max-width: 12ch; }
.e-con.process__side > .elementor-widget.display-l { max-width: 12ch; }
.e-con.scta__panel > .elementor-widget.display-l { max-width: 16ch; }
.e-con.sdetail__block > .elementor-widget.h1 { max-width: 12ch; }
.elementor.elementor .e-con:is(.about-panel__intro, .about-panel__split) > .elementor-widget.h2 { max-width: 14ch; }
.elementor.elementor .e-con.phero--center > .elementor-widget.h1-xl { max-width: 16ch; }

/* Le card in vetro: nel sito la regola è ".intro__card > p", qui il figlio del
   container è il widget e il paragrafo sta dentro. */
.e-con.intro__card > .elementor-widget-text-editor:not(.intro__brand) p {
	font-size: 14.5px;
	line-height: 1.4;
	color: rgb(255 255 255 / 0.82);
}
.e-con.history__card > .elementor-widget-text-editor:not(.label) p {
	font-size: 14.5px;
	line-height: 1.45;
	color: rgb(255 255 255 / 0.82);
}

/* Un testo lungo sta in un solo Editor di testo: dentro i contenitori che spaziano
   i figli con una griglia, i paragrafi del widget devono tenere le stesse distanze
   (gap: inherit prende il valore del contenitore). */
.e-con:is(.legal, .draft, .about-panel__text, .request__card) > .elementor-widget-text-editor {
	display: grid;
	gap: inherit;
	align-content: start;
}
/* Il monitor della hero: il contenitore del widget è la figura .pc, quindi porta da solo
   misura, margini e stato (is-revealed, data-state). Elementor azzera il margine sotto i
   widget: qui serve, il monitor sborda di 26 px (sul telefono si stacca di 40 px). */
.e-con .elementor-widget.elementor-widget.blocco-pc { margin-block-end: -26px; }
@media (max-width: 767px) {
	.e-con .elementor-widget.elementor-widget.blocco-pc { margin-block-end: 40px; }
}

/* Un Editor di testo il cui contenitore è in riga (la voce "Scorri" della hero):
   il paragrafo dentro non deve fare da blocco, altrimenti il tasto va a capo. */
.elementor-widget-text-editor.hero__scroll > p {
	display: contents;
}

/* Il modulo: la classe rform sta sul contenitore del widget (è lui la cella della
   griglia della sezione), quindi il <form> dentro non deve impaginare. */
.elementor-widget.blocco-modulo > form {
	display: contents;
}

/* Il widget che rende più blocchi vicini (i passi del metodo aziende) deve passare
   ai suoi figli le distanze del contenitore. */
.e-con > .elementor-widget.blocco-ops {
	display: grid;
	gap: inherit;
}

.e-con.legal > .elementor-widget-text-editor > p.mono {
	font-size: 11px;
	color: var(--fg-muted);
}

/* Elementor dà max-width ai container di primo livello (min(100%, var(--width))):
   le misure del sito tornano a decidere, e la pagina legale tiene la sua colonna. */
[data-elementor-id] > .e-con { max-width: none; }
[data-elementor-id] > .e-con.legal { max-width: calc(860px + 2 * var(--gutter)); }

/* ------------------------------------------------------------------ *
 * 6. Immagini: il widget Immagine stampa un img inline-block che non
 *    riempie i riquadri con proporzione fissa.
 * ------------------------------------------------------------------ */
.elementor-widget-image.pic,
.elementor-widget-image .pic {
	display: block;
}
.elementor-widget-image.pic img,
.elementor-widget-image.media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.elementor-widget-image figure,
.elementor-widget-image .elementor-image {
	margin: 0;
	line-height: 0;
}

/* ------------------------------------------------------------------ *
 * 7. Una classe di variante sul contenitore del widget non deve
 *    disegnare anche il contenitore (fondi, bordi, vetro).
 * ------------------------------------------------------------------ */
.elementor-widget:is(.glass, .outcome__tab, .card, .rcard, .btn, .label) {
	background: none;
	box-shadow: none;
	backdrop-filter: none;
	border: 0;
}
.elementor-widget.label { padding: 0; }

/* ------------------------------------------------------------------ *
 * 8. Senza animazioni (interruttore spento o anteprima dell'editor)
 *    tutto quello che il JS fa comparire è già visibile.
 * ------------------------------------------------------------------ */
html.no-fx [data-reveal],
html.no-fx.js [data-reveal] { opacity: 1; transform: none; }
html.no-fx.js [data-scramble]:not([data-sc-ready]) { opacity: 1; animation: none; }
html.no-fx.js [data-pixel]:not(.is-sharp) img { opacity: 1; }
html.no-fx.js .pc:not(.is-revealed) .pc__body,
html.no-fx.js .pc:not(.is-revealed) .pc__stand { opacity: 1; animation: none; }
html.no-fx .pc .pc__bsod,
html.no-fx .pc .pc__cmd { display: none; }
html.no-fx .pc .pc__ok { visibility: visible; }
html.no-fx .pillar .ui-node,
html.no-fx .pillar .ui-hub { opacity: 1; transform: translate(-50%, -50%); }
html.no-fx .pillar .ui-wire { clip-path: none; }
html.no-fx .pillar .ui-row,
html.no-fx .pillar .ui-metric__card { opacity: 1; transform: none; }
html.no-fx .bar span { transform: scaleX(1); }

/* ------------------------------------------------------------------ *
 * 9. Nell'anteprima dell'editor: niente movimento che copra i
 *    riquadri di modifica, e le risposte del selettore tutte visibili.
 * ------------------------------------------------------------------ */
html.dbyte-anteprima .boot,
html.dbyte-anteprima .wipe { display: none !important; }
html.dbyte-anteprima .panswer {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	grid-area: auto;
	margin-bottom: 24px;
}
html.dbyte-anteprima .mnav { position: static; }
html.dbyte-anteprima .byteshift { height: 30svh; }
html.dbyte-anteprima .byteshift__sticky { display: none; }
html.dbyte-anteprima .lab__track { overflow-x: auto; width: auto; }
html.dbyte-anteprima .hero__pc { position: static; }

/* ------------------------------------------------------------------ *
 * 10. Hello Elementor: i suoi stili sono spenti, ma il suo contenitore
 *     di pagina non deve aggiungere larghezze o margini.
 * ------------------------------------------------------------------ */
.site-main,
.page-content,
.elementor-widget-container { margin: 0; padding: 0; }
/* Hello Elementor dà un padding al suo header e footer: qui li disegna il design system.
   Sotto i 768 px il footer lascia spazio alla barra azioni, come nel sito statico. */
.site-header { padding-block: 0; }
.site-footer { padding-block: 0; }
@media (max-width: 767px) {
	.site-footer { padding-bottom: 72px; }
}
main#main { display: block; outline: none; }

/* ------------------------------------------------------------------ *
 * 11. Tele decorative (ASCII, anelli): nel sito stanno in posizione
 *     assoluta dentro il pannello, quindi il contenitore del widget
 *     non deve occupare una cella dell'impaginazione.
 * ------------------------------------------------------------------ */
.elementor-widget.dbyte-tela {
	position: absolute;
	inset: 0;
	z-index: -2;
	pointer-events: none;
}

/* Il marchio è un elemento in linea: senza questa riga il contenitore del widget
   aggiungerebbe lo spazio della riga di testo e il footer crescerebbe di 6 px. */
.elementor-widget.blocco-marchio {
	display: flex;
}

/* ------------------------------------------------------------------ *
 * 12. Elementor mette una transizione di 0,4 s su transform di container
 *     e widget (serve ai suoi effetti al passaggio del mouse, che questo
 *     sito non usa). GSAP invece cambia transform a ogni fotogramma: la
 *     transizione gli si mette in mezzo e il movimento arriva in ritardo.
 *     Si vedeva soprattutto alla fine del blocco della hero: quando il
 *     pannello si sblocca, Elementor animava il salto in 0,4 s e il
 *     blocco rientrava da sopra. Qui la durata va a zero, solo sugli
 *     elementi che il JS del sito muove.
 * ------------------------------------------------------------------ */
[data-hero-panel],
[data-hero-copy],
[data-hero-scroll],
[data-pc],
[data-panel],
[data-lab-track],
.lab__pin {
	--e-con-transform-transition-duration: 0s;
	--e-transform-transition-duration: 0s;
}

/* ------------------------------------------------------------------ *
 * 13. Elementor decide flex-grow dei container con `.e-con.e-flex`, che
 *     vince sulla classe del sito: senza questa riga .hero__main non
 *     riempie il pannello della hero e il monitor sale di 15 px.
 * ------------------------------------------------------------------ */
.e-con.e-con.hero__main {
	flex-grow: 1;
	flex-basis: 0%;
}