/*!
 * SN Accessibility toolbar
 * Second Nature - secondnature.agency
 */

/* ------------------------------------------------------------------
 * 1. Skip link
 * ---------------------------------------------------------------- */
.sn-skip-link {
	position: fixed;
	top: -100px;
	left: 8px;
	z-index: 2147483647;
	padding: 12px 18px;
	background: var(--sn-accent, #00152b);
	color: var(--sn-accent-contrast, #fff) !important;
	font: 600 15px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	text-decoration: none;
	border-radius: 0 0 8px 8px;
	transition: top .15s ease;
}
.sn-skip-link:focus {
	top: 0;
	outline: 3px solid #ffbf47;
	outline-offset: 2px;
}

/* ------------------------------------------------------------------
 * 2. Widget shell
 * ---------------------------------------------------------------- */
.sn-a11y-root {
	--sn-p-bg: #ffffff;
	--sn-p-fg: #14181f;
	--sn-p-muted: #5c6672;
	--sn-p-line: #e3e7ec;
	--sn-p-soft: #f6f8fa;
	position: fixed;
	z-index: 2147483000;
	inset: auto auto 0 0;
	font: 400 14px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: var(--sn-p-fg);
	direction: ltr;
	text-align: left;
}
.sn-a11y-root.sn-pos-bottom-right { inset: auto 0 0 auto; }
.sn-a11y-root * { box-sizing: border-box; }
/* Theme reset. :where() keeps specificity at zero so every rule below still wins. */
:where(.sn-a11y-root) button,
:where(.sn-a11y-root) a,
:where(.sn-a11y-root) p,
:where(.sn-a11y-root) h2,
:where(.sn-a11y-root) h3,
:where(.sn-a11y-root) span,
:where(.sn-a11y-root) label,
:where(.sn-a11y-root) input,
:where(.sn-a11y-root) svg {
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
	margin: 0;
	min-width: 0;
	min-height: 0;
	max-width: none;
	float: none;
	text-shadow: none;
	transform: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
:where(.sn-a11y-root) button::before,
:where(.sn-a11y-root) button::after,
:where(.sn-a11y-root) a::before,
:where(.sn-a11y-root) a::after { content: none; display: none; }




/* Floating action button */
.sn-a11y-fab {
	position: fixed;
	bottom: 18px;
	left: 18px;
	width: 52px;
	height: 52px;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sn-accent, #00152b);
	color: var(--sn-accent-contrast, #fff);
	box-shadow: 0 4px 16px rgba(0, 0, 0, .22);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .15s ease, box-shadow .15s ease;
	z-index: 2147483000;
}
.sn-pos-bottom-right .sn-a11y-fab { left: auto; right: 18px; }
html.sn-ck-modal .sn-a11y-root { visibility: hidden; }
html.sn-ck-open .sn-a11y-fab { bottom: calc(18px + var(--sn-ck-h, 0px)); }
html.sn-ck-open .sn-a11y-panel { bottom: calc(82px + var(--sn-ck-h, 0px)); }
.sn-a11y-fab:hover { transform: scale(1.06); box-shadow: 0 6px 22px rgba(0, 0, 0, .3); }
.sn-a11y-fab:focus-visible { outline: 3px solid #ffbf47; outline-offset: 3px; }
.sn-a11y-fab svg { width: 28px; height: 28px; display: block; fill: currentColor; }

/* ------------------------------------------------------------------
 * 3. Panel
 * ---------------------------------------------------------------- */
.sn-a11y-panel {
	position: fixed;
	bottom: 82px;
	left: 18px;
	width: 330px;
	max-width: calc(100vw - 24px);
	max-height: min(620px, calc(100vh - 112px - var(--sn-ck-h, 0px)));
	background: var(--sn-p-bg);
	border-radius: 14px;
	box-shadow: 0 18px 48px rgba(0, 0, 0, .26), 0 0 0 1px rgba(0, 0, 0, .06);
	display: none;
	flex-direction: column;
	overflow: hidden;
}
@supports (height: 100dvh) {
	.sn-a11y-panel { max-height: min(620px, calc(100dvh - 112px - var(--sn-ck-h, 0px))); }
}
.sn-pos-bottom-right .sn-a11y-panel { left: auto; right: 18px; }
.sn-a11y-root.is-open .sn-a11y-panel { display: flex; }

.sn-a11y-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 10px 12px 16px;
	background: var(--sn-accent, #00152b);
	color: var(--sn-accent-contrast, #fff);
	flex: 0 0 auto;
}
.sn-a11y-head h2 {
	margin: 0;
	padding: 0;
	font: 700 14.5px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: inherit;
	letter-spacing: .01em;
}
.sn-a11y-close {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: inherit;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	flex: 0 0 auto;
}
.sn-a11y-close:hover { background: rgba(255, 255, 255, .16); }
.sn-a11y-close:focus-visible { outline: 2px solid #ffbf47; outline-offset: 1px; }

.sn-a11y-body {
	padding: 14px;
	overflow-y: auto;
	overscroll-behavior: contain;
	flex: 1 1 auto;
}
.sn-a11y-group + .sn-a11y-group { margin-top: 16px; }
.sn-a11y-gt {
	margin: 0 0 8px;
	font: 700 10.5px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--sn-p-muted);
}

/* Steppers */
.sn-a11y-stepper {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 7px 6px 12px;
	border: 1px solid var(--sn-p-line);
	border-radius: 10px;
	margin-bottom: 8px;
	background: var(--sn-p-bg);
}
.sn-a11y-lbl { flex: 1 1 auto; font-size: 12.5px; }
.sn-a11y-val {
	min-width: 40px;
	text-align: center;
	font-variant-numeric: tabular-nums;
	font-size: 12.5px;
	color: var(--sn-p-muted);
}
.sn-a11y-step {
	width: 28px;
	height: 28px;
	flex: 0 0 auto;
	border: 1px solid var(--sn-p-line);
	border-radius: 50%;
	background: var(--sn-p-soft);
	color: var(--sn-p-fg);
	font-size: 15px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.sn-a11y-step:hover { background: var(--sn-accent, #00152b); color: var(--sn-accent-contrast, #fff); border-color: transparent; }
.sn-a11y-step:focus-visible { outline: 2px solid var(--sn-accent, #00152b); outline-offset: 2px; }

/* Toggle grid */
.sn-a11y-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
}
.sn-a11y-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 64px;
	padding: 10px 6px;
	border: 1px solid var(--sn-p-line);
	border-radius: 10px;
	background: var(--sn-p-bg);
	color: var(--sn-p-fg);
	font: 500 11.5px/1.25 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	text-align: center;
	cursor: pointer;
	transition: border-color .12s ease, background .12s ease;
}
.sn-a11y-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sn-a11y-btn:hover { border-color: var(--sn-accent, #00152b); }
.sn-a11y-btn:focus-visible { outline: 2px solid var(--sn-accent, #00152b); outline-offset: 2px; }
.sn-a11y-btn[aria-pressed="true"] {
	background: var(--sn-accent, #00152b);
	border-color: var(--sn-accent, #00152b);
	color: var(--sn-accent-contrast, #fff);
}

/* Footer */
.sn-a11y-foot {
	flex: 0 0 auto;
	padding: 10px 14px 12px;
	border-top: 1px solid var(--sn-p-line);
	background: var(--sn-p-bg);
	text-align: center;
}
.sn-a11y-reset {
	display: block;
	width: 100%;
	padding: 10px 12px;
	border: 0;
	border-radius: 9px;
	background: var(--sn-accent, #00152b);
	color: var(--sn-accent-contrast, #fff);
	font: 600 13px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	cursor: pointer;
}
.sn-a11y-reset:hover { filter: brightness(1.15); }
.sn-a11y-reset:focus-visible { outline: 2px solid #ffbf47; outline-offset: 2px; }
.sn-a11y-links {
	margin-top: 9px;
	display: flex;
	justify-content: center;
	gap: 6px 14px;
	flex-wrap: wrap;
}
.sn-a11y-links a {
	font-size: 11.5px;
	color: var(--sn-p-muted) !important;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.sn-a11y-links a:hover { color: var(--sn-accent, #00152b) !important; }

.sn-a11y-sr {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 560px) {
	.sn-a11y-panel {
		left: 10px;
		right: 10px;
		width: auto;
		bottom: 72px;
		max-height: min(560px, calc(100vh - 96px - var(--sn-ck-h, 0px)));
	}
	.sn-pos-bottom-right .sn-a11y-panel { left: 10px; right: 10px; }
	html.sn-ck-open .sn-a11y-panel { bottom: calc(72px + var(--sn-ck-h, 0px)); }
	.sn-a11y-fab { width: 48px; height: 48px; bottom: 14px; left: 14px; }
	.sn-pos-bottom-right .sn-a11y-fab { right: 14px; left: auto; }
	html.sn-ck-open .sn-a11y-fab { bottom: calc(14px + var(--sn-ck-h, 0px)); }
	.sn-a11y-body { padding: 12px; }
	.sn-a11y-btn { min-height: 58px; padding: 8px 4px; font-size: 11px; }
	.sn-a11y-stepper { padding: 5px 6px 5px 10px; }
	.sn-a11y-foot { padding: 9px 12px 11px; }
}
@supports (height: 100dvh) {
	@media (max-width: 560px) {
		.sn-a11y-panel { max-height: min(560px, calc(100dvh - 96px - var(--sn-ck-h, 0px))); }
	}
}

/* ------------------------------------------------------------------
 * 4. Applied effects
 * ---------------------------------------------------------------- */

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

html.sn-a11y-alignleft body p,
html.sn-a11y-alignleft body li,
html.sn-a11y-alignleft body h1,
html.sn-a11y-alignleft body h2,
html.sn-a11y-alignleft body h3,
html.sn-a11y-alignleft body h4,
html.sn-a11y-alignleft body h5,
html.sn-a11y-alignleft body h6,
html.sn-a11y-alignleft body td,
html.sn-a11y-alignleft body div {
	text-align: left !important;
}

/* Contrast: dark */
html.sn-a11y-dark body,
html.sn-a11y-dark body *:not(.sn-a11y-root):not(.sn-a11y-root *):not(.sn-ck-root):not(.sn-ck-root *):not(svg):not(svg *) {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #4a4a4a !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
html.sn-a11y-dark body a:not(.sn-a11y-root *):not(.sn-ck-root *),
html.sn-a11y-dark body a:not(.sn-a11y-root *):not(.sn-ck-root *) * { color: #ffe680 !important; }
html.sn-a11y-dark body button:not(.sn-a11y-root *):not(.sn-ck-root *),
html.sn-a11y-dark body input:not(.sn-a11y-root *):not(.sn-ck-root *),
html.sn-a11y-dark body select:not(.sn-a11y-root *):not(.sn-ck-root *),
html.sn-a11y-dark body textarea:not(.sn-a11y-root *):not(.sn-ck-root *) { border: 1px solid #fff !important; }
html.sn-a11y-dark body img:not(.sn-a11y-root *):not(.sn-ck-root *) { opacity: .92; }

/* Contrast: light */
html.sn-a11y-light body,
html.sn-a11y-light body *:not(.sn-a11y-root):not(.sn-a11y-root *):not(.sn-ck-root):not(.sn-ck-root *):not(svg):not(svg *) {
	background-color: #fff !important;
	background-image: none !important;
	color: #111 !important;
	border-color: #444 !important;
	text-shadow: none !important;
}
html.sn-a11y-light body a:not(.sn-a11y-root *):not(.sn-ck-root *),
html.sn-a11y-light body a:not(.sn-a11y-root *):not(.sn-ck-root *) * { color: #00429d !important; text-decoration: underline !important; }

/* Filters. The widgets are counter filtered so they stay legible. */
/* The filter goes on the root element. Putting it on body would turn body into
   the containing block for fixed elements and push the widgets off screen. */
html.sn-a11y-invert { background: #fff; filter: invert(1) hue-rotate(180deg); }
html.sn-a11y-invert body img,
html.sn-a11y-invert body video,
html.sn-a11y-invert body iframe,
html.sn-a11y-invert .sn-a11y-fab,
html.sn-a11y-invert .sn-a11y-panel,
html.sn-a11y-invert .sn-a11y-guide,
html.sn-a11y-invert .sn-a11y-mask,
html.sn-a11y-invert .sn-skip-link,
html.sn-a11y-invert .sn-ck-bar,
html.sn-a11y-invert .sn-ck-overlay,
html.sn-a11y-invert .sn-ck-tab { filter: invert(1) hue-rotate(180deg); }

html.sn-a11y-mono { background: #fff; filter: grayscale(1); }
html.sn-a11y-mono .sn-a11y-fab,
html.sn-a11y-mono .sn-a11y-panel,
html.sn-a11y-mono .sn-skip-link,
html.sn-a11y-mono .sn-ck-bar,
html.sn-a11y-mono .sn-ck-overlay,
html.sn-a11y-mono .sn-ck-tab { filter: grayscale(0); }

html.sn-a11y-invert.sn-a11y-mono { filter: invert(1) hue-rotate(180deg) grayscale(1); }
html.sn-a11y-invert.sn-a11y-mono .sn-a11y-fab,
html.sn-a11y-invert.sn-a11y-mono .sn-a11y-panel,
html.sn-a11y-invert.sn-a11y-mono .sn-skip-link,
html.sn-a11y-invert.sn-a11y-mono .sn-ck-bar,
html.sn-a11y-invert.sn-a11y-mono .sn-ck-overlay,
html.sn-a11y-invert.sn-a11y-mono .sn-ck-tab { filter: invert(1) hue-rotate(180deg) grayscale(0); }

/* Navigation aids */
html.sn-a11y-links body a:not(.sn-a11y-root a):not(.sn-ck-root a) {
	background: #ffec3d !important;
	color: #101010 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	box-shadow: 0 0 0 2px #ffec3d;
}
html.sn-a11y-titles body :is(h1, h2, h3, h4, h5, h6):not(.sn-a11y-root *):not(.sn-ck-root *) {
	outline: 2px dashed #d6006e !important;
	outline-offset: 3px;
	background: rgba(214, 0, 110, .06) !important;
}
html.sn-a11y-focus body *:focus,
html.sn-a11y-focus body *:focus-visible {
	outline: 4px solid #ff7a00 !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 2px #000 !important;
}
html.sn-a11y-cursor body,
html.sn-a11y-cursor body * {
	cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 9-6 1.5L15.5 20 12 21 9.5 13 5 16z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important;
}

/* Motion and media */
html.sn-a11y-noanim body *,
html.sn-a11y-noanim body *::before,
html.sn-a11y-noanim body *::after {
	animation-duration: 0s !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: 0s !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}
html.sn-a11y-noimg body img:not(.sn-a11y-root img):not(.sn-ck-root img),
html.sn-a11y-noimg body picture,
html.sn-a11y-noimg body video,
html.sn-a11y-noimg body svg:not(.sn-a11y-root svg):not(.sn-ck-root svg) {
	visibility: hidden !important;
}
html.sn-a11y-noimg body *:not(.sn-a11y-root):not(.sn-a11y-root *):not(.sn-ck-root):not(.sn-ck-root *) {
	background-image: none !important;
}

/* Reading guide and mask */
.sn-a11y-guide {
	position: fixed;
	left: 0;
	width: 100%;
	height: 5px;
	background: #ff2d55;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
	pointer-events: none;
	z-index: 2147482999;
	display: none;
}
html.sn-a11y-guide-on .sn-a11y-guide { display: block; }

.sn-a11y-mask {
	position: fixed;
	inset: 0;
	pointer-events: none;
	z-index: 2147482998;
	display: none;
}
html.sn-a11y-mask-on .sn-a11y-mask { display: block; }
.sn-a11y-mask span {
	position: absolute;
	left: 0;
	width: 100%;
	background: rgba(0, 0, 0, .78);
	display: block;
}

/* ------------------------------------------------------------------
 * 5. Colour lock
 * Themes (XStore, Elementor kits) colour headings and buttons globally.
 * These rules keep the widget readable whatever the theme does.
 * ---------------------------------------------------------------- */
.sn-a11y-root .sn-a11y-head h2,
.sn-a11y-root .sn-a11y-close { color: var(--sn-accent-contrast, #fff) !important; }
.sn-a11y-root .sn-a11y-gt,
.sn-a11y-root .sn-a11y-val { color: var(--sn-p-muted, #5c6672) !important; }
.sn-a11y-root .sn-a11y-lbl,
.sn-a11y-root .sn-a11y-step,
.sn-a11y-root .sn-a11y-btn,
.sn-a11y-root .sn-a11y-btn span { color: var(--sn-p-fg, #14181f) !important; }
.sn-a11y-root .sn-a11y-step:hover,
.sn-a11y-root .sn-a11y-btn[aria-pressed="true"],
.sn-a11y-root .sn-a11y-btn[aria-pressed="true"] span,
.sn-a11y-root .sn-a11y-reset { color: var(--sn-accent-contrast, #fff) !important; }
.sn-a11y-root .sn-a11y-stepper,
.sn-a11y-root .sn-a11y-btn,
.sn-a11y-root .sn-a11y-panel,
.sn-a11y-root .sn-a11y-foot { background-color: var(--sn-p-bg, #fff); }
.sn-a11y-root .sn-a11y-step { background-color: var(--sn-p-soft, #f6f8fa); }
.sn-a11y-root .sn-a11y-head,
.sn-a11y-root .sn-a11y-reset,
.sn-a11y-root .sn-a11y-btn[aria-pressed="true"],
.sn-a11y-root .sn-a11y-fab { background-color: var(--sn-accent, #00152b); }
.sn-a11y-root .sn-a11y-fab { color: var(--sn-accent-contrast, #fff) !important; }
.sn-a11y-root .sn-a11y-links a { color: var(--sn-p-muted, #5c6672) !important; }
.sn-a11y-root .sn-a11y-links a:hover { color: var(--sn-accent, #00152b) !important; }