/*
 * Pagine a blocchi di /l/ (modello "Pagina a blocchi (vuota)").
 * Caricato solo su quelle pagine e nell'editor: le pagine Elementor non lo vedono.
 * Font: Manrope per i testi, Fjalla One per i titoli display, come il sito principale.
 */

body.sv-blocchi {
	margin: 0;
	background: #fff;
	color: #000;
	font-family: var(--wp--preset--font-family--testo, Manrope, system-ui, sans-serif);
	font-size: 17px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}
.sv-blocchi *,
.sv-blocchi *::before,
.sv-blocchi *::after { box-sizing: border-box; }

/* le sezioni si toccano, come in Elementor */
.sv-blocchi__contenuto > * { margin-block: 0; }

.sv-blocchi :where(h1, h2, h3, h4, h5, h6) { margin: 0; line-height: 1.15; font-weight: 800; }
.sv-blocchi :where(p) { margin: 0; }
.sv-blocchi img { max-width: 100%; height: auto; }
.sv-blocchi :where(a) { color: #c0392b; text-decoration: none; }
.sv-blocchi :where(a):hover { text-decoration: underline; }

/* contenitori più stretti della sezione (larghezza in % di Elementor).
   Sul telefono, come in Elementor, quelli dall'80% in su restano tali,
   gli altri occupano tutta la riga */
.sv-blocchi [class*="sv-larghezza-"] { margin-inline: auto; }
.sv-larghezza-80 { width: 80%; } .sv-larghezza-85 { width: 85%; } .sv-larghezza-90 { width: 90%; }
.sv-larghezza-92 { width: 92%; } .sv-larghezza-95 { width: 95%; }
@media (min-width: 768px) {
	.sv-larghezza-20 { width: 20%; } .sv-larghezza-25 { width: 25%; } .sv-larghezza-30 { width: 30%; }
	.sv-larghezza-33 { width: 33.33%; } .sv-larghezza-35 { width: 35%; } .sv-larghezza-40 { width: 40%; }
	.sv-larghezza-45 { width: 45%; } .sv-larghezza-50 { width: 50%; } .sv-larghezza-55 { width: 55%; }
	.sv-larghezza-60 { width: 60%; } .sv-larghezza-65 { width: 65%; } .sv-larghezza-66 { width: 66.66%; }
	.sv-larghezza-70 { width: 70%; } .sv-larghezza-71 { width: 71%; } .sv-larghezza-75 { width: 75%; }
	.sv-larghezza-80 { width: 80%; } .sv-larghezza-85 { width: 85%; } .sv-larghezza-90 { width: 90%; }
	.sv-larghezza-92 { width: 92%; } .sv-larghezza-95 { width: 95%; }
}

/* visibilità per dispositivo (le opzioni "nascondi su" di Elementor) */
@media (max-width: 767px) { .sv-nascondi-mobile { display: none !important; } }
@media (min-width: 768px) and (max-width: 1024px) { .sv-nascondi-tablet { display: none !important; } }
@media (min-width: 1025px) { .sv-nascondi-desktop { display: none !important; } }

/* elenchi con icona (icon list di Elementor) */
.sv-blocchi .sv-lista { list-style: none; padding-left: 0; }
.sv-blocchi .sv-lista li { position: relative; padding-left: 1.6em; }
.sv-blocchi .sv-lista li + li { margin-top: .4em; }
.sv-blocchi .sv-lista li::before { position: absolute; left: 0; top: 0; font-weight: 800; }
.sv-blocchi .sv-icona-check li::before { content: "✓"; }
.sv-blocchi .sv-icona-x li::before { content: "✗"; }
.sv-blocchi .sv-icona-stella li::before { content: "★"; }
.sv-blocchi .sv-icona-freccia li::before { content: "→"; }
.sv-blocchi .sv-icona-punto li::before { content: "•"; }

/* tabelle prezzi (come il widget di Elementor Pro: testa, prezzo, elenco, piede) */
.sv-blocchi .sv-prezzo { background: #fff; overflow: hidden; }
.sv-blocchi .sv-prezzo > * { margin-block: 0; }
.sv-blocchi .sv-prezzo__testa { padding: 20px; }
.sv-blocchi .sv-prezzo__testa > * { margin-block: 0 6px; }
.sv-blocchi .sv-prezzo__corpo { padding: 30px 30px 10px; }
.sv-blocchi .sv-prezzo__piede { padding: 20px 30px 30px; }
.sv-blocchi .sv-prezzo__cifra { font-size: 65px; font-weight: 800; line-height: 1; margin-bottom: 4px; }
.sv-blocchi .sv-prezzo__periodo { font-size: 16px; }
.sv-blocchi .sv-prezzo__nastro { display: inline-block; padding: 3px 14px; border-radius: 999px; background: #000; color: #fff; font-size: 14px; }
.sv-blocchi .sv-prezzo__testa:has(.sv-prezzo__nastro) { text-align: center; }

/* modulo email (sostituisce il form Elementor: GET verso lo script di smistamento) */
.sv-modulo-email { display: grid; gap: 28px; width: 100%; font-size: 18px; }
@media (max-width: 767px) { .sv-modulo-email { gap: 22px; } .sv-modulo-email__consenso { font-size: 14px; } .sv-modulo-email__campo input { font-size: 14px; } }
.sv-modulo-email__campo { display: grid; gap: 8px; }
.sv-modulo-email__campo input {
	width: 100%; font: inherit; color: #000; background: #fff;
	padding: 10px 15px; border: 1px solid #69727d; border-radius: 15px;
}
.sv-modulo-email__campo input:focus { outline: 2px solid #05211B; outline-offset: 1px; }
.sv-modulo-email__consenso { display: flex; gap: .5em; align-items: baseline; }
.sv-modulo-email__consenso input { flex: none; }
.sv-modulo-email button {
	width: 100%; padding: 10px; border: 0; border-radius: 15px; cursor: pointer;
	background: #D8FD45; color: #000;
	font-family: var(--wp--preset--font-family--display, "Fjalla One", sans-serif);
	font-size: clamp(24px, calc(9px + 1.95vw), 29px); font-weight: 700; text-transform: uppercase;
}
.sv-modulo-email button:hover { filter: brightness(.95); }

/* icona singola (ex widget Icona di Elementor) */
.sv-blocchi .sv-icona-sola svg { display: inline-block; vertical-align: middle; }

/* recensioni (ex widget Recensione di Happy Addons) */
.sv-blocchi .sv-recensione { background: #fff; padding: 25px; border-radius: 3px; box-shadow: 0 0 10px rgba(0, 0, 0, .08); }
.sv-blocchi .sv-recensione > * { margin-block: 0 10px; }
.sv-blocchi .sv-recensione__ruolo { color: #7f7f7f; }
.sv-blocchi .sv-recensione__stelle { color: #ffbf36; font-size: 14px; letter-spacing: 2px; margin-bottom: 0; }

/* passaggi (ex widget Step Flow di Happy Addons) */
.sv-blocchi .sv-passo__icona { width: 125px; height: 125px; margin: 0 auto 15px; border-radius: 50%; background: #e9ecf0; display: flex; align-items: center; justify-content: center; }
.sv-blocchi .sv-passo__titolo { font-size: 22px; font-weight: 600; text-transform: uppercase; margin-block: 0 5px; }

/* testimonianze (ex carosello di Elementor: le slide sono tutte visibili) */
.sv-blocchi .sv-testimonianze { gap: 40px; }
.sv-blocchi .sv-testimonianza__testo { font-style: italic; font-size: 16px; line-height: 1.4; }
.sv-blocchi .sv-testimonianza__nome { font-weight: 700; font-size: 14px; margin-block: 12px 0; }
.sv-blocchi .sv-testimonianza__ruolo { font-size: 14px; margin-top: 0; }
.sv-blocchi .sv-prezzo__vecchio { font-size: .5em; font-weight: 500; opacity: .6; vertical-align: middle; }

/* come Elementor: i testi senza un colore loro non diventano bianchi dentro le sezioni con immagine */
.sv-blocchi .wp-block-cover, .sv-blocchi .wp-block-cover.is-light { color: inherit; }
/* pulsanti senza colori loro: i valori predefiniti di Elementor */
.sv-blocchi .wp-block-button__link { color: #fff; background-color: #69727d; }
/* sezioni "sticky in basso" di Elementor: restano attaccate al fondo dello schermo */
.sv-blocchi .sv-fisso-basso { position: sticky; bottom: 0; z-index: 90; }
/* una parola troppo lunga per lo schermo va a capo invece di far scorrere la pagina */
.sv-blocchi :is(h1, h2, h3, h4, h5, h6, p) { overflow-wrap: break-word; }
/* gallerie: su mobile una foto per riga, come in Elementor */
@media (max-width: 767px) {
	.sv-blocchi .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: 100%; }
}

/* variabili globali del kit Elementor: molti testi incollati in Elementor le usano negli stili in linea
   (color: var(--e-global-color-text) ...): senza, il testo prenderebbe il colore della sezione */
.sv-blocchi {
	--e-global-color-primary: #000000;
	--e-global-color-secondary: #54595F;
	--e-global-color-text: #000000;
	--e-global-color-accent: #61CE70;
	--e-global-color-4adee528: #4054B2;
	--e-global-color-6305ab2: #23A455;
	--e-global-color-53480ef0: #000;
	--e-global-color-2634a493: #FFF;
	--e-global-color-7920fca: #003049;
	--e-global-color-0b42150: #E54461;
	--e-global-typography-primary-font-family: "Manrope";
	--e-global-typography-primary-font-weight: 600;
	--e-global-typography-secondary-font-family: "Manrope";
	--e-global-typography-secondary-font-weight: 400;
	--e-global-typography-text-font-family: "Manrope";
	--e-global-typography-text-font-weight: 400;
	--e-global-typography-accent-font-family: "Manrope";
	--e-global-typography-accent-font-weight: 500;
	--e-global-typography-text-font-size: 18px;
}

/* riquadri con icona (ex widget Icon Box di Elementor) */
.sv-blocchi .sv-icon-box { gap: 15px; }
.sv-blocchi .sv-icon-box__icona svg { display: inline-block; vertical-align: top; }
.sv-blocchi .sv-icon-box__testi > :first-child { margin-top: 0; }
.sv-blocchi .sv-icon-box__titolo { margin-block: 0 10px; }

/* Font delle pagine Elementor che nei testi incollati compaiono ancora per nome (stili in linea,
   CSS delle pagine): sulle pagine a blocchi diventano Manrope, o Fjalla One i condensati,
   come il resto della migrazione, invece di ripiegare su un font di sistema. */
@font-face { font-family: "Poppins"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Rubik"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Roboto"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Quicksand"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Titillium Web"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Raleway"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Public Sans"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Open Sans"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Lato"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/manrope-variabile-latin.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Oswald"; src: url("fonts/fjallaone-400-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url("fonts/fjallaone-400-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Anton"; src: url("fonts/fjallaone-400-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "League Gothic"; src: url("fonts/fjallaone-400-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/fjallaone-400-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }