/* =========================================================================
   Sandbach Flashes Accessibility Toolbar
   ========================================================================= */

@font-face { font-family: "OpenDyslexic"; src: url("fonts/OpenDyslexic-Regular.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("fonts/OpenDyslexic-Bold.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("fonts/OpenDyslexic-Italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("fonts/OpenDyslexic-BoldItalic.woff") format("woff"); font-weight: 700; font-style: italic; font-display: swap; }

:root {
	--sfa11y-accent: #1f5f5b;
	--sfa11y-bottom: 90px;
	--sfa11y-mark: #ffe14d;
	--sfa11y-inv: invert(0);
	--sfa11y-sat: saturate(1);
	--sfa11y-con: contrast(1);
}

/* -------------------------------------------------------------------------
   Toolbar shell. The root covers the viewport but lets clicks through, so
   the whole toolbar can be re-inverted as one piece in dark mode.
   ---------------------------------------------------------------------- */

.sfa11y-root {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	pointer-events: none;
	font: 400 16px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
	color: #1d2422;
	letter-spacing: normal;
	word-spacing: normal;
	text-align: left;
}
.sfa11y-root *, .sfa11y-root *::before, .sfa11y-root *::after { box-sizing: border-box; }

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

.sfa11y-toggle {
	pointer-events: auto;
	position: absolute;
	bottom: var(--sfa11y-bottom);
	width: var(--sfa11y-size, 58px); height: var(--sfa11y-size, 58px);
	display: grid; place-items: center;
	padding: 0; margin: 0;
	border: 3px solid #fff;
	border-radius: 50%;
	background: var(--sfa11y-accent);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 3px 12px rgba(0, 0, 0, .3);
}
.sfa11y-toggle svg { fill: currentColor; width: 52%; height: 52%; }
.sfa11y-at-right .sfa11y-toggle { right: 20px; }
.sfa11y-root.sfa11y-docked .sfa11y-toggle { right: var(--sfa11y-side); left: auto; border-width: 2px; }
.sfa11y-at-left  .sfa11y-toggle { left: 20px; }

.sfa11y-toggle:not([data-count="0"])::after {
	content: attr(data-count);
	position: absolute; top: -5px; right: -5px;
	min-width: 22px; height: 22px; padding: 0 5px;
	display: grid; place-items: center;
	border: 2px solid #fff; border-radius: 11px;
	background: var(--sfa11y-mark); color: #000;
	font: 700 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.sfa11y-backdrop { display: none; }

.sfa11y-root :focus-visible {
	outline: 3px solid var(--sfa11y-mark);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px #000;
}

.sfa11y-panel {
	pointer-events: auto;
	position: absolute;
	bottom: calc(var(--sfa11y-bottom) + var(--sfa11y-size, 58px) + 12px);
	width: min(380px, calc(100% - 24px));
	max-height: calc(100% - var(--sfa11y-bottom) - var(--sfa11y-size, 58px) - 32px);
	display: flex; flex-direction: column;
	background: #fff;
	border: 1px solid #c9d3d1;
	border-radius: 14px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .28);
	overflow: hidden;
}
.sfa11y-panel[hidden] { display: none; }
.sfa11y-at-right .sfa11y-panel { right: 20px; }
.sfa11y-at-left  .sfa11y-panel { left: 20px; }

.sfa11y-head {
	position: relative;
	display: flex; align-items: center; gap: 8px;
	padding: 14px 14px 14px 20px;
	background: var(--sfa11y-accent);
	color: #fff;
}
.sfa11y-root .sfa11y-title {
	margin: 0; padding: 0;
	font-weight: 700; font-size: 20px; line-height: 1.2;
	font-family: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
	border: 0; background: none;
}
.sfa11y-root .sfa11y-title { flex: 1; }
.sfa11y-grip { display: none; }

.sfa11y-root .sfa11y-reset {
	display: inline-flex; align-items: center; gap: 6px;
	height: 40px; width: auto; padding: 0 14px;
	border: 2px solid rgba(255, 255, 255, .7); border-radius: 999px;
	background: transparent; color: #fff;
	font-weight: 700; font-size: 15px; line-height: 1; font-family: inherit;
	cursor: pointer;
}
.sfa11y-root .sfa11y-reset:hover:not(:disabled) { background: #fff; color: var(--sfa11y-accent); border-color: #fff; }
.sfa11y-root .sfa11y-reset:disabled { opacity: .4; cursor: default; }

.sfa11y-close {
	display: grid; place-items: center; flex: none;
	width: 40px; height: 40px; padding: 0;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff; cursor: pointer;
}
.sfa11y-close:hover { background: rgba(255, 255, 255, .26); }

.sfa11y-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 16px 16px; overscroll-behavior: contain; }

.sfa11y-group { margin: 0; padding: 12px 0 8px; border: 0; }
.sfa11y-group + .sfa11y-group { border-top: 1px solid #e3e9e8; }
.sfa11y-root .sfa11y-group h3 {
	margin: 0 0 10px; padding: 0;
	font-weight: 700; font-size: 15px; line-height: 1.3;
	font-family: inherit;
	color: #44514e;
	letter-spacing: normal;
	text-transform: none;
	border: 0; background: none;
}

/* Text size row */
.sfa11y-size {
	display: flex; align-items: center; gap: 8px;
	margin-bottom: 10px; padding: 8px 10px;
	border: 1px solid #d5dedc; border-radius: 10px;
	background: #f6f9f8;
}
.sfa11y-size-label { flex: 1; font-weight: 600; font-size: 15px; }
.sfa11y-size-btn {
	min-width: 48px; height: 40px; padding: 0 10px;
	border: 2px solid var(--sfa11y-accent); border-radius: 8px;
	background: #fff; color: var(--sfa11y-accent);
	font-weight: 700; font-size: 16px; line-height: 1; font-family: inherit;
	cursor: pointer;
}
.sfa11y-size-up { font-size: 19px; }
.sfa11y-size-btn:disabled { opacity: .35; cursor: not-allowed; }
.sfa11y-size-value { min-width: 52px; text-align: center; font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; }

/* Option tiles */
.sfa11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.sfa11y-tile {
	position: relative;
	display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
	gap: 8px;
	min-height: 64px;
	padding: 10px 12px;
	border: 1px solid #d5dedc; border-radius: 10px;
	background: #fff; color: #1d2422;
	font-weight: 600; font-size: 14.5px; line-height: 1.25; font-family: inherit;
	text-align: left;
	cursor: pointer;
}
.sfa11y-tile:hover { border-color: var(--sfa11y-accent); }
.sfa11y-tile[aria-pressed="true"] {
	border-color: var(--sfa11y-accent);
	background: var(--sfa11y-accent);
	color: #fff;
}

.sfa11y-check {
	width: 18px; height: 18px;
	border: 2px solid currentColor; border-radius: 50%;
	opacity: .45;
}
.sfa11y-tile[aria-pressed="true"] .sfa11y-check {
	opacity: 1;
	border-color: #fff;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.sfa11y-bars { display: flex; gap: 4px; }
.sfa11y-bars i {
	display: block; width: 18px; height: 5px; border-radius: 3px;
	background: currentColor; opacity: .22;
}
.sfa11y-tile[data-level="1"] .sfa11y-bars i:nth-child(-n+1),
.sfa11y-tile[data-level="2"] .sfa11y-bars i:nth-child(-n+2),
.sfa11y-tile[data-level="3"] .sfa11y-bars i:nth-child(-n+3) { opacity: 1; }


/* Phones: the panel becomes a full-width sheet that slides up from the bottom */
@media (max-width: 600px) {
	.sfa11y-root:not(.sfa11y-docked) .sfa11y-toggle { width: 54px; height: 54px; }
	.sfa11y-at-right:not(.sfa11y-docked) .sfa11y-toggle { right: 14px; }
	.sfa11y-at-left  .sfa11y-toggle { left: 14px; }

	.sfa11y-backdrop:not([hidden]) {
		display: block;
		position: absolute; inset: 0;
		background: rgba(0, 0, 0, .45);
		pointer-events: auto;
	}

	.sfa11y-root .sfa11y-panel {
		left: 0; right: 0; bottom: 0;
		width: auto;
		max-height: min(88%, calc(100% - 24px));
		border: 0;
		border-radius: 20px 20px 0 0;
		box-shadow: 0 -8px 30px rgba(0, 0, 0, .3);
	}
	.sfa11y-head { padding: 22px 12px 14px 18px; }
	.sfa11y-grip {
		display: block;
		position: absolute; top: 8px; left: 50%;
		width: 40px; height: 4px; margin-left: -20px;
		border-radius: 2px;
		background: rgba(255, 255, 255, .55);
	}
	.sfa11y-root .sfa11y-title { font-size: 19px; }
	.sfa11y-root .sfa11y-reset { height: 44px; padding: 0 14px; }
	.sfa11y-close { width: 44px; height: 44px; }

	.sfa11y-body { padding: 4px 14px calc(18px + env(safe-area-inset-bottom, 0px)); }
	.sfa11y-group { padding: 10px 0 6px; }

	.sfa11y-size { padding: 8px 10px; }
	.sfa11y-size-btn { min-width: 56px; height: 48px; font-size: 18px; }
	.sfa11y-size-up { font-size: 21px; }

	.sfa11y-grid { gap: 8px; }
	.sfa11y-tile { min-height: 60px; padding: 10px 12px; font-size: 15px; }
}

/* Stop the page scrolling behind the open sheet on phones */
@media (max-width: 600px) {
	html.sfa11y-open, html.sfa11y-open body { overflow: hidden !important; }
}

@media (prefers-reduced-motion: no-preference) {
	@media (max-width: 600px) {
		.sfa11y-panel:not([hidden]) { animation: sfa11y-up .22s ease-out; }
		.sfa11y-backdrop:not([hidden]) { animation: sfa11y-fade .22s ease-out; }
	}
}
@keyframes sfa11y-up { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sfa11y-fade { from { opacity: 0; } to { opacity: 1; } }

@media print { .sfa11y-root { display: none !important; } }

@media (prefers-reduced-motion: no-preference) {
	.sfa11y-toggle { transition: transform .15s ease; }
	.sfa11y-toggle:hover { transform: scale(1.06); }
}

/* -------------------------------------------------------------------------
   Reading guide
   ---------------------------------------------------------------------- */

.sfa11y-readguide { display: none; position: absolute; inset: 0; pointer-events: none; --y: 40vh; --h: 72px; }
html.sfa11y-guide .sfa11y-readguide { display: block; }
.sfa11y-readguide-top, .sfa11y-readguide-bottom, .sfa11y-readguide-band { position: absolute; left: 0; right: 0; }
.sfa11y-readguide-top    { top: 0; height: max(0px, calc(var(--y) - var(--h) / 2)); background: rgba(0, 0, 0, .38); }
.sfa11y-readguide-bottom { top: calc(var(--y) + var(--h) / 2); bottom: 0; background: rgba(0, 0, 0, .38); }
.sfa11y-readguide-band {
	top: calc(var(--y) - var(--h) / 2); height: var(--h);
	border-top: 3px solid var(--sfa11y-mark);
	border-bottom: 3px solid var(--sfa11y-mark);
	background: rgba(255, 225, 77, .08);
}

/* =========================================================================
   Page effects. Everything below leaves the toolbar itself untouched.
   ========================================================================= */

/* Dyslexia-friendly font (icon fonts and code are left alone) */
html.sfa11y-dyslexic body :not(.sfa11y-root, .sfa11y-root *, i, code, pre, kbd, samp, svg, svg *, .dashicons, [class*="icon"], [class*="fa-"], [class^="fa "], .fa, .fab, .fas, .far) {
	font-family: "OpenDyslexic", Verdana, sans-serif !important;
}

/* Bolder text */
html.sfa11y-bold body :not(.sfa11y-root, .sfa11y-root *) { font-weight: 700 !important; }

/* Letter spacing */
html.sfa11y-ls1 body :not(.sfa11y-root, .sfa11y-root *) { letter-spacing: .06em !important; word-spacing: .1em !important; }
html.sfa11y-ls2 body :not(.sfa11y-root, .sfa11y-root *) { letter-spacing: .12em !important; word-spacing: .2em !important; }
html.sfa11y-ls3 body :not(.sfa11y-root, .sfa11y-root *) { letter-spacing: .18em !important; word-spacing: .3em !important; }

/* Line height */
html.sfa11y-lh1 body :not(.sfa11y-root, .sfa11y-root *) { line-height: 1.75 !important; }
html.sfa11y-lh2 body :not(.sfa11y-root, .sfa11y-root *) { line-height: 2.05 !important; }
html.sfa11y-lh3 body :not(.sfa11y-root, .sfa11y-root *) { line-height: 2.4 !important; }

/* Highlight links */
html.sfa11y-links body a:not(.sfa11y-root *) {
	background-color: var(--sfa11y-mark) !important;
	color: #000 !important;
	outline: 2px solid #000 !important;
	outline-offset: 1px !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
}
html.sfa11y-links body a:not(.sfa11y-root *) :not(img, svg, svg *, video, picture) {
	color: #000 !important;
	background-color: transparent !important;
}

/* Highlight titles: outline plus a marker-pen stroke behind the words */
html.sfa11y-titles body :is(h1, h2, h3, h4, h5, h6, [role="heading"]):not(.sfa11y-root *) {
	outline: 2px solid currentColor !important;
	outline-offset: 5px !important;
	text-decoration: underline !important;
	text-decoration-color: rgba(255, 214, 0, .75) !important;
	text-decoration-thickness: .45em !important;
	text-underline-offset: -.28em !important;
	text-decoration-skip-ink: none !important;
}

/* Align text left */
html.sfa11y-left body :not(.sfa11y-root, .sfa11y-root *) { text-align: left !important; }

/* -------------------------------------------------------------------------
   Colour. Dark mode, contrast and saturation are combined into one filter
   on the page, so any mix of them works together.
   ---------------------------------------------------------------------- */

html.sfa11y-dark     { --sfa11y-inv: invert(1) hue-rotate(180deg); }
html.sfa11y-lowsat   { --sfa11y-sat: saturate(.45); }
html.sfa11y-highsat  { --sfa11y-sat: saturate(1.9); }
html.sfa11y-mono     { --sfa11y-sat: grayscale(1); }
html.sfa11y-contrast { --sfa11y-con: contrast(1.4); }

html:is(.sfa11y-dark, .sfa11y-lowsat, .sfa11y-highsat, .sfa11y-mono, .sfa11y-contrast) {
	filter: var(--sfa11y-inv) var(--sfa11y-sat) var(--sfa11y-con);
}

/* Dark mode: flip photos, video and the toolbar back so they keep their true colours */
html.sfa11y-dark :is(img, video, iframe, canvas, embed, object, [style*="background-image"], .sfa11y-keep),
html.sfa11y-dark .sfa11y-root,
html.sfa11y-dark.sfa11y-links body a:not(.sfa11y-root *) {
	filter: invert(1) hue-rotate(180deg);
}
/* ...but don't flip twice when one sits inside another */
html.sfa11y-dark :is(img, video, iframe, canvas, embed, object, [style*="background-image"], .sfa11y-keep) :is(img, video, iframe, canvas, embed, object, [style*="background-image"], .sfa11y-keep),
html.sfa11y-dark.sfa11y-links body a :is(img, video, iframe, canvas, embed, object, [style*="background-image"], .sfa11y-keep) {
	filter: none;
}

/* Light mode */
html.sfa11y-light, html.sfa11y-light body { background-color: #fff !important; }
html.sfa11y-light body :not(.sfa11y-root, .sfa11y-root *, img, video, iframe, canvas, svg, svg *) {
	background-color: #fff !important;
	color: #1a1a1a !important;
	border-color: #c7c7c7 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
html.sfa11y-light:not(.sfa11y-links) body a:not(.sfa11y-root *) { color: #0b4ea2 !important; }

/* High contrast: the page filter darkens text; this strengthens borders */
html.sfa11y-contrast body :is(input, select, textarea, button):not(.sfa11y-root *) {
	border: 2px solid currentColor !important;
}
html.sfa11y-contrast body :is(table, th, td, hr, fieldset):not(.sfa11y-root *) {
	border-color: currentColor !important;
}

/* -------------------------------------------------------------------------
   Pause animations
   ---------------------------------------------------------------------- */

html.sfa11y-pause *:not(.sfa11y-root, .sfa11y-root *),
html.sfa11y-pause *:not(.sfa11y-root, .sfa11y-root *)::before,
html.sfa11y-pause *:not(.sfa11y-root, .sfa11y-root *)::after {
	animation-duration: .001ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition-duration: .001ms !important;
	transition-delay: 0s !important;
	scroll-behavior: auto !important;
}
html.sfa11y-pause { scroll-behavior: auto !important; }

/* -------------------------------------------------------------------------
   Large cursor
   ---------------------------------------------------------------------- */

html.sfa11y-cursor,
html.sfa11y-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='M5 3v36l9.5-9.2 6.2 14.4 6.6-2.9-6.1-14H34z' fill='%23000' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, auto !important;
}
html.sfa11y-cursor :is(a, button, [role="button"], label, summary, select, input[type="submit"], input[type="button"], input[type="checkbox"], input[type="radio"]),
html.sfa11y-cursor :is(a, button, [role="button"], label, summary) * {
	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='M5 3v36l9.5-9.2 6.2 14.4 6.6-2.9-6.1-14H34z' fill='%231d4ed8' stroke='%23ffd400' stroke-width='3.5' stroke-linejoin='round'/%3E%3C/svg%3E") 5 3, pointer !important;
}
html.sfa11y-pause .sfa11y-panel, html.sfa11y-pause .sfa11y-backdrop { animation: none !important; }

/* -------------------------------------------------------------------------
   Header button (phones and tablets): matches the theme's menu button
   ---------------------------------------------------------------------- */

.sfa11y-headbtn {
	position: relative;
	display: inline-flex; align-items: center; justify-content: center;
	flex: none;
	width: 44px; height: 44px;
	margin: 0 calc(.5rem - var(--sfa11y-head-gap, 2rem)) 0 auto;
	padding: 0;
	background: var(--sfa11y-accent);
	color: #fff;
	border: 1px solid var(--sfa11y-accent);
	border-radius: var(--sc-radius, 8px);
	cursor: pointer;
	align-self: center;
}
.sfa11y-headbtn[hidden] { display: none; }
.sfa11y-headbtn svg { width: 24px; height: 24px; fill: currentColor; }
.sfa11y-headbtn .sfa11y-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sfa11y-headbtn:hover { filter: brightness(1.12); }
.sfa11y-headbtn:focus-visible { outline: 3px solid var(--sfa11y-mark); outline-offset: 2px; box-shadow: 0 0 0 6px #000; }
.sfa11y-headbtn:not([data-count="0"])::after {
	content: attr(data-count);
	position: absolute; top: -6px; right: -6px;
	min-width: 18px; height: 18px; padding: 0 4px;
	display: grid; place-items: center;
	border: 2px solid #fff; border-radius: 9px;
	background: var(--sfa11y-mark); color: #000;
	font: 700 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

/* When the header button is in use, hide the floating one */
.sfa11y-root.sfa11y-in-header .sfa11y-toggle { display: none; }
@media (min-width: 601px) {
	.sfa11y-root.sfa11y-in-header .sfa11y-panel { bottom: 20px; max-height: calc(100% - 40px); }
}