/* =====================================================================
   RTL overrides — loaded only when the active language is Arabic.
   The base stylesheets are LTR-authored; this file mirrors directional
   layout and swaps the UI font stack to Arabic faces.
   ===================================================================== */

/* The base stylesheets use Fraunces (display) + Lexend (body); neither ships
   Arabic glyphs, so any element that kept those faces fell through to the
   browser's per-glyph serif/sans fallback. Rather than re-list every consumer,
   redefine the font *variables* themselves: rtl.css loads last and Arabic-only,
   so every `var(--font-display)` / `var(--font-body)` reference — nav, forms,
   hero stats, headings, buttons — switches to an Arabic face automatically. */
:root {
  --font-display: 'Tajawal', Georgia, serif;
  --font-body:    'Cairo', system-ui, sans-serif;
}

/* Navbar: the two-row header (utility strip + rail) uses logical properties
   and natural flex order, so it mirrors automatically in Arabic — logo to the
   right, CTAs to the left, language + contact swapping sides. No direction
   lock is needed; only the phone number is forced LTR inline in the markup. */

/* Mirror inline directional arrows (next / hero / cta chevrons). */
[dir="rtl"] .btn .arrow,
[dir="rtl"] .hero__actions .arrow,
[dir="rtl"] .cta .arrow,
[dir="rtl"] #nextBtn .arrow { transform: scaleX(-1); }

/* Federation-plate CTAs: move the gold spine to the inline-start (right) edge,
   and drop the Latin-only tracking/uppercase — letter-spacing breaks Arabic's
   cursive joining, so Arabic keeps its natural spacing and casing. */
[dir="rtl"] .btn--plate,
[dir="rtl"] .btn--plate-ghost { background-position: right; letter-spacing: normal; text-transform: none; }

/* The Previous button arrow is pre-flipped with scaleX(-1) inline; in RTL
   it should point the other way — cancel the inline flip. The inline style
   wins over a plain selector, so !important is required to override it. */
[dir="rtl"] #prevBtn svg { transform: scaleX(1) !important; }

/* Stepper progress bar fills from the right in RTL.
   The fill <span> is a block with an inline width %, so it already anchors to
   the inline-start (right) edge in RTL — no transform needed. */

/* Keep explicitly LTR runs (phone, ID format, reference codes) visually LTR. */
[dir="rtl"] [dir="ltr"] { unicode-bidi: isolate; }

/* Form helper/error text aligns to the start (right) in RTL automatically via
   inherited direction; ensure left-anchored utilities don't fight it. */
[dir="rtl"] .help,
[dir="rtl"] .err,
[dir="rtl"] label { text-align: right; }

/* ===== Polish pass (static analysis) =====
   Targeted mirrors for hard-coded LTR directional rules found in the base
   stylesheets (style.css / register.css). Each override states the base rule
   it corrects. Base CSS is left untouched (no logical-property rewrite). */

/* register.css:115 — the <select> chevron is painted at `right 14px` with
   `padding-right: 42px` so the text clears it on the right. In RTL the text
   starts on the right, so the chevron must move to the LEFT and the clearance
   padding flip sides, otherwise the arrow overlaps the option text. */
[dir="rtl"] select {
  background-position: left 14px center;
  padding-right: 14px;
  padding-left: 42px;
}

/* register.css:161-162 — nested conditional blocks draw an indent rule with
   `border-left` + `padding-left` + `margin-left`. The indent should hang off
   the start edge, which is the RIGHT in RTL. */
[dir="rtl"] .conditional.nested {
  border-left: 0;
  border-right: 3px solid var(--navy-100);
  padding-left: 0;
  padding-right: 18px;
  margin-left: 0;
  margin-right: 2px;
}

/* ===== Arabic legibility — small UI labels =====
   The base "eyebrow / kicker / stat-label" family is tuned for Latin: small
   sizes set in wide letter-spacing + uppercase. In Arabic that reads as tiny
   and thin, and the tracking actively breaks the script's cursive joining —
   letters that should connect are pulled apart, so words look fragmented and
   barely readable (e.g. "نبذة عن المنصة", "إجمالي المسجلين", "رياضيون سابقون").
   For Arabic we drop the tracking, nudge the size up, and set a more solid
   weight. (uppercase is a no-op on Arabic and left alone.) */
[dir="rtl"] .eyebrow,
[dir="rtl"] .step__legend span,
[dir="rtl"] .footer__cols h4 {
  letter-spacing: normal;
  font-size: .95rem;
  font-weight: 700;
}

/* Footer column heads are also dimmed (opacity .65), which compounds the
   thinness in Arabic — lift them so they stay readable. */
[dir="rtl"] .footer__cols h4 { opacity: .82; }

/* Hero stat labels carry tracking, which harms Arabic cursive joining. */
[dir="rtl"] .hero__stats dd {
  letter-spacing: normal;
  font-size: .95rem;
  font-weight: 500;
}

/* Stepper step labels carry tracking too. */
[dir="rtl"] .stepper__label {
  letter-spacing: normal;
  font-weight: 600;
}

/* ---- Admin shell (Plan 1) ----
   Nearly all of the shell needs no flip: it uses logical properties
   (margin-inline-start, inset-inline-start, padding-inline), symmetric radii,
   and a centred medallion. The genuine flips that DO exist live next to their
   rules in admin.css — the active-nav gold marker and the drawer's slide
   origin — so they stay readable alongside what they invert.

   This is the only asymmetric physical value left: the skip link tucks under
   the top inline-start corner, so its one rounded corner swaps sides. */
[dir="rtl"] .skip-link { border-radius: 0 0 0 8px; }

/* ---- Admin list pattern (Plan 2) ----
   The toolbar, chips, sort menu and bulk bar all use logical properties and
   flip on their own. The row affordance does not: it is a directional glyph,
   so it has to be replaced rather than mirrored. */
[dir="rtl"] .row-go::before { content: '\2039'; }