/**
 * TaxiRoyal Accessibility Pro — Frontend CSS v1.1.0
 * All body-class effects, skip link, reading guide, reading mask.
 * Toolbar layout is 100% inline-style from JS — this file handles
 * only the body-state classes and a few shared lightweight styles.
 */

/* ── Skip Link ───────────────────────────────────────────────────────────── */
.tra-skip-link {
  position: absolute !important;
  top: -999px;
  left: -999px;
  z-index: 999999;
  padding: 12px 24px;
  background: #111;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  border-radius: 0 0 8px 0;
}
.tra-skip-link:focus {
  top: 0 !important;
  left: 0 !important;
  outline: 3px solid #ffd700;
  outline-offset: 2px;
}

/* ── Focus ring (injected by PHP autofix) ────────────────────────────────── */
/* Handled via inline <style id="tra-focus-ring"> injected in <head> by PHP   */

/* ═══════════════════════════════════════════════════════════════════════════
   BODY-CLASS STATE EFFECTS
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   VISION EFFECTS
   All filters on #tra-content-wrap — the wrapper div around page content.
   Toolbar elements are appended to body AFTER the wrap, so they are
   siblings of #tra-content-wrap and completely unaffected by its filter.
   display:contents on the wrap means zero layout impact.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Invert Colors ───────────────────────────────────────────────────────── */
#tra-content-wrap.tra-invert-html {
  filter: invert(1) hue-rotate(180deg);
}
#tra-content-wrap.tra-invert-html img,
#tra-content-wrap.tra-invert-html video {
  filter: invert(1) hue-rotate(180deg);
}

/* ── Grayscale ───────────────────────────────────────────────────────────── */
#tra-content-wrap.tra-grayscale-html {
  filter: grayscale(1);
}

/* ── Saturation ──────────────────────────────────────────────────────────── */
#tra-content-wrap.tra-saturation-html {
  filter: saturate(0.15);
}

/* ── High Contrast ───────────────────────────────────────────────────────── */
#tra-content-wrap.tra-high-contrast-html {
  filter: contrast(2.5);
}

/* ── Highlight Links ─────────────────────────────────────────────────────── */
body.tra-highlight-links a:not(.tra-toolbar a) {
  background: #0057b8 !important;
  color: #fff !important;
  text-decoration: underline !important;
  text-decoration-color: #ffd700 !important;
  text-decoration-thickness: 2px !important;
  text-underline-offset: 3px !important;
  outline: 2px solid #ffd700 !important;
  outline-offset: 1px !important;
  border-radius: 3px !important;
  padding: 1px 5px !important;
}
body.tra-highlight-links a:not(.tra-toolbar a):hover {
  background: #003d82 !important;
  color: #ffd700 !important;
}

/* ── Highlight Headings ──────────────────────────────────────────────────── */
body.tra-highlight-headings h1,
body.tra-highlight-headings h2,
body.tra-highlight-headings h3,
body.tra-highlight-headings h4,
body.tra-highlight-headings h5,
body.tra-highlight-headings h6 {
  background: #fff3cd !important;
  color: #000 !important;
  border-inline-start: 6px solid #e65c00 !important;
  border-bottom: 2px solid #e65c00 !important;
  padding: 6px 12px 6px 12px !important;
  padding-inline-start: 14px !important;
  border-radius: 0 6px 6px 0 !important;
  box-shadow: 2px 2px 0 rgba(230,92,0,.25) !important;
  display: block !important;
  margin-bottom: 4px !important;
}

/* ── Focus Highlight ─────────────────────────────────────────────────────── */
/* JS adds .tra-focus-highlight-el to the currently hovered/focused element */
.tra-focus-el {
  outline: 3px solid var(--tra-color, #1a73e8) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 6px rgba(26,115,232,.18), 0 0 16px rgba(26,115,232,.2) !important;
  border-radius: 4px !important;
  position: relative !important;
  z-index: 2 !important;
  transition: outline .1s, box-shadow .1s !important;
}
/* Don't highlight the toolbar itself */
#tra-panel .tra-focus-el,
#tra-trigger-btn.tra-focus-el,
#tra-structure-panel .tra-focus-el {
  outline: none !important;
  box-shadow: none !important;
}

/* ── Dyslexia Font ───────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&display=swap');
body.tra-dyslexia-font,
body.tra-dyslexia-font *:not(#tra-panel):not(#tra-panel *):not(#tra-structure-panel):not(#tra-structure-panel *) {
  font-family: 'Lexend', sans-serif !important;
  word-spacing: 0.16em !important;
}

/* ── Big Cursor ──────────────────────────────────────────────────────────── */
body.tra-big-cursor,
body.tra-big-cursor * {
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M6 4L6 36L16 27L23 42L28 40L21 25L35 25Z' fill='%23000' stroke='%23fff' stroke-width='2.5'/%3E%3C/svg%3E") 6 4, auto !important;
}

/* ── Pause Animations ────────────────────────────────────────────────────── */
body.tra-pause-animations *,
body.tra-pause-animations *::before,
body.tra-pause-animations *::after {
  animation-play-state: paused !important;
  transition-duration: 1ms !important;
}

/* ── Keyboard Navigation ─────────────────────────────────────────────────── */
body.tra-keyboard-nav :focus {
  outline: 4px solid var(--tra-color, #1a73e8) !important;
  outline-offset: 4px !important;
  box-shadow: 0 0 0 7px rgba(26,115,232,.18) !important;
  border-radius: 4px !important;
}
body.tra-keyboard-nav a:focus,
body.tra-keyboard-nav button:focus,
body.tra-keyboard-nav input:focus,
body.tra-keyboard-nav select:focus,
body.tra-keyboard-nav textarea:focus {
  background-color: rgba(26,115,232,.04) !important;
}

/* ── Hide Images ─────────────────────────────────────────────────────────── */
body.tra-hide-images img {
  visibility: hidden !important;
}
/* Keep toolbar images visible */
body.tra-hide-images #tra-panel img,
body.tra-hide-images #tra-structure-panel img,
body.tra-hide-images #tra-trigger-btn img {
  visibility: visible !important;
}

/* ── Reading Guide line ──────────────────────────────────────────────────── */
#tra-reading-guide {
  display: none;
  position: fixed;
  left: 0; right: 0;
  height: 3px;
  pointer-events: none;
  z-index: 999985;
}
body.tra-reading-guide-on #tra-reading-guide { display: block; }

/* ── Reading Mask ────────────────────────────────────────────────────────── */
#tra-mask-top,
#tra-mask-bottom {
  display: none;
  position: fixed;
  left: 0; right: 0;
  background: rgba(0,0,0,.65);
  pointer-events: none;
  z-index: 999984;
}
body.tra-reading-mask-on #tra-mask-top,
body.tra-reading-mask-on #tra-mask-bottom { display: block; }

/* ── TTS highlight ───────────────────────────────────────────────────────── */
.tra-tts-highlight {
  background: #ffd700 !important;
  color: #000 !important;
  border-radius: 2px;
}

/* ── Trigger button focus ────────────────────────────────────────────────── */
#tra-trigger-btn:focus {
  outline: 3px solid #ffd700 !important;
  outline-offset: 3px !important;
}

/* ── Panel scrollbar ─────────────────────────────────────────────────────── */
#tra-panel { scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; }
#tra-panel::-webkit-scrollbar { width: 4px; }
#tra-panel::-webkit-scrollbar-track { background: transparent; }
#tra-panel::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 4px; }
#tra-panel::-webkit-scrollbar-thumb:hover { background: #aaa; }
#tra-panel::-webkit-scrollbar-corner { background: transparent; }

/* ── Structure panel scrollbar ───────────────────────────────────────────── */
#tra-structure-content { scrollbar-width: thin; scrollbar-color: #d0d5dd transparent; }
#tra-structure-content::-webkit-scrollbar { width: 4px; }
#tra-structure-content::-webkit-scrollbar-track { background: transparent; }
#tra-structure-content::-webkit-scrollbar-thumb { background: #d0d5dd; border-radius: 4px; }
#tra-structure-content::-webkit-scrollbar-corner { background: transparent; }

/* ── Reduced-motion respect ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  #tra-structure-panel { transition: none !important; }
}

/* ── RTL toolbar layout (scoped to #tra-panel[dir=rtl] only) ─────────────── */
#tra-panel[dir="rtl"] {
  direction: rtl;
  text-align: right;
}
#tra-panel[dir="rtl"] .tra-step-val {
  direction: ltr; /* keep +2 / -1 values LTR */
}
#tra-structure-panel[dir="rtl"] {
  direction: rtl;
  text-align: right;
}


/* ── Toolbar isolation from injected body * rules ───────────────────────── */
/* Since toolbar is appended after #tra-content-wrap, injected rules on      */
/* #tra-content-wrap don't reach toolbar. But body * rules still do.         */
/* Use specificity win: .tra-toolbar (0,1,0) beats body * (0,0,1)            */
.tra-toolbar { font-size: initial; line-height: initial; font-weight: initial; letter-spacing: normal; word-spacing: normal; text-align: initial; }
.tra-toolbar * { font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; word-spacing: inherit; text-align: inherit; }
