/* ====================================================================
   MTP Math Roadmap , Accessibility Stylesheet (v05.14.26.034)

   Scoped overrides triggered by body classes:
     - body.mtp-a11y-hc   high-contrast mode
     - body.mtp-a11y-dys  OpenDyslexic font

   Each block is wrapped in body.mtp-a11y-* so the rules only apply
   when the user opted in. Anonymous-user fallbacks at the bottom
   use prefers-* media queries.
   ==================================================================== */

/* ====================================================================
   OpenDyslexic font face (self-hosted)
   See assets/fonts/OPENDYSLEXIC-README.md for sourcing notes.
   ==================================================================== */
@font-face {
	font-family: 'OpenDyslexic';
	src: url('../fonts/opendyslexic-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'OpenDyslexic';
	src: url('../fonts/opendyslexic-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ====================================================================
   High Contrast Mode (body.mtp-a11y-hc)

   WCAG 2.1 SC 1.4.3 (Contrast Minimum) requires 4.5:1 for normal
   text. SC 1.4.6 (Contrast Enhanced) raises that to 7:1. This mode
   targets 7:1 across all UI surfaces by:

   - Black text on white background for content
   - White text on near-black background for chrome
   - Yellow accent (#ffeb3b) on black for primary action , extreme
     contrast ratio (~19:1)
   - Increased border thickness from 1px to 2px so element
     boundaries remain perceptible at lower visual acuity
   - Removed background images / gradients that reduce text contrast
   - Underlined links (cannot rely on color alone , SC 1.4.1)
   ==================================================================== */

body.mtp-a11y-hc {
	background: #ffffff !important;
	color: #000000 !important;
}

/* Chrome surfaces (header, sidebar, footer) , dark on light. */
body.mtp-a11y-hc .mr-header,
body.mtp-a11y-hc .mr-editor-header {
	background: #000000 !important;
	color: #ffffff !important;
	border-bottom: 2px solid #ffeb3b !important;
}

body.mtp-a11y-hc .mr-header-title,
body.mtp-a11y-hc .mr-editor-brand {
	color: #ffeb3b !important;
}

/* Tab bar. */
body.mtp-a11y-hc .mr-tab {
	background: #ffffff !important;
	color: #000000 !important;
	border: 2px solid #000000 !important;
}
body.mtp-a11y-hc .mr-tab.active,
body.mtp-a11y-hc .mr-tab[aria-selected="true"] {
	background: #000000 !important;
	color: #ffeb3b !important;
}

/* Cards: high-contrast borders. */
body.mtp-a11y-hc .mr-card {
	background: #ffffff !important;
	border: 2px solid #000000 !important;
	box-shadow: none !important;
}
body.mtp-a11y-hc .mr-card-title,
body.mtp-a11y-hc .mr-section-title {
	color: #000000 !important;
}

/* Buttons. */
body.mtp-a11y-hc .mr-btn,
body.mtp-a11y-hc .mr-btn-sm {
	background: #000000 !important;
	color: #ffeb3b !important;
	border: 2px solid #ffeb3b !important;
}
body.mtp-a11y-hc .mr-btn:hover,
body.mtp-a11y-hc .mr-btn-sm:hover,
body.mtp-a11y-hc .mr-btn:focus,
body.mtp-a11y-hc .mr-btn-sm:focus {
	background: #ffeb3b !important;
	color: #000000 !important;
	outline: 3px solid #000000 !important;
	outline-offset: 2px;
}
body.mtp-a11y-hc .mr-btn-ghost,
body.mtp-a11y-hc .mr-btn-ghost.mr-btn-sm {
	background: #ffffff !important;
	color: #000000 !important;
	border: 2px solid #000000 !important;
}

/* Form inputs. */
body.mtp-a11y-hc .mr-input,
body.mtp-a11y-hc .mr-select,
body.mtp-a11y-hc .mr-textarea {
	background: #ffffff !important;
	color: #000000 !important;
	border: 2px solid #000000 !important;
}
body.mtp-a11y-hc .mr-input:focus,
body.mtp-a11y-hc .mr-select:focus,
body.mtp-a11y-hc .mr-textarea:focus {
	outline: 3px solid #ffeb3b !important;
	outline-offset: 0;
	border-color: #000000 !important;
}

/* Tables. */
body.mtp-a11y-hc .mr-table {
	border: 2px solid #000000 !important;
}
body.mtp-a11y-hc .mr-table th,
body.mtp-a11y-hc .mr-table td {
	border: 1px solid #000000 !important;
	color: #000000 !important;
	background: #ffffff !important;
}
body.mtp-a11y-hc .mr-table th {
	background: #000000 !important;
	color: #ffeb3b !important;
}

/* Links: underline (SC 1.4.1 don't-rely-on-color). */
body.mtp-a11y-hc a {
	color: #0000ee !important;
	text-decoration: underline !important;
	text-underline-offset: 2px;
}
body.mtp-a11y-hc a:visited {
	color: #551a8b !important;
}
body.mtp-a11y-hc a:hover,
body.mtp-a11y-hc a:focus {
	outline: 2px solid #ffeb3b !important;
	outline-offset: 2px;
}

/* Modal overlay. */
body.mtp-a11y-hc .mr-modal-overlay {
	background: rgba(0, 0, 0, 0.85) !important;
}
body.mtp-a11y-hc .mr-modal {
	background: #ffffff !important;
	border: 3px solid #000000 !important;
	color: #000000 !important;
}

/* Editor canvas. */
body.mtp-a11y-hc .mr-editor-canvas-wrap {
	background: #ffffff !important;
	border: 2px solid #000000 !important;
}
body.mtp-a11y-hc .mr-editor-toolbar {
	background: #000000 !important;
	border-bottom: 2px solid #ffeb3b !important;
}
body.mtp-a11y-hc .mr-editor-tool-v2 {
	color: #ffffff !important;
}
body.mtp-a11y-hc .mr-editor-tool-v2.active,
body.mtp-a11y-hc .mr-editor-tool-v2:hover {
	background: #ffeb3b !important;
	color: #000000 !important;
}

/* Status / notification colors. The mode preserves green/red
   semantics but boosts contrast and adds icons/text to prevent
   color-only meaning (SC 1.4.1). */
body.mtp-a11y-hc .mr-success,
body.mtp-a11y-hc .notice-success {
	background: #ffffff !important;
	color: #006400 !important;
	border: 2px solid #006400 !important;
}
body.mtp-a11y-hc .mr-error,
body.mtp-a11y-hc .notice-error {
	background: #ffffff !important;
	color: #8b0000 !important;
	border: 2px solid #8b0000 !important;
}
body.mtp-a11y-hc .mr-warn,
body.mtp-a11y-hc .notice-warning {
	background: #ffffff !important;
	color: #b35900 !important;
	border: 2px solid #b35900 !important;
}

/* Embed widget chrome (if a partner site loads the embed with a
   high-contrast preference, the iframe applies the same class to
   its root). */
body.mtp-a11y-hc .mtp-shell,
body.mtp-a11y-hc .mtpcw-wrap {
	background: #ffffff !important;
	color: #000000 !important;
}

/* ====================================================================
   OpenDyslexic Font (body.mtp-a11y-dys)
   Applies to all UI text. Keeps math notation in monospace fallback
   so equations remain visually identifiable.
   ==================================================================== */

body.mtp-a11y-dys,
body.mtp-a11y-dys * {
	font-family: 'OpenDyslexic', 'Comic Sans MS', 'Lexend', sans-serif !important;
}

/* Math notation stays monospace , OpenDyslexic does not handle
   mathematical symbols well, and equations rely on character
   alignment that proportional fonts disrupt. */
body.mtp-a11y-dys code,
body.mtp-a11y-dys pre,
body.mtp-a11y-dys .mr-math,
body.mtp-a11y-dys .mr-mcl-id,
body.mtp-a11y-dys .mtp-math-equation {
	font-family: 'Cascadia Code', 'JetBrains Mono', 'Consolas', monospace !important;
}

/* Slightly increased line-height for readability (SC 1.4.12). */
body.mtp-a11y-dys p,
body.mtp-a11y-dys li,
body.mtp-a11y-dys .mr-card-body {
	line-height: 1.7 !important;
}

/* ====================================================================
   The shortcode panel itself ([mtp_a11y_settings] output)
   Used outside the body-class scope (any page can host the shortcode).
   ==================================================================== */

.mtp-a11y-panel {
	max-width: 520px;
	margin: 24px auto;
	padding: 22px 26px;
	background: #ffffff;
	border: 1px solid #d4cfbf;
	border-left: 4px solid #c9a84c;
	border-radius: 8px;
	font-family: 'Nunito', sans-serif;
	color: #3d2e1a;
	line-height: 1.5;
}
.mtp-a11y-panel.mtp-a11y-anon {
	background: #faf6ee;
	border-left-color: #8a7a64;
}
.mtp-a11y-heading {
	margin: 0 0 6px;
	font-family: 'Caveat', cursive;
	font-size: 30px;
	color: #3d2e1a;
	line-height: 1.05;
}
.mtp-a11y-desc {
	margin: 0 0 18px;
	font-size: 13px;
	color: #5a4a36;
}
.mtp-a11y-row {
	padding: 12px 0;
	border-top: 1px solid #ebe5d6;
}
.mtp-a11y-row:first-of-type {
	border-top: 0;
}

/* Toggle switch , large touch target, visible state, accessible. */
.mtp-a11y-toggle {
	display: flex;
	align-items: center;
	gap: 14px;
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: #3d2e1a;
}
.mtp-a11y-toggle input[type="checkbox"] {
	/* Visually hidden but focusable */
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.mtp-a11y-toggle-track {
	position: relative;
	display: inline-block;
	width: 48px;
	height: 26px;
	background: #ccc4ad;
	border-radius: 999px;
	transition: background 0.15s;
	flex-shrink: 0;
}
.mtp-a11y-toggle-track::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	background: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	transition: transform 0.15s;
}
.mtp-a11y-toggle input:checked + .mtp-a11y-toggle-track {
	background: #c9a84c;
}
.mtp-a11y-toggle input:checked + .mtp-a11y-toggle-track::after {
	transform: translateX(22px);
}
.mtp-a11y-toggle input:focus + .mtp-a11y-toggle-track {
	outline: 3px solid #0077C8;
	outline-offset: 2px;
}
.mtp-a11y-toggle-label {
	flex-grow: 1;
}
.mtp-a11y-hint {
	margin: 6px 0 0 62px;
	font-size: 12px;
	color: #6c5f48;
	line-height: 1.45;
}
.mtp-a11y-status {
	margin-top: 14px;
	min-height: 18px;
	font-size: 12.5px;
	color: #006400;
}
.mtp-a11y-status-err {
	color: #8b0000;
}

/* ====================================================================
   Anonymous-user fallbacks (no user meta available)
   Honor OS-level preferences via prefers-* media queries.
   ==================================================================== */

@media (prefers-contrast: more) {
	/* User has OS-level high-contrast on. Apply a subset of the
	   manual mode , avoid !important so logged-in user-meta
	   override (above) still wins if they've toggled the
	   per-user setting. */
	body:not(.mtp-a11y-hc) .mr-btn,
	body:not(.mtp-a11y-hc) .mr-btn-sm {
		border-width: 2px;
	}
	body:not(.mtp-a11y-hc) a {
		text-decoration: underline;
	}
}

@media (prefers-reduced-motion: reduce) {
	/* Disable animations + transitions for users who indicate
	   motion sensitivity. SC 2.3.3. */
	*, *::before, *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}