/* ============================================================
   FOUNDATION — BILINGUAL / RTL
   FILE: assets/css/rtl.css
   Phase: Stage 6.5 (Final Master Blueprint Roadmap V3, §9 —
   structural addition to Stage 6).

   Loaded LAST in the CSS order, after every component stylesheet,
   on pages that may render dir="rtl" content (currently: the /ur/
   tree). Most of the project already uses logical CSS properties
   (margin-inline, padding-inline, text-align: start, inset-inline)
   throughout Stage 1-6 components specifically so they mirror for
   free under dir="rtl" with zero rules needed here — this file
   only contains the handful of things logical properties cannot
   fix on their own:
     1. the Urdu web font + font-display: swap
     2. glyphs/icons whose direction has *meaning* (chevrons,
        arrows) and must be mirrored, vs. ones that are symmetric
        and must NOT be (checkmarks, stars, the WhatsApp/social
        glyphs) — mirroring those would misrepresent them
     3. a small number of legacy left/right declarations flagged
        in the Stage 0 audit (the earlier RTL review) that predate
        the logical-property convention and were explicitly left
        alone at their own stage because Header/Hero are locked

   No second design system is introduced — every rule below only
   *overrides direction*, it never redefines color/spacing/type.
   ============================================================ */

/* ----------------------------------------------------------
   1. URDU TYPEFACE
   Loaded via Google Fonts. @import must be the first rule in the
   file for the browser to honor it. font-display: swap means text
   renders immediately in the fallback (serif) and swaps in once
   the Urdu font is ready — no invisible-text wait, per the
   roadmap's performance requirement. Harmless on English (ltr)
   pages that also load this file: the font file itself is only
   ever fetched by the browser when something on the page actually
   renders in that font-family, which only happens under dir="rtl".
---------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Noto+Nastaliq+Urdu:wght@400..700&display=swap');

[dir="rtl"] body {
  font-family: var(--font-urdu);
  /* Nastaliq needs more vertical room per line than the Latin
     scale tokens assume — bumped here only, not project-wide. */
  line-height: 2;
}

[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] h6 {
  font-family: var(--font-urdu);
  font-weight: 600;
  line-height: 1.9;
}

/* ----------------------------------------------------------
   2. DIRECTIONAL ICON MIRRORING
   Only glyphs that encode a direction (this way / next / back).
---------------------------------------------------------- */
[dir="rtl"] .primary-nav__chevron,
[dir="rtl"] .mobile-nav__accordion-icon,
[dir="rtl"] .hero__cta svg,
[dir="rtl"] .final-cta__action svg,
[dir="rtl"] .cta-band__action svg,
[dir="rtl"] .breadcrumbs__separator,
[dir="rtl"] .pagination__link--prev svg,
[dir="rtl"] .pagination__link--next svg,
[dir="rtl"] .mega-menu__promo-cta svg,
[dir="rtl"] .mega-menu__view-all svg {
  transform: scaleX(-1);
}

/* Prev/Next swap sides under RTL so "Next" still points toward
   reading direction rather than always sitting visually on the
   right — the logical properties in pagination.css already put
   them at the correct inline-start/inline-end, this only handles
   the arrow glyph inside each. */

/* ----------------------------------------------------------
   3. LEGACY PHYSICAL-PROPERTY OVERRIDES
   Header/Hero are locked (Phase 2.5 "no rebuild" rule) and still
   contain a small number of pre-logical-property declarations —
   flagged, not rebuilt, at Stage 0 (the earlier RTL review). Their
   RTL correction lives here rather than editing the locked files.
---------------------------------------------------------- */
[dir="rtl"] .site-header__logo-mark,
[dir="rtl"] .site-footer__logo img {
  margin-inline-end: 0;
  margin-inline-start: var(--space-1);
}

/* ----------------------------------------------------------
   4. LANGUAGE SWITCHER — mark the active option
   header.js toggles [aria-selected]; this only styles the state.
---------------------------------------------------------- */
.lang-switcher__menu [aria-selected="true"] {
  color: var(--color-gold);
  font-weight: 600;
}

/* Phase 4 Urdu parity */
html[lang="ur"] body { direction: rtl; }
html[lang="ur"] .breadcrumbs__list,
html[lang="ur"] .primary-nav__list { direction: rtl; }