/* ==========================================================================
   rtl.css - Arabic (RTL) shared overrides - Seven Dimension site
   --------------------------------------------------------------------------
   Scope: load ONLY on Arabic pages, AFTER each page's own CSS:
     <link rel="stylesheet" href="css/<Page>.css">
     <link rel="stylesheet" href="css/rtl.css">
   Every rule is scoped under html[dir="rtl"] except the .ltr-nums helper,
   which is an opt-in utility for mixed Latin/number runs in AR markup.
   Never put page-specific or layout-breaking rules here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Font overrides (Cairo display + IBM Plex Sans Arabic body)
   -------------------------------------------------------------------------- */
html[dir="rtl"] body,
html[dir="rtl"] .font-sans {
    font-family: 'IBM Plex Sans Arabic', 'Inter', ui-sans-serif, sans-serif;
}

html[dir="rtl"] .font-display {
    font-family: 'Cairo', 'Syne', sans-serif;
}

html[dir="rtl"] .font-luxury {
    font-family: 'Cairo', 'Cinzel', serif;
}

/* Footer wordmark "7 Dimensions" is Latin text - Cairo renders it much
   smaller/narrower than the EN pages' Syne. Keep the EN look on AR pages. */
html[dir="rtl"] .footer-title {
    font-family: 'Syne', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Letter-spacing neutralization (critical - Arabic letters must join)
   -------------------------------------------------------------------------- */
/* Tailwind tracking utilities used in markup (tracking-[0.2em], tracking-widest, ...) */
html[dir="rtl"] [class*="tracking-"] {
    letter-spacing: 0 !important;
}

/* Hard-coded letter-spacing found in the 21 page CSS files:
   .loader-text (preloader, 0.3em) and #cursor-text (gallery cursor, 0.2em) */
html[dir="rtl"] .loader-text,
html[dir="rtl"] #cursor-text {
    letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   3. Directional fixes
   -------------------------------------------------------------------------- */
/* Used on the 21 EN pages (grep-verified): footer bottom bar uses
   "text-center sm:text-left" and section headings use "text-center md:text-left".
   Mirror both to right-alignment in RTL. No bare .text-left or
   .lg:text-left is used anywhere in scope. */
html[dir="rtl"] .sm\:text-left {
    text-align: right;
}

html[dir="rtl"] .md\:text-left {
    text-align: right;
}

/* Verified direction-neutral, intentionally NOT flipped:
   - .bg-number (projects page): centered via left:50% + translate(-50%,-50%),
     decorative only, no overlap risk in RTL.
   - #cursor-dot / #cursor-outline / .cur-glow: fixed + centered
     (top:0 left:0 + translate(-50%,-50%)), positioned by JS mousemove.
   - Marquee: no marquee/@keyframes translateX exists in any in-scope
     page CSS (index.html has one but is out of scope). */

/* --------------------------------------------------------------------------
   4. Mixed-direction safety
   -------------------------------------------------------------------------- */
/* Animated counters and big latin digits must keep LTR digit order in RTL flow */
html[dir="rtl"] .counter,
html[dir="rtl"] .bg-number {
    direction: ltr;
    unicode-bidi: isolate;
}

/* Generic helper for mixed Latin/number runs in AR markup, e.g.
   <span class="ltr-nums">+20k</span> */
.ltr-nums {
    direction: ltr;
    unicode-bidi: isolate;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   5. SplitType word-reveal support
   -------------------------------------------------------------------------- */
/* On AR pages js/<Page>.js splits .split-text into .word instead of .char.
   Mirror of the page CSS ".split-text .char" hidden state so the GSAP
   reveal (.split-text .word) animates identically to the EN char reveal. */
html[dir="rtl"] .split-text .word {
    transform: translateY(100%) rotateX(-90deg);
    transform-origin: bottom center;
    opacity: 0;
}
/* Service-detail pages (Task S6 QA fix): their page CSS has NO .char hidden
   state and their JS reveals via gsap .from() - the natural state must stay
   visible. The mirror above assumed the case-study CSS-hidden + .to() system.
   .gs-reveal exists ONLY on service pages (verified across all 35 files). */
html[dir="rtl"] .gs-reveal .split-text .word {
    opacity: 1;
    transform: none;
}


/* --------------------------------------------------------------------------
   7. Preloader progress bar direction (added Task 3, projects-ar.html)
   -------------------------------------------------------------------------- */
/* Page markup hard-codes "top-0 left-0" on #loader-bar; mirror the fill
   anchor to the right edge for RTL reading direction. ID specificity beats
   the Tailwind left-0 utility; found on all 21 page markups. */
html[dir="rtl"] #loader-bar {
    left: auto;
    right: 0;
}

/* --------------------------------------------------------------------------
   8. Impact stats rail (case-study pages, added Task 4a TAM-ar.html)
   -------------------------------------------------------------------------- */
/* The "The Impact" counter grid hard-codes border-l + pl-8 md:pl-12 (a
   left-side rail). Identical markup on all case-study/brand pages (grep
   verified), so mirror the rail to the right side under RTL here instead of
   editing each AR page. Padding flips are compound-scoped to the rail
   (.border-l present) so unrelated .pl-8/.md:pl-12 uses are never touched.
   NOTE sayah-brand.html variant uses "pl-6 sm:pl-8 md:pl-12" - if its AR
   page hugs the wrong side, add .border-l.pl-6 / .border-l.sm\:pl-8 rules. */
html[dir="rtl"] .border-l {
    border-left-width: 0;
    border-right-width: 1px;
}

html[dir="rtl"] .border-l.pl-8 {
    padding-left: 0;
    padding-right: 2rem;
}

/* Service detail pages' Target-Audience grid uses "border-l ... pl-4"
   (1rem) instead of the case-study pl-8/pl-12 - mirror the same way. */
html[dir="rtl"] .border-l.pl-4 {
    padding-left: 0;
    padding-right: 1rem;
}

/* sayah-brand.html variant uses "pl-6 sm:pl-8 md:pl-12" (Task 8a): mirror the
   smaller paddings too. Order matters - the sm rule MUST precede the md block
   below so md:pl-12 still wins at >=768px (equal specificity, source order). */
html[dir="rtl"] .border-l.pl-6 {
    padding-left: 0;
    padding-right: 1.5rem;
}

@media (min-width: 640px) {
    html[dir="rtl"] .border-l.sm\:pl-8 {
        padding-left: 0;
        padding-right: 2rem;
    }
}

@media (min-width: 768px) {
    html[dir="rtl"] .border-l.md\:pl-12 {
        padding-left: 0;
        padding-right: 3rem;
    }
}

/* --------------------------------------------------------------------------
   9. Marquee drift direction (home page)
   -------------------------------------------------------------------------- */
/* css/index.css animates "@keyframes marquee" from translateX(0) to
   translateX(-50%) - a leftward drift that reads correctly in LTR, where the
   track is left-aligned. In RTL the flex track right-aligns (hidden overflow
   sits on the LEFT), so playing the same keyframes (or reversing them) slides
   the visible part out and leaves the band blank. Mirror the geometry instead:
   translate 0 -> +50% pulls the hidden left-side content into view with a
   rightward drift that matches RTL reading order. The track markup on the home
   pages duplicates its phrase list into two identical chunks, so +50% lands
   exactly on the copy boundary and the loop is seamless. */
@keyframes marquee-rtl {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(50%);
    }
}

html[dir="rtl"] .marquee-content {
    animation-name: marquee-rtl;
    animation-direction: normal;
}

/* --------------------------------------------------------------------------
   10. Hard-coded letter-spacing on the home + contact pages (Task H1)
   -------------------------------------------------------------------------- */
/* These live in page CSS, not in Tailwind tracking-* utilities, so the
   section 2 [class*="tracking-"] kill never reaches them and Arabic letters
   would stop joining. css/index.css: .client-label (.22em), .wcard-no
   (-.02em), .wcard-cat (.16em), .wcard-title (-.01em), .wcard-link (.04em). */
html[dir="rtl"] .client-label,
html[dir="rtl"] .wcard-no,
html[dir="rtl"] .wcard-cat,
html[dir="rtl"] .wcard-title,
html[dir="rtl"] .wcard-link {
    letter-spacing: 0 !important;
}

/* css/contact-us.css form fields hard-code letter-spacing: 0.1em */
html[dir="rtl"] .input-group input,
html[dir="rtl"] .input-group select,
html[dir="rtl"] .input-group textarea {
    letter-spacing: 0 !important;
}

/* --------------------------------------------------------------------------
   11. Directional transform origins (Task H1)
   -------------------------------------------------------------------------- */
/* Accent underlines that grow with scaleX must start from the reading edge:
   css/contact-us.css .input-group .line and css/index.css .reflect-card::after
   both hard-code "transform-origin: left" (both span width:100%, so only the
   origin needs mirroring). */
html[dir="rtl"] .input-group .line,
html[dir="rtl"] .reflect-card::after {
    transform-origin: right;
}

/* --------------------------------------------------------------------------
   12. Privacy page (privacy-ar.html)
   -------------------------------------------------------------------------- */
/* css/privacy.css pins .policy-body to 'Inter' + letter-spacing 0.02em:
   Inter has no Arabic glyphs (falls through to an unstyled fallback) and
   tracking breaks Arabic letter joining. Map to the AR body font and kill
   tracking (same approach as sections 2 and 10). */
html[dir="rtl"] .policy-body {
    font-family: 'IBM Plex Sans Arabic', 'Inter', ui-sans-serif, sans-serif;
    letter-spacing: 0 !important;
}

/* Preloader word renders via .loader-text, pinned by privacy.css to Syne
   (no Arabic glyphs). Section 2 already zeroes its letter-spacing. */
html[dir="rtl"] .loader-text {
    font-family: 'IBM Plex Sans Arabic', 'Inter', ui-sans-serif, sans-serif;
}

/* TOC active rail: privacy.css draws a LEFT border + growing padding-left on
   #toc .toc-link / .toc-link.active. Mirror rail to the right side for RTL
   reading direction. */
html[dir="rtl"] #toc .toc-link {
    border-left: 1px solid rgba(216, 164, 90, 0);
    border-right: 1px solid rgba(216, 164, 90, 0);
    padding-left: 0;
    padding-right: 0;
    transition: color 0.3s, padding-right 0.4s cubic-bezier(0.19, 1, 0.22, 1), border-right-color 0.4s ease;
}

html[dir="rtl"] #toc .toc-link.active {
    border-right-color: rgba(216, 164, 90, 0.8);
    padding-right: 14px;
}