/*
 * Accessibility widget — LEXX brand adaptation.
 *
 * Skip links (hidden until focused), floating toggle button at bottom-right
 * (RTL convention for Hebrew sites), expandable panel with font/contrast/
 * readable/highlight/motion controls plus a link to the accessibility
 * statement page (/הצהרת-נגישות/).
 *
 * Adapted from Alex's toolkit. See docs/adr/adr-0004-accessibility-toolkit.md.
 *
 * Brand tokens (defined in child theme style.css :root, aliased to
 * Elementor Site Settings Global Colors):
 *   var(--lexx-dark)  — #0D0D0F  near-black background
 *   var(--lexx-lime)  — #C8F000  wasabi green accent
 *   #F4F4F4           — off-white text (widget-specific tone, not brand)
 *   font-family Heebo — loaded site-wide
 *
 * Accessibility utility colors (contrast modes, focus indicator yellow,
 * link-blue) intentionally stay hardcoded — they are WCAG-driven, not
 * brand-driven. See the `.a11y-contrast`, `.a11y-light`, `.a11y-readable-font`
 * rule blocks below.
 */

.skip-links {
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 200;
	display: flex;
	gap: 8px;
	transform: translateY(-160%);
	transition: transform 180ms ease;
	font-family: 'Heebo', sans-serif;
}
.skip-links:focus-within {
	transform: translateY(0);
}
.skip-links a {
	padding: 10px 14px;
	background: var(--lexx-lime, #C8F000);
	color: var(--lexx-dark, #0D0D0F);
	border: 2px solid var(--lexx-dark, #0D0D0F);
	font-weight: 700;
	text-decoration: none;
}
.skip-links a:focus-visible {
	outline: 3px solid var(--lexx-dark, #0D0D0F);
	outline-offset: 2px;
}

.a11y-toggle {
	position: fixed;
	right: 26px;
	bottom: 92px;
	/* Below the panel (which is 99999) but above the page navbar so the
	 * toggle stays clickable even on layouts where the navbar extends
	 * to the bottom-right corner. */
	z-index: 99998;
	width: 52px;
	height: 52px;
	border: 1px solid rgba(200, 240, 0, 0.4);
	background: var(--lexx-dark, #0D0D0F);
	color: var(--lexx-lime, #C8F000);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	border-radius: 50%;
	font-family: 'Heebo', sans-serif;
}
.a11y-toggle svg {
	width: 26px;
	height: 26px;
}
/*
 * Hover + focus state overrides.
 *
 * The hello-elementor parent theme's reset.css applies a global
 * `button:focus, button:hover { background-color: #CC3366; color: #fff }`
 * rule that hijacks our widget colors on mouse hover and keyboard focus.
 * These rules keep the widget on-brand in all interactive states.
 */
.a11y-toggle:hover,
.a11y-toggle:focus,
.a11y-toggle:active {
	background: #1a1a1a;
	color: var(--lexx-lime, #C8F000);
	border-color: rgba(200, 240, 0, 0.7);
}

.a11y-panel button:hover,
.a11y-panel button:focus,
.a11y-panel a:hover,
.a11y-panel a:focus {
	background: rgba(255, 255, 255, 0.08);
	color: inherit;
	text-decoration: none;
	border-color: rgba(244, 244, 244, 0.4);
}

.a11y-panel button[aria-pressed="true"]:hover,
.a11y-panel button[aria-pressed="true"]:focus,
.a11y-panel button.is-active:hover,
.a11y-panel button.is-active:focus {
	background: var(--lexx-lime, #C8F000);
	color: var(--lexx-dark, #0D0D0F);
	border-color: var(--lexx-lime, #C8F000);
}

.a11y-close:hover,
.a11y-close:focus {
	background: rgba(255, 255, 255, 0.08);
	color: var(--lexx-lime, #C8F000);
	border-color: rgba(200, 240, 0, 0.5);
}

.a11y-toggle:focus-visible,
.a11y-panel button:focus-visible,
.a11y-panel a:focus-visible {
	outline: 3px solid var(--lexx-lime, #C8F000);
	outline-offset: 3px;
}

.a11y-panel {
	position: fixed;
	right: 26px;
	bottom: 154px;
	/* z-index must beat the Elementor sticky navbar (which sits in the
	 * 9999 range). The widget is a focused-interaction overlay; when
	 * open, it should obscure the navbar, not the other way around. */
	z-index: 99999;
	width: min(360px, calc(100vw - 36px));
	max-height: calc(100vh - 180px);
	overflow: auto;
	padding: 18px;
	background: var(--lexx-dark, #0D0D0F);
	color: #F4F4F4;
	border: 1px solid rgba(200, 240, 0, 0.3);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
	transform: translateY(12px);
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease, transform 180ms ease;
	font-family: 'Heebo', sans-serif;
	border-radius: 4px;
}
.a11y-panel.is-open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}
.a11y-panel header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.a11y-panel h2 {
	margin: 0;
	font-size: 20px;
	font-family: 'Heebo', sans-serif;
	font-weight: 700;
	color: var(--lexx-lime, #C8F000);
}
.a11y-close {
	min-width: 38px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid rgba(244, 244, 244, 0.3);
	background: transparent;
	color: currentColor;
	cursor: pointer;
	font-family: 'Heebo', sans-serif;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	box-sizing: border-box;
}
.a11y-lang {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	margin-bottom: 12px;
}
.a11y-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
}
.a11y-panel button,
.a11y-panel a {
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid rgba(244, 244, 244, 0.25);
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	border-radius: 3px;
}
.a11y-panel button[aria-pressed="true"],
.a11y-panel button.is-active {
	background: var(--lexx-lime, #C8F000);
	color: var(--lexx-dark, #0D0D0F);
	border-color: var(--lexx-lime, #C8F000);
	font-weight: 700;
}
.a11y-links {
	display: grid;
	grid-template-columns: 1fr;
	gap: 8px;
	margin-top: 12px;
}
.a11y-note {
	margin: 14px 0 0;
	color: rgba(244, 244, 244, 0.65);
	font-size: 13px;
	line-height: 1.5;
}

/*
 * Body-level classes activated by the toolbar buttons.
 *
 * These rules apply visible accessibility adjustments site-wide. On Elementor
 * sites, the per-widget styles (background-image, font-family, color) have
 * high specificity, so we use `body *` selectors with `!important` to win.
 *
 * The widget itself (`.a11y-toggle`, `.a11y-panel`, `.skip-links`) is excluded
 * from these overrides via `:not()` chains so its own LEXX-branded styles
 * remain intact even when the user activates contrast/light/readable modes.
 *
 * NOTE: `:not(.foo *)` requires CSS Selectors Level 4 (supported in all
 * modern browsers from 2022 onward).
 */

/*
 * Font-size scaling is handled by JS (see accessibility.js `applyTextScale`)
 * rather than CSS. CSS approach is unreliable on Elementor sites:
 *   - `html { font-size: 112% }` only scales rem-based elements; Elementor
 *     sets explicit px font-sizes per widget, so most text doesn't scale.
 *   - `zoom` on body scales the whole layout (images, buttons, gaps), not
 *     just text — that's page-zoom, not text-size-increase, which is what
 *     the IS-5568 widget label promises.
 *
 * The JS walks text-bearing elements (h1-h6, p, li, span, button, etc.),
 * captures each element's original computed font-size on first activation,
 * and applies `element.style.fontSize = original × scale + 'px'`. Reset
 * removes the inline styles. The widget itself is excluded.
 */

/* Readable font — Arial/Helvetica, override Elementor's per-widget fonts */
html.a11y-readable-font body,
html.a11y-readable-font body *:not(.a11y-toggle):not(.a11y-toggle *):not(.a11y-panel):not(.a11y-panel *):not(.skip-links):not(.skip-links *) {
	font-family: Arial, Helvetica, sans-serif !important;
}

/* Underline links */
html.a11y-underline-links a:not(.a11y-panel a):not(.skip-links a) {
	text-decoration: underline !important;
	text-underline-offset: 0.18em !important;
}

/* Highlight links and/or headings with a visible outline */
html.a11y-highlight-links a:not(.a11y-panel a):not(.skip-links a),
html.a11y-highlight-headings h1,
html.a11y-highlight-headings h2,
html.a11y-highlight-headings h3,
html.a11y-highlight-headings h4,
html.a11y-highlight-headings h5,
html.a11y-highlight-headings h6 {
	outline: 2px solid #ffd24a !important;
	outline-offset: 3px !important;
}

/* High contrast — black bg, white text everywhere except the widget */
html.a11y-contrast body,
html.a11y-contrast body *:not(.a11y-toggle):not(.a11y-toggle *):not(.a11y-panel):not(.a11y-panel *):not(.skip-links):not(.skip-links *) {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #fff !important;
}
html.a11y-contrast a:not(.a11y-panel a):not(.skip-links a) {
	color: #ffff00 !important;
}

/* Light bg — white bg, near-black text everywhere except the widget */
html.a11y-light body,
html.a11y-light body *:not(.a11y-toggle):not(.a11y-toggle *):not(.a11y-panel):not(.a11y-panel *):not(.skip-links):not(.skip-links *) {
	background-color: #fff !important;
	background-image: none !important;
	color: #111 !important;
	border-color: #111 !important;
}
html.a11y-light a:not(.a11y-panel a):not(.skip-links a) {
	color: #0000ee !important;
}

/*
 * Hide images — both raw <img> tags AND CSS background-images (Elementor
 * widgets commonly use background-image on divs rather than <img>, so we
 * must clear that too).
 */
html.a11y-hide-images img:not(.a11y-toggle img):not(.a11y-panel img),
html.a11y-hide-images video,
html.a11y-hide-images svg[role="img"] {
	visibility: hidden !important;
}
html.a11y-hide-images body *:not(.a11y-toggle):not(.a11y-toggle *):not(.a11y-panel):not(.a11y-panel *):not(.skip-links):not(.skip-links *) {
	background-image: none !important;
}

/* Stop motion — kill animations, transitions, and smooth-scroll globally */
html.a11y-stop-motion *,
html.a11y-stop-motion *::before,
html.a11y-stop-motion *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

@media (max-width: 760px) {
	.a11y-toggle {
		right: 18px;
		bottom: 84px;
	}
	.a11y-panel {
		right: 18px;
		bottom: 146px;
	}
}