/*
 * Page-level effects only. Each is a class on <html>; nothing in the page's
 * markup is changed. The panel's own styles live inside its Shadow DOM (JS).
 */

/* Larger text is applied by the JS (0.1.2): each text element gets its own
 * measured size times the scale, once, so px headings and px wrappers scale too
 * and nested em sizes don't compound. No CSS rule here on purpose. */

html.sbxa11y-line-height body :is(p, li, dd, dt, td, th, blockquote, figcaption) {
	line-height: 1.8 !important;
}

html.sbxa11y-letter-spacing body :is(p, li, dd, dt, td, th, blockquote, figcaption, h1, h2, h3, h4, h5, h6) {
	letter-spacing: 0.12em !important;
	word-spacing: 0.16em !important;
}

html.sbxa11y-readable-font body,
html.sbxa11y-readable-font body *:not(i):not([class*="icon"]):not([class*="fa-"]) {
	font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important;
}

html.sbxa11y-contrast-dark body,
html.sbxa11y-contrast-dark body *:not(img):not(video):not(svg):not(svg *):not([id^="sbxa11y-"]) {
	background-color: #000 !important;
	color: #fff !important;
	border-color: #fff !important;
}
html.sbxa11y-contrast-dark body a,
html.sbxa11y-contrast-dark body a * {
	color: #ffeb3b !important;
}

html.sbxa11y-contrast-light body,
html.sbxa11y-contrast-light body *:not(img):not(video):not(svg):not(svg *):not([id^="sbxa11y-"]) {
	background-color: #fff !important;
	color: #000 !important;
	border-color: #000 !important;
}
html.sbxa11y-contrast-light body a,
html.sbxa11y-contrast-light body a * {
	color: #0033cc !important;
}

/* Greyscale (0.1.2): a fixed overlay greys what is behind it with backdrop-filter.
 * No filter goes on the page's own elements, because a filter makes a containing
 * block and breaks fixed or sticky headers (Elementor's #site_header on Orion).
 * The panel sits one layer above, so it keeps its colours. */
#sbxa11y-grey {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2147483645;
	-webkit-backdrop-filter: grayscale(1);
	backdrop-filter: grayscale(1);
}

html.sbxa11y-highlight-links body a {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	outline: 2px dashed currentColor !important;
	outline-offset: 2px !important;
}

html.sbxa11y-highlight-focus body :focus-visible {
	outline: 4px solid #ffbf00 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 7px #000 !important;
}

html.sbxa11y-stop-motion *,
html.sbxa11y-stop-motion *::before,
html.sbxa11y-stop-motion *::after {
	animation-duration: 0.001ms !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

html.sbxa11y-big-cursor,
html.sbxa11y-big-cursor body * {
	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='M6 4l30 18-13 3 8 15-6 3-8-15-11 9z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 4, auto !important;
}

#sbxa11y-guide {
	position: fixed;
	left: 0;
	right: 0;
	height: 12px;
	margin-top: -6px;
	background: rgba(255, 191, 0, 0.35);
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
	pointer-events: none;
	z-index: 2147483646;
}

/* The panel root opts out of every page effect above. */
#sbxa11y-root,
#sbxa11y-root * {
	filter: none !important;
	font-size: initial;
}