/* ==========================================================================
   SVETIX — MODI DI VISUALIZZAZIONE DEL MENU
   --------------------------------------------------------------------------
   Sette modi, un solo markup. Il PHP stampa sempre la stessa struttura
   (pulsante + nav > panel > list) e qui cambia solo la presentazione.

   Indice:
   1. Token e base comune
   2. Pulsante di apertura (5 aspetti)
   3. Modo: barra classica (inline)
   4. Modo: a tutto schermo (fullscreen)
   5. Modi: pannello laterale (drawer-left / drawer-right)
   6. Modi: barra verticale fissa (rail-left / rail-right)
   7. Modo: dock flottante in basso
   8. Animazioni di apertura
   9. Numerazione delle voci
   10. Nascondi la testata allo scroll
   11. Accessibilita e mobile
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKEN E BASE
   -------------------------------------------------------------------------- */
:root {
	--sx-menu-big: 44px;      /* dimensione voci nei pannelli grandi */
	--sx-rail-w: 84px;        /* larghezza della barra verticale */
	--sx-drawer-w: 380px;     /* larghezza del pannello laterale */
	--sx-menu-ease: cubic-bezier(.22, 1, .36, 1);
}

.sx-nav__panel { display: contents; }
.sx-nav__head,
.sx-nav__foot { display: none; }
.sx-nav-scrim { display: none; }

/* --------------------------------------------------------------------------
   2. PULSANTE DI APERTURA — cinque aspetti, stesso comportamento
   -------------------------------------------------------------------------- */
.sx-nav-toggle {
	position: relative;
	display: none;              /* i modi che lo usano lo riattivano */
	align-items: center;
	justify-content: center;
	gap: .5rem;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius-sm);
	color: var(--sx-text);
	cursor: pointer;
	flex: 0 0 auto;
	transition: border-color var(--sx-dur) var(--sx-menu-ease),
	            background-color var(--sx-dur) var(--sx-menu-ease);
	z-index: 2;
}
.sx-nav-toggle:hover { border-color: var(--sx-border-strong); }

.sx-nav-toggle__bars,
.sx-nav-toggle__bars::before,
.sx-nav-toggle__bars::after {
	display: block;
	background: currentColor;
	transition: transform var(--sx-dur) var(--sx-menu-ease),
	            opacity var(--sx-dur) var(--sx-menu-ease),
	            width var(--sx-dur) var(--sx-menu-ease);
}
.sx-nav-toggle__bars::before,
.sx-nav-toggle__bars::after { content: ""; position: absolute; }

/* 2a. Barre (classico) */
.sx-nav-toggle--bars .sx-nav-toggle__bars,
.sx-nav-toggle--bars .sx-nav-toggle__bars::before,
.sx-nav-toggle--bars .sx-nav-toggle__bars::after {
	width: 18px;
	height: 1.6px;
	border-radius: 2px;
}
.sx-nav-toggle--bars .sx-nav-toggle__bars::before { transform: translateY(-6px); }
.sx-nav-toggle--bars .sx-nav-toggle__bars::after { transform: translateY(6px); }
.sx-nav-toggle--bars .sx-nav-toggle__bars::before { width: 13px; }

/* 2b. Punti */
.sx-nav-toggle--dots .sx-nav-toggle__bars,
.sx-nav-toggle--dots .sx-nav-toggle__bars::before,
.sx-nav-toggle--dots .sx-nav-toggle__bars::after {
	width: 4.5px;
	height: 4.5px;
	border-radius: 50%;
}
.sx-nav-toggle--dots .sx-nav-toggle__bars::before { transform: translateY(-8px); }
.sx-nav-toggle--dots .sx-nav-toggle__bars::after { transform: translateY(8px); }

/* 2c. Griglia di quattro punti */
.sx-nav-toggle--grid .sx-nav-toggle__bars {
	width: 16px;
	height: 16px;
	background: none;
	background-image:
		radial-gradient(currentColor 45%, transparent 46%),
		radial-gradient(currentColor 45%, transparent 46%),
		radial-gradient(currentColor 45%, transparent 46%),
		radial-gradient(currentColor 45%, transparent 46%);
	background-size: 6px 6px;
	background-repeat: no-repeat;
	background-position: 0 0, 10px 0, 0 10px, 10px 10px;
}
.sx-nav-toggle--grid .sx-nav-toggle__bars::before,
.sx-nav-toggle--grid .sx-nav-toggle__bars::after { display: none; }

/* 2d. Piu / croce */
.sx-nav-toggle--plus .sx-nav-toggle__bars { width: 0; height: 0; }
.sx-nav-toggle--plus .sx-nav-toggle__bars::before {
	width: 18px; height: 1.6px; border-radius: 2px;
}
.sx-nav-toggle--plus .sx-nav-toggle__bars::after {
	width: 18px; height: 1.6px; border-radius: 2px; transform: rotate(90deg);
}

/* 2e. Parola "Menu" */
.sx-nav-toggle--text {
	width: auto;
	padding-inline: 14px;
	border-radius: var(--sx-radius-pill);
}
.sx-nav-toggle--text .sx-nav-toggle__bars,
.sx-nav-toggle--text .sx-nav-toggle__bars::before,
.sx-nav-toggle--text .sx-nav-toggle__bars::after {
	width: 14px; height: 1.5px; border-radius: 2px; position: static;
}
.sx-nav-toggle--text .sx-nav-toggle__bars::before,
.sx-nav-toggle--text .sx-nav-toggle__bars::after { position: absolute; }
.sx-nav-toggle--text .sx-nav-toggle__bars::before { transform: translateY(-5px); }
.sx-nav-toggle--text .sx-nav-toggle__bars::after { transform: translateY(5px); }
.sx-nav-toggle__word {
	font-family: var(--sx-font-heading);
	font-size: .8rem;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	margin-left: 20px;
}

/* Stato aperto: tutti diventano una X */
.sx-nav-toggle[aria-expanded="true"] .sx-nav-toggle__bars { background: transparent; width: 0; }
.sx-nav-toggle[aria-expanded="true"] .sx-nav-toggle__bars::before,
.sx-nav-toggle[aria-expanded="true"] .sx-nav-toggle__bars::after {
	width: 18px;
	height: 1.6px;
	border-radius: 2px;
	background: currentColor;
	opacity: 1;
	display: block;
}
.sx-nav-toggle[aria-expanded="true"] .sx-nav-toggle__bars::before { transform: rotate(45deg); }
.sx-nav-toggle[aria-expanded="true"] .sx-nav-toggle__bars::after { transform: rotate(-45deg); }
.sx-nav-toggle--grid[aria-expanded="true"] .sx-nav-toggle__bars { background-image: none; }

/* Pulsante di chiusura dentro il pannello */
.sx-nav-toggle--close { display: inline-flex; }

/* --------------------------------------------------------------------------
   3. MODO: BARRA CLASSICA
   Su desktop e la barra orizzontale di sempre; sotto i 980px diventa un
   pannello che scende dalla testata (comportamento gia noto agli utenti).
   -------------------------------------------------------------------------- */
.sx-nav--inline { display: flex; align-items: center; }

@media (max-width: 980px) {
	.sx-menu-mode--inline .sx-nav-toggle:not(.sx-nav-toggle--close) { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   4. MODO: A TUTTO SCHERMO
   Il pulsante resta visibile anche su desktop: la navigazione e un gesto
   deliberato, non una barra sempre presente.
   -------------------------------------------------------------------------- */
.sx-menu-mode--fullscreen .sx-nav-toggle:not(.sx-nav-toggle--close) { display: inline-flex; }

.sx-nav--fullscreen {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .42s var(--sx-menu-ease), visibility .42s;
}
.sx-nav--fullscreen.is-open { opacity: 1; visibility: visible; }

.sx-nav--fullscreen .sx-nav__panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: clamp(24px, 6vw, 80px);
	overflow-y: auto;
}
.sx-nav--fullscreen .sx-nav__head {
	display: flex;
	justify-content: flex-end;
	position: absolute;
	top: clamp(18px, 3vw, 34px);
	right: clamp(18px, 3vw, 34px);
}
.sx-nav--fullscreen .sx-nav__foot {
	display: block;
	position: absolute;
	left: clamp(24px, 6vw, 80px);
	bottom: clamp(24px, 4vw, 48px);
}

/* --------------------------------------------------------------------------
   5. MODI: PANNELLO LATERALE
   -------------------------------------------------------------------------- */
.sx-menu-mode--drawer-right .sx-nav-toggle:not(.sx-nav-toggle--close),
.sx-menu-mode--drawer-left .sx-nav-toggle:not(.sx-nav-toggle--close) { display: inline-flex; }

.sx-nav--drawer-right,
.sx-nav--drawer-left {
	position: fixed;
	top: 0;
	bottom: 0;
	z-index: 200;
	width: min(var(--sx-drawer-w), 92vw);
	visibility: hidden;
	transition: transform .42s var(--sx-menu-ease), visibility .42s;
}
.sx-nav--drawer-right { right: 0; transform: translateX(100%); }
.sx-nav--drawer-left { left: 0; transform: translateX(-100%); }
.sx-nav--drawer-right.is-open,
.sx-nav--drawer-left.is-open { transform: translateX(0); visibility: visible; }

.sx-nav--drawer-right .sx-nav__panel,
.sx-nav--drawer-left .sx-nav__panel {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: clamp(20px, 3vw, 32px);
	overflow-y: auto;
	overscroll-behavior: contain;
}
.sx-nav--drawer-right .sx-nav__head,
.sx-nav--drawer-left .sx-nav__head {
	display: flex;
	justify-content: flex-end;
	margin-bottom: clamp(24px, 4vw, 44px);
}
.sx-nav--drawer-right .sx-nav__list,
.sx-nav--drawer-left .sx-nav__list { flex: 1 0 auto; }
.sx-nav--drawer-right .sx-nav__foot,
.sx-nav--drawer-left .sx-nav__foot { display: block; padding-top: 24px; }

/* Velo scuro dietro al pannello */
.sx-nav-scrim {
	display: block;
	position: fixed;
	inset: 0;
	z-index: 190;
	background: rgba(0, 0, 0, .45);
	opacity: 0;
	visibility: hidden;
	transition: opacity .35s var(--sx-menu-ease), visibility .35s;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.sx-nav-scrim.is-open { opacity: 1; visibility: visible; }
.sx-nav-scrim[hidden] { display: block; }

/* --------------------------------------------------------------------------
   6. MODI: BARRA VERTICALE FISSA
   Il sito viene spostato di lato: nessuna sovrapposizione, il contenuto
   resta sempre leggibile.
   -------------------------------------------------------------------------- */
@media (min-width: 981px) {

	.sx-menu-mode--rail-left .sx-site { padding-left: var(--sx-rail-w); }
	.sx-menu-mode--rail-right .sx-site { padding-right: var(--sx-rail-w); }

	.sx-nav--rail-left,
	.sx-nav--rail-right {
		position: fixed;
		top: 0;
		bottom: 0;
		z-index: 150;
		width: var(--sx-rail-w);
		background: var(--sx-surface);
		border-right: var(--sx-border-w) solid var(--sx-border);
		display: flex;
		align-items: center;
	}
	.sx-nav--rail-left { left: 0; }
	.sx-nav--rail-right {
		right: 0;
		border-right: 0;
		border-left: var(--sx-border-w) solid var(--sx-border);
	}

	.sx-nav--rail-left .sx-nav__panel,
	.sx-nav--rail-right .sx-nav__panel {
		display: flex;
		width: 100%;
		justify-content: center;
	}

	/* Le voci ruotano di 90 gradi: e la soluzione che regge testi lunghi
	   senza spezzarli, a differenza dell'incolonnamento lettera per lettera. */
	.sx-nav--rail-left .sx-menu,
	.sx-nav--rail-right .sx-menu {
		display: flex;
		/* Con writing-mode verticale l'asse "row" corre dall'alto in basso:
		   con row-reverse, dopo la rotazione di 180 gradi, le voci si leggono
		   nell'ordine giusto. Usare "column" qui le metterebbe in fila
		   orizzontale, fuori dalla barra. */
		flex-direction: row-reverse;
		align-items: center;
		justify-content: center;
		gap: clamp(20px, 3vh, 46px);
		margin: 0;
		padding: 0;
		writing-mode: vertical-rl;
		transform: rotate(180deg);
	}
	.sx-nav--rail-left .sx-menu a,
	.sx-nav--rail-right .sx-menu a {
		white-space: nowrap;
		letter-spacing: .1em;
		text-transform: uppercase;
		font-size: .8rem;
	}

	/* La testata non deve finire sotto la barra */
	.sx-menu-mode--rail-left .sx-header--glass .sx-header__inner,
	.sx-menu-mode--rail-left .sx-header--transparent.is-stuck { margin-left: var(--sx-rail-w); }
	.sx-menu-mode--rail-right .sx-header--glass .sx-header__inner,
	.sx-menu-mode--rail-right .sx-header--transparent.is-stuck { margin-right: var(--sx-rail-w); }
}

/* Sotto i 980px la barra verticale non ha senso: diventa un pannello. */
@media (max-width: 980px) {
	.sx-menu-mode--rail-left .sx-nav-toggle:not(.sx-nav-toggle--close),
	.sx-menu-mode--rail-right .sx-nav-toggle:not(.sx-nav-toggle--close) { display: inline-flex; }
}

/* --------------------------------------------------------------------------
   7. MODO: DOCK FLOTTANTE IN BASSO
   Il pollice ci arriva senza spostare la mano: e il motivo per cui le app
   mobili mettono la navigazione in fondo e non in cima.
   -------------------------------------------------------------------------- */
.sx-nav--dock {
	position: fixed;
	left: 50%;
	bottom: max(16px, env(safe-area-inset-bottom, 0px));
	transform: translateX(-50%);
	z-index: 150;
	max-width: calc(100vw - 24px);
}
.sx-nav--dock .sx-nav__panel {
	display: flex;
	padding: 7px;
	background: var(--sx-overlay);
	border: var(--sx-border-w) solid var(--sx-border);
	border-radius: var(--sx-radius-pill);
	box-shadow: var(--sx-shadow-lg);
	-webkit-backdrop-filter: saturate(180%) blur(22px);
	backdrop-filter: saturate(180%) blur(22px);
	overflow-x: auto;
	scrollbar-width: none;
}
.sx-nav--dock .sx-nav__panel::-webkit-scrollbar { display: none; }
.sx-nav--dock .sx-menu { display: flex; gap: 2px; flex-wrap: nowrap; }
.sx-nav--dock .sx-menu a {
	white-space: nowrap;
	padding: .7rem 1.05rem;
	border-radius: var(--sx-radius-pill);
}
.sx-nav--dock .sx-menu .current-menu-item > a { background: var(--sx-surface-2); color: var(--sx-text); }
.sx-nav--dock .sub-menu { bottom: calc(100% + 10px); top: auto; }

/* Il dock copre il fondo pagina: si aggiunge respiro al footer. */
.sx-menu-mode--dock .sx-footer__bottom { padding-bottom: 96px; }

/* --------------------------------------------------------------------------
   8. ANIMAZIONI DI APERTURA DEI PANNELLI
   -------------------------------------------------------------------------- */
.sx-nav--fullscreen .sx-menu,
.sx-nav--drawer-right .sx-menu,
.sx-nav--drawer-left .sx-menu {
	display: flex;
	flex-direction: column;
	gap: clamp(4px, 1.2vh, 14px);
}

.sx-nav--fullscreen .sx-menu > li > a,
.sx-nav--drawer-right .sx-menu > li > a,
.sx-nav--drawer-left .sx-menu > li > a {
	font-family: var(--sx-font-heading);
	font-size: var(--sx-menu-big);
	font-weight: var(--sx-fw-heading);
	letter-spacing: var(--sx-ls-heading);
	line-height: 1.12;
	color: var(--sx-text);
	padding: .12em 0;
	display: inline-flex;
	align-items: baseline;
	gap: .6rem;
}
.sx-nav--fullscreen .sx-menu > li > a:hover,
.sx-nav--drawer-right .sx-menu > li > a:hover,
.sx-nav--drawer-left .sx-menu > li > a:hover { color: var(--sx-primary); opacity: 1; }

/* Sfondo del pannello */
.sx-nav--bg-solid .sx-nav__panel { background: var(--sx-bg); }
.sx-nav--bg-glass .sx-nav__panel {
	background: var(--sx-overlay);
	-webkit-backdrop-filter: saturate(180%) blur(26px);
	backdrop-filter: saturate(180%) blur(26px);
}
.sx-nav--bg-gradient .sx-nav__panel {
	background: var(--sx-bg);
	background-image:
		radial-gradient(120% 80% at 12% 8%, color-mix(in srgb, var(--sx-primary) 22%, transparent), transparent 62%),
		radial-gradient(100% 70% at 88% 92%, color-mix(in srgb, var(--sx-accent) 22%, transparent), transparent 60%);
}

/* Le animazioni valgono SOLO per i modi a pannello (.sx-nav--panel): nella
   barra classica, nella barra verticale e nel dock le voci devono restare
   sempre visibili, non comparire all'apertura di qualcosa. */

/* Le voci entrano una dopo l'altra: il ritardo e per posizione, senza JS. */
.sx-nav--panel.sx-nav--anim-stagger .sx-menu > li {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity .5s var(--sx-menu-ease), transform .5s var(--sx-menu-ease);
}
.sx-nav--panel.sx-nav--anim-stagger.is-open .sx-menu > li { opacity: 1; transform: none; }
.sx-nav--panel.sx-nav--anim-stagger.is-open .sx-menu > li:nth-child(1) { transition-delay: .10s; }
.sx-nav--panel.sx-nav--anim-stagger.is-open .sx-menu > li:nth-child(2) { transition-delay: .16s; }
.sx-nav--panel.sx-nav--anim-stagger.is-open .sx-menu > li:nth-child(3) { transition-delay: .22s; }
.sx-nav--panel.sx-nav--anim-stagger.is-open .sx-menu > li:nth-child(4) { transition-delay: .28s; }
.sx-nav--panel.sx-nav--anim-stagger.is-open .sx-menu > li:nth-child(5) { transition-delay: .34s; }
.sx-nav--panel.sx-nav--anim-stagger.is-open .sx-menu > li:nth-child(6) { transition-delay: .40s; }
.sx-nav--panel.sx-nav--anim-stagger.is-open .sx-menu > li:nth-child(7) { transition-delay: .46s; }
.sx-nav--panel.sx-nav--anim-stagger.is-open .sx-menu > li:nth-child(n+8) { transition-delay: .52s; }

.sx-nav--panel.sx-nav--anim-fade .sx-menu > li { opacity: 0; transition: opacity .5s var(--sx-menu-ease) .12s; }
.sx-nav--panel.sx-nav--anim-fade.is-open .sx-menu > li { opacity: 1; }

.sx-nav--panel.sx-nav--anim-slide .sx-menu > li {
	opacity: 0;
	transform: translateX(-28px);
	transition: opacity .45s var(--sx-menu-ease) .12s, transform .45s var(--sx-menu-ease) .12s;
}
.sx-nav--panel.sx-nav--anim-slide.is-open .sx-menu > li { opacity: 1; transform: none; }

.sx-nav--panel.sx-nav--anim-zoom .sx-menu > li {
	opacity: 0;
	transform: scale(.88);
	transition: opacity .45s var(--sx-menu-ease) .1s, transform .45s var(--sx-menu-ease) .1s;
}
.sx-nav--panel.sx-nav--anim-zoom.is-open .sx-menu > li { opacity: 1; transform: none; }

/* Allineamento nel pannello a tutto schermo */
.sx-nav--fullscreen.sx-align-center .sx-nav__list { text-align: center; }
.sx-nav--fullscreen.sx-align-center .sx-menu { align-items: center; }
.sx-nav--fullscreen.sx-align-right .sx-nav__list { text-align: right; }
.sx-nav--fullscreen.sx-align-right .sx-menu { align-items: flex-end; }

/* Sottomenu dentro i pannelli: elenco indentato, niente tendina */
.sx-nav--fullscreen .sub-menu,
.sx-nav--drawer-right .sub-menu,
.sx-nav--drawer-left .sub-menu {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	border: 0;
	background: none;
	padding: .3rem 0 .6rem;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.sx-nav--fullscreen .sub-menu a,
.sx-nav--drawer-right .sub-menu a,
.sx-nav--drawer-left .sub-menu a {
	font-size: calc(var(--sx-menu-big) * .38);
	color: var(--sx-text-muted);
	padding: .25rem 0;
}
.sx-nav--fullscreen.sx-align-center .sub-menu { align-items: center; }

/* Social nel piede del pannello */
.sx-nav__social { display: flex; gap: 1.2rem; list-style: none; margin: 0; padding: 0; }
.sx-nav__social a {
	font-family: var(--sx-font-mono);
	font-size: .78rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--sx-text-muted);
}
.sx-nav__social a:hover { color: var(--sx-text); opacity: 1; }

/* --------------------------------------------------------------------------
   9. NUMERAZIONE DELLE VOCI
   -------------------------------------------------------------------------- */
.sx-menu-numbered .sx-nav--fullscreen .sx-menu,
.sx-menu-numbered .sx-nav--drawer-right .sx-menu,
.sx-menu-numbered .sx-nav--drawer-left .sx-menu { counter-reset: sxmenu; }

.sx-menu-numbered .sx-nav--fullscreen .sx-menu > li > a::before,
.sx-menu-numbered .sx-nav--drawer-right .sx-menu > li > a::before,
.sx-menu-numbered .sx-nav--drawer-left .sx-menu > li > a::before {
	counter-increment: sxmenu;
	content: counter(sxmenu, decimal-leading-zero);
	font-family: var(--sx-font-mono);
	font-size: calc(var(--sx-menu-big) * .26);
	font-weight: 400;
	letter-spacing: .08em;
	color: var(--sx-text-muted);
	position: static;
	opacity: 1;
	transform: none;
}

/* --------------------------------------------------------------------------
   10. NASCONDI LA TESTATA ALLO SCROLL
   Scendi: la barra sparisce e lascia spazio. Risali: torna subito.
   -------------------------------------------------------------------------- */
.sx-header.is-hidden {
	transform: translateY(-110%);
	transition: transform .35s var(--sx-menu-ease);
}
.sx-header { transition: transform .35s var(--sx-menu-ease), background-color var(--sx-dur) var(--sx-ease), box-shadow var(--sx-dur) var(--sx-ease); }

/* --------------------------------------------------------------------------
   11. ACCESSIBILITA E MOBILE
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {

	/* Barra verticale e dock diventano un pannello da destra su mobile:
	   una barra laterale su uno schermo stretto mangia troppo spazio. */
	.sx-menu-mode--rail-left .sx-nav--rail-left,
	.sx-menu-mode--rail-right .sx-nav--rail-right {
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: auto;
		width: min(var(--sx-drawer-w), 88vw);
		transform: translateX(100%);
		visibility: hidden;
		border: 0;
		border-left: var(--sx-border-w) solid var(--sx-border);
		transition: transform .42s var(--sx-menu-ease), visibility .42s;
		align-items: stretch;
	}
	.sx-menu-mode--rail-left .sx-nav--rail-left.is-open,
	.sx-menu-mode--rail-right .sx-nav--rail-right.is-open { transform: translateX(0); visibility: visible; }

	.sx-nav--rail-left .sx-menu,
	.sx-nav--rail-right .sx-menu {
		writing-mode: horizontal-tb;
		transform: none;
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
	.sx-nav--rail-left .sx-nav__panel,
	.sx-nav--rail-right .sx-nav__panel {
		flex-direction: column;
		justify-content: flex-start;
		padding: 24px;
		height: 100%;
		overflow-y: auto;
	}
	.sx-nav--rail-left .sx-menu a,
	.sx-nav--rail-right .sx-menu a { font-size: 1.15rem; text-transform: none; letter-spacing: 0; }

	/* Le voci grandi si riducono: su un telefono 44px sono troppi. */
	.sx-nav--fullscreen .sx-menu > li > a,
	.sx-nav--drawer-right .sx-menu > li > a,
	.sx-nav--drawer-left .sx-menu > li > a {
		font-size: min(var(--sx-menu-big), 2rem);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sx-nav--panel.sx-nav--anim-stagger .sx-menu > li,
	.sx-nav--panel.sx-nav--anim-fade .sx-menu > li,
	.sx-nav--panel.sx-nav--anim-slide .sx-menu > li,
	.sx-nav--panel.sx-nav--anim-zoom .sx-menu > li {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.sx-nav--fullscreen,
	.sx-nav--drawer-right,
	.sx-nav--drawer-left,
	.sx-header.is-hidden { transition: none; }
}

/* Il fuoco da tastiera deve restare visibile anche dentro i pannelli */
.sx-nav a:focus-visible,
.sx-nav-toggle:focus-visible {
	outline: 2px solid var(--sx-primary);
	outline-offset: 4px;
	border-radius: 4px;
}