/* True Self Practice — accessibility menu (own build). Two parts:
   1) the widget itself (#tsp-a11y), styled in the TSP palette and never affected by the toggles;
   2) the page-level effects, switched by classes on <html>. */

/* ---------- 1. Widget ---------- */
#tsp-a11y { --a-bg: #F4F0E7; --a-surface: #FBFAF5; --a-ink: #26302A; --a-soft: #3B463F; --a-muted: #6B6459;
  --a-line: #DDD5C5; --a-dark: #2E3A33; --a-on-dark: #F4F0E7; --a-accent: #6F6457; --a-gold: #C7AC83;
  font-family: var(--font-body, "Source Sans 3", system-ui, sans-serif); font-size: 16px; line-height: 1.4;
  color: var(--a-ink); letter-spacing: normal; word-spacing: normal; text-align: start; }
#tsp-a11y[lang="ar"] { font-family: var(--font-ar-body, "Tajawal", system-ui, sans-serif); }
/* language-tagged text inside the widget (e.g. «العربية» / "English" in the language switch) uses that language's brand font */
#tsp-a11y [lang="ar"] { font-family: var(--font-ar-body, "Tajawal", system-ui, sans-serif); }
#tsp-a11y [lang="en"] { font-family: "Source Sans 3", system-ui, sans-serif; } /* not var(--font-body): AR pages remap it to Tajawal */
#tsp-a11y *, #tsp-a11y *::before, #tsp-a11y *::after { box-sizing: border-box; }
#tsp-a11y button, #tsp-a11y a { font: inherit; color: inherit; cursor: pointer; }
#tsp-a11y svg { width: 22px; height: 22px; display: block; flex: none; }
#tsp-a11y[dir="rtl"] .a11y-flip { transform: scaleX(-1); }
#tsp-a11y :focus-visible { outline: 3px solid var(--a-gold); outline-offset: 2px; }

.a11y-fab { position: fixed; z-index: 3000; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  width: 52px; height: 52px; display: grid; place-items: center; border-radius: 12px;
  background: var(--a-dark); color: var(--a-on-dark) !important; border: 1px solid rgba(199,172,131,0.45);
  box-shadow: 0 8px 24px rgba(38,48,42,0.22); transition: transform .2s ease, background .2s ease; }
.a11y-fab svg { width: 28px; height: 28px; }
.a11y-fab:hover { transform: translateY(-2px); background: #26302A; }
#tsp-a11y[data-side="left"] .a11y-fab { left: 16px; right: auto; }
#tsp-a11y[data-side="right"] .a11y-fab { right: 16px; left: auto; }
#tsp-a11y.is-hidden .a11y-fab { display: none; }
#tsp-a11y.is-big .a11y-fab { width: 64px; height: 64px; }
#tsp-a11y.is-big .a11y-fab svg { width: 34px; height: 34px; }

.a11y-panel { position: fixed; z-index: 3001; top: 0; bottom: 0; width: min(440px, 100vw);
  display: flex; flex-direction: column; background: var(--a-bg); box-shadow: 0 0 0 1px var(--a-line), 0 20px 60px rgba(38,48,42,0.25); }
.a11y-panel[hidden] { display: none; }
#tsp-a11y[data-side="left"] .a11y-panel { left: 0; }
#tsp-a11y[data-side="right"] .a11y-panel { right: 0; }
#tsp-a11y.is-big .a11y-panel { width: min(540px, 100vw); font-size: 18px; }

.a11y-head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 18px 14px; background: var(--a-dark); color: var(--a-on-dark); }
.a11y-title { margin: 0; font-family: var(--font-display, "Jost", system-ui, sans-serif); font-weight: 500; font-size: 1.15em; color: var(--a-on-dark); letter-spacing: 0.01em; }
#tsp-a11y[lang="ar"] .a11y-title { font-family: var(--font-ar-display, "Tajawal", sans-serif); font-weight: 700; }
.a11y-x { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 8px; background: transparent;
  border: 1px solid rgba(244,240,231,0.3); color: var(--a-on-dark) !important; }
.a11y-x:hover { background: rgba(244,240,231,0.1); }

.a11y-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
.a11y-sub { margin: 18px 0 8px; font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--a-accent); }
#tsp-a11y[lang="ar"] .a11y-sub { text-transform: none; letter-spacing: 0; font-size: 0.88em; }

.a11y-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.a11y-lang__ic { color: var(--a-accent); margin-inline-end: 4px; }
.a11y-seg { min-height: 40px; padding: 8px 14px; border: 1px solid var(--a-line); background: var(--a-surface);
  border-radius: 6px; text-decoration: none; font-weight: 600; font-size: 0.92em; }
.a11y-seg.is-on { background: var(--a-dark); border-color: var(--a-dark); color: var(--a-on-dark) !important; }
.a11y-seg:hover:not(.is-on) { border-color: var(--a-accent); }

.a11y-switch { margin-top: 12px; width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 6px; font-weight: 600; text-align: start; }
.a11y-switch__track { width: 40px; height: 22px; border-radius: 4px; background: var(--a-line); position: relative; flex: none; transition: background .2s; }
.a11y-switch__track span { position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 3px; background: var(--a-surface); transition: inset-inline-start .2s; }
.a11y-switch[aria-pressed="true"] .a11y-switch__track { background: var(--a-dark); }
.a11y-switch[aria-pressed="true"] .a11y-switch__track span { inset-inline-start: 21px; }

.a11y-profiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.a11y-prof { min-height: 46px; padding: 10px 12px; border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 6px;
  font-weight: 600; font-size: 0.92em; text-align: start; }
.a11y-prof:hover:not(.is-on) { border-color: var(--a-accent); }
.a11y-prof.is-on { background: var(--a-dark); border-color: var(--a-dark); color: var(--a-on-dark) !important; }

.a11y-grid { margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.a11y-grid[hidden], .a11y-profiles[hidden], .a11y-sub[hidden] { display: none; }
.a11y-tile { min-height: 104px; padding: 12px 8px 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px;
  border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 6px; text-align: center; font-size: 0.86em; font-weight: 600; }
.a11y-tile__ic { color: var(--a-dark); }
.a11y-tile__ic svg { width: 26px; height: 26px; }
.a11y-tile__label { line-height: 1.25; }
.a11y-tile__state { font-size: 0.82em; font-weight: 500; color: var(--a-muted); min-height: 1em; }
.a11y-tile:hover:not(.is-on) { border-color: var(--a-accent); }
.a11y-tile.is-on { background: var(--a-dark); border-color: var(--a-dark); color: var(--a-on-dark) !important; }
.a11y-tile.is-on .a11y-tile__ic, .a11y-tile.is-on .a11y-tile__state { color: var(--a-gold); }
#tsp-a11y.is-big .a11y-tile { min-height: 124px; }

.a11y-reset { margin-top: 18px; width: 100%; min-height: 50px; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1px solid var(--a-dark); background: transparent; border-radius: 6px; font-weight: 700; }
.a11y-reset:hover { background: var(--a-dark); color: var(--a-on-dark) !important; }

.a11y-move { margin-top: 16px; }
.a11y-move__label { font-weight: 600; font-size: 0.92em; margin-inline-end: 6px; }
.a11y-note { margin: 14px 0 0; font-size: 0.84em; color: var(--a-muted); }
.a11y-note[hidden] { display: none; }

.a11y-struct[hidden] { display: none; }
.a11y-struct ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.a11y-struct li button { width: 100%; text-align: start; padding: 10px 12px; border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 6px; }
.a11y-struct li button:hover { border-color: var(--a-accent); }
.a11y-struct .a11y-lv3 button { padding-inline-start: 28px; font-size: 0.94em; }
.a11y-back { margin-top: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid var(--a-line); background: var(--a-surface); border-radius: 6px; font-weight: 600; }

.a11y-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.a11y-tip { position: fixed; z-index: 3002; max-width: 300px; padding: 7px 10px; border-radius: 6px; background: var(--a-dark); color: var(--a-on-dark);
  font-size: 14px; line-height: 1.35; pointer-events: none; box-shadow: 0 6px 18px rgba(38,48,42,0.25); }
.a11y-tip[hidden] { display: none; }

@media (max-width: 640px) {
  /* clears the home hero's pause control, which sits just above this corner on phones */
  .a11y-fab { width: 46px; height: 46px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
  .a11y-fab svg { width: 25px; height: 25px; }
}
@media (max-width: 480px) {
  .a11y-panel { width: 100vw; }
  .a11y-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .a11y-tile { min-height: 96px; font-size: 0.8em; padding: 10px 4px 8px; }
  #tsp-a11y[data-side="left"] .a11y-fab { left: 12px; }
  #tsp-a11y[data-side="right"] .a11y-fab { right: 12px; }
}
@media (prefers-reduced-motion: reduce) { .a11y-fab, .a11y-switch__track, .a11y-switch__track span { transition: none; } }

/* ---------- 2. Page effects (never inside the widget) ---------- */
html.a11y-text-1 { font-size: 112.5%; }
html.a11y-text-2 { font-size: 125%; }

html.a11y-contrast { --bg: #000; --bg-alt: #000; --surface: #000; --text: #fff; --text-soft: #fff; --text-muted: #f2f2f2; --border: #fff; }
html.a11y-contrast body, html.a11y-contrast body *:not(#tsp-a11y):not(#tsp-a11y *):not(img):not(video):not(svg):not(svg *) {
  background-color: #000 !important; color: #fff !important; border-color: #fff !important; text-shadow: none !important; }
html.a11y-contrast body *:not(#tsp-a11y *) { background-image: none !important; }
html.a11y-contrast a:not(#tsp-a11y *), html.a11y-contrast a:not(#tsp-a11y *) * { color: #FFE14D !important; }
html.a11y-contrast body::after { display: none !important; }
/* the logos are dark-ink PNGs: render them solid white on the black contrast ground */
html.a11y-contrast .brand img, html.a11y-contrast .footer__brand img { filter: brightness(0) invert(1) !important; opacity: 1 !important; }

html.a11y-filtered body > *:not(#tsp-a11y) { filter: var(--a11y-filter); }

html.a11y-links a:not(#tsp-a11y *) { text-decoration: underline !important; text-decoration-thickness: 2px !important; text-underline-offset: 3px !important;
  outline: 2px solid currentColor !important; outline-offset: 2px !important; }

html.a11y-spacing body *:not(#tsp-a11y):not(#tsp-a11y *) { word-spacing: 0.16em !important; }
html.a11y-spacing:not([lang^="ar"]) body *:not(#tsp-a11y):not(#tsp-a11y *) { letter-spacing: 0.12em !important; }
html.a11y-spacing body p:not(#tsp-a11y *) { margin-bottom: 2em !important; }

html.a11y-lh body *:not(#tsp-a11y):not(#tsp-a11y *) { line-height: 2 !important; }

html.a11y-align-start main :is(p, li, h1, h2, h3, h4, blockquote, dd) { text-align: start !important; }
html.a11y-align-center main :is(p, li, h1, h2, h3, h4, blockquote, dd) { text-align: center !important; }

html.a11y-pause *:not(#tsp-a11y *), html.a11y-pause *::before, html.a11y-pause *::after {
  animation-play-state: paused !important; animation-duration: 0s !important; animation-iteration-count: 1 !important;
  transition: none !important; scroll-behavior: auto !important; }
html.a11y-pause [data-reveal] { opacity: 1 !important; transform: none !important; }

html.a11y-noimg img:not(#tsp-a11y *), html.a11y-noimg picture:not(#tsp-a11y *), html.a11y-noimg video:not(#tsp-a11y *) { opacity: 0 !important; }
html.a11y-noimg body *:not(#tsp-a11y *) { background-image: none !important; }

html.a11y-font body *:not(#tsp-a11y):not(#tsp-a11y *) { font-family: Verdana, Tahoma, "Segoe UI", Arial, sans-serif !important; }
html.a11y-font[lang^="ar"] body *:not(#tsp-a11y):not(#tsp-a11y *) { font-family: Tahoma, "Tajawal", Arial, sans-serif !important; }

html.a11y-cursor, html.a11y-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 3l13 8.5-6 1.5 3.5 7-2.5 1.2-3.5-7L5 18.5z' fill='%23000' stroke='%23fff' stroke-width='1.2' stroke-linejoin='round'/%3E%3C/svg%3E") 8 4, auto !important; }
html.a11y-cursor :is(a, button, [role="button"], label, summary) , html.a11y-cursor :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='M9 11V4.5a1.5 1.5 0 013 0V10h.5V8.5a1.5 1.5 0 013 0V10h.5a1.5 1.5 0 013 0v5a6 6 0 01-6 6h-1a6 6 0 01-5-2.7L5 14.5a1.5 1.5 0 012.4-1.8L9 14z' fill='%23000' stroke='%23fff' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 14 4, pointer !important; }