/*!
 * Redefine Logic Accessibility Suite — page effects
 * (c) Redefine Logic Media. GPL-2.0-or-later.
 *
 * This sheet styles the HOST PAGE only. The widget's own chrome lives in
 * rla-shadow.css and is injected into a shadow root, where theme CSS cannot
 * reach it and these rules cannot reach it either.
 *
 * Two things are deliberately excluded from every effect selector:
 *   #rla-root  — the shadow host
 *   .rla-ui    — light-DOM helpers we own (currently just the skip link)
 */

/* --- Host isolation ---------------------------------------------------
 * all: initial severs every inherited theme property (colour, font, line
 * height, text-transform, letter-spacing…) at the shadow host boundary.
 * Custom properties are exempt from `all`, so --rla-* still pass through.
 */
#rla-root {
	all: initial !important;
}

/* --- Skip link (must sit first in document order for tab order) ------- */
#rla-skip {
	position: fixed;
	top: -80px;
	left: 12px;
	z-index: 2147483647;
	padding: 12px 18px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 700;
	color: #fff !important;
	text-decoration: none;
	background: #17162b !important;
	border-radius: 0 0 10px 10px;
	transition: top .15s ease;
}

#rla-skip:focus {
	top: 0;
	outline: 3px solid #ffd76a;
	outline-offset: -3px;
}

/* ======================================================================
   PAGE EFFECTS
   Each control adds html.rla-fx-<feature>.
   ====================================================================== */

/* Content scaling ------------------------------------------------------ */
html.rla-fx-scale body > *:not(#rla-root):not(.rla-ui) {
	zoom: var(--rla-scale, 1);
}

/* Readable font -------------------------------------------------------- */
html.rla-fx-readable-font body *:not(#rla-root):not(.rla-ui) {
	font-family: Verdana, Tahoma, "Trebuchet MS", "DejaVu Sans", sans-serif !important;
	letter-spacing: .01em;
}

/* Highlight titles ----------------------------------------------------- */
html.rla-fx-highlight-titles :is(h1, h2, h3, h4, h5, h6):not(.rla-ui) {
	outline: 2px dashed #d41b1b !important;
	outline-offset: 3px;
}

/* Highlight links ------------------------------------------------------ */
html.rla-fx-highlight-links a:not(#rla-root):not(.rla-ui) {
	font-weight: 700 !important;
	color: #05286b !important;
	background: #ffe873 !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
	outline: 1px solid #05286b;
}

/* Alignment ------------------------------------------------------------ */
html.rla-fx-align-left body *:not(#rla-root):not(.rla-ui)   { text-align: left !important; }
html.rla-fx-align-center body *:not(#rla-root):not(.rla-ui) { text-align: center !important; }
html.rla-fx-align-right body *:not(#rla-root):not(.rla-ui)  { text-align: right !important; }

/* Contrast modes -------------------------------------------------------- */
html.rla-fx-dark-contrast body,
html.rla-fx-dark-contrast body *:not(#rla-root):not(.rla-ui) {
	color: #f4f4f6 !important;
	background-color: #0c0c14 !important;
	background-image: none !important;
	border-color: #4a4a5c !important;
}
html.rla-fx-dark-contrast :is(a, a *):not(#rla-root):not(.rla-ui) { color: #ffd76a !important; }
html.rla-fx-dark-contrast :is(h1, h2, h3, h4, h5, h6):not(.rla-ui) { color: #7fe0e0 !important; }
html.rla-fx-dark-contrast :is(input, select, textarea):not(.rla-ui) {
	color: #fff !important;
	background-color: #1c1c2a !important;
}

html.rla-fx-light-contrast body,
html.rla-fx-light-contrast body *:not(#rla-root):not(.rla-ui) {
	color: #101014 !important;
	background-color: #fff !important;
	background-image: none !important;
	border-color: #55555f !important;
}
html.rla-fx-light-contrast :is(a, a *):not(#rla-root):not(.rla-ui) { color: #0033a0 !important; }
html.rla-fx-light-contrast :is(h1, h2, h3, h4, h5, h6):not(.rla-ui) { color: #7a0b0b !important; }

html.rla-fx-high-contrast body,
html.rla-fx-high-contrast body *:not(#rla-root):not(.rla-ui) {
	color: #fff !important;
	background-color: #000 !important;
	background-image: none !important;
	border-color: #fff !important;
	text-shadow: none !important;
}
html.rla-fx-high-contrast :is(a, a *):not(#rla-root):not(.rla-ui) { color: #ff0 !important; }
html.rla-fx-high-contrast :is(h1, h2, h3, h4, h5, h6):not(.rla-ui) { color: #0ff !important; }
html.rla-fx-high-contrast :is(button, input, select, textarea):not(.rla-ui) {
	color: #fff !important;
	background: #000 !important;
	border: 2px solid #fff !important;
}

/* Saturation ------------------------------------------------------------ */
html.rla-fx-monochrome body > *:not(#rla-root):not(.rla-ui)      { filter: grayscale(100%) !important; }
html.rla-fx-high-saturation body > *:not(#rla-root):not(.rla-ui) { filter: saturate(220%) !important; }
html.rla-fx-low-saturation body > *:not(#rla-root):not(.rla-ui)  { filter: saturate(45%) !important; }

/* Custom colours --------------------------------------------------------- */
html.rla-fx-color-text body *:not(#rla-root):not(.rla-ui) {
	color: var(--rla-c-text) !important;
}
html.rla-fx-color-title :is(h1, h2, h3, h4, h5, h6):not(.rla-ui),
html.rla-fx-color-title :is(h1, h2, h3, h4, h5, h6) *:not(.rla-ui) {
	color: var(--rla-c-title) !important;
}
html.rla-fx-color-bg body,
html.rla-fx-color-bg body *:not(#rla-root):not(.rla-ui) {
	background-color: var(--rla-c-bg) !important;
	background-image: none !important;
}

/* Hide images ------------------------------------------------------------- */
html.rla-fx-hide-images :is(img, picture, svg, video, canvas, figure):not(#rla-root):not(.rla-ui) {
	display: none !important;
}
html.rla-fx-hide-images body *:not(#rla-root):not(.rla-ui) {
	background-image: none !important;
}

/* Read mode ---------------------------------------------------------------- */
html.rla-fx-read-mode :is(nav, aside, footer, iframe, video, .sidebar, .widget-area, [role="banner"], [role="complementary"], [role="contentinfo"]):not(.rla-ui) {
	display: none !important;
}
html.rla-fx-read-mode :is(main, article, .entry-content, .content, #content, #main):not(.rla-ui) {
	max-width: 46em !important;
	margin: 0 auto !important;
	font-family: Georgia, "Times New Roman", serif !important;
	line-height: 1.75 !important;
	background: #fffdf8 !important;
}
html.rla-fx-read-mode body { background: #fffdf8 !important; }

/* Stop animations ------------------------------------------------------------ */
html.rla-fx-stop-animations *:not(#rla-root):not(.rla-ui),
html.rla-fx-stop-animations *:not(#rla-root):not(.rla-ui)::before,
html.rla-fx-stop-animations *:not(#rla-root):not(.rla-ui)::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* Highlight hover / focus ------------------------------------------------------ */
html.rla-fx-highlight-hover body *:not(#rla-root):not(.rla-ui):hover {
	outline: 3px solid #d41b1b !important;
	outline-offset: 1px;
}
html.rla-fx-highlight-focus :is(a, button, input, select, textarea, summary, [tabindex]):not(#rla-root):not(.rla-ui):focus,
html.rla-fx-kbd :is(a, button, input, select, textarea, summary, [tabindex]):not(#rla-root):not(.rla-ui):focus {
	outline: 4px solid #0b5fff !important;
	outline-offset: 2px;
	box-shadow: 0 0 0 8px rgba(11, 95, 255, .28) !important;
}

/* Big cursors -------------------------------------------------------------------- */
html.rla-fx-cursor-black body,
html.rla-fx-cursor-black body *:not(#rla-root):not(.rla-ui) {
	cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 24 24'%3E%3Cpath d='M6 2l13 10-6 1.2 3.2 6.2-2.6 1.3-3.2-6.2L6 18.6z' fill='%23000' stroke='%23fff' stroke-width='1.2'/%3E%3C/svg%3E") 4 2, auto !important;
}
html.rla-fx-cursor-white body,
html.rla-fx-cursor-white body *:not(#rla-root):not(.rla-ui) {
	cursor: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='58' viewBox='0 0 24 24'%3E%3Cpath d='M6 2l13 10-6 1.2 3.2 6.2-2.6 1.3-3.2-6.2L6 18.6z' fill='%23fff' stroke='%23000' stroke-width='1.2'/%3E%3C/svg%3E") 4 2, auto !important;
}