/* ===========================================================================
   RTL corrections.

   The layout uses logical properties (margin-inline, inset-inline, padding-
   inline) throughout, so most of it mirrors on its own. This file handles only
   what cannot: directional glyphs, typography that needs different treatment
   in Arabic, and the few places a physical property was unavoidable.
   =========================================================================== */

/* --- typography ---------------------------------------------------------- */

/* Arabic needs more line height and does not take tight tracking well */
body {
  font-family: "Segoe UI", Tahoma, system-ui, sans-serif;
  font-size: 15.5px;
  line-height: 1.75;
}

h1, h2, h3 { letter-spacing: 0; line-height: 1.3; }

/* Uppercase is meaningless in Arabic and the negative tracking damages it */
.brand-name,
.rail-title,
.interstitial-title,
.page-title,
.hero-title {
  text-transform: none;
  letter-spacing: 0;
}

.hero-title { line-height: 1.15; font-size: clamp(38px, 9vw, 92px); }

.fact-key,
.chips-title,
.side-title,
.nav-section,
.stat-label { letter-spacing: 0; }

/* --- directional glyphs --------------------------------------------------- */

/* Pagination chevrons point the other way when reading right to left */
[dir="rtl"] .pager-btn { transform: scaleX(-1); }

/* The play triangle is not directional in the reading sense — it always
   points the way "play" points, so it must NOT be mirrored. */
[dir="rtl"] .play-icon svg,
[dir="rtl"] .card-play svg,
[dir="rtl"] .tab .icon { transform: none; }

/* --- mixed direction ------------------------------------------------------ */

/* Latin fragments inside Arabic text — game titles, tags, scores, slugs —
   must stay LTR or the punctuation and digits reorder wrongly. */
.mono,
.card-meta,
.pager-num,
.list-count strong,
.cat-count,
.fact-val,
.player-name { direction: ltr; unicode-bidi: isolate; }

/* Numbers stay Western in both languages, so isolate them from the
   surrounding Arabic run to keep grouping separators in place. */
.stat-value,
.card-title { unicode-bidi: plaintext; }

/* --- scrollers ------------------------------------------------------------ */

/* Horizontal tracks start from the right */
.rail-track,
.cat-strip-inner { direction: rtl; }

/* --- forms ---------------------------------------------------------------- */

.site-search input,
.search-big input { text-align: right; }

/* --- admin-style helpers used on public pages ----------------------------- */

.prose h2 { padding-inline-start: 11px; }

.faq-item summary::after { margin-inline-start: auto; }

/* --- breadcrumbs ---------------------------------------------------------- */

/* The separator is a slash, which reads the same either way, but the crumb
   order must follow the text direction (handled by flex + dir on <html>). */
.crumbs { direction: rtl; }