/*
 * The accessibility menu (includes/a11y-widget.php, assets/js/rac-a11y.js): the round button, the panel, and
 * every display mode it turns on (classes rac-a11y-* on <html>). The menu itself never changes with the modes,
 * so it stays readable whatever is chosen.
 */

/* ---------------------------------------------------------------- the button */
.rac-a11y-ui { font-family: "Assistant", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; }
.rac-a11y-sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}
.rac-a11y-ui .rac-a11y-fab {
	position: fixed;
	inset-inline-start: 18px;
	bottom: calc(18px + env(safe-area-inset-bottom, 0px));
	z-index: 99980;
	display: grid;
	place-items: center;
	width: 54px;
	height: 54px;
	margin: 0;
	padding: 0;
	border: 2px solid #2fe0e6;
	border-radius: 50%;
	background: #f2f6ff;
	box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .7), 0 0 0 4px rgba(7, 11, 26, .55);
	color: #0b1640;
	cursor: pointer;
	transition: transform 180ms cubic-bezier(.22, 1, .36, 1), bottom 300ms cubic-bezier(.22, 1, .36, 1);
}
.rac-a11y-ui .rac-a11y-fab svg { width: 30px; height: 30px; stroke-width: 2; }
.rac-a11y-ui .rac-a11y-fab:hover { transform: scale(1.06); background: #fff; color: #0b1640; }
.rac-a11y-ui .rac-a11y-fab:active { transform: scale(.96); }
.rac-a11y-ui .rac-a11y-fab:focus-visible { outline: 3px solid #ffd27a; outline-offset: 4px; }
.rac-a11y-ui .rac-a11y-fab[aria-expanded="true"] { background: #2fe0e6; color: #041018; border-color: #f2f6ff; }
/* Above the course page's buy bar on a phone. */
html.rac-bar-on .rac-a11y-ui .rac-a11y-fab { bottom: calc(96px + env(safe-area-inset-bottom, 0px)); }

/* ---------------------------------------------------------------- the panel */
.rac-a11y-ui .rac-a11y-panel {
	position: fixed;
	inset-inline-start: 18px;
	bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	z-index: 99985;
	display: flex;
	flex-direction: column;
	width: min(400px, calc(100vw - 24px));
	max-height: min(680px, calc(100vh - 110px));
	max-height: min(680px, calc(100dvh - 110px));
	border: 1px solid rgba(194, 205, 232, .2);
	border-radius: 20px;
	background: #0c1226;
	box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .9);
	color: #f2f6ff;
	font-size: 15px;
	line-height: 1.45;
	text-align: start;
	opacity: 0;
	transform: translateY(10px) scale(.98);
	transform-origin: bottom right;
	transition: opacity 180ms ease, transform 220ms cubic-bezier(.22, 1, .36, 1);
}
.rac-a11y-ui .rac-a11y-panel[hidden] { display: none; }
.rac-a11y-ui .rac-a11y-panel.is-open { opacity: 1; transform: none; }
html.rac-bar-on .rac-a11y-ui .rac-a11y-panel { bottom: calc(162px + env(safe-area-inset-bottom, 0px)); }
/* Lesson pages: the bottom right corner holds Tutor's button that hides the lesson list, and on a phone the
   "הקודם" button. There the menu button moves to the other side, and rac-learn.js sets --rac-fab-lift so it
   stays clear of the "הקודם / הבא" row (above it when the row sits at the bottom of the screen). */
body.rac-learn .rac-a11y-ui .rac-a11y-fab { inset-inline-start: auto; inset-inline-end: 18px; bottom: calc(var(--rac-fab-lift, 96px) + env(safe-area-inset-bottom, 0px)); }
body.rac-learn .rac-a11y-ui .rac-a11y-panel { inset-inline-start: auto; inset-inline-end: 18px; bottom: calc(var(--rac-fab-lift, 96px) + 66px + env(safe-area-inset-bottom, 0px)); transform-origin: bottom left; }

.rac-a11y-ui .rac-a11y-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px 10px;
}
.rac-a11y-ui .rac-a11y-title {
	margin: 0;
	color: #f2f6ff;
	font-family: inherit;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.2;
	outline: none;
}
.rac-a11y-ui .rac-a11y-x {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(194, 205, 232, .2);
	border-radius: 12px;
	background: transparent;
	color: #f2f6ff;
	cursor: pointer;
}
.rac-a11y-ui .rac-a11y-x:hover { background: rgba(194, 205, 232, .1); color: #fff; }
.rac-a11y-ui .rac-a11y-body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0 18px 14px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.rac-a11y-ui .rac-a11y-intro { margin: 0 0 4px; color: #c2cde8; font-size: 14px; }
.rac-a11y-ui .rac-a11y-h {
	margin: 16px 0 8px;
	color: #9fb0d6;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 800;
	letter-spacing: .02em;
	line-height: 1.3;
}

/* Text size: − value + */
.rac-a11y-ui .rac-a11y-size {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px;
	border: 1px solid rgba(194, 205, 232, .16);
	border-radius: 14px;
	background: rgba(19, 27, 58, .7);
}
.rac-a11y-ui .rac-a11y-size-l { flex: 1 1 auto; font-size: 15px; font-weight: 700; }
.rac-a11y-ui .rac-a11y-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1px;
	width: 48px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(194, 205, 232, .28);
	border-radius: 12px;
	background: #131b3a;
	color: #f2f6ff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 800;
	cursor: pointer;
}
.rac-a11y-ui .rac-a11y-step-b { font-size: 21px; }
.rac-a11y-ui .rac-a11y-step-s { color: #2fe0e6; font-size: 17px; }
.rac-a11y-ui .rac-a11y-step:hover:not([disabled]) { border-color: #2fe0e6; background: #1a2447; color: #fff; }
.rac-a11y-ui .rac-a11y-step[disabled] { opacity: .4; cursor: not-allowed; }
.rac-a11y-ui .rac-a11y-size-v { min-width: 58px; color: #f2f6ff; font-size: 17px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }

/* The switches: two in a row, each says what it does; a pressed one is lit and carries a check. */
.rac-a11y-ui .rac-a11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.rac-a11y-ui .rac-a11y-opt {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	min-height: 72px;
	margin: 0;
	padding: 11px 12px;
	border: 1px solid rgba(194, 205, 232, .16);
	border-radius: 14px;
	background: rgba(19, 27, 58, .7);
	color: #f2f6ff;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.25;
	text-align: start;
	cursor: pointer;
	transition: border-color 150ms ease, background-color 150ms ease;
}
.rac-a11y-ui .rac-a11y-opt:hover { border-color: rgba(47, 224, 230, .5); background: #1a2447; color: #fff; }
.rac-a11y-ui .rac-a11y-ico { display: grid; color: #7df0f4; }
.rac-a11y-ui .rac-a11y-on {
	position: absolute;
	top: 9px;
	inset-inline-end: 9px;
	display: none;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #2fe0e6;
	color: #041018;
}
.rac-a11y-ui .rac-a11y-opt[aria-pressed="true"] {
	border: 2px solid #2fe0e6;
	padding: 10px 11px;
	background: rgba(47, 224, 230, .16);
}
.rac-a11y-ui .rac-a11y-opt[aria-pressed="true"] .rac-a11y-on { display: grid; }
.rac-a11y-ui .rac-a11y-opt[aria-pressed="true"] .rac-a11y-ico { color: #2fe0e6; }

.rac-a11y-ui .rac-a11y-foot {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 18px 16px;
	border-top: 1px solid rgba(194, 205, 232, .14);
}
.rac-a11y-ui .rac-a11y-reset,
.rac-a11y-ui .rac-a11y-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 8px 12px;
	border-radius: 12px;
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}
.rac-a11y-ui .rac-a11y-reset { flex: 1 1 100%; justify-content: center; border: 1px solid rgba(255, 210, 122, .5); background: transparent; color: #ffe3a8; }
.rac-a11y-ui .rac-a11y-reset:hover { background: rgba(255, 210, 122, .1); color: #fff2d6; }
.rac-a11y-ui .rac-a11y-link { flex: 1 1 0; justify-content: center; border: 1px solid rgba(194, 205, 232, .2); color: #c9f9fb; }
.rac-a11y-ui .rac-a11y-link:hover { background: rgba(47, 224, 230, .1); color: #fff; }
.rac-a11y-ui .rac-a11y-reset svg,
.rac-a11y-ui .rac-a11y-link svg { width: 20px; height: 20px; flex: 0 0 auto; }
.rac-a11y-ui :is(.rac-a11y-x, .rac-a11y-step, .rac-a11y-opt, .rac-a11y-reset, .rac-a11y-link):focus-visible {
	outline: 3px solid #ffd27a;
	outline-offset: 2px;
}

@media (max-width: 560px) {
	.rac-a11y-ui .rac-a11y-fab { inset-inline-start: 14px; bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: 50px; height: 50px; }
	.rac-a11y-ui .rac-a11y-panel {
		inset-inline: 8px;
		bottom: calc(8px + env(safe-area-inset-bottom, 0px));
		width: auto;
		max-height: calc(100vh - 16px);
		max-height: calc(100dvh - 16px);
		transform-origin: bottom center;
	}
	html.rac-bar-on .rac-a11y-ui .rac-a11y-panel { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
	body.admin-bar .rac-a11y-ui .rac-a11y-panel { max-height: calc(100dvh - 64px); }
	body.rac-learn .rac-a11y-ui .rac-a11y-fab { inset-inline-end: 14px; bottom: calc(var(--rac-fab-lift, 80px) + env(safe-area-inset-bottom, 0px)); }
	body.rac-learn .rac-a11y-ui .rac-a11y-panel { inset-inline: 8px; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); transform-origin: bottom center; }
}
@media (prefers-reduced-motion: reduce) {
	.rac-a11y-ui .rac-a11y-fab, .rac-a11y-ui .rac-a11y-panel, .rac-a11y-ui .rac-a11y-opt { transition: none; }
}
@media print {
	.rac-a11y-ui { display: none !important; }
}

/* ================================================================ the modes */

/* Dark high contrast: black ground, white text, yellow links and buttons. */
html.rac-a11y-dark body,
html.rac-a11y-dark body *:not(.rac-a11y-ui, .rac-a11y-ui *, #wpadminbar, #wpadminbar *, svg, svg *, img, picture, video, canvas, iframe) {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
html.rac-a11y-dark body *:not(.rac-a11y-ui, .rac-a11y-ui *, #wpadminbar, #wpadminbar *)::before,
html.rac-a11y-dark body *:not(.rac-a11y-ui, .rac-a11y-ui *, #wpadminbar, #wpadminbar *)::after {
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
html.rac-a11y-dark body :is(a, a *):not(.rac-a11y-ui *, #wpadminbar *) { color: #ffe066 !important; }
html.rac-a11y-dark body :is(button, input[type="submit"], input[type="button"], .elementor-button, .button, .rac-btn, .rac-bar-btn):not(.rac-a11y-ui *, #wpadminbar *) {
	border: 2px solid #ffe066 !important;
	color: #ffe066 !important;
}
html.rac-a11y-dark body :is(button, .elementor-button, .button, .rac-btn, .rac-bar-btn):not(.rac-a11y-ui *, #wpadminbar *) * { color: #ffe066 !important; }
html.rac-a11y-dark body :is(input, textarea, select):not([type="submit"], [type="button"], [type="checkbox"], [type="radio"]) { border: 2px solid #fff !important; }
html.rac-a11y-dark body ::placeholder { color: #d0d0d0 !important; opacity: 1 !important; }
html.rac-a11y-dark .ra-set-track::after { background-color: #fff !important; }
html.rac-a11y-dark .ra-world { display: none !important; }

/* Light contrast: white ground, black text, dark blue links. The white logo turns dark to stay seen. */
html.rac-a11y-light body,
html.rac-a11y-light body *:not(.rac-a11y-ui, .rac-a11y-ui *, #wpadminbar, #wpadminbar *, svg, svg *, img, picture, video, canvas, iframe) {
	background-color: #fff !important;
	background-image: none !important;
	color: #000 !important;
	border-color: #000 !important;
	text-shadow: none !important;
	box-shadow: none !important;
}
html.rac-a11y-light body *:not(.rac-a11y-ui, .rac-a11y-ui *, #wpadminbar, #wpadminbar *)::before,
html.rac-a11y-light body *:not(.rac-a11y-ui, .rac-a11y-ui *, #wpadminbar, #wpadminbar *)::after {
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
html.rac-a11y-light body :is(a, a *):not(.rac-a11y-ui *, #wpadminbar *) { color: #0a3aa8 !important; }
html.rac-a11y-light body :is(button, input[type="submit"], input[type="button"], .elementor-button, .button, .rac-btn, .rac-bar-btn):not(.rac-a11y-ui *, #wpadminbar *) {
	border: 2px solid #0a3aa8 !important;
	color: #0a3aa8 !important;
}
html.rac-a11y-light body :is(button, .elementor-button, .button, .rac-btn, .rac-bar-btn):not(.rac-a11y-ui *, #wpadminbar *) * { color: #0a3aa8 !important; }
html.rac-a11y-light body :is(input, textarea, select):not([type="submit"], [type="button"], [type="checkbox"], [type="radio"]) { border: 2px solid #000 !important; }
html.rac-a11y-light body ::placeholder { color: #444 !important; opacity: 1 !important; }
html.rac-a11y-light body :is(img.wp-image-77, .ra-hdr-logo img, .ra-ftr-logo img, .rac-pp-logo img, img[src*="logo" i]):not(.rac-a11y-ui *, #wpadminbar *) { filter: invert(1) hue-rotate(180deg) !important; }
html.rac-a11y-light .ra-world { display: none !important; }
html.rac-a11y-light .ra-set-track::after { background-color: #000 !important; }

/* Larger text: buttons and long words wrap instead of pushing the page sideways. */
html.rac-a11y-size body :is(.elementor-button, .elementor-button-text, .rac-btn, .rac-bar-btn, .button, button, .rah-btn a):not(.rac-a11y-ui *, #wpadminbar *, .elementor-location-header *, .rac-bar *) {
	max-width: 100%;
	height: auto !important;
	white-space: normal !important;
}
html.rac-a11y-size body .elementor-button-content-wrapper:not(.elementor-location-header *) { flex-wrap: wrap; justify-content: center; }
html.rac-a11y-size body :is(h1, h2, h3, h4, h5, h6, p, li, a, span, label, td, th, dd, dt):not(.rac-a11y-ui *, #wpadminbar *) { overflow-wrap: anywhere; }

/* Grayscale: the whole page (on <html>, which keeps fixed elements in place). */
html.rac-a11y-gray { filter: grayscale(1); }

/* Highlighted links. */
html.rac-a11y-links body a:not(.rac-a11y-ui *, #wpadminbar *) {
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: 4px !important;
	outline: 2px dashed #ffd27a !important;
	outline-offset: 2px !important;
}
html.rac-a11y-light.rac-a11y-links body a:not(.rac-a11y-ui *, #wpadminbar *) { outline-color: #a34700 !important; }

/* Highlighted headings. */
html.rac-a11y-heads body :is(h1, h2, h3, h4, h5, h6, [role="heading"]):not(.rac-a11y-ui *, #wpadminbar *) {
	outline: 2px solid #7df0f4 !important;
	outline-offset: 4px !important;
}
html.rac-a11y-light.rac-a11y-heads body :is(h1, h2, h3, h4, h5, h6, [role="heading"]):not(.rac-a11y-ui *, #wpadminbar *) { outline-color: #0a3aa8 !important; }

/* A readable font: Arial, on every text but icons and the menu. */
html.rac-a11y-font body :not(.rac-a11y-ui, .rac-a11y-ui *, #wpadminbar, #wpadminbar *, i, [class*="icon"], [class^="fa"], [class*=" fa-"], .dashicons, code, pre, kbd) {
	font-family: Arial, "Helvetica Neue", Helvetica, sans-serif !important;
}

/* Wider spacing (the WCAG 1.4.12 values). */
html.rac-a11y-spacing body :not(.rac-a11y-ui, .rac-a11y-ui *, #wpadminbar, #wpadminbar *) {
	letter-spacing: .08em !important;
	word-spacing: .16em !important;
	line-height: 1.6 !important;
}
html.rac-a11y-spacing body p:not(.rac-a11y-ui *, #wpadminbar *) { margin-bottom: 1.4em !important; }

/* A strong ring on whatever has the keyboard. */
html.rac-a11y-focus body :focus:not(.rac-a11y-ui *, #wpadminbar *) {
	outline: 4px solid #ffd27a !important;
	outline-offset: 3px !important;
	box-shadow: 0 0 0 7px #000 !important;
}

/* A large cursor: black with a white edge, cyan on what can be clicked. */
html.rac-a11y-cursor,
html.rac-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.5 3.2 18.6 11l-6 1.5 3.4 6.6-2.9 1.4-3.4-6.6-4.2 4.1z' fill='%23000' stroke='%23fff' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 11 6, auto !important;
}
html.rac-a11y-cursor body :is(a, button, [role="button"], label, select, summary, input[type="checkbox"], input[type="radio"], input[type="submit"]),
html.rac-a11y-cursor body :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 24 24'%3E%3Cpath d='M5.5 3.2 18.6 11l-6 1.5 3.4 6.6-2.9 1.4-3.4-6.6-4.2 4.1z' fill='%2300c4cc' stroke='%23000' stroke-width='1.3' stroke-linejoin='round'/%3E%3C/svg%3E") 11 6, pointer !important;
}

/* The reading mask: the page dims above and below a band that follows the pointer. */
.rac-a11y-ui .rac-a11y-mask {
	position: fixed;
	inset-inline: 0;
	z-index: 99970;
	display: none;
	background: rgba(0, 0, 0, .66);
	pointer-events: none;
}
.rac-a11y-ui .rac-a11y-mask--top { top: 0; border-bottom: 3px solid #ffd27a; }
.rac-a11y-ui .rac-a11y-mask--bottom { bottom: 0; border-top: 3px solid #ffd27a; }
html.rac-a11y-guide .rac-a11y-ui .rac-a11y-mask { display: block; }

/* Stop the motion: CSS animations end at once and transitions don't run. */
html.rac-a11y-still *,
html.rac-a11y-still *::before,
html.rac-a11y-still *::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;
}

/* The lesson page's top bar (Tutor) keeps the lesson name on one line; with larger text it wraps instead. */
html.rac-a11y-size .tutor-learning-header-content { min-width: 0; }
html.rac-a11y-size .tutor-learning-header-content :is(span, a, h1, h2, h3) { white-space: normal !important; overflow-wrap: anywhere; }