/* ==========================================================================
   rtl.css — Arabic / right-to-left overrides.
   Loaded ONLY on the Arabic mirror (pages with dir="rtl"). The base CSS uses
   logical properties where it can; this file flips the remaining physical
   left/right positioning and the direction-sensitive reveal transforms so the
   cinematic motion reads correctly mirrored. Brand vocabulary is unchanged —
   only direction is reflected.

   Convention follows the existing [dir="rtl"] blocks in components.css /
   components-v2.css: target [dir="rtl"] .selector and swap left<->right.
   ========================================================================== */

/* ---- Base direction + Arabic type ---- */
[dir="rtl"] {
    direction: rtl;
    text-align: right;
    /* Remap the English font variable to the Arabic brand stack for the whole
       RTL subtree. Many components set `font-family: var(--f-en)` explicitly,
       so overriding --f-en here (rather than only font-family) makes every
       element — headings, nav, body, buttons — render in Frutiger LT Arabic
       without having to chase each selector. */
    --f-en: 'Frutiger LT Arabic', 'Cairo', 'Tajawal', sans-serif;
    font-family: var(--f-ar);
}
/* Latin brand tokens that must stay in the Latin face even on RTL pages:
   the MANAGE wordmark/alt, email, phone, and explicit .ltr / [lang="en"]. */
[dir="rtl"] [lang="en"] {
    font-family: 'Proxima Nova', 'Inter', 'Helvetica Neue', Arial, sans-serif;
}
/* keep Latin brand tokens (logo alt, email, phone, URLs) LTR where they appear */
[dir="rtl"] .ltr,
[dir="rtl"] [lang="en"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href^="tel:"] {
    direction: ltr;
    unicode-bidi: isolate;
}
/* phone/email rows should still sit on the correct side but render the value LTR */
[dir="rtl"] .contact-row__value[href^="tel:"],
[dir="rtl"] .contact-row__value[href^="mailto:"],
[dir="rtl"] .close-row__value[href^="tel:"],
[dir="rtl"] .close-row__value[href^="mailto:"],
[dir="rtl"] .map-detail__value a {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* ==========================================================================
   CHROME — header / footer
   ========================================================================== */
/* nav and actions naturally flip via flonx; ensure the logo sits at the start */
[dir="rtl"] .site-header__inner { /* grid/flex auto-mirrors; nothing needed */ }

/* ==========================================================================
   SCENES — reveal transforms + accent rules (scenes.css)
   The [data-rise] travel directions must mirror: a "left" entrance should come
   from the right in RTL, and vice-versa.
   ========================================================================== */
[dir="rtl"] [data-rise="left"]  { transform: translateX(140px) scale(0.94); }
[dir="rtl"] [data-rise="right"] { transform: translateX(-140px) scale(0.94); }
[dir="rtl"] .scene.in [data-rise="left"],
[dir="rtl"] .scene.in [data-rise="right"] { transform: none; }

/* headline accent slams in from the LEFT in RTL (mirror of the LTR right) */
[dir="rtl"] [data-rise="head"] .accent { transform: translateX(-60px) scale(1.08); }
[dir="rtl"] .scene.in [data-rise="head"] .accent { transform: none; }

/* pull-quote wipe mirrors */
[dir="rtl"] [data-rise="quote"] {
    transform: translateX(80px);
    clip-path: inset(0 0 0 100%);
}
[dir="rtl"] .scene.in [data-rise="quote"] { transform: none; clip-path: inset(0 0 0 0); }

/* value cards slam in from the LEFT in RTL */
[dir="rtl"] .value-card[data-rise] { transform: translateX(-110px) scale(0.95); }
[dir="rtl"] .scene.in .value-card[data-rise] { transform: none; }

/* scene-index label nudge mirrors */
[dir="rtl"] .scene-index__label { transform: translateX(-20px); }
[dir="rtl"] .scene.in .scene-index__label { transform: none; }

/* scene-index rule grows from the right */
[dir="rtl"] .scene-index__rule { transform-origin: right; }

/* the intent pull-quote: quotation mark + padding flip */
[dir="rtl"] .intent-quote::before { left: auto; right: 18px; }
[dir="rtl"] .intent-quote p { padding-left: 0; padding-right: 30px; }

/* value-card cerulean rule moves to the right edge */
[dir="rtl"] .value-card::before { left: auto; right: 0; }
[dir="rtl"] .value-card { padding-left: 0; padding-right: 24px; }

/* svc-cell top seam origin (home services switcher cells, if used) */
[dir="rtl"] .svc-cell::before { transform-origin: right; }

/* ==========================================================================
   HERO (hero.css) — status row + text sit naturally; scatter is symmetric
   ========================================================================== */
/* nothing structural needed — tiles are absolute-positioned randomly */

/* ==========================================================================
   ABOUT PAGE (about-page.css)
   ========================================================================== */
/* hero status spans full width already via left/right — make logical */
[dir="rtl"] .about-hero__status { /* left+right both set; fine */ }

/* about facts: cerulean rule -> right edge, padding flip */
[dir="rtl"] .about-fact::before { left: auto; right: 0; }
[dir="rtl"] .about-fact { padding-left: 0; padding-right: 24px; }

/* GM portrait corner seam -> bottom-right */
[dir="rtl"] .gm__portrait::after { left: auto; right: 0; }
/* GM quote rule -> right, padding flip */
[dir="rtl"] .gm__quote { padding-left: 0; padding-right: 26px; }
[dir="rtl"] .gm__quote::before { left: auto; right: 0; }

/* director index badge -> bottom-right; hover seam -> top-left */
[dir="rtl"] .dir__index { left: auto; right: 0; }
[dir="rtl"] .dir__portrait::after { right: auto; left: 0; }

/* directions / link arrows flip horizontally */
[dir="rtl"] .tej-logo-card__link svg,
[dir="rtl"] .map-directions svg,
[dir="rtl"] .close-cta svg,
[dir="rtl"] .form-submit svg,
[dir="rtl"] .ico--arrow,
[dir="rtl"] .svc-close__cta svg { transform: scaleX(-1); }
[dir="rtl"] .tej-logo-card__link:hover svg,
[dir="rtl"] .map-directions:hover svg { transform: scaleX(-1); }

/* ==========================================================================
   CONTACT PAGE (contact-page.css)
   ========================================================================== */
/* status banner accent bar -> right edge */
[dir="rtl"] .form-status { border-left: 0; border-right: 3px solid; }
[dir="rtl"] .form-status--ok  { border-right-color: var(--cerulean); }
[dir="rtl"] .form-status--err { border-right-color: #b42828; }

/* honeypot stays off-screen on the far side regardless of dir */
[dir="rtl"] .form-hp { left: auto !important; right: -9999px !important; }

/* map-detail dividers + labels already logical; arrow handled above */

/* ==========================================================================
   SERVICE PAGES (service-page.css)
   Breadcrumb, head band, scope/metric cells. Most use logical props; flip the
   directional accents.
   ========================================================================== */
[dir="rtl"] .svc-scope-cell::before,
[dir="rtl"] .svc-metric::before { left: auto; right: 0; transform-origin: right; }
[dir="rtl"] .svc-close__line { /* dots on periods — symmetric */ }

/* breadcrumb separators: the "/" reads fine; just ensure flow is rtl */
[dir="rtl"] .svc-breadcrumb { /* inline flow auto-mirrors */ }

/* ==========================================================================
   GENERIC — arrows in buttons and links across the site
   ========================================================================== */
[dir="rtl"] .btn .ico--arrow { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .ico--arrow { transform: scaleX(-1); }

/* numerals: keep Western Arabic numerals (0-9) as-is — they're standard in
   Saudi business contexts. No override needed. */