/* ══════════════════════════════════════════════
   Wireless 101 — RTL Overrides (Arabic)
   Load AFTER theme.css
   ══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@300;400;500;600;700&family=Noto+Kufi+Arabic:wght@400;500;600;700;800&display=swap');

html[dir="rtl"] {
  --font-display: 'Noto Kufi Arabic', 'Bricolage Grotesque', serif;
  --font-body: 'IBM Plex Sans Arabic', 'Libre Franklin', sans-serif;
}

html[dir="rtl"] body {
  font-family: var(--font-body);
  direction: rtl;
  text-align: right;
}

/* ── Navbar ── */
html[dir="rtl"] .nav-links { flex-direction: row-reverse; }

html[dir="rtl"] .nav-links a:not(.nav-cta)::after {
  left: auto;
  right: 0;
}

/* ── Section labels ── */
html[dir="rtl"] .section-label {
  flex-direction: row-reverse;
}

/* ── Hero ── */
html[dir="rtl"] .hero {
  direction: rtl;
}

html[dir="rtl"] .hero-text {
  text-align: right;
}

html[dir="rtl"] .hero-eyebrow {
  justify-content: flex-start;
  flex-direction: row-reverse;
}

html[dir="rtl"] .hero-text h1 {
  letter-spacing: 0;
}

html[dir="rtl"] .hero-buttons {
  justify-content: flex-start;
}

/* ── Course cards ── */
html[dir="rtl"] .course-header-row {
  flex-direction: row-reverse;
}

html[dir="rtl"] .course-meta {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

html[dir="rtl"] .course-meta-item {
  flex-direction: row-reverse;
}

html[dir="rtl"] .course-topic {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

html[dir="rtl"] .course-cta {
  flex-direction: row-reverse;
}

html[dir="rtl"] .course-cta-arrow svg {
  transform: scaleX(-1);
}

html[dir="rtl"] .course-cta:hover .course-cta-arrow svg {
  transform: scaleX(-1) translateX(2px);
}

/* ── Steps ── */
html[dir="rtl"] .steps-grid {
  direction: rtl;
}

html[dir="rtl"] .step-item {
  text-align: center;
}

/* ── Testimonials ── */
html[dir="rtl"] .testimonial-card::before {
  left: auto;
  right: 16px;
}

html[dir="rtl"] .testimonial-author {
  flex-direction: row-reverse;
  text-align: right;
}

html[dir="rtl"] .testimonial-stars {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* ── Footer ── */
html[dir="rtl"] .footer-grid {
  direction: rtl;
}

html[dir="rtl"] .footer-brand-name {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* ── Breadcrumb ── */
html[dir="rtl"] .breadcrumb {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* ── Course hero ── */
html[dir="rtl"] .course-hero-grid {
  direction: rtl;
}

html[dir="rtl"] .course-hero-meta {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

html[dir="rtl"] .course-hero-meta-item {
  flex-direction: row-reverse;
}

html[dir="rtl"] .course-hero-tags {
  flex-direction: row-reverse;
  justify-content: flex-start;
}

/* ── Sidebar ── */
html[dir="rtl"] .sidebar-stats {
  direction: rtl;
}

/* ── Modules ── */
html[dir="rtl"] .module-header {
  flex-direction: row-reverse;
}

html[dir="rtl"] .module-meta {
  flex-direction: row-reverse;
}

html[dir="rtl"] .module-body {
  padding: 0 4.75rem 1.25rem 1.5rem;
}

html[dir="rtl"] .lesson-item {
  flex-direction: row-reverse;
}

/* ── Outcomes ── */
html[dir="rtl"] .outcome-card {
  flex-direction: row-reverse;
  text-align: right;
}

/* ── Prerequisites ── */
html[dir="rtl"] .prereq-list li {
  flex-direction: row-reverse;
}

/* ── Buttons with arrows ── */
html[dir="rtl"] .btn-primary,
html[dir="rtl"] .btn-secondary,
html[dir="rtl"] .btn-amber {
  flex-direction: row-reverse;
}

/* ── Origin quote ── */
html[dir="rtl"] .origin-quote {
  border-left: none;
  border-right: 3px solid var(--amber);
  padding-left: 0;
  padding-right: 1rem;
}

/* ── Landing page: Arabic small-label readability ── */
html[dir="rtl"] .course-topics-label,
html[dir="rtl"] .course-meta-item {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ── Landing page position flips ── */
html[dir="rtl"] .course-header::after {
  right: auto;
  left: -40px;
}

html[dir="rtl"] .cta-box::before {
  right: auto;
  left: -80px;
}

html[dir="rtl"] .cta-box::after {
  left: auto;
  right: -60px;
}

/* ── Lesson timeline (course overview) ── */
html[dir="rtl"] .timeline-track {
  padding-left: 0;
  padding-right: 2rem;
}

html[dir="rtl"] .timeline-track::before {
  left: auto;
  right: 0;
}

html[dir="rtl"] .timeline-dot {
  left: auto;
  right: -6px;
}

/* ── Lesson article timeline ── */
html[dir="rtl"] .timeline-item::before {
  left: auto;
  right: -2rem;
}

/* ── Lesson article generations arrows ── */
html[dir="rtl"] .gen-item:not(:last-child)::after {
  right: auto;
  left: -1px;
  border-left: none;
  border-right: 8px solid var(--border);
}

/* ── Lesson nav ── */
html[dir="rtl"] .lesson-nav-btn {
  flex-direction: row-reverse;
}

html[dir="rtl"] .lesson-nav-prev {
  justify-self: end;
}

html[dir="rtl"] .lesson-nav-next {
  justify-self: start;
}

html[dir="rtl"] .lesson-nav-next svg,
html[dir="rtl"] .lesson-nav-prev svg {
  transform: scaleX(-1);
}

/* ── Mathematics (KaTeX) ──
   Mathematical notation is written left-to-right in every language, including Arabic.
   KaTeX lays its atoms out in document order and relies on the inline direction to place
   them, so inheriting `direction: rtl` from <html> reverses the whole expression:
   `P₂ = { a + bx + cx² : a,b,c ∈ ℝ }` renders as `{ ℝ ∋ a,b,c : ²cx + bx + a } = ₂P`.

   This affected every Arabic article on the platform — 620 katex.render call sites across
   334 files — because neither theme.css nor theme-rtl.css carried a single .katex rule.
   Three AR decks had already patched it locally
   (ar/courses/la101/lessons/m7-l1-slides.html:101 and two siblings), which is how the
   defect was finally noticed: someone hit it, fixed their own file, and never generalised.

   NOTE: this rule covers the 172 AR *articles*, which all link this sheet. The 180 AR
   *decks* link no external CSS at all (self-contained by design), so they need the same
   rule injected inline — see scripts/fix-rtl-katex.py. Do not assume this file fixes them. */
html[dir="rtl"] .katex,
html[dir="rtl"] .katex-display {
  direction: ltr;
}

/* Display equations stay centred; KaTeX's own rule is overridden by the RTL text-align
   inherited from the page, which would otherwise push them to the right edge. */
html[dir="rtl"] .katex-display {
  text-align: center;
}

/* ── Mobile overrides ── */
@media (max-width: 900px) {
  html[dir="rtl"] .hero-text {
    text-align: center;
  }

  html[dir="rtl"] .hero-eyebrow {
    justify-content: center;
  }

  html[dir="rtl"] .hero-buttons {
    justify-content: center;
  }

}

@media (max-width: 768px) {
  html[dir="rtl"] .step-item {
    grid-template-columns: 1fr 64px;
    text-align: right;
  }

  html[dir="rtl"] .step-num {
    order: 2;
  }

  html[dir="rtl"] .module-body {
    padding: 0 1.5rem 1.25rem 1.5rem;
  }
}

/* ── Acronym glossary (article pages) ─────────────────────────────────────
   theme.css uses logical properties throughout, so only the latin-run and
   digit direction inside the panel needs stating here. The panel's slide-in
   direction is already handled by the html[dir="rtl"] .ag-panel transform. */
html[dir="rtl"] .ag-a span[lang="en"],
html[dir="rtl"] .ag-full { direction: ltr; unicode-bidi: isolate; }
html[dir="rtl"] .ag-count { direction: rtl; }

/* ── Latin notation inside Arabic prose (CLAUDE.md Part 2) ────────────────
   `lang` alone does not isolate direction: `∇f(x*) = 0` beside Arabic rendered
   as `f(x*) = 0∇` until the span also got dir="ltr". This makes every
   <span lang="en"> on an article behave as if it carried dir="ltr"
   (TODO §10c, 2026-11-03). Spans that already set dir keep their own. */
html[dir="rtl"] span[lang="en"]:not([dir]) { direction: ltr; unicode-bidi: isolate; }
/* …and never let a formula split across lines: a split LTR run inside RTL prose reads garbled on
   both lines. One box per run; a long one wraps inside its own LTR box. */
html[dir="rtl"] .lesson-article span[lang="en"], html[dir="rtl"] .lesson-content span[lang="en"],
html[dir="rtl"] .lesson-hero span[lang="en"] { display: inline-block; max-width: 100%; }

/* ── Small mono labels in Arabic (owner report, 2026-11-04) ───────────────
   These labels are JetBrains Mono with wide letter-spacing — fine for Latin
   caps, but letter-spacing pulls joined Arabic letters apart and the mono
   font has no Arabic glyphs, so «ضرب المصفوفة في متجه» rendered as
   disconnected, unreadable letters. Arabic gets the body face, no tracking,
   and a slightly larger size; Latin runs inside keep the mono face. */
html[dir="rtl"] .equation-block-label,
html[dir="rtl"] .callout-box-label, html[dir="rtl"] .callout-title,
html[dir="rtl"] .takeaways-label, html[dir="rtl"] .takeaways h3,
html[dir="rtl"] .timeline-label, html[dir="rtl"] .lesson-type-badge,
html[dir="rtl"] .lesson-nav-overview, html[dir="rtl"] .lesson-nav-label,
html[dir="rtl"] .data-table th, html[dir="rtl"] .example-table th,
html[dir="rtl"] .section-label, html[dir="rtl"] .badge, html[dir="rtl"] .footer-col-title,
html[dir="rtl"] .lesson-breadcrumb {
  font-family: var(--font-body);
  letter-spacing: 0;
  text-transform: none;
  font-size: 0.85rem;
}
html[dir="rtl"] .equation-block-label [lang="en"],
html[dir="rtl"] .callout-box-label [lang="en"],
html[dir="rtl"] .takeaways-label [lang="en"] { font-family: var(--font-mono); }