/* Skeda — base del tema.
 *
 * Solo quello che riguarda la pagina intera: reset minimo, ritmo tipografico,
 * larghezza del contenuto, gruppi di bande, livelli, focus visibile. I
 * componenti portano il proprio CSS dal plugin.
 *
 * Il reset di Hello Elementor è spento in functions.php: quello che serviva
 * davvero sta qui, e niente di più.
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	margin: 0;
	background-color: var(--sk-surface-paper);
	color: var(--sk-ink-primary);
	font-family: var(--sk-t-body-m-family);
	font-size: var(--sk-t-body-m-size);
	line-height: var(--sk-t-body-m-lh);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: clip;
}

/* I titoli ereditano dalla scala, non da valori propri: cambiare la scala in
   Sketch e rigenerare i token cambia il sito, senza toccare il CSS.
   Il colore si eredita: lo decide il tono del componente o della banda, così
   un titolo dentro una card scura non esce nero. */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--sk-font-display);
	font-weight: inherit;
	color: inherit;
	margin-block: 0;
}

p {
	margin-block: 0 var(--sk-space-16);
}

a {
	color: var(--sk-accent-default);
	background-color: transparent;
}

img,
video {
	max-width: 100%;
	height: auto;
	border-style: none;
}

button,
input,
select,
textarea {
	font: inherit;
	color: inherit;
	margin: 0;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--sk-border-focus);
	outline-offset: 2px;
}

details {
	display: block;
}

summary {
	display: list-item;
}

[hidden] {
	display: none !important;
}

/* Il contenuto sta nelle 12 colonne del design; lo sfondo può uscirne. */
.sk-contenuto {
	width: 100%;
	max-width: calc(var(--sk-content-max) + var(--sk-margin) * 2);
	margin-inline: auto;
	padding-inline: var(--sk-margin);
}

@media (max-width: 599px) {
	.sk-contenuto {
		padding-inline: var(--sk-phone-margin);
	}
}

/* --------------------------------------------------------------------------
 * Gruppi di bande
 *
 * Bande dello stesso colore una dopo l'altra non sono due sezioni separate: il
 * gruppo porta il fondo e l'aurora per tutte, e le bande dentro sono
 * trasparenti. La distanza fra due bande è un margine, non un padding, e i
 * margini fra fratelli collassano: fra la fine di una banda e l'inizio della
 * successiva vale il più grande dei due, non la somma.
 *
 * Il gruppo ritaglia con `clip` e non con `hidden`: `hidden` crea un contenitore
 * di scorrimento e un pannello `sticky` dentro smetterebbe di seguire la pagina.
 * ----------------------------------------------------------------------- */

/* specificità doppia: Elementor scrive `overflow` su ogni contenitore, e senza
   ritaglio l'aurora di un gruppo sconfinerebbe nel gruppo sotto */
.sk-gruppo,
.e-con.sk-gruppo,
.sk-banda--scura,
.e-con.sk-banda--scura,
.sk-banda--chiara,
.e-con.sk-banda--chiara {
	position: relative;
	isolation: isolate;
	overflow: clip;
}

/* un contesto di blocco, non flex: solo così i margini delle bande collassano */
.e-con.sk-gruppo,
.sk-gruppo {
	display: flow-root;
}

.sk-gruppo--scuro,
.sk-banda--scura {
	background-color: var(--sk-surface-dark);
	color: var(--sk-ink-inverse);
}

.sk-gruppo--chiaro,
.sk-banda--chiara {
	background-color: var(--sk-surface-base);
	color: var(--sk-ink-primary);
}

.sk-gruppo > .sk-banda {
	position: relative;
	isolation: auto;
	overflow: visible;
	background: none;
}

/* Gruppo con una fotografia per fondo: due velature dell'inchiostro scuriscono
   la foto dal basso e da sinistra, dove sta il testo. Sono «tint v» e «tint h»
   della banda Funzioni, e partono dal token, non da un colore scritto qui. */
.sk-gruppo--foto::after,
.sk-banda--foto::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		linear-gradient(180deg, var(--sk-surface-dark) 0%, transparent 26%, transparent 70%, var(--sk-surface-dark) 100%),
		linear-gradient(90deg, color-mix(in srgb, var(--sk-surface-dark) 94%, transparent) 0%, color-mix(in srgb, var(--sk-surface-dark) 80%, transparent) 34%, color-mix(in srgb, var(--sk-surface-dark) 30%, transparent) 70%, color-mix(in srgb, var(--sk-surface-dark) 55%, transparent) 100%);
}

/* --------------------------------------------------------------------------
 * Livelli
 *
 *   0  aurora e velature
 *   1  fotografie e decorazioni posizionate
 *   2  contenuto: titoli, testi, componenti in flusso
 *   3  card e pastiglie che galleggiano sopra le foto
 *   100 la navigazione, e il gruppo che la contiene sopra tutti gli altri
 *
 * I valori valgono dentro il gruppo, che è il contesto di impilamento: le
 * bande non ne creano uno loro, così la navigazione della prima banda passa
 * sopra il contenuto di tutte le altre.
 * ----------------------------------------------------------------------- */

:is(.sk-gruppo, .sk-banda) .elementor-widget-skeda-aurora {
	position: absolute;
	inset: 0;
	z-index: 0;
}

:is(.sk-gruppo, .sk-banda) .elementor-absolute.elementor-widget-image {
	z-index: 1;
}

/* Il contenuto sale a 2. Restano fuori la banda stessa — con uno z-index
   diventerebbe un contesto chiuso e la nav dentro non potrebbe superare le
   bande successive — e la nav, che ha il suo livello. */
:is(.sk-gruppo, .sk-banda) .elementor-element:not(.sk-banda):not(.elementor-absolute):not(.elementor-widget-skeda-aurora):not(.elementor-widget-skeda-nav):not(:has(.sk-nav)):not(.sk-segue) {
	position: relative;
	z-index: 2;
}

.sk-gruppo > .sk-banda {
	z-index: auto;
}

:is(.sk-gruppo, .sk-banda) .elementor-absolute:not(.elementor-widget-image):not(.elementor-widget-skeda-aurora) {
	z-index: 3;
}

/* La nav sopra il contenuto della sua banda. Con JavaScript la pastiglia fissa
   esce dalla pagina e va nel body (nav.js), e queste regole non servono più:
   restano per l'editor di Elementor e per chi naviga senza script. Vale anche
   per ogni contenitore che la ospita, come il widget Template della navigazione
   condivisa: un contenitore a livello 2 la chiuderebbe sotto il titolo. */
:is(.sk-gruppo, .sk-banda) .elementor-element.elementor-widget-skeda-nav,
:is(.sk-gruppo, .sk-banda) .elementor-element:not(.sk-banda):has(.sk-nav) {
	position: relative;
	z-index: 100;
}

.sk-gruppo:has(.sk-nav--fissa),
.sk-banda:has(.sk-nav--fissa) {
	z-index: 100;
}

/* --------------------------------------------------------------------------
 * Pagine corte
 *
 * Una pagina più bassa dello schermo non lascia una striscia vuota sotto il
 * piè di pagina: la pagina è alta almeno quanto la finestra e lo spazio in più
 * va all'ultimo gruppo, dentro la sua banda, sopra il piè di pagina. Il gruppo
 * diventa una colonna solo se ha una banda sola: con più bande resta un blocco,
 * altrimenti i margini fra le bande smetterebbero di fondersi.
 * ----------------------------------------------------------------------- */

.elementor[data-elementor-type="wp-page"] {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

.admin-bar .elementor[data-elementor-type="wp-page"] {
	min-height: calc(100vh - 32px);
	min-height: calc(100svh - 32px);
}

.elementor[data-elementor-type="wp-page"] > .sk-gruppo:last-child {
	flex: 1 0 auto;
}

.elementor[data-elementor-type="wp-page"] > .e-con.sk-gruppo:last-child:not(:has(> .sk-banda ~ .sk-banda)) {
	display: flex;
	flex-direction: column;
}

.elementor[data-elementor-type="wp-page"] > .sk-gruppo:last-child:not(:has(> .sk-banda ~ .sk-banda)) > .sk-banda {
	flex: 1 0 auto;
}

/* Nella griglia di una banda il margine sopra un widget Elementor lo mette sul
   contenitore interno, che ha anche `height: 100%`: la card finirebbe alta quanto
   la riga più il margine. Il widget diventa una colonna e il contenitore prende
   lo spazio che resta, così card affiancate restano alte uguale senza allungarsi. */
.sk-banda .elementor-widget:not(.elementor-absolute) {
	display: flex;
	flex-direction: column;
}

.sk-banda .elementor-widget:not(.elementor-absolute) > .elementor-widget-container {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

/* Ritmo verticale delle bande costruite a mano: 160 / 96 / 72. */
.sk-banda--ampia   { padding-block: var(--sk-space-160); }
.sk-banda--normale { padding-block: var(--sk-space-96); }
.sk-banda--stretta { padding-block: var(--sk-space-64); }

@media (max-width: 767px) {
	.sk-banda--ampia   { padding-block: var(--sk-space-96); }
	.sk-banda--normale { padding-block: var(--sk-space-64); }
	.sk-banda--stretta { padding-block: var(--sk-space-48); }
}

/* Colonna che segue lo scorrimento dentro la sua banda: il pannello della
   sezione funzioni, l'indice di un articolo. Su un widget serve la stessa
   forza del `position: relative` che Elementor dà a ogni elemento. */
.sk-segue,
.e-con.sk-segue,
.elementor-element.sk-segue {
	position: sticky;
	top: var(--sk-space-96);
	align-self: start;
	z-index: 2;
}

/* --------------------------------------------------------------------------
 * Tablet e telefono (Foundations — 03 Grid & full-bleed bands)
 *
 *   lg ≥ 1240    12 colonne, gutter 24, margine 80: il disegno del file
 *   sm 600–1239  una colonna larga, margine 40, gutter 20; card a due per
 *                riga, numeri a tre
 *   xs ≤ 599     le 4 colonne dell'app: margine 20, gutter 16; tutto in colonna
 *
 * Margini e padding delle bande li scrive Elementor dalle impostazioni
 * responsive di ogni banda. Qui: la griglia, gli elementi posizionati, i
 * pannelli che seguono lo scorrimento. Sono regole `!important` perché battono
 * il CSS che Elementor scrive per ogni singolo elemento con la sua posizione
 * sulle 12 colonne del desktop.
 * ----------------------------------------------------------------------- */

@media (max-width: 1239px) {
	.e-con.e-grid.sk-banda > .e-con-inner {
		grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
		column-gap: var(--sk-space-20) !important;
	}

	/* una colonna: niente righe esplicite, gli elementi seguono l'ordine della pagina */
	.e-con.e-grid.sk-banda > .e-con-inner {
		grid-template-rows: none !important;
	}

	.e-con.e-grid.sk-banda > .e-con-inner > .elementor-element {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}

	/* file di card e numeri stanno in una griglia di pagina (griglia() nei
	   generatori): colonne e spazi fra le card li decide lei, non questo foglio */

	/* Foto e card posizionate tornano nel flusso, nell'ordine della pagina: la
	   foto a tutta larghezza, le card che galleggiano sopra il suo bordo basso. */
	.e-con.e-grid.sk-banda > .e-con-inner > .elementor-element.elementor-absolute:not(.sk-decoro) {
		position: relative !important;
		inset: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		--container-widget-width: 100% !important;
	}

	.e-con.e-grid.sk-banda > .e-con-inner > .elementor-element.elementor-absolute.elementor-widget-image img {
		width: 100%;
		height: auto;
	}

	/* due foto di seguito stanno affiancate; la foto della hero, da sola, al centro */
	.e-con.e-grid.sk-banda > .e-con-inner > .elementor-element.elementor-absolute.elementor-widget-image:not(.sk-decoro) {
		grid-column: span 3 !important;
		align-self: end;
	}

	/* La foto della hero passa dietro il testo: fuori dal flusso, più larga delle
	   colonne, spostata a destra e ancorata in basso, con i piedi che escono dalla
	   sezione (il gruppo li taglia). Non si muove: sotto i 1240 px la parallasse è
	   spenta.
	   Le variabili stanno su una classe sola, così il CSS personalizzato della foto
	   in Elementor le può cambiare. Due dipendono dalla foto e si scrivono lì:
	   --sk-foto-hero-proporzione (altezza / larghezza della PNG) e
	   --sk-foto-hero-vuoto (la parte trasparente sotto i piedi, in frazione
	   dell'altezza). Il resto è del tema:
	   larghezza (in volte la banda), sinistra, sotto (lo spazio della banda sotto il
	   contenuto) e taglio (quanto della figura esce dalla sezione). */
	.sk-foto-hero {
		--sk-foto-hero-larghezza: 1.15;
		--sk-foto-hero-sinistra: 24%;
		--sk-foto-hero-sotto: 128px;
		--sk-foto-hero-taglio: var(--sk-space-64);
		--sk-foto-hero-proporzione: 1;
		--sk-foto-hero-vuoto: 0;
	}

	.e-con.e-grid.sk-banda > .e-con-inner > .elementor-element.elementor-absolute.elementor-widget-image.sk-foto-hero {
		position: absolute !important;
		inset: auto !important;
		top: auto !important;
		bottom: calc(-1 * (var(--sk-foto-hero-sotto) + var(--sk-foto-hero-taglio) + var(--sk-foto-hero-larghezza) * 100vw * var(--sk-foto-hero-proporzione) * var(--sk-foto-hero-vuoto))) !important;
		left: var(--sk-foto-hero-sinistra) !important;
		width: calc(var(--sk-foto-hero-larghezza) * 100%) !important;
		max-width: none !important;
		margin: 0 !important;
		z-index: 0;
		pointer-events: none;
	}

	.e-con.e-grid.sk-banda > .e-con-inner > .elementor-element.elementor-absolute:not(.elementor-widget-image):not(.sk-decoro) {
		justify-self: start;
		/* alta quanto il suo contenuto: con il margine negativo la griglia la stirerebbe */
		align-self: start;
		width: auto !important;
		max-width: min(100% - var(--sk-space-40), var(--sk-span-4)) !important;
		/* quanto la card sale sulla foto: 64 di base, una foto può chiederne di più
		   dal suo CSS personalizzato (selector + .elementor-element) */
		margin-top: calc(var(--sk-sovrapposizione, var(--sk-space-64)) * -1) !important;
		margin-left: var(--sk-space-20) !important;
	}

	.e-con.e-grid.sk-banda > .e-con-inner > .elementor-absolute:not(.elementor-widget-image) + .elementor-absolute:not(.elementor-widget-image) {
		margin-top: var(--sk-space-12) !important;
	}

	/* con la foto come sfondo, le card che le galleggiavano accanto sul desktop
	   non hanno più posto */
	.e-con.e-grid.sk-banda > .e-con-inner > .sk-foto-hero ~ .elementor-element.elementor-absolute:not(.elementor-widget-image):not(.sk-decoro) {
		display: none !important;
	}

	/* Foto ritagliata: sul desktop intera, qui centrata e larga al massimo cinque
	   colonne (sul telefono da bordo a bordo). Il ritaglio dipende dalla foto (dove
	   stanno le figure nella PNG), quindi sta nel CSS personalizzato dell'immagine
	   in Elementor, non qui. */
	.e-con.e-grid.sk-banda > .e-con-inner > .sk-foto-ritaglio {
		justify-self: center;
		width: 100% !important;
		max-width: var(--sk-span-5) !important;
	}

	/* dopo una foto ritagliata la card torna nel flusso e ne copre il bordo basso */
	.e-con.e-grid.sk-banda > .e-con-inner > .sk-foto-ritaglio + .elementor-element.elementor-absolute:not(.elementor-widget-image):not(.sk-decoro) {
		justify-self: center;
		width: var(--sk-span-4) !important;
		margin-left: 0 !important;
	}

	/* Righe che servono solo sul desktop: l'elenco delle funzioni, per esempio,
	   che su tablet e telefono lascia il posto al carosello dei suoi pannelli. */
	.sk-solo-desktop {
		display: none !important;
	}

	/* Carosello: i figli in fila. Senza GSAP (o con il movimento ridotto) la fila
	   si scorre col dito; con GSAP la sezione si ferma e la fila scorre da sola
	   mentre si scende (animazioni.js, classe --guidato). */
	.e-con.sk-carosello {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: stretch !important;
		gap: var(--sk-space-20) !important;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}

	.e-con.sk-carosello::-webkit-scrollbar {
		display: none;
	}

	.e-con.sk-carosello.sk-carosello--guidato {
		overflow: visible;
		scroll-snap-type: none;
	}

	/* Card che scorrono sotto il dito: un livello già pronto per il transform e niente
	   sfocatura ricalcolata a ogni frame, che sui telefoni lampeggia. Il vetro diventa
	   la sua superficie piena, come quando il browser non sa sfocare. */
	.e-con.sk-carosello.sk-carosello--guidato > .elementor-element {
		will-change: transform;
	}

	.e-con.sk-carosello.sk-carosello--guidato > .e-con.sk-card--glass-dark {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: var(--sk-surface-dark-raised);
	}

	.e-con.sk-carosello.sk-carosello--guidato > .e-con.sk-card--glass-light {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background-color: var(--sk-glass-light-fill-strong);
	}

	.e-con.sk-carosello > .elementor-element {
		flex: 0 0 calc((100% - var(--sk-space-20)) / 2) !important;
		width: auto !important;
		max-width: none !important;
		scroll-snap-align: start;
	}

	/* nel carosello i pannelli ci sono tutti, non uno alla volta */
	.e-con.sk-carosello > .elementor-element[hidden] {
		display: flex !important;
	}

	.sk-gruppo:has(.sk-carosello) {
		overflow-x: clip;
	}

	/* ferma, la sezione occupa tutta la finestra: sotto non resta la pagina vuota */
	.e-con.sk-gruppo:has(.sk-carosello--guidato) {
		display: flex !important;
		flex-direction: column;
		justify-content: center;
		min-height: 100vh;
	}

	/* il glifo delle CTA (figlio del gruppo, non della banda) resta un decoro
	   dietro il testo, ancorato a destra */
	.elementor-element.elementor-absolute.sk-decoro {
		left: auto !important;
		right: calc(var(--sk-space-40) * -1) !important;
		width: 56% !important;
		max-width: 56% !important;
		opacity: 0.7;
	}

	/* un pannello sticky affiancato non ha più una colonna da seguire */
	.sk-segue,
	.e-con.sk-segue,
	.elementor-element.sk-segue {
		position: relative !important;
		top: auto;
	}
}

@media (max-width: 599px) {
	.e-con.e-grid.sk-banda > .e-con-inner {
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
		column-gap: var(--sk-space-16) !important;
	}

	.elementor-element.elementor-absolute.sk-decoro {
		display: none !important;
	}

	/* due foto di seguito restano affiancate anche sul telefono: una sotto l'altra
	   raddoppierebbero la pagina */
	.e-con.e-grid.sk-banda > .e-con-inner > .elementor-element.elementor-absolute.elementor-widget-image:not(.sk-decoro) {
		grid-column: span 2 !important;
	}

	/* sul telefono la foto dietro il testo è quasi due volte la banda e parte
	   vicino al margine sinistro: la figura esce dal bordo destro */
	.sk-foto-hero {
		--sk-foto-hero-larghezza: 1.9;
		--sk-foto-hero-sinistra: 8%;
		--sk-foto-hero-sotto: 96px;
	}

	/* sul telefono la foto ritagliata esce dai margini: da bordo a bordo */
	.e-con.e-grid.sk-banda > .e-con-inner > .sk-foto-ritaglio {
		justify-self: start;
		width: calc(100% + var(--sk-space-20) * 2) !important;
		max-width: none !important;
		margin-left: calc(var(--sk-space-20) * -1) !important;
	}

	.e-con.sk-carosello {
		gap: var(--sk-space-16) !important;
	}

	/* una card intera e l'inizio della prossima, che dice che la fila continua */
	.e-con.sk-carosello > .elementor-element {
		flex-basis: calc(100% - var(--sk-space-40)) !important;
	}

	.e-con.e-grid.sk-banda > .e-con-inner > .elementor-element.elementor-absolute:not(.elementor-widget-image):not(.sk-decoro) {
		margin-left: var(--sk-space-16) !important;
		max-width: calc(100% - var(--sk-space-32)) !important;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Un elemento nascosto da uno script (pannelli, prezzi con e senza IVA,
   categorie delle FAQ): [hidden] da solo non batte il display di Elementor. */
.elementor-element[hidden] {
	display: none !important;
}

/* lo stato alternativo di uno scambio resta nascosto finché lo script non
   sceglie: senza, si vedrebbero i due prezzi insieme per un attimo */
.elementor-element.sk-riserva {
	display: none !important;
}

.screen-reader-text:focus {
	position: fixed;
	top: var(--sk-space-16);
	left: var(--sk-space-16);
	z-index: 100000;
	width: auto;
	height: auto;
	padding: var(--sk-space-12) var(--sk-space-20);
	clip-path: none;
	background-color: var(--sk-surface-paper);
	border-radius: var(--sk-radius-sm);
	box-shadow: var(--sk-glass-panel-shadow);
}