/* Arabic / RTL layer. Loaded only by the Arabic page. */

html[dir="rtl"] body,
html[dir="rtl"] .font-mono {
  font-family: 'Tajawal', 'Kanit', system-ui, sans-serif;
}

/* Kanit's wide tracking is designed for Latin caps; on Arabic it pulls the
   joined letterforms apart. Numerals and Latin runs keep their own rhythm
   through .ltr-run below. */
html[dir="rtl"] body * {
  letter-spacing: normal !important;
}
html[dir="rtl"] .ltr-run {
  direction: ltr;
  unicode-bidi: isolate;
  letter-spacing: 0.2em !important;
}

/* Arabic has no case, and uppercase on mixed runs shouts. */
html[dir="rtl"] .story-kicker,
html[dir="rtl"] .jp-sec-label,
html[dir="rtl"] .story-line,
html[dir="rtl"] .hero-heading,
html[dir="rtl"] h1,
html[dir="rtl"] h2 {
  text-transform: none;
}

/* Arabic ascenders/descenders need more room, and the display sizes tuned for
   short Latin caps ("MOHAMMED") overflow once the words get longer. */
html[dir="rtl"] .story-line {
  line-height: 1.25;
  font-size: clamp(2rem, 6vw, 5.5rem);
}
html[dir="rtl"] .hero-heading { line-height: 1.2; }

/* Display headings that carry an inline line-height (0.85–0.95, tuned for
   Latin caps) cut the descenders off Arabic — ي, ج, ن all hang below the
   baseline. Only the headings need this; the metric numerals keep theirs. */
html[dir="rtl"] h2.hero-heading,
html[dir="rtl"] .story-chapter h1 {
  line-height: 1.25 !important;
}
html[dir="rtl"] .footer-text-glow { line-height: 1.3 !important; }
/* Portfolio brand stacks sit at leading 0.85; one of them ("فعاليات") is
   Arabic, so give the stack just enough room to clear the descenders. */
html[dir="rtl"] .flow-art-container h2 { line-height: 1.05 !important; }
html[dir="rtl"] .story-chapter h1 {
  font-size: clamp(2rem, 7vw, 6rem) !important;
}

/* Physical-direction utilities that Tailwind can't flip for us. */
html[dir="rtl"] .text-left { text-align: right; }
html[dir="rtl"] .text-right { text-align: left; }

/* A drop cap would cut the first letter out of its word and kill the
   joining — Arabic typography has no equivalent, so drop it. */
html[dir="rtl"] [class*="first-letter"]::first-letter {
  float: none;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  margin: 0;
}

html[dir="rtl"] .story-progress { right: auto; left: 22px; }

/* Impact card ghost numerals sit in the outer corner. */
html[dir="rtl"] .impact-ghost-num { right: auto; left: 1.25rem; }

html[dir="rtl"] .seo-fallback ul { padding: 0; }