/**
 * SVETIX — TESTATA, MENU E PIE DI PAGINA su misura.
 *
 * Tutto quello che qui si regola arriva da variabili CSS scritte dal
 * Companion Plugin: questo foglio non contiene numeri fissi se non i valori di
 * ripiego, quelli che servono quando il plugin non e attivo.
 *
 * Caricato DOPO style.css, quindi puo raffinare le regole di base senza
 * bisogno di !important.
 *
 * Indice:
 *   1. Misure del menu in linea
 *   2. Comportamento della testata allo scorrimento
 *   3. Disposizione degli elementi nella testata
 *   4. Larghezza, sfondo e spaziature della testata
 *   5. Pie di pagina su misura
 *   6. Pulsante "torna su"
 *   7. Adattamenti per schermi piccoli
 *   8. Titolo e immagine in evidenza
 *   9. Barra superiore
 *  10. Ricerca nella testata
 *  11. Modo compatto
 *  12. Bandierine nella testata
 *  13. Posizione della barra orizzontale
 *  15. Posizione del logo
 *  14. Menu compatto: come si apre
 */

/* ==========================================================================
   1. MISURE DEL MENU IN LINEA
   Spazio fra le voci, imbottitura, peso, spaziatura delle lettere,
   arrotondamento e spessore dell'indicatore: tutto regolabile dal pannello.
   ========================================================================== */
.sx-nav--inline .sx-menu,
.sx-nav--dock .sx-menu {
	gap: var(--sx-menu-gap, 8px);
}

.sx-nav--inline .sx-menu > li > a,
.sx-nav--dock .sx-menu > li > a {
	padding: var(--sx-menu-pad-y, 8px) var(--sx-menu-pad-x, 12px);
	font-weight: var(--sx-menu-fw, 500);
	letter-spacing: var(--sx-menu-ls, -.008em);
	border-radius: var(--sx-menu-radius, 999px);
}

/* Lo spessore della linea che segnala la voce attiva, e i suoi margini
   laterali, che devono seguire l'imbottitura scelta per le voci. */
.sx-menu--underline a::after {
	height: var(--sx-menu-indicator, 2px);
	left: var(--sx-menu-pad-x, 12px);
	right: var(--sx-menu-pad-x, 12px);
}

/* Larghezza dei sottomenu a tendina. */
.sx-nav .sub-menu {
	min-width: var(--sx-submenu-w, 210px);
}

/* ==========================================================================
   2. COMPORTAMENTO DELLA TESTATA ALLO SCORRIMENTO
   Quattro modi, uno solo attivo per volta. La classe la mette il tema.
   ========================================================================== */

/* 2a. Scorre via con la pagina: non serve nulla, e il comportamento nativo. */
.sx-header--b-static {
	position: relative;
}

/* 2b. Resta fissa in cima. "sticky" e non "fixed": non toglie spazio al
   contenuto, quindi non serve alcun distanziatore.

   Perche funzioni servono due condizioni, entrambe soddisfatte:
   - nessun antenato deve essere un contenitore di scorrimento (per questo in
     style.css il body usa "overflow-x: clip" e non "hidden");
   - la testata non deve stare dentro a un elemento con altezza limitata. */
.sx-header--b-sticky:not(.sx-header--glass):not(.sx-header--transparent),
.sx-header--b-hide:not(.sx-header--glass):not(.sx-header--transparent),
.sx-header--b-shrink:not(.sx-header--glass):not(.sx-header--transparent) {
	position: sticky;
	top: 0;
}

.admin-bar .sx-header--b-sticky:not(.sx-header--glass):not(.sx-header--transparent),
.admin-bar .sx-header--b-hide:not(.sx-header--glass):not(.sx-header--transparent),
.admin-bar .sx-header--b-shrink:not(.sx-header--glass):not(.sx-header--transparent) {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .sx-header--b-sticky:not(.sx-header--glass):not(.sx-header--transparent),
	.admin-bar .sx-header--b-hide:not(.sx-header--glass):not(.sx-header--transparent),
	.admin-bar .sx-header--b-shrink:not(.sx-header--glass):not(.sx-header--transparent) {
		top: 46px;
	}
}

/* La testata trasparente diventa fissa appena si scorre: prima galleggia
   sopra all'hero, dopo si aggancia. */
.sx-header--transparent.sx-header--b-sticky.is-stuck,
.sx-header--transparent.sx-header--b-shrink.is-stuck,
.sx-header--transparent.sx-header--b-hide.is-stuck {
	position: fixed;
	inset: 0 0 auto 0;
}

/* Con "scorre via con la pagina" nessuna testata si aggancia, nemmeno quelle
   che di natura sarebbero fisse: e quello che l'impostazione promette. */
.sx-header--b-static.sx-header--glass,
.sx-header--b-static.sx-header--transparent {
	position: absolute;
}

.sx-header--b-static.sx-header--glass.is-stuck,
.sx-header--b-static.sx-header--transparent.is-stuck {
	position: absolute;
}

/* 2c. Si nasconde scendendo, torna salendo.
   La transizione sta qui e non sulla classe .is-hidden, cosi il ritorno e
   morbido quanto l'uscita. */
.sx-header--b-hide {
	transition: transform var(--sx-dur, .38s) var(--sx-ease, ease),
		background-color var(--sx-dur, .38s) var(--sx-ease, ease),
		box-shadow var(--sx-dur, .38s) var(--sx-ease, ease);
	will-change: transform;
}

.sx-header--b-hide.is-hidden {
	transform: translateY(-100%);
}

/* La testata vetro fluttua staccata dal bordo: per sparire davvero deve
   risalire anche di quello scarto. */
.sx-header--glass.sx-header--b-hide.is-hidden {
	transform: translateY(calc(-100% - clamp(10px, 1.6vw, 20px)));
}

/* 2d. Si rimpicciolisce scorrendo: meno alta, logo piu piccolo. */
.sx-header--b-shrink .sx-header__inner,
.sx-header--b-shrink .sx-brand__logo svg,
.sx-header--b-shrink .sx-brand__logo img {
	transition: min-height var(--sx-dur, .38s) var(--sx-ease, ease),
		max-height var(--sx-dur, .38s) var(--sx-ease, ease);
}

.sx-header--b-shrink.is-stuck .sx-header__inner {
	min-height: var(--sx-header-h-small, 60px);
}

.sx-header--b-shrink.is-stuck .sx-brand__logo svg,
.sx-header--b-shrink.is-stuck .sx-brand__logo img {
	max-height: calc(var(--sx-logo-h, 32px) * .82);
}

/* ==========================================================================
   3. DISPOSIZIONE DEGLI ELEMENTI NELLA TESTATA
   ========================================================================== */
.sx-header__inner {
	position: relative;
	padding-inline: var(--sx-header-pad-x, 0px);
}

/* 3a. Logo a sinistra, menu e bottone a destra: e il comportamento di base. */

/* 3b. Menu al centro: il logo resta a sinistra, il bottone a destra e il menu
   viene centrato rispetto alla testata, non rispetto allo spazio che avanza. */
@media (min-width: 981px) {

	.sx-header--l-menu-center .sx-nav--inline {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	/* 3c. Menu subito accanto al logo, bottone spinto all'estremita. */
	.sx-header--l-split .sx-header__actions {
		flex: 1;
		justify-content: space-between;
		margin-left: clamp(16px, 3vw, 40px);
	}
}

/* 3d. Logo centrato, menu sotto: due righe, il classico impianto editoriale. */
.sx-header--l-logo-center .sx-header__inner {
	flex-direction: column;
	justify-content: center;
	gap: .7rem;
	padding-block: .9rem;
}

.sx-header--l-logo-center .sx-header__actions {
	width: 100%;
	justify-content: center;
}

.sx-header--l-logo-center .sx-brand {
	justify-content: center;
}

/* ==========================================================================
   4. LARGHEZZA, SFONDO E SPAZIATURE DELLA TESTATA
   ========================================================================== */

/* A tutto schermo: il contenitore perde il suo limite di larghezza. */
.sx-header--w-full > .sx-container {
	max-width: none;
}

/* Sfondo con opacita o colore scelti nel pannello. La variabile esiste solo
   se serve davvero: altrimenti resta il colore della variante. */
.sx-header--standard {
	background: var(--sx-header-bg, var(--sx-bg));
}

.sx-header--transparent.is-stuck {
	background: var(--sx-header-bg, var(--sx-overlay));
	-webkit-backdrop-filter: saturate(180%) blur(var(--sx-header-blur, 18px));
	backdrop-filter: saturate(180%) blur(var(--sx-header-blur, 18px));
}

.sx-header--glass .sx-header__inner {
	background: var(--sx-header-bg, var(--sx-overlay));
	-webkit-backdrop-filter: saturate(180%) blur(var(--sx-header-blur, 22px));
	backdrop-filter: saturate(180%) blur(var(--sx-header-blur, 22px));
}

/* Con la sfocatura a zero non ha senso pagarne il costo di rendering. */
.sx-header--noblur .sx-header__inner,
.sx-header--noblur.sx-header--transparent.is-stuck {
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

/* Spazio fra la testata e l'inizio del contenuto. In style.css il contenuto
   parte con la spaziatura larga delle sezioni: qui si separa il solo margine
   superiore, che e quello che si vede sotto alla barra. */
.sx-main {
	padding-top: var(--sx-content-top, 20px);
	padding-bottom: var(--sx-content-bottom, 40px);
}

/* ==========================================================================
   5. PIE DI PAGINA SU MISURA
   ========================================================================== */
.sx-footer {
	font-size: var(--sx-footer-fs, .92rem);
}

.sx-footer__widgets {
	gap: var(--sx-footer-gap, 40px);
	padding-top: var(--sx-footer-pt, 72px);
	padding-bottom: calc(var(--sx-footer-pt, 72px) * .45);
}

.sx-footer__bottom {
	padding-top: calc(var(--sx-footer-pb, 40px) * .5);
	padding-bottom: var(--sx-footer-pb, 40px);
}

/* Quando la riga finale e l'unico contenuto rimasto non deve portarsi dietro
   la linea di separazione: senza widget sopra non separa piu niente. */
.sx-footer--no-widgets .sx-footer__bottom { border-top: 0; }

/* Blocchi tolti uno a uno dal pannello: restano fuori dal flusso. */
.sx-footer__col.is-hidden,
.sx-footer__bottom.is-hidden { display: none; }

/* Blocco marchio nel pie di pagina: logo piu una riga di presentazione. */
.sx-footer__brand {
	display: flex;
	flex-direction: column;
	gap: .7rem;
	max-width: 34ch;
}

.sx-footer__brand .sx-logo,
.sx-footer__brand img {
	height: var(--sx-footer-logo-h, 30px);
	width: auto;
	max-width: 100%;
}

.sx-footer__tagline {
	margin: 0;
	color: var(--sx-text-muted);
	line-height: 1.6;
}

/* Allineamento generale del pie di pagina. */
.sx-footer--a-center .sx-footer__widgets,
.sx-footer--a-center .sx-footer__bottom { text-align: center; justify-content: center; }
.sx-footer--a-center .sx-footer__brand { align-items: center; margin-inline: auto; }
.sx-footer--a-center .sx-footer__nav .sx-menu { justify-content: center; }

.sx-footer--a-right .sx-footer__widgets,
.sx-footer--a-right .sx-footer__bottom { text-align: right; justify-content: flex-end; }
.sx-footer--a-right .sx-footer__brand { align-items: flex-end; margin-left: auto; }

/* Riga finale incolonnata invece che affiancata. */
.sx-footer--stack .sx-footer__bottom {
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: .9rem;
}

.sx-footer--a-left.sx-footer--stack .sx-footer__bottom {
	align-items: flex-start;
	text-align: left;
}

.sx-footer--a-right.sx-footer--stack .sx-footer__bottom {
	align-items: flex-end;
	text-align: right;
}

/* ==========================================================================
   6. PULSANTE "TORNA SU"
   Compare solo dopo un po' di scorrimento: prima non servirebbe a nulla e
   coprirebbe il contenuto.
   ========================================================================== */
.sx-backtotop {
	position: fixed;
	right: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: 80;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: var(--sx-text);
	background: var(--sx-overlay);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: 50%;
	box-shadow: var(--sx-shadow);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity var(--sx-dur, .38s) var(--sx-ease, ease),
		transform var(--sx-dur, .38s) var(--sx-ease, ease),
		visibility var(--sx-dur, .38s);
}

.sx-backtotop.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sx-backtotop:hover {
	border-color: var(--sx-primary);
	box-shadow: var(--sx-glow);
}

.sx-backtotop svg { width: 17px; height: 17px; }

/* Con il menu a dock in basso il pulsante salirebbe sopra la barra. */
.sx-menu-mode--dock .sx-backtotop { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

/* ==========================================================================
   7. SCHERMI PICCOLI
   ========================================================================== */
@media (max-width: 980px) {

	.sx-header__inner {
		min-height: var(--sx-header-h-mobile, 62px);
	}

	/* Il logo centrato su due righe mangia troppo spazio verticale. */
	.sx-header--l-logo-center .sx-header__inner {
		flex-direction: row;
		justify-content: space-between;
		gap: 1rem;
		padding-block: 0;
	}

	.sx-header--l-logo-center .sx-header__actions { width: auto; }
	.sx-header--l-split .sx-header__actions { flex: 0 1 auto; margin-left: 0; }

	.sx-backtotop { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
	.sx-header--b-hide,
	.sx-header--b-shrink .sx-header__inner,
	.sx-backtotop { transition: none; }
}

/* ==========================================================================
   8. TITOLO E IMMAGINE IN EVIDENZA
   Il titolo puo essere nascosto, allineato e ridimensionato; l'immagine ha
   quattro modi di presentarsi.
   ========================================================================== */
.sx-page-header {
	margin-bottom: var(--sx-title-space, 40px);
}

.sx-page-header--center { text-align: center; }
.sx-page-header--center .sx-entry__meta { justify-content: center; }
.sx-page-header--right { text-align: right; }
.sx-page-header--right .sx-entry__meta { justify-content: flex-end; }

.sx-entry__title {
	font-size: calc(var(--sx-h1) * var(--sx-title-scale, 1));
}

.sx-featured {
	margin: 0 0 var(--sx-title-space, 40px);
	overflow: hidden;
	border-radius: var(--sx-radius-lg);
}

.sx-featured img {
	display: block;
	width: 100%;
	height: auto;
}

.sx-featured--square { border-radius: 0; }

.sx-featured__caption {
	margin-top: .7rem;
	font-size: var(--sx-fs-small, .88rem);
	color: var(--sx-text-muted);
}

/* Sborda oltre la colonna del testo, restando dentro la pagina. */
@media (min-width: 981px) {
	.sx-featured--wide {
		width: calc(100% + 2 * clamp(20px, 5vw, 90px));
		margin-left: clamp(-90px, -5vw, -20px);
	}
}

/* Da un bordo all'altro dello schermo: si annulla il contenitore. */
.sx-featured--full,
.sx-featured--hero {
	position: relative;
	left: 50%;
	width: 100vw;
	margin-left: -50vw;
	border-radius: 0;
	max-width: 100vw;
}

/* Fascia alta, ritagliata all'altezza scelta. */
.sx-featured--hero img {
	height: var(--sx-featured-h, 420px);
	object-fit: cover;
}

/* ==========================================================================
   9. BARRA SUPERIORE (sopra la testata)
   Una riga per un avviso, una promozione o un contatto. Si chiude e resta
   chiusa per quella persona, senza ricomparire a ogni pagina.
   ========================================================================== */
.sx-topbar {
	position: relative;
	z-index: 101;
	font-size: var(--sx-fs-small, .86rem);
	background: var(--sx-surface-2);
	color: var(--sx-text);
	border-bottom: var(--sx-border-w) solid var(--sx-border);
}

.sx-topbar--accent {
	background: var(--sx-gradient);
	color: var(--sx-primary-contrast);
	border-bottom-color: transparent;
}

.sx-topbar--contrast {
	background: var(--sx-text);
	color: var(--sx-bg);
	border-bottom-color: transparent;
}

.sx-topbar__inner {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .8rem;
	flex-wrap: wrap;
	min-height: 40px;
	padding-block: .45rem;
	padding-right: 32px;
}

.sx-topbar__text { margin: 0; }

.sx-topbar__link {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .18em;
	font-weight: 600;
	white-space: nowrap;
}

.sx-topbar__close {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	color: inherit;
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	opacity: .7;
}

.sx-topbar__close:hover { opacity: 1; background: rgba(127, 127, 127, .18); }
.sx-topbar__close svg { width: 13px; height: 13px; }

/* Con la testata fissa, la barra deve scorrere via da sola. */
.sx-topbar.is-closed { display: none; }

/* Le testate fisse partono sotto alla barra e, una volta scorsa via, tornano
   al loro posto: cosi la barra non resta mai coperta ne lascia un buco. */
.sx-has-topbar .sx-header--glass {
	top: calc(var(--sx-topbar-h, 40px) + clamp(10px, 1.6vw, 20px));
}

.sx-has-topbar .sx-header--glass.is-stuck {
	top: clamp(10px, 1.6vw, 20px);
}

.sx-has-topbar .sx-header--transparent { top: var(--sx-topbar-h, 40px); }
.sx-has-topbar .sx-header--transparent.is-stuck { top: 0; }

/* ==========================================================================
   10. RICERCA NELLA TESTATA
   Un'icona che apre il campo: occupa un attimo lo spazio del menu e si
   richiude con ESC.
   ========================================================================== */
.sx-header__search { position: relative; display: flex; align-items: center; }

.sx-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: var(--sx-text-muted);
	background: none;
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: color var(--sx-dur) var(--sx-ease), background-color var(--sx-dur) var(--sx-ease);
}

.sx-search-toggle:hover { color: var(--sx-text); background: var(--sx-surface-2); }
.sx-search-toggle svg { width: 17px; height: 17px; }

.sx-header__searchform {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 30;
	width: min(340px, 78vw);
	padding: 10px;
	background: var(--sx-surface);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius);
	box-shadow: var(--sx-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity var(--sx-dur) var(--sx-ease), transform var(--sx-dur) var(--sx-ease), visibility var(--sx-dur);
}

.sx-header__search.is-open .sx-header__searchform {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.sx-header__searchform input[type="search"] { width: 100%; }

@media (prefers-reduced-motion: reduce) {
	.sx-header__searchform { transition: none; }
}

/* ==========================================================================
   11. MODO COMPATTO — il menu che si apre in orizzontale
   In testata restano il pulsante e la voce attiva. Al clic le voci si aprono
   in fila di lato; scegliendone una, la barra torna com'era e l'etichetta
   diventa quella scelta.
   ========================================================================== */
/* Pulsante, etichetta e menu sono un gruppo unico: cosi si possono spostare
   insieme, e l'etichetta resta sempre attaccata al pulsante. */
.sx-nav-compact {
	display: flex;
	align-items: center;
	gap: 2px;
	min-width: 0;
}

/* Le tre posizioni devono essere DAVVERO diverse fra loro.
 *
 * Il gruppo vive dentro alla zona comandi, che e allineata a destra e contiene
 * gia bandierine, ricerca e bottone: lasciandolo semplicemente "nel flusso" si
 * ferma dove lo spingono gli altri — cioe quasi al centro. Da fuori sembra che
 * l'impostazione non faccia niente. Per questo:
 *
 *   sinistra  esce dalla fila e si mette subito dopo il logo, spingendo
 *             tutto il resto verso destra;
 *   centro    si stacca dal flusso e si ancora a meta della barra;
 *   destra    resta nella fila ma va per ultimo, dopo bandierine e bottone.
 */
@media (min-width: 701px) {

	.sx-nav-compact--center {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	/* Perche il gruppo possa arrivare accanto al logo, la zona comandi deve
	   prima allargarsi fino a li: da sola parte gia spostata a destra. */
	.sx-compact-pos-left .sx-header__actions {
		flex: 1;
	}

	.sx-nav-compact--left {
		order: -3;
		margin-right: auto;
	}

	.sx-nav-compact--right {
		order: 20;
	}
}

.sx-nav-current {
	display: inline-flex;
	align-items: center;
	max-width: 40vw;
	padding: var(--sx-menu-pad-y, 8px) var(--sx-menu-pad-x, 12px);
	font-size: var(--sx-menu-fs, .93rem);
	font-weight: var(--sx-menu-fw, 600);
	letter-spacing: var(--sx-menu-ls, -.008em);
	color: var(--sx-text);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: opacity var(--sx-dur) var(--sx-ease);
}

/* Nel modo compatto il pulsante e sempre visibile, anche su schermo grande. */
.sx-menu-mode--compact .sx-nav-toggle:not(.sx-nav-toggle--close) {
	display: inline-flex;
}

.sx-nav--compact {
	display: flex;
	align-items: center;
	overflow: hidden;

	/* Chiuso: larghezza zero. Aperto: quanto serve. La transizione su
	   max-width e l'unica che funziona senza conoscere in anticipo la
	   larghezza del menu. */
	max-width: 0;
	opacity: 0;
	transition: max-width var(--sx-dur, .38s) var(--sx-ease, ease),
		opacity var(--sx-dur, .38s) var(--sx-ease, ease);
}

.sx-nav--compact.is-open {
	max-width: min(70vw, 900px);
	opacity: 1;
}

.sx-nav--compact .sx-nav__panel { width: 100%; }

.sx-nav--compact .sx-menu {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--sx-menu-gap, 8px);
	padding-left: 4px;
}

.sx-nav--compact .sx-menu > li > a {
	padding: var(--sx-menu-pad-y, 8px) var(--sx-menu-pad-x, 12px);
	font-weight: var(--sx-menu-fw, 500);
	letter-spacing: var(--sx-menu-ls, -.008em);
	border-radius: var(--sx-menu-radius, 999px);
	white-space: nowrap;
}

/* Le voci entrano una dopo l'altra, da sinistra. */
.sx-nav--compact .sx-menu > li {
	opacity: 0;
	transform: translateX(-10px);
	transition: opacity .32s var(--sx-menu-ease, ease), transform .32s var(--sx-menu-ease, ease);
}

.sx-nav--compact.is-open .sx-menu > li { opacity: 1; transform: none; }
.sx-nav--compact.is-open .sx-menu > li:nth-child(1) { transition-delay: .05s; }
.sx-nav--compact.is-open .sx-menu > li:nth-child(2) { transition-delay: .10s; }
.sx-nav--compact.is-open .sx-menu > li:nth-child(3) { transition-delay: .15s; }
.sx-nav--compact.is-open .sx-menu > li:nth-child(4) { transition-delay: .20s; }
.sx-nav--compact.is-open .sx-menu > li:nth-child(5) { transition-delay: .25s; }
.sx-nav--compact.is-open .sx-menu > li:nth-child(n+6) { transition-delay: .30s; }

/* A menu aperto l'etichetta della voce attiva si toglie di mezzo. */
.sx-menu-mode--compact.sx-compact-open .sx-nav-current {
	opacity: 0;
	max-width: 0;
	padding-inline: 0;
}

/* I sottomenu restano a tendina verticale, come sempre. */
.sx-nav--compact .sub-menu {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
}

/* Centrato e aperto: la fila cresce verso destra dal punto in cui si trova.
   Il gruppo resta ancorato al centro, cosi il pulsante non salta.
   Siccome il gruppo e posizionato in assoluto, allargandosi passa SOPRA a
   bandierine e bottone: per non farli sbucare a meta da sotto alle voci, in
   quello stato prende uno sfondo suo e sale di livello. */
@media (min-width: 701px) {

	.sx-nav-compact .sx-nav--compact.is-open {
		max-width: min(60vw, 760px);
	}

	/* Solo la posizione centrale si sovrappone al resto (e fuori dal flusso):
	   li serve uno sfondo suo, altrimenti bandierine e bottone sbucherebbero
	   da sotto alle voci. Nelle altre due il gruppo sposta gli altri e non
	   copre nulla, quindi lo sfondo non serve. */
	.sx-nav-compact--center.is-open {
		z-index: 30;
		padding-right: 8px;
		background: var(--sx-surface);
		border-radius: var(--sx-radius-pill);
		box-shadow: var(--sx-shadow);
	}
}

/* Sotto i 700px lo spazio non basta: le voci vanno a capo. */
@media (max-width: 700px) {
	.sx-nav-compact--center,
	.sx-nav-compact--left,
	.sx-nav-compact--right { position: static; transform: none; order: 0; margin-right: 0; }

	.sx-nav--compact.is-open {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		right: 0;
		max-width: none;
		padding: 10px;
		background: var(--sx-surface);
		border: var(--sx-border-w) solid var(--sx-border);
		border-radius: var(--sx-radius-lg);
		box-shadow: var(--sx-shadow-lg);
		z-index: 40;
	}

	.sx-nav--compact.is-open .sx-menu { flex-wrap: wrap; }
	.sx-nav-current { max-width: 30vw; }
}

@media (prefers-reduced-motion: reduce) {
	.sx-nav--compact,
	.sx-nav--compact .sx-menu > li,
	.sx-nav-current { transition: none; }
}

/* ==========================================================================
   12. BANDIERINE NELLA TESTATA — posizione scelta nel pannello
   ========================================================================== */
.sx-header__inner .sx-lang { flex: 0 0 auto; }

.sx-lang--slot-before-logo { order: -2; margin-right: 10px; }
.sx-lang--slot-after-logo { order: -1; margin-left: 10px; }
.sx-header__actions .sx-lang--slot-before-menu { order: -1; }
.sx-header__actions .sx-lang--slot-after-cta { order: 9; }

/* ==========================================================================
   13. POSIZIONE DELLA BARRA ORIZZONTALE — scelta nel pannello

   La barra vive dentro a ".sx-header__actions", che sta in fondo alla testata
   accanto ai bottoni. Per spostarla non basta allineare il <nav>: bisogna
   agire sul contenitore, ed e per questo che la scelta arriva come classe sul
   <body> ("sx-menu-align-*") invece che come classe sul menu.

   Queste regole vincono sulla "Disposizione" della testata: chi sceglie una
   posizione esplicita si aspetta che comandi lei. Con la scelta su "Come la
   disposizione della testata" nessuna di queste classi viene stampata e tutto
   resta come prima.
   ========================================================================== */
@media (min-width: 981px) {

	/* --- A sinistra: la barra si appoggia al logo. --------------------- */
	.sx-menu-align-left .sx-header__actions {
		flex: 1;
		justify-content: flex-start;
		gap: clamp(12px, 2vw, 28px);
	}

	.sx-menu-align-left .sx-nav--inline {
		position: static;
		transform: none;
		margin-right: auto;
	}

	/* Bottone, ricerca e bandierine restano in fondo. */
	.sx-menu-align-left .sx-header__actions > .sx-btn,
	.sx-menu-align-left .sx-header__actions > .sx-header__cta,
	.sx-menu-align-left .sx-header__actions > .sx-search-toggle,
	.sx-menu-align-left .sx-header__actions > .sx-lang { margin-left: 0; }

	/* --- Al centro: rispetto alla testata, non allo spazio che avanza. -- */
	.sx-menu-align-center .sx-nav--inline {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		margin: 0;
	}

	/* --- A destra: in fondo, accanto ai bottoni. ----------------------- */
	.sx-menu-align-right .sx-header__actions {
		flex: 0 1 auto;
		justify-content: flex-end;
		margin-left: auto;
	}

	.sx-menu-align-right .sx-nav--inline {
		position: static;
		transform: none;
		margin-left: auto;
		margin-right: 0;
	}

	/* La disposizione "Menu accanto al logo" allarga la zona comandi e le
	   separa con "space-between": con una posizione esplicita quel
	   comportamento va annullato, altrimenti resterebbe lo spazio in mezzo. */
	.sx-menu-align-left .sx-header--l-split .sx-header__actions {
		justify-content: flex-start;
		margin-left: clamp(16px, 3vw, 40px);
	}

	.sx-menu-align-center .sx-header--l-split .sx-header__actions,
	.sx-menu-align-right .sx-header--l-split .sx-header__actions {
		flex: 0 1 auto;
		justify-content: flex-end;
		margin-left: auto;
	}
}

/* Sotto i 981 px la barra diventa un pannello: la posizione non si applica. */
@media (max-width: 980px) {

	.sx-menu-align-left .sx-header__actions,
	.sx-menu-align-right .sx-header__actions {
		flex: 0 1 auto;
		justify-content: flex-end;
		margin-left: auto;
	}

	.sx-menu-align-center .sx-nav--inline,
	.sx-menu-align-left .sx-nav--inline,
	.sx-menu-align-right .sx-nav--inline {
		position: static;
		transform: none;
	}
}

/* ==========================================================================
   14. MENU COMPATTO — come si apre

   Quattro modi oltre a quello di partenza:
     row            le voci escono in fila, di lato al pulsante (era l'unico)
     under          tendina verticale sotto al pulsante, dove sta il menu
     screen-left    pannello verticale sul lato sinistro dello schermo
     screen-right   pannello verticale sul lato destro
     screen-center  pannello verticale al centro

   I tre "screen-*" usano "position: fixed", e dentro a una testata con
   backdrop-filter resterebbero imprigionati nella barra: per questo il JS li
   sposta nel body (classe "sx-compact-screen" sul body). Da li il CSS non puo
   piu scendere dal gruppo, ed e per questo che le regole qui sotto attaccano
   direttamente al <nav> (".sx-nav--copen-*") e non al contenitore.
   ========================================================================== */

/* --- Tendina verticale sotto al pulsante -------------------------------- */
.sx-nav-compact--open-under { position: relative; }

.sx-nav--copen-under {
	position: absolute;
	top: calc(100% + 10px);
	z-index: 40;
	display: block;
	width: max-content;
	min-width: 200px;
	max-width: min(86vw, 360px);
	padding: 8px;

	/* Qui la larghezza non serve piu come animazione: la tendina compare
	   scendendo. "overflow: hidden" andrebbe in conflitto con i sottomenu. */
	max-height: none;
	overflow: visible;
	background: var(--sx-surface);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius);
	box-shadow: var(--sx-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-8px);
	transition: opacity var(--sx-dur, .38s) var(--sx-ease, ease),
		transform var(--sx-dur, .38s) var(--sx-ease, ease),
		visibility var(--sx-dur, .38s);
}

/* La tendina si apre dal lato in cui sta il menu, cosi non esce dallo schermo. */
.sx-nav-compact--left .sx-nav--copen-under,
.sx-nav-compact--center .sx-nav--copen-under { left: 0; }
.sx-nav-compact--right .sx-nav--copen-under { right: 0; }

.sx-nav--copen-under.is-open {
	max-width: min(86vw, 360px);
	opacity: 1;
	visibility: visible;
	transform: none;
}

/* --- Pannelli verticali ancorati allo schermo --------------------------- */
.sx-nav--copen-screen-left,
.sx-nav--copen-screen-right,
.sx-nav--copen-screen-center {
	position: fixed;
	z-index: 200;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: min(88vw, 340px);
	max-width: none;
	max-height: none;
	padding: clamp(24px, 4vw, 40px);
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--sx-surface);
	box-shadow: var(--sx-shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: transform var(--sx-dur, .38s) var(--sx-ease, ease),
		opacity var(--sx-dur, .38s) var(--sx-ease, ease),
		visibility var(--sx-dur, .38s);
}

.sx-nav--copen-screen-left {
	inset: 0 auto 0 0;
	border-right: var(--sx-border-w) solid var(--sx-border);
	transform: translateX(-100%);
}

.sx-nav--copen-screen-right {
	inset: 0 0 0 auto;
	border-left: var(--sx-border-w) solid var(--sx-border);
	transform: translateX(100%);
}

.sx-nav--copen-screen-center {
	top: 50%;
	left: 50%;
	bottom: auto;
	max-height: 86vh;
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius-lg);
	transform: translate(-50%, -50%) scale(.96);
}

.sx-nav--copen-screen-left.is-open,
.sx-nav--copen-screen-right.is-open {
	max-width: none;
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sx-nav--copen-screen-center.is-open {
	max-width: none;
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, -50%) scale(1);
}

/* --- Voci in colonna, per tutti i modi verticali ------------------------ */
.sx-nav--copen-under .sx-nav__panel,
.sx-nav--copen-screen-left .sx-nav__panel,
.sx-nav--copen-screen-right .sx-nav__panel,
.sx-nav--copen-screen-center .sx-nav__panel { width: 100%; }

.sx-nav--copen-under .sx-menu,
.sx-nav--copen-screen-left .sx-menu,
.sx-nav--copen-screen-right .sx-menu,
.sx-nav--copen-screen-center .sx-menu {
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 2px;
	padding-left: 0;
}

.sx-nav--copen-under .sx-menu > li > a,
.sx-nav--copen-screen-left .sx-menu > li > a,
.sx-nav--copen-screen-right .sx-menu > li > a,
.sx-nav--copen-screen-center .sx-menu > li > a {
	display: block;
	border-radius: var(--sx-radius-sm);
}

/* Nei modi verticali le voci entrano dall'alto, non da sinistra. */
.sx-nav--copen-under .sx-menu > li,
.sx-nav--copen-screen-left .sx-menu > li,
.sx-nav--copen-screen-right .sx-menu > li,
.sx-nav--copen-screen-center .sx-menu > li { transform: translateY(-8px); }

/* I pannelli a schermo intero danno alle voci il respiro che meritano. */
.sx-nav--copen-screen-left .sx-menu > li > a,
.sx-nav--copen-screen-right .sx-menu > li > a,
.sx-nav--copen-screen-center .sx-menu > li > a {
	padding-block: .55rem;
	font-size: clamp(1.05rem, 2.2vw, 1.35rem);
}

/* Nei modi verticali il gruppo centrale non deve piu allargarsi sopra al
   resto della testata: il menu non e piu li dentro. */
.sx-nav-compact--center.sx-nav-compact--open-under.is-open,
.sx-nav-compact--center.sx-nav-compact--open-screen-left.is-open,
.sx-nav-compact--center.sx-nav-compact--open-screen-right.is-open,
.sx-nav-compact--center.sx-nav-compact--open-screen-center.is-open {
	padding-right: 0;
	background: none;
	box-shadow: none;
}

/* Con una tendina verticale l'etichetta della voce attiva puo restare:
   non c'e nessuna fila che le passa sopra. */
.sx-menu-mode--compact.sx-compact-open .sx-nav-compact--open-under .sx-nav-current,
.sx-menu-mode--compact.sx-compact-open .sx-nav-compact--open-screen-left .sx-nav-current,
.sx-menu-mode--compact.sx-compact-open .sx-nav-compact--open-screen-right .sx-nav-current,
.sx-menu-mode--compact.sx-compact-open .sx-nav-compact--open-screen-center .sx-nav-current {
	opacity: 1;
	max-width: 40vw;
	padding-inline: var(--sx-menu-pad-x, 12px);
}

/* Sotto i 700px la tendina resta ancorata al pulsante ma si allarga. */
@media (max-width: 700px) {

	.sx-nav--copen-under {
		left: 0;
		right: auto;
		min-width: min(80vw, 260px);
	}
}

@media (prefers-reduced-motion: reduce) {

	.sx-nav--copen-under,
	.sx-nav--copen-screen-left,
	.sx-nav--copen-screen-right,
	.sx-nav--copen-screen-center { transition: none; }
}

/* ==========================================================================
   15. POSIZIONE DEL LOGO — scelta nel pannello

   Vale lo stesso ragionamento della barra del menu (sezione 13): il logo sta
   dentro a ".sx-header__inner", e per spostarlo non basta allinearlo — serve
   agire sul contenitore. La scelta arriva quindi come classe sul <body>.

   Con "Come la disposizione della testata" nessuna classe viene stampata e
   tutto resta come prima: nessun sito si sposta aggiornando.

   Lo spostamento fine e invece una translazione: non tocca il flusso, quindi
   il logo si sposta senza spingere il menu.
   ========================================================================== */
.sx-header__inner > .sx-brand {
	transform: translateX(var(--sx-brand-shift, 0px));
}

@media (min-width: 981px) {

	/* --- A sinistra: e la posizione naturale, ma va riaffermata perche
	   alcune disposizioni (logo centrato, split) la cambiano. ------------ */
	.sx-brand-align-left .sx-header__inner {
		justify-content: flex-start;
	}

	.sx-brand-align-left .sx-header__inner > .sx-brand {
		order: -1;
		margin-inline: 0 auto;
		position: static;
		left: auto;
	}

	/* --- Al centro: rispetto alla testata, non allo spazio che avanza.
	   Il logo esce dal flusso, altrimenti spingerebbe il menu di lato. --- */
	.sx-brand-align-center .sx-header__inner {
		position: relative;
	}

	.sx-brand-align-center .sx-header__inner > .sx-brand {
		position: absolute;
		left: 50%;
		transform: translateX(calc(-50% + var(--sx-brand-shift, 0px)));
		margin: 0;
		z-index: 2;
	}

	/* Il menu deve lasciargli il posto in mezzo. Attenzione: "space-between"
	   qui NON va bene — distribuisce tutti i figli, quindi bandierine e
	   ricerca finiscono proprio al centro, sotto al logo. Serve invece
	   spingere il menu a sinistra e tutto il resto a destra, cosi la fascia
	   centrale resta libera. */
	.sx-brand-align-center .sx-header__actions {
		flex: 1;
		justify-content: flex-end;
		gap: clamp(10px, 1.6vw, 22px);
	}

	.sx-brand-align-center .sx-nav--inline {
		position: static;
		transform: none;
		margin-right: auto;
	}

	/* --- A destra: in fondo alla fascia, dopo i comandi. ---------------- */
	.sx-brand-align-right .sx-header__inner > .sx-brand {
		order: 20;
		margin-inline: auto 0;
		position: static;
		left: auto;
	}

	.sx-brand-align-right .sx-header__actions {
		order: 1;
		flex: 1;
		justify-content: flex-start;
		margin-left: 0;
	}
}

/* Sotto i 980px il logo torna sempre a sinistra: su telefono una testata con
   il logo a destra e il menu a sinistra si legge male. */
@media (max-width: 980px) {

	.sx-brand-align-center .sx-header__inner > .sx-brand,
	.sx-brand-align-right .sx-header__inner > .sx-brand {
		position: static;
		order: -1;
		transform: translateX(var(--sx-brand-shift, 0px));
		margin-inline: 0 auto;
	}
}

/* --- Pie di pagina: stessa idea, contenitore diverso. ------------------- */
.sx-footer__brand {
	transform: translateX(var(--sx-fbrand-shift, 0px));
}

.sx-fbrand-align-left .sx-footer__brand {
	text-align: left;
	align-items: flex-start;
	margin-inline: 0 auto;
}

.sx-fbrand-align-center .sx-footer__brand {
	text-align: center;
	align-items: center;
	margin-inline: auto;
}

.sx-fbrand-align-right .sx-footer__brand {
	text-align: right;
	align-items: flex-end;
	margin-inline: auto 0;
}

.sx-fbrand-align-left .sx-footer__brand .sx-logo,
.sx-fbrand-align-center .sx-footer__brand .sx-logo,
.sx-fbrand-align-right .sx-footer__brand .sx-logo {
	display: inline-block;
}

/* ==========================================================================
   16. LARGHEZZA DELLA ZONA CONTENUTO — scelta nel pannello

   La testata ha gia la sua larghezza; questa e quella del contenuto, ed e
   una variabile diversa apposta: su una pagina piena di schede — il catalogo
   dei telefoni, il comparatore — serve poter allargare il contenuto senza
   toccare la testata, o stringerlo senza rimpicciolire tutto il sito.

   --sx-content-max    quanto e larga la colonna del contenuto
   --sx-content-gutter i margini laterali (se non impostato, resta il gutter
                       generale del sito, cosi niente cambia aggiornando)

   Vale per le pagine normali, per quelle fatte col page builder e per le
   righe di WPBakery, che altrimenti resterebbero larghe come prima.
   ========================================================================== */
.sx-main .sx-container,
.sx-main .sx-builder-content > .vc_row,
.sx-main .sx-entry-content > .vc_row,
.sx-wpb-active .sx-main .sx-builder-content > .vc_row,
.sx-wpb-active .sx-main .sx-entry-content > .vc_row {
	max-width: var(--sx-content-max, var(--sx-container));
	padding-inline: var(--sx-content-gutter, var(--sx-gutter));
}

/* Le righe a tutta larghezza di WPBakery tengono lo sfondo largo, ma il
   contenuto dentro segue comunque la larghezza scelta. */
.sx-wpb-active .sx-main .vc_row[data-vc-full-width] > .vc_column_container {
	max-width: var(--sx-content-max, var(--sx-container));
}

/* A tutto schermo i margini restano, altrimenti il testo tocca il bordo. */
.sx-content-w-full .sx-main .sx-container {
	max-width: 100%;
}