/*
 * Edrivon Accessibility — panel and modes.
 *
 * Positioned with logical properties only (inset-inline-*, padding-inline, text-align:
 * start), so this one stylesheet serves left-to-right and right-to-left sites without a
 * mirrored copy.
 *
 * The panel's own rules are scoped under #eda-widget. Themes style buttons and links
 * globally — Hello Elementor paints every button with a coloured border, Elementor kits
 * round and pad them — and an ID is the one weight that reliably keeps the panel looking
 * like itself without resorting to !important.
 */

/* ---------- Widget ---------- */

#eda-widget {
	--eda-offset: 20px;
	--eda-toggle: 54px;
	position: fixed;
	inset-inline-end: var(--eda-offset);
	/* --eda-lift is measured by panel.js: the height of any fixed bar or floating button
	   the toggle would otherwise sit on top of. */
	inset-block-end: calc(var(--eda-offset) + var(--eda-lift, 0px) + env(safe-area-inset-bottom, 0px));
	z-index: var(--eda-z, 9990);
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	text-align: start;
}

#eda-widget.eda--start {
	inset-inline-end: auto;
	inset-inline-start: var(--eda-offset);
}

#eda-widget *,
#eda-widget *::before,
#eda-widget *::after {
	box-sizing: border-box;
}

/* Undo whatever the theme did to buttons and paragraphs. */
#eda-widget button {
	margin: 0;
	font: inherit;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	text-shadow: none;
	box-shadow: none;
	background-image: none;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

#eda-widget p {
	margin: 0;
	padding: 0;
}

#eda-widget .eda__icon {
	display: block;
	flex: none;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentColor;
}

/* ---------- Toggle ---------- */

#eda-widget .eda__toggle {
	display: grid;
	place-items: center;
	width: var(--eda-toggle);
	height: var(--eda-toggle);
	min-width: 0;
	padding: 0;
	/* The white ring keeps the button distinct on any page background, dark or light. */
	border: 2px solid #fff;
	border-radius: 50%;
	background: var(--eda-accent, #1d4ed8);
	color: var(--eda-on-accent, #fff);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
	transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

#eda-widget .eda__toggle:hover {
	transform: scale(1.06);
}

#eda-widget .eda__toggle .eda__icon {
	width: 28px;
	height: 28px;
}

/* ---------- Panel ---------- */

#eda-widget .eda__panel {
	position: absolute;
	inset-block-end: calc(100% + 12px);
	inset-inline-end: 0;
	display: grid;
	gap: 8px;
	width: min(17.5rem, calc(100vw - 2 * var(--eda-offset)));
	/* Never taller than the space above the toggle, so the last control stays reachable. */
	max-height: calc(100vh - var(--eda-lift, 0px) - var(--eda-offset) - var(--eda-toggle) - 28px);
	overflow-y: auto;
	margin: 0;
	padding: 1rem;
	border: 1px solid rgba(0, 0, 0, 0.14);
	border-radius: 20px;
	background: #fff;
	color: #161616;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
}

/* The panel is display:grid, which would override the UA's [hidden] rule. */
#eda-widget .eda__panel[hidden] {
	display: none;
}

#eda-widget.eda--start .eda__panel {
	inset-inline-end: auto;
	inset-inline-start: 0;
}

#eda-widget .eda__title {
	margin-block-end: 0.25rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
	color: inherit;
}

#eda-widget .eda__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 6px;
	font-size: 0.875rem;
}

#eda-widget .eda__btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-width: 44px;
	min-height: 44px;
	padding-block: 6px;
	padding-inline: 12px;
	/* #767676 on white is 4.5:1 — the control's edge stays visible (WCAG 1.4.11). */
	border: 1px solid #767676;
	border-radius: 12px;
	background: #f4f5f7;
	color: #161616;
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.3;
	text-align: start;
}

#eda-widget .eda__btn:hover {
	background: #e7e9ee;
}

#eda-widget .eda__btn .eda__icon {
	color: var(--eda-link, #1d4ed8);
}

#eda-widget .eda__btn--size {
	justify-content: center;
	width: auto;
	min-width: 48px;
	font-weight: 700;
}

#eda-widget .eda__btn[aria-pressed="true"] {
	border-color: var(--eda-accent, #1d4ed8);
	background: var(--eda-accent, #1d4ed8);
	color: var(--eda-on-accent, #fff);
}

#eda-widget .eda__btn[aria-pressed="true"] .eda__icon {
	color: inherit;
}

#eda-widget .eda__statement {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding-inline: 4px;
	color: var(--eda-link, #1d4ed8);
	font-size: 0.8125rem;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Focus: a transparent outline plus a two-colour ring. The ring (white, then near-black)
   reads on any background; the outline is what Windows forced-colors mode keeps when it
   strips box-shadows. Themes often remove button outlines, hence the ID weight. */
#eda-widget .eda__toggle:focus-visible,
#eda-widget .eda__btn:focus-visible,
#eda-widget .eda__statement:focus-visible {
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px #fff, 0 0 0 6px #111;
}

#eda-widget .eda__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (max-width: 782px) {
	#eda-widget {
		--eda-offset: 12px;
		--eda-toggle: 46px;
	}

	#eda-widget .eda__toggle .eda__icon {
		width: 24px;
		height: 24px;
	}
}

@media (forced-colors: active) {
	/* Forced colours drop background fills, which is all that marks a pressed control. */
	#eda-widget .eda__btn[aria-pressed="true"] {
		outline: 3px solid Highlight;
		outline-offset: -3px;
	}
}

@media print {
	#eda-widget {
		display: none;
	}
}

/* ---------- Modes (classes on <html>) ---------- */

/* Text size. html.eda-font-N is (0,1,1) and outranks a theme's html { font-size } (0,0,1),
   so no !important is needed. It only helps where the theme sizes text in rem/em. */
html.eda-font-1 {
	font-size: 112.5%;
}

html.eda-font-2 {
	font-size: 125%;
}

html.eda-font-3 {
	font-size: 137.5%;
}

/* Highlight links: underline every link that is not a button; outline buttons instead so
   they stay distinct. !important as in the reference — themes remove link underlines
   with selectors of any weight, and this has to beat all of them. Builders do it with
   !important too (Elementor menus: `.elementor-NNN .elementor-element-X .elementor-item
   { text-decoration: none !important }`), so an important rule alone is not enough: the
   :not(#eda-none) adds ID weight, which no class-based rule can outrank. */
html.eda-links a:not(#eda-none):not(:where(#eda-widget *)):not(:where(.button, .btn, .wp-block-button__link, .wp-element-button, .elementor-button, [role="button"], a[class*="button"], a[class*="btn"])) {
	text-decoration: underline !important;
	text-decoration-thickness: max(1px, 0.08em) !important;
	text-underline-offset: 0.2em !important;
}

html.eda-links :where(button, .button, .btn, .wp-block-button__link, .wp-element-button, .elementor-button, [role="button"], a[class*="button"], a[class*="btn"], input[type="submit"], input[type="button"]):not(#eda-none):not(:where(#eda-widget *)) {
	outline: 2px dashed currentColor !important;
	outline-offset: 3px !important;
}

/* Stop animations.
   Animations are collapsed to an instant, single, zero-delay run rather than removed with
   `animation: none`. The reference could remove them because its reveals were all GSAP;
   on an arbitrary theme many reveals are CSS keyframes that start from opacity: 0 and rely
   on fill-mode to end visible — `animation: none` strands that content invisible. A
   collapsed animation jumps straight to its end state: no motion, nothing stuck. */
html.eda-no-motion,
html.eda-no-motion *,
html.eda-no-motion *::before,
html.eda-no-motion *::after {
	animation-duration: 0.001ms !important;
	animation-delay: 0s !important;
	animation-iteration-count: 1 !important;
	transition: none !important;
	scroll-behavior: auto !important;
}

/* Scroll-reveal libraries that hide content until it enters the viewport. Their hiding is
   inline or strongly scoped, hence !important. */
html.eda-no-motion .elementor-invisible {
	visibility: visible !important;
}

html.eda-no-motion [data-aos] {
	opacity: 1 !important;
	transform: none !important;
}

html.eda-no-motion .wow {
	visibility: visible !important;
}

/* High contrast — generic mode.
   Works with no configuration by darkening body copy, firming up faint borders and
   un-fading muted text. It deliberately leaves alone text the author coloured explicitly
   and anything on a cover, overlay or dark block, where near-black would be unreadable.
   Generic mode improves most themes but cannot perfect all of them; the "CSS variables to
   override" setting is how a themed site gets the full effect.
   The text rule waits for .eda-cx, which panel.js adds in the same task in which it
   measures every text element, so a dark section is never painted black-on-dark first;
   elements the script has marked are excluded and get the marked colour instead. */
html.eda-contrast.eda-cx :is(p, li, dd, dt, td, th, caption, figcaption, blockquote, cite, label, legend, small, address, time, .entry-meta, .entry-summary, .wp-block-post-excerpt__excerpt, .wp-block-post-date, .wp-block-post-author, .wp-block-post-terms):not(:where(#eda-widget *, [data-eda-fix], .has-text-color, .has-text-color *, .has-background *, .wp-block-cover *, [class*="overlay"] *, [class*="dark"] *, [class*="inverse"] *, [data-theme="dark"] *)) {
	color: #0b0b0b;
}

html.eda-contrast :is([class*="muted"], [class*="faded"], [class*="subtle"], .has-small-font-size, .wp-block-post-date, .wp-block-post-terms, figcaption):not(:where(#eda-widget *)) {
	opacity: 1;
}

html.eda-contrast :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="hidden"]), select, textarea, fieldset, hr, table, th, td, .wp-block-separator):not(:where(#eda-widget *)) {
	border-color: #595959;
}

html.eda-contrast :is(input, textarea)::placeholder {
	color: #595959;
	opacity: 1;
}

html.eda-contrast :focus-visible {
	outline-width: 3px;
}

/* Once body text and links are both near-black, colour no longer tells them apart. */
html.eda-contrast :is(p, li, dd, td, th, blockquote, figcaption, label) a:not(:where(#eda-widget *, .button, .btn, .wp-block-button__link, .elementor-button, [class*="button"], [class*="btn"])) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* Measured fixes (panel.js): text that still falls short of AAA against its actual
   background once the rules above apply. !important because the rules being corrected
   come from anywhere — a page builder's per-element selector four classes deep, or an
   inline style attribute — and a fix that loses to them fixes nothing. It lands only
   on elements that were measured failing. */
html.eda-contrast [data-eda-fix="dark"] {
	color: #0b0b0b !important;
}

html.eda-contrast [data-eda-fix="light"] {
	color: #fff !important;
}