/**
 * 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;
}

/* ==========================================================================
   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;
}