/**
 * SIA Accessibility — front-end widget + user-preference styles.
 *
 * Everything is scoped under `.sia-a11y-*` (widget chrome) or `html.sia-a11y--*`
 * (active preferences) so it never collides with Blocksy (.ct-*), WoodMart
 * (.wd-*) or Elementor (.elementor-*). Preference effects deliberately EXCLUDE
 * `#sia-a11y-root` so the widget's own UI stays crisp while the page changes.
 */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
.sia-a11y-root {
	--sia-a11y-accent: #7c3aed;
	--sia-a11y-icon: #000000;
	--sia-a11y-surface: #ffffff;
	--sia-a11y-ink: #1c1530;
	--sia-a11y-border: #e7e3f7;
	--sia-a11y-muted: #6b6580;
	--sia-a11y-group: #f4f3f8;
	--sia-a11y-dark: #0f0a1e;
	--sia-a11y-radius: 16px;
	--sia-a11y-shadow: 0 12px 34px rgba(20, 12, 45, .22);
	position: fixed;
	z-index: 99990;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
	/* Don't inherit centered text from the host theme (WoodMart centers a lot).
	 * Intentionally-centered elements (profiles, actions, stepper value, footer)
	 * carry their own text-align, so they keep centering. */
	text-align: left;
}
/* Theme-proofing: host themes (e.g. WoodMart) force UPPERCASE + letter-spacing
 * on buttons/headings, which leaked into our labels. All of our casing is set
 * in the strings themselves — never transform it. */
.sia-a11y-root, .sia-a11y-root * {
	text-transform: none !important;
	letter-spacing: normal !important;
	word-spacing: normal !important;
}
.sia-a11y-root[data-position="bottom-right"] { right: 18px; bottom: 18px; }
.sia-a11y-root[data-position="bottom-left"]  { left: 18px;  bottom: 18px; }
.sia-a11y-root[data-position="top-right"]    { right: 18px; top: 18px; }
.sia-a11y-root[data-position="top-left"]     { left: 18px;  top: 18px; }
.sia-a11y-root[data-position="middle-right"] { right: 18px; top: 50%; transform: translateY(-50%); }
.sia-a11y-root[data-position="middle-left"]  { left: 18px;  top: 50%; transform: translateY(-50%); }
.sia-a11y-root *, .sia-a11y-root *::before, .sia-a11y-root *::after { box-sizing: border-box; }

@media (max-width: 600px) {
	.sia-a11y-root.sia-a11y--hide-mobile { display: none !important; }
}

/* ── Trigger button — the full-bleed icon on a circular plate ───────────────
 * Hardened against host themes (e.g. WoodMart) that style bare <button>
 * globally with padding / min-width / border-radius, which would otherwise
 * shrink or square off the icon. High specificity + !important on the
 * load-bearing box properties; the size is a variable so !important protects
 * it against theme `width: … !important` on buttons too. */
.sia-a11y-root .sia-a11y-trigger {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--sia-a11y-btn-size, 56px) !important;
	height: var(--sia-a11y-btn-size, 56px) !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 50% !important;
	line-height: 1 !important;
	background: var(--sia-a11y-btn-bg, #ffffff);
	box-shadow: 0 6px 18px rgba(20, 12, 45, .22);
	color: var(--sia-a11y-icon, #000);
	cursor: pointer;
	transition: transform .15s ease;
	will-change: transform;
	-webkit-appearance: none;
	appearance: none;
	overflow: visible;
}
.sia-a11y-root .sia-a11y-trigger svg {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	max-height: 100% !important;
}
/* No plate configured: transparent button, shadow moves onto the icon glyph. */
.sia-a11y-trigger.is-transparent {
	background: transparent;
	box-shadow: none;
}
.sia-a11y-trigger.is-transparent svg {
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .28));
}
.sia-a11y-trigger:hover { transform: scale(1.06); }
.sia-a11y-trigger:focus-visible { outline: 3px solid var(--sia-a11y-accent); outline-offset: 3px; }

/* ── Panel ──────────────────────────────────────────────────────────────── */
.sia-a11y-panel {
	position: absolute;
	width: 348px;
	max-width: calc(100vw - 36px);
	max-height: min(76vh, 620px);
	display: flex;
	flex-direction: column;
	background: var(--sia-a11y-surface);
	color: var(--sia-a11y-ink);
	border: 1px solid var(--sia-a11y-border);
	border-radius: var(--sia-a11y-radius);
	box-shadow: var(--sia-a11y-shadow);
	overflow: hidden;
}
/* Author `display: flex` above would defeat the UA [hidden] rule — the panel
 * must stay closed until opened. Never remove this. */
.sia-a11y-panel[hidden] { display: none !important; }
/* Panel anchoring per position: opens away from the nearest screen edge. */
.sia-a11y-root[data-position^="bottom"] .sia-a11y-panel { bottom: calc(100% + 12px); }
.sia-a11y-root[data-position^="top"] .sia-a11y-panel    { top: calc(100% + 12px); }
.sia-a11y-root[data-position="bottom-right"] .sia-a11y-panel,
.sia-a11y-root[data-position="top-right"] .sia-a11y-panel { right: 0; }
.sia-a11y-root[data-position="bottom-left"] .sia-a11y-panel,
.sia-a11y-root[data-position="top-left"] .sia-a11y-panel { left: 0; }
.sia-a11y-root[data-position="middle-right"] .sia-a11y-panel {
	right: calc(100% + 12px); top: 50%; transform: translateY(-50%);
}
.sia-a11y-root[data-position="middle-left"] .sia-a11y-panel {
	left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
}
/* Narrow viewports: no room beside the trigger for middle positions, so the
 * panel anchors to the trigger's outer edge and overlays it while open. */
@media (max-width: 600px) {
	.sia-a11y-root[data-position="middle-right"] .sia-a11y-panel { right: 0; }
	.sia-a11y-root[data-position="middle-left"] .sia-a11y-panel { left: 0; }
}

/* Header — dark bar with title + close (reference format). */
.sia-a11y-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	background: var(--sia-a11y-dark);
	color: #fff;
	flex: 0 0 auto;
}
.sia-a11y-panel__title { font-size: 17px; font-weight: 700; }
.sia-a11y-panel__close {
	border: none; background: transparent; cursor: pointer;
	font-size: 26px; line-height: 1; color: rgba(255,255,255,.85);
	width: 34px; height: 34px; border-radius: 8px; flex: 0 0 auto;
}
.sia-a11y-panel__close:hover { background: rgba(255,255,255,.12); color: #fff; }
.sia-a11y-panel__close:focus-visible { outline: 3px solid var(--sia-a11y-accent); outline-offset: 2px; }

.sia-a11y-panel__body {
	padding: 14px;
	display: grid;
	gap: 14px;
	overflow-y: auto;
}

/* Top actions: Reset (outline) + Hide (dark), side by side. */
.sia-a11y-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sia-a11y-actions--single { grid-template-columns: 1fr; }
.sia-a11y-action {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 10px;
	border-radius: 12px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
	cursor: pointer;
	text-align: center;
}
.sia-a11y-action--reset {
	border: 1px solid var(--sia-a11y-border);
	background: #fff;
	color: var(--sia-a11y-ink);
}
.sia-a11y-action--reset:hover { border-color: var(--sia-a11y-accent); color: var(--sia-a11y-accent); }
.sia-a11y-action--hide {
	border: 1px solid var(--sia-a11y-dark);
	background: var(--sia-a11y-dark);
	color: #fff;
}
.sia-a11y-action--hide:hover { opacity: .88; }
.sia-a11y-action:focus-visible { outline: 3px solid var(--sia-a11y-accent); outline-offset: 2px; }
.sia-a11y-action svg { flex: 0 0 auto; }

/* Groups: small heading + rounded box with white rows. */
.sia-a11y-group { display: grid; gap: 8px; }
.sia-a11y-group__title {
	font-size: 13px;
	font-weight: 700;
	color: var(--sia-a11y-ink);
	padding-left: 2px;
}
.sia-a11y-group__box {
	background: var(--sia-a11y-group);
	border-radius: 14px;
	padding: 8px;
	display: grid;
	gap: 6px;
}

/* Tool rows */
/* Higher specificity + !important on the flex layout: host themes (WoodMart)
 * force `justify-content: center` on <button>, which bunched the label + the
 * shortcut chips into the middle instead of left / right. */
.sia-a11y-root .sia-a11y-tool {
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 12px;
	width: 100% !important;
	min-width: 0 !important;
	padding: 12px 14px !important;
	border: 1px solid transparent;
	border-radius: 10px;
	background: #fff;
	color: var(--sia-a11y-ink);
	font-size: 14px;
	text-align: left !important;
	box-shadow: 0 1px 2px rgba(28, 21, 48, .05);
	-webkit-appearance: none;
	appearance: none;
}
button.sia-a11y-tool { cursor: pointer; }
.sia-a11y-root .sia-a11y-tool__label {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-start !important;
	gap: 10px;
	font-weight: 600;
	min-width: 0;
	flex: 1 1 auto;
}
.sia-a11y-tool__icon { flex: 0 0 auto; color: var(--sia-a11y-ink); }
.sia-a11y-tool--toggle:hover { border-color: var(--sia-a11y-accent); }
.sia-a11y-tool--toggle[aria-pressed="true"] {
	border-color: var(--sia-a11y-accent);
	background: rgba(124, 58, 237, .08);
}
.sia-a11y-tool--toggle[aria-pressed="true"] .sia-a11y-tool__icon { color: var(--sia-a11y-accent); }
.sia-a11y-tool:focus-visible { outline: 3px solid var(--sia-a11y-accent); outline-offset: 2px; }

/* Keyboard shortcut chips */
.sia-a11y-kbd {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	flex: 0 0 auto;
	color: var(--sia-a11y-muted);
	font-size: 11px;
}
.sia-a11y-kbd kbd {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 11px;
	line-height: 1;
	padding: 4px 6px;
	border: 1px solid var(--sia-a11y-border);
	border-bottom-width: 2px;
	border-radius: 6px;
	background: #fff;
	color: var(--sia-a11y-ink);
}

/* Stepper (font size) */
.sia-a11y-tool--stepper { cursor: default; }
.sia-a11y-stepper { display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.sia-a11y-stepper__btn {
	width: 32px; height: 32px; border-radius: 8px; cursor: pointer;
	border: none; background: var(--sia-a11y-accent);
	font-size: 18px; font-weight: 700; color: #fff; line-height: 1;
}
.sia-a11y-stepper__btn:hover:not(:disabled) { opacity: .85; }
.sia-a11y-stepper__btn:disabled { opacity: .35; cursor: default; }
.sia-a11y-stepper__btn:focus-visible { outline: 3px solid var(--sia-a11y-accent); outline-offset: 2px; }
.sia-a11y-stepper__value {
	min-width: 48px; text-align: center; font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Quick profiles — one-click preset chips */
.sia-a11y-profiles { display: flex; flex-wrap: wrap; gap: 6px; }
.sia-a11y-profile {
	flex: 1 1 auto;
	padding: 9px 10px;
	border: 1px solid var(--sia-a11y-border);
	border-radius: 999px;
	background: #fff;
	color: var(--sia-a11y-ink);
	font-size: 12.5px;
	font-weight: 600;
	cursor: pointer;
	text-align: center;
}
.sia-a11y-profile:hover { border-color: var(--sia-a11y-accent); color: var(--sia-a11y-accent); }
.sia-a11y-profile[aria-pressed="true"] {
	background: var(--sia-a11y-accent);
	border-color: var(--sia-a11y-accent);
	color: #fff;
}
.sia-a11y-profile:focus-visible { outline: 3px solid var(--sia-a11y-accent); outline-offset: 2px; }

/* Restore button on the statement page — visible only while the visitor has
 * hidden the widget (the runtime un-hides it). */
.sia-a11y-restore {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 16px;
	border: 1px solid #cfc7ee;
	border-radius: 10px;
	background: #fff;
	color: #1c1530;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.sia-a11y-restore:hover { border-color: #7c3aed; color: #7c3aed; }
.sia-a11y-restore:focus-visible { outline: 3px solid #7c3aed; outline-offset: 2px; }
.sia-a11y-restore[hidden] { display: none !important; }

/* Footer: statement link */
.sia-a11y-panel__foot {
	padding: 10px 16px;
	border-top: 1px solid var(--sia-a11y-border);
	text-align: center;
	flex: 0 0 auto;
}
.sia-a11y-statement-link { font-size: 12px; color: var(--sia-a11y-muted); text-decoration: underline; }

/* ════════════════════════════════════════════════════════════════════════
 * User-preference effects on the page. All scoped to html.sia-a11y--* and
 * EXCLUDE the widget root so the panel itself is never distorted.
 * The widget root and the reading guide are direct children of <body>; every
 * effect scopes to `body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar)` —
 * SIMPLE :not() arguments, supported everywhere.
 * ════════════════════════════════════════════════════════════════════════ */

/* Text size — scale block-level text once (inline children inherit, so we
 * avoid compounding). */
html.sia-a11y--fs body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, dd, dt, td, th, figcaption, label) {
	font-size: calc(1em * var(--sia-a11y-font-scale, 1)) !important;
}

/* Text spacing */
html.sia-a11y--spacing body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, a, span, td, th) {
	letter-spacing: .04em !important;
	word-spacing: .14em !important;
	line-height: 1.8 !important;
}

/* Highlight links */
html.sia-a11y--links body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) a {
	text-decoration: underline !important;
	text-underline-offset: 2px;
	outline: 2px solid currentColor;
	outline-offset: 1px;
	background: rgba(255, 235, 59, .35) !important;
	color: #111 !important;
}

/* Underline titles */
html.sia-a11y--titles body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) :is(h1, h2, h3, h4, h5, h6) {
	text-decoration: underline !important;
	text-underline-offset: 3px;
	text-decoration-thickness: 2px;
}

/* Pause animations */
html.sia-a11y--no-motion body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar),
html.sia-a11y--no-motion body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) * {
	animation-play-state: paused !important;
	transition-duration: 0s !important;
	scroll-behavior: auto !important;
}

/* Large cursor, dark arrow (black fill / white edge) */
html.sia-a11y--cursor body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar),
html.sia-a11y--cursor body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) * {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M6 2l26 14-11 2 7 14-5 2-7-14-8 8z" fill="black" stroke="white" stroke-width="1.5"/></svg>') 4 2, auto !important;
}

/* Large cursor, light arrow (white fill / black edge) */
html.sia-a11y--cursor-light body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar),
html.sia-a11y--cursor-light body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) * {
	cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"><path d="M6 2l26 14-11 2 7 14-5 2-7-14-8 8z" fill="white" stroke="black" stroke-width="1.5"/></svg>') 4 2, auto !important;
}

/* Color modes — one `filter` each; the runtime keeps them mutually exclusive. */
html.sia-a11y--contrast body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) {
	filter: contrast(1.32) saturate(1.08);
}
html.sia-a11y--mono body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) {
	filter: grayscale(1);
}
html.sia-a11y--invert body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) {
	filter: invert(1) hue-rotate(180deg);
}
/* Re-invert media so photos and videos keep natural colors. */
html.sia-a11y--invert body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) :is(img, video, iframe, picture, svg) {
	filter: invert(1) hue-rotate(180deg);
}

/* Comfortable reading — readable column on the main content area. */
html.sia-a11y--reading body > *:not(#sia-a11y-root):not(.sia-a11y-guidebar) :is(main, #main, #content, article, .entry-content) {
	max-width: 70ch !important;
	margin-left: auto !important;
	margin-right: auto !important;
	line-height: 1.85 !important;
	letter-spacing: .01em !important;
	background: #fbf8f1 !important;
	color: #20242c !important;
}

/* Reading guide bar */
.sia-a11y-guidebar {
	position: fixed;
	left: 0; right: 0;
	height: 38px;
	margin-top: -19px;
	background: rgba(124, 58, 237, .12);
	border-top: 2px solid rgba(124, 58, 237, .55);
	border-bottom: 2px solid rgba(124, 58, 237, .55);
	pointer-events: none;
	z-index: 99989;
}

@media print {
	.sia-a11y-root, .sia-a11y-guidebar { display: none !important; }
}