/* =========================================================================
   Meridia Accessibility — widget UI + accessibility modes
   The widget (.ma11y-*) is rendered OUTSIDE Divi's #page-container, so every
   page-level mode is scoped to #page-container and the widget is never touched.
   Chrome uses dark glyphs on the bright brand orange to pass WCAG contrast.
   ========================================================================= */

/* ---- Widget shell ------------------------------------------------------ */
.ma11y-widget {
	--ma11y-accent: #F6861F;
	--ma11y-icon: #F6861F;
	--ma11y-accent-text: #b5560a; /* deep orange that passes AA on white */
	--ma11y-chrome-ink: #1a1a1a;  /* dark glyphs/text on the bright orange */
	position: fixed;
	z-index: 999999;
	font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
}
.ma11y-pos-bottom-right { right: 22px; bottom: 22px; }
.ma11y-pos-bottom-left  { left: 22px;  bottom: 22px; }
.ma11y-pos-top-right    { right: 22px; top: 22px; }
.ma11y-pos-top-left     { left: 22px;  top: 22px; }

/* Visually-hidden (live region) */
.ma11y-sr-only {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}

/* ---- Trigger button (dark glyph on bright orange) ---------------------- */
.ma11y-trigger {
	display: flex; align-items: center; justify-content: center;
	width: 54px; height: 54px; padding: 0; border: 0; border-radius: 50%;
	background: var(--ma11y-icon);
	color: var(--ma11y-chrome-ink);
	cursor: pointer;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.32);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ma11y-size-small .ma11y-trigger  { width: 46px; height: 46px; }
.ma11y-size-large .ma11y-trigger  { width: 64px; height: 64px; }
.ma11y-trigger:hover { transform: scale(1.06); }
.ma11y-trigger:focus { outline: 3px solid #1a73e8; outline-offset: 3px; }
.ma11y-trigger:focus:not(:focus-visible) { outline: none; }
.ma11y-trigger:focus-visible { outline: 3px solid #1a73e8; outline-offset: 3px; }

/* ---- Panel ------------------------------------------------------------- */
.ma11y-panel {
	position: absolute;
	bottom: calc(100% + 12px);
	width: 340px;
	max-width: calc(100vw - 36px);
	max-height: calc(100vh - 120px);
	overflow-y: auto;
	background: #fff;
	color: #1a1a1a;
	border-radius: 16px;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3);
	-webkit-overflow-scrolling: touch;
}
.ma11y-pos-bottom-right .ma11y-panel, .ma11y-pos-top-right .ma11y-panel { right: 0; }
.ma11y-pos-bottom-left  .ma11y-panel, .ma11y-pos-top-left  .ma11y-panel { left: 0; }
.ma11y-pos-top-right .ma11y-panel, .ma11y-pos-top-left .ma11y-panel { bottom: auto; top: calc(100% + 12px); }
.ma11y-panel[hidden] { display: none; }

.ma11y-header {
	display: flex; align-items: center; justify-content: space-between;
	padding: 16px 18px;
	background: var(--ma11y-accent);
	color: var(--ma11y-chrome-ink);
	border-radius: 16px 16px 0 0;
	position: sticky; top: 0;
}
.ma11y-header h2 { margin: 0; font-size: 17px; font-weight: 600; color: var(--ma11y-chrome-ink); }
.ma11y-close {
	display: flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(0, 0, 0, 0.12); color: var(--ma11y-chrome-ink); cursor: pointer;
}
.ma11y-close:hover { background: rgba(0, 0, 0, 0.22); }
.ma11y-close:focus { outline: 2px solid #1a1a1a; outline-offset: 2px; }
.ma11y-close:focus:not(:focus-visible) { outline: none; }
.ma11y-close:focus-visible { outline: 2px solid #1a1a1a; outline-offset: 2px; }

.ma11y-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px; }
.ma11y-feature {
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: 8px; min-height: 90px; padding: 12px 8px;
	border: 2px solid #d9dadc; border-radius: 12px;
	background: #fff; color: #1a1a1a;
	font-size: 13px; font-weight: 500; text-align: center; cursor: pointer;
	transition: border-color 0.15s ease, background 0.15s ease;
}
.ma11y-feature:hover { border-color: var(--ma11y-accent); }
.ma11y-feature:focus { outline: 3px solid #1a73e8; outline-offset: 2px; }
.ma11y-feature:focus:not(:focus-visible) { outline: none; }
.ma11y-feature:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.ma11y-feature-icon { color: #555; line-height: 0; }
.ma11y-feature-label { line-height: 1.25; }
.ma11y-feature-state { font-size: 11px; font-weight: 700; color: #1a1a1a; min-height: 13px; }
.ma11y-feature[aria-pressed="true"] {
	border-color: var(--ma11y-accent);
	background: #fdeede; /* fallback */
	background: color-mix(in srgb, var(--ma11y-accent) 14%, #fff);
}
.ma11y-feature[aria-pressed="true"] .ma11y-feature-icon { color: var(--ma11y-accent-text); }

.ma11y-footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px 18px; }
.ma11y-reset {
	flex: 1; padding: 11px 14px; border: 0; border-radius: 10px;
	background: #1a1a1a; color: #fff; font-weight: 600; font-size: 13px; cursor: pointer;
}
.ma11y-reset:hover { background: #333; }
.ma11y-reset:focus { outline: 3px solid #1a73e8; outline-offset: 2px; }
.ma11y-reset:focus:not(:focus-visible) { outline: none; }
.ma11y-reset:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }
.ma11y-statement { font-size: 12px; color: var(--ma11y-accent-text); text-decoration: underline; white-space: nowrap; }

@media (max-width: 600px) { .ma11y-panel { width: calc(100vw - 36px); } }
@media (max-width: 781px) { .ma11y-hide-mobile { display: none !important; } }
@media (min-width: 782px) { .ma11y-hide-desktop { display: none !important; } }

/* RTL */
[dir="rtl"] .ma11y-pos-bottom-right { right: auto; left: 22px; }
[dir="rtl"] .ma11y-pos-bottom-left  { left: auto;  right: 22px; }

/* Skip link (injected by JS) */
.ma11y-skip-link {
	position: fixed; top: -100px; left: 12px; z-index: 1000000;
	padding: 12px 18px; background: #000; color: #fff; border-radius: 0 0 8px 8px;
	text-decoration: none; font-weight: 600;
}
.ma11y-skip-link:focus { top: 0; }

/* Reading guide (created by JS) — "spotlight": the band that follows the cursor
   stays clear (page reads normally) while the rest of the screen is dimmed. The
   huge box-shadow paints the dark overlay everywhere except the transparent band. */
.ma11y-reading-guide-bar {
	position: fixed; left: 0; right: 0; height: 64px; z-index: 999998;
	background: transparent; pointer-events: none;
	transform: translateY(-50%);
	box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.72);
	border-top: 2px solid rgba(246, 134, 31, 0.9);
	border-bottom: 2px solid rgba(246, 134, 31, 0.9);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.ma11y-trigger, .ma11y-feature, .ma11y-close, .ma11y-reset { transition: none !important; }
	.ma11y-trigger:hover { transform: none !important; }
}

/* Print: never print the widget or its modes */
@media print {
	.ma11y-widget, .ma11y-skip-link, .ma11y-reading-guide-bar { display: none !important; }
	html[class*="ma11y-"] #page-container { filter: none !important; }
}

/* =========================================================================
   ACCESSIBILITY MODES — scoped to #page-container (Divi wrapper).
   The widget lives outside #page-container, so it is never affected; no
   complex :not() exclusions needed.
   ========================================================================= */

/* Bigger text (block containers only — inline elements inherit, no compounding) */
html.ma11y-fs-1 #page-container :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, label, figcaption, dd, dt, .et_pb_text, .et_pb_blurb_description, .et_pb_toggle_content) { font-size: 1.12em !important; }
html.ma11y-fs-2 #page-container :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, label, figcaption, dd, dt, .et_pb_text, .et_pb_blurb_description, .et_pb_toggle_content) { font-size: 1.24em !important; }
html.ma11y-fs-3 #page-container :is(p, li, h1, h2, h3, h4, h5, h6, blockquote, td, th, label, figcaption, dd, dt, .et_pb_text, .et_pb_blurb_description, .et_pb_toggle_content) { font-size: 1.38em !important; }

/* Readable font */
html.ma11y-readable #page-container,
html.ma11y-readable #page-container :is(p, li, a, span, h1, h2, h3, h4, h5, h6, div, td, th, label, button, input, .et_pb_text) { font-family: Verdana, Tahoma, Arial, sans-serif !important; letter-spacing: 0.01em; }

/* High contrast (dark). Host SVGs get color:#fff (helps currentColor icons). */
html.ma11y-high-contrast #page-container,
html.ma11y-high-contrast #page-container * {
	background-color: #000 !important;
	background-image: none !important;
	color: #fff !important;
	border-color: #555 !important;
}
html.ma11y-high-contrast #page-container :is(a, a *) { color: #ffea00 !important; }
html.ma11y-high-contrast #page-container .et_pb_button { background-color: #fff !important; color: #000 !important; }

/* Invert / Greyscale — filter the content wrapper, not body (no fixed-pos break) */
html.ma11y-invert #page-container { filter: invert(100%) hue-rotate(180deg); }
html.ma11y-grayscale #page-container { filter: grayscale(100%); }

/* Highlight links */
html.ma11y-highlight-links #page-container :is(a, a *) { background: #ffea00 !important; color: #000 !important; box-shadow: 0 0 0 2px #ffea00 !important; }

/* Underline links */
html.ma11y-underline-links #page-container a { text-decoration: underline !important; }

/* Highlight titles */
html.ma11y-highlight-titles #page-container :is(h1, h2, h3, h4, h5, h6) { outline: 2px dashed #1a73e8 !important; outline-offset: 3px; }

/* Text spacing (WCAG 1.4.12-friendly) */
html.ma11y-text-spacing #page-container :is(p, li, a, span, h1, h2, h3, h4, h5, h6, .et_pb_text) {
	line-height: 1.9 !important;
	letter-spacing: 0.08em !important;
	word-spacing: 0.16em !important;
}

/* Pause animations — freeze keyframes + make transitions instant (don't break logic) */
html.ma11y-pause-animations #page-container *,
html.ma11y-pause-animations #page-container *::before,
html.ma11y-pause-animations #page-container *::after {
	animation-play-state: paused !important;
	transition-duration: 0.001ms !important;
	scroll-behavior: auto !important;
}

/* Hide images */
html.ma11y-hide-images #page-container :is(img, picture, video, iframe, .et_pb_image) { visibility: hidden !important; }

/* Big cursor (cursor only — safe to apply everywhere) */
html.ma11y-big-cursor, html.ma11y-big-cursor * {
	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 2l6 17 2.2-6.4L20 10z' fill='%23000' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") 4 2, auto !important;
}