/* Apex RTL overrides — loaded only when dir="rtl" (Arabic pages).
   Prefer logical properties so most layout flips automatically; this file
   handles the cases that don't. Expand per page during Wave 1. */

html[dir="rtl"] body { font-family: "GE SS Two", "ARSMaquettePro", sans-serif; text-align: right; }

/* Accent words. Headings wrap emphasised words in <em>, which the base apex
   CSS renders in "Playfair Display" italic — a LATIN-only serif with no Arabic
   glyphs. On Arabic pages every accent (hero "شاي الزعفران", proof stats,
   section titles) therefore falls back to a random system Arabic serif, so the
   accent looks like a different typeface than the rest of the heading. Inherit
   the heading's own Arabic font and drop the italic; the orange colour accent
   from the base CSS is kept. Mirrors the country-rtl.css heading-em fix. */
html[dir="rtl"] .fi-home em,
html[dir="rtl"] .fi-hero h1 em {
    font-family: inherit;
    font-style: normal;
}

/* Navbar mirrors automatically via the dir="rtl" cascade (the nav <ul>s are
   #navbar-list / .nav-list ul, so they reverse on their own). We only flip the
   PHYSICAL margins/floats that don't auto-flip:
     - .menu-margin: 70px gap between the logo and the left nav block. In LTR it
       sits to the right of the logo; under RTL the logo moves right, so the gap
       must move to the right side too — otherwise the links jam against the logo.
     - .find-store-btn (and its icon): inter-item / icon-to-text gaps.
   (The previous `.navbar-nav { flex-direction: row-reverse }` rule was a no-op —
   the apex nav has no .navbar-nav element — and row-reverse would have double-
   reversed the order against dir=rtl; removed.) */
html[dir="rtl"] .menu-margin       { margin-left: 0; margin-right: 70px; }
html[dir="rtl"] .find-store-btn     { margin-right: 0; margin-left: 35px; }
html[dir="rtl"] .find-store-btn svg { margin-right: 0; margin-left: 12px; }
html[dir="rtl"] .header-main-right .nav-list.float-end { float: none; }

/* Nav action buttons (find-store / view-menu / filli-select / country chip).
   wp-shared-styles pushes this group to the end of the flex row with a PHYSICAL
   `margin-left: auto`, which is correct for LTR (pushes right) but leaves a large
   gap on the left in RTL (it still absorbs the left free space). Flip to
   margin-right:auto so the group hugs the left edge in Arabic. Mirrors the fix
   already living in country-rtl.css for the /qa etc. country pages. */
html[dir="rtl"] header.navbar-section .header-main-right {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .breadcrumb-item + .breadcrumb-item::before { transform: scaleX(-1); }

/* ── Our Story · Living Manifesto card (/ar/our-story) ────────────────────
   The rotating quote card is fed Arabic from lang/ar/our_story_manifesto.php
   (the JS pools used to be hardcoded English). Four RTL corrections:

   1. `em` punchline: `.os-manifesto-line em` is 'Playfair Display', which has
      NO ARABIC GLYPHS — the browser silently falls back to a mismatched Latin
      serif. Same bug fixed on the homepage hero on 2026-07-16. Every manifesto
      line puts its punchline in <em>, so without this the card is visibly
      broken in Arabic. `font-style:normal` too: Arabic has no true italic, so
      synthetic obliquing just smears the script.
   2. `.os-manifesto-ctx` letter-spacing: .12em BREAKS ARABIC. Arabic is a
      cursive joined script; adding tracking pulls the glyphs apart and severs
      the connecting strokes. Must be 0. `text-transform:uppercase` is a no-op
      on Arabic but dropped for clarity.
   3. `::before` accent dash uses a PHYSICAL margin-right — flip to margin-left
      so it sits before the label in reading order.
   4. `.os-manifesto` accent border and the glow quote mark are PHYSICAL
      (border-left / left) — mirror both to the right edge.

   Specificity note: our-story.blade.php declares .os-manifesto twice (an older
   dark block, then a lighter one that overrides it). `html[dir="rtl"] .x` is
   (0,2,2) and beats both (0,1,1) rules regardless of source order, so this
   file does not need to be loaded after the page's inline <style>. */
html[dir="rtl"] .os-manifesto-line em {
    font-family: inherit;
    font-style: normal;
}
html[dir="rtl"] .os-manifesto-ctx {
    letter-spacing: 0;
    text-transform: none;
}
html[dir="rtl"] .os-manifesto-ctx::before {
    margin-right: 0;
    margin-left: 8px;
}
html[dir="rtl"] .os-manifesto {
    border-left: 0;
    border-right: 3px solid #fc5007;
}
html[dir="rtl"] .os-manifesto-glow {
    left: auto;
    right: 28px;
}

/* ── Footer columns (/ar) ─────────────────────────────────────────────────
   The footer columns carry Bootstrap's `.text-md-start`. That utility is
   MEANT to be logical ("start"), but the site ships only the LTR Bootstrap
   build, which hardcodes `.text-md-start{text-align:left!important}` — there
   is no bootstrap.rtl.css here. So on /ar the Arabic headings and links were
   physically LEFT-aligned, leaving ragged right edges instead of lining up on
   the right. Nothing to do with the @locurl href swap — the markup has always
   said text-md-start.

   country-rtl.css already carries this exact correction for the /qa etc.
   country pages (same `<footer class="main-section footer-section">` markup),
   so apex was simply the side that never got it — the same apex-vs-country
   divergence recorded for the hero templates. Ported verbatim to keep the two
   in step. `!important` is required to beat Bootstrap's own !important. */
[dir="rtl"] .footer-section .footerbox {
    text-align: right !important;
}
[dir="rtl"] .footer-section .footerbox h6 {
    text-align: right !important;
}
[dir="rtl"] .footer-section .footerbox .f-menu {
    text-align: right !important;
}
[dir="rtl"] .footer-section .footerbox .f-menu a {
    display: block;
    text-align: right !important;
}

/* ── Chai Culture (/ar/chai-culture) ──────────────────────────────────────
   chai-culture.blade.php was authored LTR-only: it re-declares a LATIN-ONLY
   font stack on its own wrapper —
       .fc-page { font-family: "ARSMaquettePro", Helvetica, sans-serif; }
   — with no "GE SS Two". apex-rtl.css puts the Arabic stack on `body`, but
   .fc-page wraps the entire page, so its own declaration wins for every
   descendant and the Arabic falls back to whatever system face the browser
   picks. That is why /ar/chai-culture visibly differs from /ar/our-story.
   Restore the Arabic stack for the wrapper and each control that re-declares
   it (buttons, inputs, selects, tabs).

   The display/accent faces are Latin-only too and have NO ARABIC GLYPHS:
   'Playfair Display' (4 `em` accents), 'NT Wagner' and 'Wagner'. Point them at
   the Arabic stack rather than letting the browser silently substitute.
   font-style:normal because Arabic has no true italic — synthetic obliquing
   just smears the script. Same trap as the /ar/our-story manifesto and the
   homepage hero (2026-07-16). LTR is untouched: every rule is [dir="rtl"]. */
[dir="rtl"] .fc-page,
[dir="rtl"] .fc-btn,
[dir="rtl"] .fc-input,
[dir="rtl"] .fc-select,
[dir="rtl"] .fc-tab {
    font-family: "GE SS Two", "ARSMaquettePro", sans-serif;
}
[dir="rtl"] .fc-hero h1,
[dir="rtl"] .fc-hero-kicker,
[dir="rtl"] .fc-film-lb__title,
[dir="rtl"] .fc-event-collab-x {
    font-family: "GE SS Two", "ARSMaquettePro", sans-serif;
}
[dir="rtl"] .fc-section-head h2 em,
[dir="rtl"] .fc-hero h1 em,
[dir="rtl"] .fc-join h2 em {
    font-family: inherit;
    font-style: normal;
}

/* ── Chai Culture · event date badge (/ar/chai-culture) ───────────────────
   The month badge is fed by LocalizedDate::month(), which returns Arabic
   month names on /ar ("يونيو") where it returned "Jun" before. Two problems
   come with that, and neither is visible in LTR:

   1. `letter-spacing: .06em` SEVERS ARABIC. Arabic is a cursive joined
      script — tracking pulls the glyphs apart and breaks the connecting
      strokes, so the month reads as loose disconnected letters. Same bug and
      same fix as `.os-manifesto-ctx` above. Must be 0.
   2. `text-transform: uppercase` is a no-op on Arabic (no letter case), but
      dropped for clarity, consistent with the manifesto block.

   Arabic month names are 4-6 chars against English's 3, so the badge's
   `min-width: 60px` is no longer the binding constraint — the label is. The
   font-size step-down keeps the longest names (فبراير/سبتمبر/نوفمبر/ديسمبر,
   6 chars) inside the badge without reflowing the card in LTR. */
[dir="rtl"] .fc-event-month {
    letter-spacing: 0;
    text-transform: none;
    font-size: 0.75rem;
}

/* ── Chai Culture · hero kicker + buttons (/ar/chai-culture) ──────────────
   Two more positive-tracking offenders in the hero, same root cause as
   `.os-manifesto-ctx` and `.fc-event-month`: Arabic is a cursive joined
   script, so tracking severs the connecting strokes and the word falls apart
   into loose letters.

   - `.fc-hero-kicker` carries letter-spacing: .3em (it overrides `.fc-kicker`'s
     .21em — same specificity, declared later). At .3em the Arabic eyebrow above
     the hero headline reads as detached characters, not a word.
   - `.fc-btn` carries .09em (`.fc-btn--sm` .07em); `[dir="rtl"] .fc-btn` is
     (0,2,0) so it beats both without !important.

   `text-transform: uppercase` is a no-op on Arabic (no letter case) but is
   dropped for clarity, consistent with the blocks above. LTR is untouched. */
[dir="rtl"] .fc-kicker,
[dir="rtl"] .fc-hero-kicker {
    letter-spacing: 0;
    text-transform: none;
}
[dir="rtl"] .fc-btn {
    letter-spacing: 0;
    text-transform: none;
}