/* =====================================================
   Right-to-left overrides
   Loaded only on RTL locales, after styles.css.

   Flexbox and grid mirror themselves under dir="rtl". What does not mirror is
   anything positioned with a physical left/right value, any transform-origin,
   and any icon that encodes direction. Those are the 32 declarations audited
   out of styles.css and corrected below.

   Arabic also needs different typography: the script has taller ascenders and
   deeper descenders than Latin, so it needs more line-height, and Space Grotesk
   has no Arabic coverage at all — without a real Arabic family the browser
   falls back to a system font and the page loses its identity.
   ===================================================== */

/* -----------------------------------------------------
   Typography
   ----------------------------------------------------- */
[dir="rtl"] {
    --font-primary: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', -apple-system, sans-serif;
    --font-display: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;
}

[dir="rtl"] body {
    line-height: 1.9;
    letter-spacing: 0;
}

/* Latin display faces tighten their tracking; Arabic must never be tracked,
   because negative letter-spacing breaks the joins between letters. */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] .hero-title,
[dir="rtl"] .section-title,
[dir="rtl"] .article-h1,
[dir="rtl"] .nav-logo-name {
    letter-spacing: 0 !important;
    line-height: 1.5;
}

[dir="rtl"] .hero-title { line-height: 1.35; }
[dir="rtl"] .section-tag,
[dir="rtl"] .work-sector,
[dir="rtl"] .process-step,
[dir="rtl"] .scroll-indicator,
[dir="rtl"] .nav-logo-sub,
[dir="rtl"] .pricing-badge,
[dir="rtl"] .work-detail dt,
[dir="rtl"] .fact-table dt {
    letter-spacing: 0 !important;
}

/* The wordmark stays Latin — it is a brand asset, not translated copy. */
[dir="rtl"] .nav-logo-text {
    font-family: 'Space Grotesk', sans-serif;
    direction: ltr;
}

/* -----------------------------------------------------
   Positioned elements
   ----------------------------------------------------- */
[dir="rtl"] .skip-link { left: auto; right: 16px; }

[dir="rtl"] .nav-link::after { left: auto; right: 0; }

/* Off-canvas menu slides in from the left in RTL */
@media (max-width: 900px) {
    [dir="rtl"] .nav-menu {
        right: auto;
        left: -100%;
        border-left: none;
        border-right: 1px solid var(--border);
        transition: left var(--transition-normal), visibility var(--transition-normal);
    }
    [dir="rtl"] .nav-menu.active { right: auto; left: 0; }
    [dir="rtl"] .lang-switch { margin-left: 14px; margin-right: auto; }
}

/* Background glows swap corners so the composition stays balanced */
[dir="rtl"] .hero-bg::before { left: auto; right: -4%; }
[dir="rtl"] .hero-bg::after { right: auto; left: -8%; }

/* Top accent bars must grow from the leading edge, which is now the right */
[dir="rtl"] .service-card::after,
[dir="rtl"] .work-card::after { transform-origin: right; }

[dir="rtl"] .pricing-badge { right: auto; left: 18px; }

[dir="rtl"] .process-strip li { padding-left: 0; padding-right: 16px; }
[dir="rtl"] .process-strip li::before { left: auto; right: 0; }

[dir="rtl"] .label-optional { margin-left: 0; margin-right: 6px; }

/* .footer-legal needs no override — it uses text-align: start, which already
   resolves to the right in Arabic. */

[dir="rtl"] .legal-content ul,
[dir="rtl"] .article-list { padding-left: 0; padding-right: 22px; }

[dir="rtl"] .tech-category::before { left: auto; right: 0; border-radius: 0 0 0 12px; }

/* -----------------------------------------------------
   Direction-encoding icons
   Arrows point at the reading direction, so they flip.
   ----------------------------------------------------- */
[dir="rtl"] .btn-icon,
[dir="rtl"] .card-link svg,
[dir="rtl"] .breadcrumb svg {
    transform: scaleX(-1);
}

[dir="rtl"] .btn:hover .btn-icon { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .card-link:hover svg { transform: scaleX(-1) translateX(4px); }

/* The paper-plane send icon and the external-link icon read correctly either
   way round; flipping them makes them look broken. */
[dir="rtl"] .contact-form .btn-icon,
[dir="rtl"] .card-link-external svg {
    transform: none;
}
[dir="rtl"] .card-link-external:hover svg { transform: translate(-2px, -2px); }

/* -----------------------------------------------------
   Scroll-reveal directions
   fade-left and fade-right are physical, so they invert.
   ----------------------------------------------------- */
[dir="rtl"].js [data-aos="fade-left"] { transform: translateX(-30px); }
[dir="rtl"].js [data-aos="fade-right"] { transform: translateX(30px); }

/* The reset that ends the animation MUST be repeated here.
   styles.css clears the offset with `.js [data-aos="fade-right"].aos-animate`,
   which is specificity (0,3,0) — identical to the two rules above, and this
   file loads later, so the starting offset was winning and never cleared. The
   element finished animating and stayed 30px out of place: in Arabic that
   pushed the start of every line in the About section off the right edge of
   the screen, and knocked the contact section off centre because its two
   halves were displaced in opposite directions. */
[dir="rtl"].js [data-aos="fade-left"].aos-animate,
[dir="rtl"].js [data-aos="fade-right"].aos-animate { transform: translate(0, 0); }

/* And the same single-column exception as styles.css. It has to be repeated
   for the same reason as above: the two rules directly overhead outrank the
   unprefixed mobile rule, so without this the sideways slide — and the
   overflow it causes — would come back on Arabic phones only. */
@media (max-width: 1024px) {
    [dir="rtl"].js [data-aos="fade-left"],
    [dir="rtl"].js [data-aos="fade-right"] { transform: translateY(30px); }
}

/* -----------------------------------------------------
   Numerals, dates and code stay left-to-right
   An Arabic sentence containing a price, a phone number or a stack name must
   render that fragment LTR or the digits reorder and become wrong.
   ----------------------------------------------------- */
[dir="rtl"] .pricing-price,
[dir="rtl"] .work-stack,
[dir="rtl"] .service-features,
[dir="rtl"] .info-content a[href^="mailto"],
[dir="rtl"] .info-content a[href*="wa.me"],
[dir="rtl"] address,
[dir="rtl"] code,
[dir="rtl"] .lang-switch {
    direction: ltr;
    text-align: right;
}

[dir="rtl"] .work-stack,
[dir="rtl"] .service-features,
[dir="rtl"] .lang-switch ul {
    justify-content: flex-end;
}

[dir="rtl"] .service-features li,
[dir="rtl"] .pricing-features li {
    flex-direction: row-reverse;
    text-align: right;
}

/* Form fields hold email addresses and phone numbers */
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"] {
    direction: ltr;
    text-align: right;
}

/* -----------------------------------------------------
   Alignment
   ----------------------------------------------------- */
[dir="rtl"] .article,
[dir="rtl"] .breadcrumb,
[dir="rtl"] .article-lede,
[dir="rtl"] .faq-a { text-align: right; }

[dir="rtl"] .fact-table > div { grid-template-columns: 150px 1fr; }

@media (max-width: 560px) {
    [dir="rtl"] .fact-table > div { grid-template-columns: 1fr; }
}