/* Visitor adjustments style existing page elements; the panel remains in Shadow DOM. */

/* Color adjustments live in a cascade layer, declared here so the layer is
   ordered before any the theme may define.

   An !important declaration inside a named layer outranks an !important
   declaration outside every layer, whatever its specificity. That is the only
   reliable way to win: a theme or plugin rule like
   `.cff-number-field .field { background: white !important }` carries two
   classes and beats any selector we can reasonably write, and when it wins on
   background while we win on color, the result is white text on a white field.

   The same rules are repeated unlayered at the end of this file for browsers
   without @layer, which ignore both the statement and the block. Modern
   browsers let the layered copy win; older ones fall back to the previous
   behavior instead of losing color adjustments entirely. KEEP THE TWO COPIES
   IN SYNC, and drop the fallback when the support floor allows. */
@layer sst-a11y-color;

/* Content Scaling */
html.sst-a11y-content-scaling body > :not(.sst-a11y-root):not(#wpadminbar):not(#sst-a11y-skip):not(script):not(style):not(link) {
	zoom: calc(var(--sst-a11y-content-scaling-level, 100) / 100);
}

/* Readable Font (icons excluded so icon fonts don't turn into boxes).
   Must target every element, not just the body: the theme sets explicit
   font-family per element, so inheritance from the container won't override. */
html.sst-a11y-readable-font body :not(:where(.sst-a11y-root, #wpadminbar, #wpadminbar *, i, i *, [class*="icon"], [class*="icon"] *, [class*="fa-"], [class*="fa-"] *, .dashicons, svg, svg *)) {
	font-family: Arial, Helvetica, "Segoe UI", sans-serif !important;
}

/* Adjust Line Height (unitless multiplier off a 1.5 base) */
html.sst-a11y-line-height body *:not(:where(.sst-a11y-root,#wpadminbar,#wpadminbar *)) {
	line-height: calc(var(--sst-a11y-line-height-level, 100) / 100 * 1.5) !important;
}

/* Adjust Letter Spacing; keep authored icon metrics. */
html.sst-a11y-letter-spacing body :not(:where(.sst-a11y-root,#wpadminbar,#wpadminbar *,i,i *,[class*="icon"],[class*="icon"] *,[class*="fa-"],[class*="fa-"] *,svg,svg *)) {
	letter-spacing: calc((var(--sst-a11y-letter-spacing-level, 100) - 100) / 100 * 0.12em) !important;
}

/* Highlight Titles / Links */
html.sst-a11y-highlight-titles body :is(h1, h2, h3, h4, h5, h6) {
	outline: 2px solid #0050c8 !important;
	outline-offset: 2px;
}
html.sst-a11y-highlight-links body a {
	outline: 2px solid #e8730f !important;
	outline-offset: 2px;
}

/* Text alignment */
html.sst-a11y-align-left   body :not(:where(.sst-a11y-root,#wpadminbar,#wpadminbar *)) { text-align: left !important; }
html.sst-a11y-align-center body :not(:where(.sst-a11y-root,#wpadminbar,#wpadminbar *)) { text-align: center !important; }
html.sst-a11y-align-right  body :not(:where(.sst-a11y-root,#wpadminbar,#wpadminbar *)) { text-align: right !important; }

/* --- Color adjustments -------------------------------------------------- */
/* Dark / Light contrast = color overrides (media kept legible, not recolored).
   High Contrast uses explicit colors; saturation filters only leaf elements.
   Layered: see the note at the top of this file. */
@layer sst-a11y-color {
html.sst-a11y-dark-contrast body,
html.sst-a11y-dark-contrast body *:not(img):not(svg):not(svg *):not(video):not(picture):not(canvas) {
	background-color: #0f0f0f !important;
	color: #ffffff !important;
	border-color: #444 !important;
}
html.sst-a11y-dark-contrast body a,
html.sst-a11y-dark-contrast body a * { color: #5cb3ff !important; }

html.sst-a11y-light-contrast body,
html.sst-a11y-light-contrast body *:not(img):not(svg):not(svg *):not(video):not(picture):not(canvas) {
	background-color: #ffffff !important;
	color: #111111 !important;
	border-color: #bbb !important;
}
html.sst-a11y-light-contrast body a,
html.sst-a11y-light-contrast body a * { color: #0050c8 !important; }

/* Color palettes (chosen hex stored in the level var) */
html.sst-a11y-text-color body *:not(svg):not(svg *) {
	color: var(--sst-a11y-text-color-level) !important;
}
html.sst-a11y-title-color body :is(h1, h2, h3, h4, h5, h6),
html.sst-a11y-title-color body :is(h1, h2, h3, h4, h5, h6) * {
	color: var(--sst-a11y-title-color-level) !important;
}
html.sst-a11y-bg-color body,
html.sst-a11y-bg-color body *:not(img):not(svg):not(svg *):not(video):not(picture):not(canvas) {
	background-color: var(--sst-a11y-bg-color-level) !important;
}
}

/* --- Orientation adjustments -------------------------------------------- */
/* Hide Images (visibility keeps layout; Mute Sounds / Reading Guide / Mask are JS) */
html.sst-a11y-hide-images body img,
html.sst-a11y-hide-images body svg,
html.sst-a11y-hide-images body picture,
html.sst-a11y-hide-images body video {
	visibility: hidden !important;
}

/* Stop Animations (CSS animations/transitions; <video> paused + YouTube/Vimeo
   background iframes halted via JS applier; animated GIFs not covered) */
html.sst-a11y-stop-animations body *,
html.sst-a11y-stop-animations body *::before,
html.sst-a11y-stop-animations body *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* Read Mode — approximate: hide chrome, constrain content to a readable column */
html.sst-a11y-read-mode body { background: #fff !important; }
html.sst-a11y-read-mode body :is(header, nav, aside, footer,
	[role="banner"], [role="navigation"], [role="complementary"], [role="contentinfo"],
	.sidebar, .widget-area, .elementor-location-header, .elementor-location-footer):not(#sst-a11y-skip):not([data-sst-autofix-ignore]) {
	display: none !important;
}
html.sst-a11y-read-mode body :is(main, article, .entry-content, .site-main, #content) {
	max-width: 760px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	float: none !important;
}

/* Highlight Hover / Focus */
html.sst-a11y-highlight-hover body *:hover {
	outline: 2px solid var(--sst-a11y-accent, #146ff8) !important;
	outline-offset: -2px;
}
html.sst-a11y-highlight-focus body *:focus,
html.sst-a11y-highlight-focus body *:focus-visible {
	outline: 3px solid var(--sst-a11y-accent, #146ff8) !important;
	outline-offset: 2px;
}

/* Keyboard / Screen-Reader aids: skip links + strong focus indicator.
   Skip links stay in the light DOM (top of tab order), so they are styled here
   rather than in panel.css. */
.sst-a11y-skip {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2147483647;
}
.sst-a11y-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}
.sst-a11y-skip-link:focus {
	position: static;
	width: auto;
	height: auto;
	clip: auto;
	display: inline-block;
	padding: 10px 16px;
	background: var(--sst-a11y-accent, #146ff8);
	color: #fff;
	font: 600 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	text-decoration: none;
}
html.sst-a11y-nav-aids body :focus,
html.sst-a11y-nav-aids body :focus-visible {
	outline: 3px solid var(--sst-a11y-accent, #146ff8) !important;
	outline-offset: 2px;
}

/* Big cursors (inline SVG data-URI; black = white outline, white = black outline) */
html.sst-a11y-big-black-cursor body,
html.sst-a11y-big-black-cursor body *:not(:where(.sst-a11y-root,#wpadminbar,#wpadminbar *)) {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath d='M4 2v19l5-5 3 7 3-1.2-3-6.8H18z' fill='black' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") 3 2, auto !important;
}
html.sst-a11y-big-white-cursor body,
html.sst-a11y-big-white-cursor body *:not(:where(.sst-a11y-root,#wpadminbar,#wpadminbar *)) {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath d='M4 2v19l5-5 3 7 3-1.2-3-6.8H18z' fill='white' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") 3 2, auto !important;
}

/* High Contrast uses explicit colors rather than a containing-block-creating page filter. */
@layer sst-a11y-color {
html.sst-a11y-high-contrast body,
html.sst-a11y-high-contrast body :not(:where(.sst-a11y-root,#wpadminbar,#wpadminbar *,img,video,canvas,svg,svg *)) {
	color: #000 !important; background-color: #fff !important;
}
html.sst-a11y-high-contrast body a { color: #003366 !important; text-decoration: underline !important; }
}
@media (prefers-reduced-motion: reduce) { .sst-a11y-skip-link { scroll-behavior: auto; } }

/* --- Fallback for browsers without @layer -------------------------------- */
/* Identical to the color adjustments above. Browsers that support @layer let
   the layered copy win, so these are inert there; browsers that do not ignore
   the layer entirely and use these instead. Keep in sync with the layered
   copies, and delete this block once the support floor allows. */
html.sst-a11y-dark-contrast body,
html.sst-a11y-dark-contrast body *:not(img):not(svg):not(svg *):not(video):not(picture):not(canvas) {
	background-color: #0f0f0f !important;
	color: #ffffff !important;
	border-color: #444 !important;
}
html.sst-a11y-dark-contrast body a,
html.sst-a11y-dark-contrast body a * { color: #5cb3ff !important; }

html.sst-a11y-light-contrast body,
html.sst-a11y-light-contrast body *:not(img):not(svg):not(svg *):not(video):not(picture):not(canvas) {
	background-color: #ffffff !important;
	color: #111111 !important;
	border-color: #bbb !important;
}
html.sst-a11y-light-contrast body a,
html.sst-a11y-light-contrast body a * { color: #0050c8 !important; }

html.sst-a11y-text-color body *:not(svg):not(svg *) {
	color: var(--sst-a11y-text-color-level) !important;
}
html.sst-a11y-title-color body :is(h1, h2, h3, h4, h5, h6),
html.sst-a11y-title-color body :is(h1, h2, h3, h4, h5, h6) * {
	color: var(--sst-a11y-title-color-level) !important;
}
html.sst-a11y-bg-color body,
html.sst-a11y-bg-color body *:not(img):not(svg):not(svg *):not(video):not(picture):not(canvas) {
	background-color: var(--sst-a11y-bg-color-level) !important;
}

html.sst-a11y-high-contrast body,
html.sst-a11y-high-contrast body :not(:where(.sst-a11y-root,#wpadminbar,#wpadminbar *,img,video,canvas,svg,svg *)) {
	color: #000 !important; background-color: #fff !important;
}
html.sst-a11y-high-contrast body a { color: #003366 !important; text-decoration: underline !important; }