/* Steric Accessibility Toolbar.
 * Site adjustments are classes on <html>; every rule skips .steric-ui so the toolbar
 * and cookie banner stay readable whatever is switched on. */

/* ---------- Text ---------- */

html.sa-lh body *:not(.steric-ui, .steric-ui *) { line-height: var(--sa-lh) !important; }

html.sa-ls body *:not(.steric-ui, .steric-ui *) {
	letter-spacing: var(--sa-ls) !important;
	word-spacing: calc(var(--sa-ls) * 2) !important;
}

/* Icon fonts are left alone so icons don't turn into letters. */
html.sa-readable-font body *:not(.steric-ui, .steric-ui *, i, [class^="fa"], [class*=" fa-"], [class*="eicon"], [class*="dashicons"]) {
	font-family: "Atkinson Hyperlegible", Verdana, Arial, sans-serif !important;
}

html.sa-align-left body *:not(.steric-ui, .steric-ui *) { text-align: left !important; }

html.sa-highlight-titles :is(h1, h2, h3, h4, h5, h6):not(.steric-ui *) {
	outline: 2px solid #157ae8 !important;
	outline-offset: 4px !important;
}

html.sa-highlight-links a:not(.steric-ui *) {
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	outline: 2px solid #f59e0b !important;
	outline-offset: 2px !important;
}

/* ---------- Color ---------- */

html[data-sa-color="dark"] body,
html[data-sa-color="dark"] body *:not(.steric-ui, .steric-ui *, img, video, svg *) {
	color: #fff !important;
	background-color: #000 !important;
	border-color: #777 !important;
}

html[data-sa-color="dark"] body a:not(.steric-ui *),
html[data-sa-color="dark"] body a:not(.steric-ui *) * { color: #ffd60a !important; }

html[data-sa-color="light"] body,
html[data-sa-color="light"] body *:not(.steric-ui, .steric-ui *, img, video, svg *) {
	color: #000 !important;
	background-color: #fff !important;
	border-color: #555 !important;
}

html[data-sa-color="light"] body a:not(.steric-ui *),
html[data-sa-color="light"] body a:not(.steric-ui *) * { color: #0040a8 !important; }

/* Filters use a backdrop overlay instead of `filter` on the page, which would break
 * Elementor's sticky and fixed elements. */
.sa-filter {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: none;
	pointer-events: none;
}

html[data-sa-color="high"] .sa-filter,
html[data-sa-color="mono"] .sa-filter,
html[data-sa-color="lowsat"] .sa-filter,
html[data-sa-color="highsat"] .sa-filter { display: block; }

html[data-sa-color="high"] .sa-filter { -webkit-backdrop-filter: contrast(1.6); backdrop-filter: contrast(1.6); }
html[data-sa-color="mono"] .sa-filter { -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1); }
html[data-sa-color="lowsat"] .sa-filter { -webkit-backdrop-filter: saturate(0.4); backdrop-filter: saturate(0.4); }
html[data-sa-color="highsat"] .sa-filter { -webkit-backdrop-filter: saturate(2); backdrop-filter: saturate(2); }

/* ---------- Reading & navigation ---------- */

html.sa-stop-animations *,
html.sa-stop-animations *::before,
html.sa-stop-animations *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

html.sa-hide-images body :is(img, picture, video, svg image):not(.steric-ui *) { opacity: 0 !important; }
html.sa-hide-images body *:not(.steric-ui, .steric-ui *) { background-image: none !important; }

html.sa-big-cursor,
html.sa-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='M6 3v37l9-9 6 14 7-3-6-14h13z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 6 3, auto !important;
}

html.sa-highlight-focus *:focus {
	outline: 3px solid #f59e0b !important;
	outline-offset: 3px !important;
}

html.sa-highlight-hover :is(a, button, [role="button"], input, select, textarea, h1, h2, h3, h4, h5, h6, p, li, img):not(.steric-ui *):hover {
	outline: 2px dashed #157ae8 !important;
	outline-offset: 2px !important;
}

.sa-guide,
.sa-mask {
	position: fixed;
	left: 0;
	right: 0;
	z-index: 2147483100;
	display: none;
	pointer-events: none;
}

.sa-guide {
	top: 0;
	height: 8px;
	margin-top: -4px;
	background: #157ae8;
	border-top: 2px solid #fff;
	border-bottom: 2px solid #fff;
}

.sa-mask { background: rgba(0, 0, 0, .6); }
.sa-mask-top { top: 0; }
.sa-mask-bottom { bottom: 0; }

html.sa-reading-guide .sa-guide,
html.sa-reading-mask .sa-mask { display: block; }

/* ---------- Toolbar UI ---------- */

#steric-a11y {
	--sa-blue: #157ae8;
	--sa-ink: #1d1d1f;
	--sa-tile: #f1f3f6;
	font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--sa-ink);
}

#steric-a11y [hidden] { display: none !important; }

#steric-a11y button {
	margin: 0;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	box-shadow: none;
	min-height: 0;
	cursor: pointer;
}

#steric-a11y button:focus-visible,
#steric-a11y summary:focus-visible,
#steric-a11y a:focus-visible {
	outline: 3px solid #f59e0b;
	outline-offset: 2px;
}

#steric-a11y .sa-toggle {
	position: fixed;
	right: 10px;
	bottom: 10px;
	z-index: 2147483200;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	color: #fff;
	background: var(--sa-blue);
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}

#steric-a11y .sa-toggle:hover { background: #232323; }

#steric-a11y .sa-toggle svg { width: 30px; height: 30px; }

/* Small dot when any setting is on, so visitors know why the site looks different. */
#steric-a11y .sa-toggle.sa-modified::after {
	content: "";
	position: absolute;
	top: 2px;
	right: 2px;
	width: 12px;
	height: 12px;
	background: #f59e0b;
	border: 2px solid #fff;
	border-radius: 50%;
}

#steric-a11y .sa-panel {
	position: fixed;
	right: 10px;
	bottom: 72px;
	z-index: 2147483200;
	box-sizing: border-box;
	width: min(380px, calc(100vw - 20px));
	max-height: calc(100vh - 92px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 16px 16px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

#steric-a11y .sa-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 -16px;
	padding: 12px 16px;
	background: #fff;
	border-bottom: 1px solid #e3e6ea;
}

#steric-a11y h2,
#steric-a11y h3 {
	margin: 0;
	font-family: inherit;
	color: var(--sa-ink);
	text-transform: none;
	letter-spacing: normal;
}

#steric-a11y h2 { font-size: 18px; font-weight: 700; line-height: 1.3; }

#steric-a11y h3 {
	margin: 16px 0 8px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #55575c;
}

#steric-a11y .sa-close {
	width: 36px;
	height: 36px;
	padding: 0;
	font-size: 26px;
	line-height: 1;
	color: var(--sa-ink);
	background: transparent;
	border: 0;
	border-radius: 50%;
}

#steric-a11y .sa-close:hover { background: var(--sa-tile); }

#steric-a11y .sa-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}

#steric-a11y .sa-opt {
	padding: 10px 12px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	color: var(--sa-ink);
	background: var(--sa-tile);
	border: 2px solid transparent;
	border-radius: 8px;
}

#steric-a11y .sa-opt:hover { border-color: #b9c4d2; }

#steric-a11y .sa-opt[aria-pressed="true"] {
	background: #e3eefc;
	border-color: var(--sa-blue);
}

#steric-a11y .sa-stepper {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 6px 6px 12px;
	font-size: 14px;
	font-weight: 500;
	background: var(--sa-tile);
	border-radius: 8px;
}

#steric-a11y .sa-step-ctrl { display: flex; align-items: center; gap: 6px; }

#steric-a11y .sa-step-ctrl output { min-width: 64px; text-align: center; font-variant-numeric: tabular-nums; }

#steric-a11y .sa-step-ctrl button {
	width: 34px;
	height: 34px;
	padding: 0;
	font-size: 20px;
	line-height: 1;
	color: #fff;
	background: var(--sa-blue);
	border: 0;
	border-radius: 50%;
}

#steric-a11y .sa-step-ctrl button:disabled { opacity: .35; cursor: default; }

#steric-a11y .sa-reset {
	width: 100%;
	margin-top: 16px;
	padding: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sa-ink);
	background: #fff;
	border: 2px solid var(--sa-ink);
	border-radius: 8px;
}

#steric-a11y .sa-reset:hover { background: var(--sa-tile); }

#steric-a11y .sa-statement { margin-top: 14px; font-size: 14px; }

#steric-a11y .sa-statement summary { padding: 6px 0; font-weight: 600; cursor: pointer; }

#steric-a11y .sa-statement p { margin: 8px 0 0; color: #3a3c40; }

#steric-a11y .sa-statement a { color: var(--sa-blue); text-decoration: underline; }