/*
 * Sabianlab Accessibilità
 * 1. Preferenze del visitatore (classi su <html> messe dallo script nel <head>)
 * 2. Pulsante pausa dei video di sfondo
 * 3. Pulsante e pannello "Preferenze di lettura"
 */

/* ── 1. Preferenze ── */

/* Animazioni ferme: automatico con "Riduci movimento", oppure scelto nel pannello */
html.sla-calma *,
html.sla-calma *::before,
html.sla-calma *::after {
	animation-duration: .01ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: .01ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
	}
html.sla-calma [class*="us_animate_"] { /* comparse di Impreza: elementi subito visibili */
	opacity: 1 !important;
	animation: none !important;
	}
html.sla-calma .l-section-img { /* parallasse di Impreza: lo sfondo scorre con la pagina */
	background-attachment: scroll !important;
	}

/* Link sottolineati (anche con il contrasto alto) */
html.sla-link body a:not(.w-btn):not(.w-nav-anchor):not(.w-image-h):not(.w-toplink):not(.w-skip-btn):not(.w-socials-item-link):not(.sla-info) {
	text-decoration: underline !important;
	text-decoration-thickness: max(1px, .08em) !important;
	text-underline-offset: .18em !important;
	}

/* Più spazio tra righe, lettere e parole (utile per chi ha difficoltà di lettura) */
html.sla-spazi {
	--line-height: 1.95;
	--letter-spacing: .04em;
	}
html.sla-spazi body {
	word-spacing: .12em;
	}
html.sla-spazi body p,
html.sla-spazi body li {
	line-height: 1.95 !important;
	letter-spacing: .04em !important;
	}

/* Testo più leggibile: carattere semplice senza corsivi, paragrafi allineati a sinistra (dislessia, vista debole).
   Esclusi icone (Font Awesome di Impreza, SVG) e il pannello */
html.sla-leggibile body *:not(i):not(svg):not(svg *):not([class*="fa-"]):not(.w-nav-arrow):not(.sla-wrap):not(.sla-wrap *) {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
	font-style: normal !important;
	}
/* Solo i testi giustificati vanno a sinistra (la classe la mette lo script): i testi centrati restano centrati */
html.sla-leggibile .sla-giustificato {
	text-align: left !important;
	}

/* Contrasto alto: i colori li cambia lo script; qui testi attenuati e bordi più netti */
html.sla-contrasto body ::placeholder {
	color: currentColor !important;
	opacity: .85 !important;
	}
html.sla-contrasto body :focus-visible {
	outline-width: 3px !important;
	}

/* Maschera di lettura (solo con il mouse) */
.sla-mask-band {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 989;
	height: 0;
	background: rgba(0, 0, 0, .55);
	pointer-events: none;
	}
.sla-mask-top {
	top: 0;
	}
.sla-mask-bottom {
	bottom: 0;
	}
html:not(.sla-maschera) .sla-mask-band {
	display: none;
	}
@media (hover: none), (pointer: coarse) {
	.sla-mask-band,
	.sla-wrap .sla-solo-mouse {
		display: none !important;
		}
	}

/* Pulsante nascosto dal visitatore (ricompare con [sla_mostra_pulsante]) */
html.sla-nascosto .sla-wrap .sla-toggle,
html.sla-nascosto .sla-wrap .sla-panel {
	display: none !important;
	}

/* ── 2. Video di sfondo ── */
.sla-video {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	cursor: pointer;
	}
.sla-video svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
	}
.sla-video:hover {
	background: rgba(0, 0, 0, .75);
	}
.sla-video:focus-visible {
	outline: 3px solid #fff !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px rgba(0, 0, 0, .6);
	}

/* ── 3. Pulsante e pannello ── */
.sla-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
	}
.sla-wrap {
	--sla-x: var(--sla-xd, 20px); /* distanze dalle impostazioni del plugin */
	--sla-y: var(--sla-yd, 20px);
	--sla-a: var(--sla-p-accent, var(--color-content-primary, #1a5fb4)); /* accento del pannello */
	--sla-t: var(--sla-p-text, #1a1a1a); /* testo del pannello */
	--sla-line: color-mix(in srgb, var(--sla-t) 14%, #fff);
	--sla-edge: color-mix(in srgb, var(--sla-t) 50%, #fff);
	font: 400 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	}
.sla-wrap.sla-font-sito {
	font-family: inherit; /* carattere del sito */
	}
.sla-wrap .sla-toggle {
	--sla-fg-cur: var(--sla-fg, #fff);
	position: fixed;
	bottom: var(--sla-y);
	left: var(--sla-x);
	z-index: 990;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--sla-size, 48px);
	height: var(--sla-size, 48px);
	padding: 0;
	margin: 0;
	border: 2px solid #fff;
	border-radius: var(--sla-radius, 50%);
	background: var(--sla-bg, var(--color-content-primary, #1F3A4C));
	color: var(--sla-fg-cur);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .2);
	cursor: pointer;
	transition: background-color .2s, color .2s;
	}
@media (hover: hover) { /* sui touch il passaggio del mouse resterebbe attaccato dopo il tocco */
	.sla-wrap .sla-toggle:hover {
		background: var(--sla-bg-h, var(--sla-bg, var(--color-content-primary, #1F3A4C)));
		color: var(--sla-fg-h, var(--sla-fg-cur));
		}
	}
.sla-wrap .sla-toggle.sla-fondo-bianco {
	border: 0;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15), 0 2px 8px rgba(0, 0, 0, .08);
	}
.sla-wrap.sla-pos-right .sla-toggle {
	left: auto;
	right: var(--sla-x);
	}
.sla-wrap .sla-toggle.sla-fondo-chiaro {
	--sla-fg-cur: var(--sla-fg, #1a1a1a);
	}
.sla-wrap .sla-toggle svg {
	width: 58%;
	height: 58%;
	fill: currentColor;
	}
.sla-wrap .sla-toggle:focus-visible { /* scuro con il bordo bianco del pulsante: visibile su fondi chiari e scuri */
	outline: 3px solid #1a1a1a !important;
	outline-offset: 2px !important;
	}
.sla-wrap .sla-panel {
	position: fixed;
	bottom: calc(var(--sla-y) + var(--sla-size, 48px) + 12px);
	left: var(--sla-x);
	z-index: 991;
	box-sizing: border-box;
	width: 320px;
	max-width: calc(100vw - var(--sla-x) - 16px);
	max-height: calc(100vh - var(--sla-y) - var(--sla-size, 48px) - 42px);
	overflow-y: auto;
	padding: 20px;
	border-radius: 14px;
	background: #fff;
	color: var(--sla-t);
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
	text-align: left;
	}
.sla-wrap.sla-pos-right .sla-panel {
	left: auto;
	right: var(--sla-x);
	}
@media (max-width: 767px) {
	.sla-wrap {
		--sla-x: var(--sla-xm, 20px);
		--sla-y: var(--sla-ym, 20px);
		}
	}
.sla-wrap .sla-panel[hidden] {
	display: none;
	}
.sla-wrap .sla-title {
	margin: 0 0 2px;
	font-size: 18px;
	font-weight: 600;
	color: var(--sla-t);
	}
.sla-wrap .sla-note {
	margin: 0 0 8px;
	font-size: 14px;
	color: color-mix(in srgb, var(--sla-t) 78%, #fff);
	}
.sla-wrap .sla-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--sla-line);
	}
.sla-wrap .sla-label {
	font-size: 16px;
	color: var(--sla-t);
	}
.sla-wrap button {
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	}
.sla-wrap .sla-panel :focus-visible {
	outline: 3px solid var(--sla-a) !important;
	outline-offset: 2px !important;
	}
.sla-wrap.sla-accento-chiaro .sla-panel :focus-visible {
	outline-color: var(--sla-t) !important;
	}

/* Dimensione del testo */
.sla-wrap .sla-size {
	display: flex;
	align-items: center;
	gap: 6px;
	}
.sla-wrap .sla-btn {
	min-width: 40px;
	height: 36px;
	padding: 0 8px;
	margin: 0;
	border: 1px solid var(--sla-edge);
	border-radius: 8px;
	background: #fff;
	color: var(--sla-t);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	}
.sla-wrap .sla-btn:hover:not([disabled]) {
	background: color-mix(in srgb, var(--sla-a) 14%, #fff);
	}
.sla-wrap .sla-btn[disabled] {
	opacity: .4;
	cursor: default;
	}
.sla-wrap .sla-size-val {
	min-width: 44px;
	font-size: 14px;
	text-align: center;
	color: var(--sla-t);
	}

/* Pulsante semplice dello shortcode [sla_mostra_pulsante stile="0"] */
.sla-mostra-semplice {
	padding: .65em 1.3em;
	margin: 0;
	border: 1px solid currentColor;
	border-radius: .3em;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	}
.sla-mostra-semplice:hover {
	background: rgba(0, 0, 0, .05);
	}

/* Interruttori */
.sla-wrap .sla-sw {
	position: relative;
	flex-shrink: 0;
	width: 46px;
	height: 26px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 13px;
	background: color-mix(in srgb, var(--sla-t) 60%, #fff);
	cursor: pointer;
	}
.sla-wrap .sla-sw::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #fff;
	transition: transform .15s;
	}
.sla-wrap .sla-sw[aria-checked="true"] {
	background: var(--sla-a);
	}
.sla-wrap.sla-accento-chiaro .sla-sw[aria-checked="true"] { /* accento chiaro: bordo e pallino nel colore del testo */
	box-shadow: inset 0 0 0 1.5px var(--sla-t);
	}
.sla-wrap.sla-accento-chiaro .sla-sw[aria-checked="true"]::after {
	background: var(--sla-t);
	}
.sla-wrap .sla-sw[aria-checked="true"]::after {
	transform: translateX(20px);
	}

/* Piede del pannello */
.sla-wrap .sla-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 12px;
	padding-top: 12px;
	border-top: 1px solid var(--sla-line);
	}
.sla-wrap .sla-reset {
	padding: 6px 12px;
	margin: 0;
	border: 1px solid var(--sla-edge);
	border-radius: 8px;
	background: #fff;
	color: var(--sla-t);
	font-size: 15px;
	cursor: pointer;
	}
.sla-wrap .sla-reset:hover {
	background: color-mix(in srgb, var(--sla-a) 14%, #fff);
	}
.sla-wrap .sla-info {
	font-size: 14px;
	color: var(--sla-a) !important;
	text-decoration: underline !important;
	text-underline-offset: .2em;
	}
.sla-wrap.sla-accento-chiaro .sla-info { /* link nel colore del testo, sottolineatura nell'accento */
	color: var(--sla-t) !important;
	text-decoration-color: var(--sla-a) !important;
	text-decoration-thickness: 2px !important;
	}

@media print {
	.sla-wrap,
	.sla-mask-band,
	.sla-video {
		display: none !important;
		}
	}