/*
  RTL / Urdu rules — Section 4.2 and Section 12.
  Activated by [dir="rtl"] on <html> (set by language-toggle.js).
  Most mirroring is automatic because components.css/base.css use
  CSS logical properties (margin-inline-*, padding-inline-*, inset-inline-*,
  text-align: start/end) instead of left/right.
*/

[dir="rtl"] body {
  font-family: 'Noto Nastaliq Urdu', 'Inter', system-ui, sans-serif;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .font-display {
  font-family: 'Noto Nastaliq Urdu', serif;
  letter-spacing: 0;
  line-height: 1.9;
}

[dir="rtl"] body,
[dir="rtl"] p,
[dir="rtl"] .font-body {
  font-family: 'Noto Nastaliq Urdu', 'Inter', system-ui, sans-serif;
  line-height: 2.1;
  font-size: 18px;
}

[dir="rtl"] .font-arabic {
  font-family: 'Amiri', serif;
  line-height: 2;
}

/* Noto Nastaliq Urdu's tall ascenders/descenders need more room than the
   1.9 given to plain headings above -- inside a line-clamp box (fixed
   height = line-height * line count, overflow:hidden) that's not quite
   enough and the top/bottom of glyphs get clipped. Bump it further here,
   specific to line-clamp contexts (lecture/book card titles, player bar
   title, footer "latest lectures" links) so headings elsewhere are
   unaffected. */
[dir="rtl"] .line-clamp-1,
[dir="rtl"] .line-clamp-2 {
  line-height: 2.2;
}

/* Same Nastaliq clipping issue as .line-clamp above, on the sticky header's
   brand name + shaykh-name lines specifically -- overflow:hidden there is
   for horizontal text-overflow:ellipsis (a long name shouldn't wrap/grow
   the header), and without enough line-height the tall glyphs get clipped
   vertically by that same overflow:hidden as a side effect. */
[dir="rtl"] .site-header__brand-title {
  line-height: 2.5;
}
[dir="rtl"] .site-header__shaykh-name {
  line-height: 2.6;
}

/* Same Nastaliq clipping issue as above, on the mobile bottom-nav's icon
   labels (assets/js/features/bottom-nav.js) -- also a single-line
   overflow:hidden + text-overflow:ellipsis label, just much smaller. */
[dir="rtl"] .mobile-bottom-nav__item .mobile-bottom-nav__label {
  line-height: 2.5;
}

/* Latin content nested inside RTL blocks (e.g. English fallback tags) stays LTR */
[dir="rtl"] .force-ltr {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Inter', 'Amiri', system-ui, sans-serif;
}

/* Book detail page's PDF reader (see features/pdf-viewer.js) -- the page's
   own <canvas> content is drawn by pdf.js, not laid out by this site's CSS
   at all, but a <canvas> element still inherits CSS `direction` like any
   other element, and pdf.js's own text-shaping/glyph-positioning reads
   that inherited value off the canvas context. Left un-reset, an Urdu
   visitor's own dir="rtl" page corrupts every rendered page's glyph
   order/spacing -- confirmed: the exact same PDF renders correctly under
   dir="ltr" and visibly scrambled under dir="rtl". This has nothing to do
   with the PDF's own script (Urdu pages need this exactly as much as
   English ones) -- it's purely about the *canvas's* direction, always LTR
   regardless of the surrounding page or the PDF's own content language. */
[dir="rtl"] .pdf-viewer {
  direction: ltr;
}

/* Chevrons / arrows that imply direction get flipped */
[dir="rtl"] .icon-flip {
  transform: scaleX(-1);
}

/* "Back" arrows point the opposite way: flipped by default (chevron's
   base shape points right, back should point left in LTR), then un-flipped
   in RTL so it correctly points right (toward where you came from). */
.icon-back {
  transform: scaleX(-1);
}
[dir="rtl"] .icon-back {
  transform: scaleX(1);
}

[dir="rtl"] h1 { font-size: 44px; }
[dir="rtl"] h2 { font-size: 32px; }
[dir="rtl"] h3 { font-size: 23px; }

@media (max-width: 767px) {
  [dir="rtl"] h1 { font-size: 30px; }
  [dir="rtl"] h2 { font-size: 24px; }
  [dir="rtl"] h3 { font-size: 19px; }
  [dir="rtl"] body,
  [dir="rtl"] p,
  [dir="rtl"] .font-body {
    font-size: 17px;
  }
}