/**
 * MB Accessibility – Features CSS
 * Applies visual transformations to the page body via CSS classes.
 * All rules use !important to override theme styles reliably.
 * The widget itself (#mba-widget-wrapper) is always excluded from transformations.
 */

/* ==========================================================================
   HIGH CONTRAST
   ========================================================================== */

body.mba-high-contrast *:not(#mba-widget-wrapper):not(#mba-widget-wrapper *) {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

body.mba-high-contrast a:not(#mba-widget-wrapper a),
body.mba-high-contrast a:not(#mba-widget-wrapper a) * {
	color: #ff0 !important;
	text-decoration: underline !important;
}

body.mba-high-contrast img:not(#mba-widget-wrapper img) {
	filter: contrast(150%) brightness(80%) !important;
}

body.mba-high-contrast button:not(#mba-widget-wrapper button),
body.mba-high-contrast input[type="submit"]:not(#mba-widget-wrapper input),
body.mba-high-contrast input[type="button"]:not(#mba-widget-wrapper input) {
	background-color: #222 !important;
	color: #fff !important;
	border: 2px solid #fff !important;
}

/* ==========================================================================
   GRAYSCALE
   ========================================================================== */

body.mba-grayscale {
	filter: grayscale(100%);
	-webkit-filter: grayscale(100%);
}

/* Exempt the widget from grayscale so colours remain usable */
body.mba-grayscale #mba-widget-wrapper {
	filter: none !important;
	-webkit-filter: none !important;
}

/* ==========================================================================
   NEGATIVE CONTRAST (invert)
   ========================================================================== */

body.mba-invert {
	filter: invert(100%);
	-webkit-filter: invert(100%);
}

/* Re-invert images so photos look natural */
body.mba-invert img:not(#mba-widget-wrapper img) {
	filter: invert(100%);
	-webkit-filter: invert(100%);
}

/* Exempt widget */
body.mba-invert #mba-widget-wrapper {
	filter: none !important;
	-webkit-filter: none !important;
}

/* ==========================================================================
   FONT SIZE
   La variazione della dimensione è gestita interamente via JavaScript:
   widget.js imposta document.documentElement.style.fontSize (l'elemento html),
   in modo che tutti i rem/em del sito scalino proporzionalmente.
   Il widget usa font-size: 14px !important in widget.css ed è quindi immune.
   ========================================================================== */

/* ==========================================================================
   READABLE FONT (Verdana – universally available, high legibility)
   ========================================================================== */

body.mba-readable-font,
body.mba-readable-font p,
body.mba-readable-font li,
body.mba-readable-font h1,
body.mba-readable-font h2,
body.mba-readable-font h3,
body.mba-readable-font h4,
body.mba-readable-font h5,
body.mba-readable-font h6,
body.mba-readable-font span:not(#mba-widget-wrapper span),
body.mba-readable-font label:not(#mba-widget-wrapper label),
body.mba-readable-font input:not(#mba-widget-wrapper input),
body.mba-readable-font select:not(#mba-widget-wrapper select),
body.mba-readable-font textarea,
body.mba-readable-font blockquote,
body.mba-readable-font td,
body.mba-readable-font th {
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif !important;
	letter-spacing: 0.03em !important;
	word-spacing: 0.1em !important;
}

/* ==========================================================================
   UNDERLINE LINKS
   ========================================================================== */

body.mba-underline-links a:not(#mba-widget-wrapper a),
body.mba-underline-links a:not(#mba-widget-wrapper a) * {
	text-decoration: underline !important;
}

/* ==========================================================================
   PAUSE ANIMATIONS
   ========================================================================== */

body.mba-pause-animations *:not(#mba-widget-wrapper):not(#mba-widget-wrapper *),
body.mba-pause-animations *:not(#mba-widget-wrapper)::before,
body.mba-pause-animations *:not(#mba-widget-wrapper)::after {
	animation-play-state: paused !important;
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	transition-delay: 0ms !important;
	scroll-behavior: auto !important;
}

/* ==========================================================================
   HIDE IMAGES
   ========================================================================== */

body.mba-hide-images img:not(#mba-widget-wrapper img) {
	visibility: hidden !important;
}

body.mba-hide-images *:not(#mba-widget-wrapper):not(#mba-widget-wrapper *) {
	background-image: none !important;
}

/* ==========================================================================
   INCREASED LINE HEIGHT
   ========================================================================== */

body.mba-line-height p,
body.mba-line-height li,
body.mba-line-height span:not(#mba-widget-wrapper span),
body.mba-line-height td,
body.mba-line-height th,
body.mba-line-height label:not(#mba-widget-wrapper label),
body.mba-line-height blockquote {
	line-height: 2 !important;
}

/* ==========================================================================
   COLOR BLINDNESS PROFILES
   Filtri SVG iniettati dinamicamente in JS via body.style.filter.
   Questi placeholder servono a mantenere la cascata coerente.
   ========================================================================== */

/* Le classi non applicano filter direttamente — lo gestisce widget.js
   combinando i filtri per evitare conflitti CSS tra grayscale/invert/colorblind. */

/* ==========================================================================
   TEXT LEFT ALIGN
   ========================================================================== */

body.mba-text-left p:not(#mba-widget-wrapper p),
body.mba-text-left li:not(#mba-widget-wrapper li),
body.mba-text-left td:not(#mba-widget-wrapper td),
body.mba-text-left th:not(#mba-widget-wrapper th),
body.mba-text-left blockquote:not(#mba-widget-wrapper blockquote),
body.mba-text-left h1, body.mba-text-left h2,
body.mba-text-left h3, body.mba-text-left h4 {
	text-align: left !important;
}

/* ==========================================================================
   FOCUS INDICATOR – WCAG 2.4.11 / 2.4.13
   ========================================================================== */

body.mba-focus-indicator :focus,
body.mba-focus-indicator :focus-visible {
	outline: 3px solid var(--mba-color, #1a6baa) !important;
	outline-offset: 3px !important;
	border-radius: 2px !important;
}

/* Garantisce che il focus sia sempre visibile anche su elementi
   che annullano l'outline di default */
body.mba-focus-indicator a:focus,
body.mba-focus-indicator button:focus,
body.mba-focus-indicator input:focus,
body.mba-focus-indicator select:focus,
body.mba-focus-indicator textarea:focus,
body.mba-focus-indicator [tabindex]:focus {
	outline: 3px solid var(--mba-color, #1a6baa) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 5px rgba(26,107,170,0.25) !important;
}

/* ==========================================================================
   LARGE CURSOR (desktop only — hidden on touch devices via CSS media query)
   Il cursore SVG viene iniettato come data-URI in widget.js
   ========================================================================== */

body.mba-big-cursor,
body.mba-big-cursor * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 2 L8 38 L16 30 L22 44 L28 41 L22 27 L34 27 Z' fill='white' stroke='black' stroke-width='2'/%3E%3C/svg%3E") 8 4, auto !important;
}

/* Nasconde il pulsante cursore grande sui dispositivi touch */
@media (hover: none) and (pointer: coarse) {
	.mba-desktop-only {
		display: none !important;
	}
}

/* ==========================================================================
   SCREEN READER – Click/hover target highlights
   ========================================================================== */

body.mba-sr-active {
	cursor: crosshair;
}

body.mba-sr-active *:not(#mba-widget-wrapper):not(#mba-widget-wrapper *):hover {
	outline: 2px dashed var(--mba-color, #1a6baa) !important;
	outline-offset: 3px !important;
	cursor: pointer !important;
}

/* ==========================================================================
   SKIP LINK
   ========================================================================== */

.mba-skip-link {
	position: absolute;
	top: -999px;
	left: -999px;
	z-index: 999999;
	display: block;
	padding: 12px 20px;
	background: #fff;
	color: #000;
	font-size: 14px;
	font-weight: 600;
	border: 2px solid #000;
	text-decoration: none;
	transition: none;
}

.mba-skip-link:focus {
	top: 10px;
	left: 10px;
}