/*! Accessilo – page adjustments (applied to the website, not to the widget UI) */

@font-face {
	font-family: "Accessilo Atkinson";
	src: url("../fonts/atkinson-hyperlegible-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Accessilo Atkinson";
	src: url("../fonts/atkinson-hyperlegible-ext-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Accessilo Atkinson";
	src: url("../fonts/atkinson-hyperlegible-700.woff2") format("woff2");
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Accessilo Atkinson";
	src: url("../fonts/atkinson-hyperlegible-ext-700.woff2") format("woff2");
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Accessilo OpenDyslexic";
	src: url("../fonts/opendyslexic-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Accessilo OpenDyslexic";
	src: url("../fonts/opendyslexic-700.woff2") format("woff2");
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
}

/* ---------- Skip link & helpers ---------- */
.acsl-skip-link {
	position: fixed !important;
	top: 12px !important;
	left: 12px !important;
	z-index: 2147483647 !important;
	padding: 12px 20px !important;
	background: #111 !important;
	color: #fff !important;
	font: 600 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	border-radius: 10px !important;
	text-decoration: none !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .3) !important;
	transform: translateY(-160%) !important;
	transition: transform .2s ease !important;
}
.acsl-skip-link:focus,
.acsl-skip-link:focus-visible {
	transform: translateY(0) !important;
	outline: 3px solid #ffd400 !important;
	outline-offset: 2px !important;
}
.acsl-sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.acsl-target-flash {
	outline: 4px solid var(--acsl-primary, #1d4ed8) !important;
	outline-offset: 4px !important;
	border-radius: 4px;
	scroll-margin-top: 96px;
}

/* ---------- Fonts ---------- */
html.acsl-readable-font body :not(#accessilo-root):not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not([class*="icon"]):not([class*="Icon"]):not(.dashicons):not([class*="dashicons-"]):not(.material-icons):not([class*="material-symbols"]):not(code):not(pre):not(kbd):not(samp) {
	font-family: "Accessilo Atkinson", Verdana, Tahoma, sans-serif !important;
}
html.acsl-dyslexia-font body :not(#accessilo-root):not(i):not(.fa):not([class^="fa-"]):not([class*=" fa-"]):not([class*="icon"]):not([class*="Icon"]):not(.dashicons):not([class*="dashicons-"]):not(.material-icons):not([class*="material-symbols"]):not(code):not(pre):not(kbd):not(samp) {
	font-family: "Accessilo OpenDyslexic", "Comic Sans MS", Verdana, sans-serif !important;
}

/* ---------- Spacing ---------- */
html.acsl-lh body :not(#accessilo-root) {
	line-height: var(--acsl-lh, 1.6) !important;
}
html.acsl-ls body :not(#accessilo-root) {
	letter-spacing: var(--acsl-ls, .06em) !important;
}
html.acsl-ws body :not(#accessilo-root) {
	word-spacing: var(--acsl-ws, .16em) !important;
}

/* ---------- Alignment ---------- */
html.acsl-align-left body :where(:not(#accessilo-root)) { text-align: left !important; }
html.acsl-align-center body :where(:not(#accessilo-root)) { text-align: center !important; }
html.acsl-align-right body :where(:not(#accessilo-root)) { text-align: right !important; }

/* ---------- Highlights ---------- */
html.acsl-hl-links body a[href]:not(.acsl-skip-link),
html.acsl-hl-links body [role="link"] {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 3px !important;
	background-color: #fff35c !important;
	color: #111 !important;
	outline: 2px solid #111 !important;
	outline-offset: 1px !important;
	border-radius: 2px;
}
html.acsl-hl-links body a[href] * { color: #111 !important; }

html.acsl-hl-titles body :is(h1, h2, h3, h4, h5, h6, [role="heading"]) {
	outline: 3px dashed var(--acsl-primary, #1d4ed8) !important;
	outline-offset: 5px !important;
	border-radius: 2px;
}

/* ---------- Hide images ---------- */
html.acsl-hide-images body :is(img, picture, video, figure > svg, [role="img"]:not(svg)):not(#accessilo-root) {
	opacity: 0 !important;
	visibility: hidden !important;
}
html.acsl-hide-images body :where(:not(#accessilo-root)) {
	background-image: none !important;
}

/* ---------- Stop animations ---------- */
html.acsl-stop-anim *,
html.acsl-stop-anim *::before,
html.acsl-stop-anim *::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.acsl-stop-anim { scroll-behavior: auto !important; }

/* ---------- Keyboard navigation ---------- */
html.acsl-kb-nav body *:focus,
html.acsl-kb-nav body *:focus-visible {
	outline: 3px solid var(--acsl-primary, #1d4ed8) !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 7px rgba(255, 255, 255, .9) !important;
	border-radius: 3px;
}

/* ---------- Read aloud ---------- */
html.acsl-tts body :is(p, li, h1, h2, h3, h4, h5, h6, td, th, blockquote, figcaption, dd, dt, label, a, button, summary):hover {
	outline: 2px dashed var(--acsl-primary, #1d4ed8) !important;
	outline-offset: 2px !important;
	cursor: pointer !important;
}
html body .acsl-speaking {
	background-color: rgba(255, 235, 59, .55) !important;
	outline: 3px solid var(--acsl-primary, #1d4ed8) !important;
	outline-offset: 2px !important;
}

/* ---------- Contrast ---------- */
html.acsl-contrast-dark body,
html.acsl-contrast-dark body :where(:not(#accessilo-root, img, video, picture, canvas, svg, svg *, iframe)) {
	background-color: #0a0a0a !important;
	color: #f5f5f5 !important;
	border-color: #8a8a8a !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
html.acsl-contrast-dark body :is(h1, h2, h3, h4, h5, h6) { color: #7dd3fc !important; }
html.acsl-contrast-dark body a[href],
html.acsl-contrast-dark body a[href] * { color: #ffe14d !important; }
html.acsl-contrast-dark body :is(button, input, select, textarea) { border: 2px solid #f5f5f5 !important; }

html.acsl-contrast-light body,
html.acsl-contrast-light body :where(:not(#accessilo-root, img, video, picture, canvas, svg, svg *, iframe)) {
	background-color: #ffffff !important;
	color: #000000 !important;
	border-color: #555 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
html.acsl-contrast-light body :is(h1, h2, h3, h4, h5, h6) { color: #00205b !important; }
html.acsl-contrast-light body a[href],
html.acsl-contrast-light body a[href] * { color: #0030b8 !important; }
html.acsl-contrast-light body :is(button, input, select, textarea) { border: 2px solid #000 !important; }

/* ---------- Custom colours ---------- */
html.acsl-cc-text body :where(:not(#accessilo-root, h1, h2, h3, h4, h5, h6)) { color: var(--acsl-cc-text) !important; }
html.acsl-cc-title body :is(h1, h2, h3, h4, h5, h6),
html.acsl-cc-title body :is(h1, h2, h3, h4, h5, h6) * { color: var(--acsl-cc-title) !important; }
html.acsl-cc-bg body,
html.acsl-cc-bg body :where(:not(#accessilo-root, img, video, picture, canvas, svg, svg *, iframe)) { background-color: var(--acsl-cc-bg) !important; }

/* ---------- Invert: keep media natural ---------- */
html.acsl-invert body :is(img, video, iframe, canvas):not(picture img),
html.acsl-invert body picture,
html.acsl-invert #accessilo-root {
	filter: invert(1) hue-rotate(180deg) !important;
}

/* ---------- Big cursor ---------- */
html.acsl-cursor-black,
html.acsl-cursor-black * {
	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='M4 2v18l4.6-4.5 3 6.6 3.1-1.4-3-6.4H18z' fill='%23000' stroke='%23fff' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}
html.acsl-cursor-black :is(a[href], button, [role="button"], label, select, summary, input[type="checkbox"], input[type="radio"], input[type="submit"]),
html.acsl-cursor-black :is(a[href], button, [role="button"]) * {
	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='M9 3.2a1.5 1.5 0 0 1 3 0V10h.4V8.6a1.5 1.5 0 0 1 3 0V10.2h.4V9.6a1.5 1.5 0 0 1 3 0V11h.2a1.5 1.5 0 0 1 1.5 1.5V16c0 3.3-2.7 6-6 6h-2c-1.9 0-3.6-.9-4.8-2.4l-3.4-4.3a1.6 1.6 0 0 1 2.4-2.1L9 15.3z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 20 4, pointer !important;
}
html.acsl-cursor-white,
html.acsl-cursor-white * {
	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='M4 2v18l4.6-4.5 3 6.6 3.1-1.4-3-6.4H18z' fill='%23fff' stroke='%23000' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important;
}
html.acsl-cursor-white :is(a[href], button, [role="button"], label, select, summary, input[type="checkbox"], input[type="radio"], input[type="submit"]),
html.acsl-cursor-white :is(a[href], button, [role="button"]) * {
	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='M9 3.2a1.5 1.5 0 0 1 3 0V10h.4V8.6a1.5 1.5 0 0 1 3 0V10.2h.4V9.6a1.5 1.5 0 0 1 3 0V11h.2a1.5 1.5 0 0 1 1.5 1.5V16c0 3.3-2.7 6-6 6h-2c-1.9 0-3.6-.9-4.8-2.4l-3.4-4.3a1.6 1.6 0 0 1 2.4-2.1L9 15.3z' fill='%23fff' stroke='%23000' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 20 4, pointer !important;
}

@media print {
	#accessilo-root { display: none !important; }
}

/* Reading mode open: lock page scroll */
html.acsl-reading, html.acsl-reading body { overflow: hidden !important; }

/* Alt text on hover: mark images */
html.acsl-alt-on body :is(img, [role="img"], input[type="image"]):hover {
	outline: 3px solid var(--acsl-primary, #1d4ed8) !important;
	outline-offset: 2px !important;
}