/* ============================================================================
   GLOBAL OVERSEAS — RTL OVERRIDES  v3.0 "MOLTEN STEEL"
   Loaded only on Arabic pages, after molten.css.
   The v3 system is authored with CSS logical properties (inset-inline, margin-
   inline, border-inline), so most of the layout mirrors automatically. This
   file covers the remaining physical values, Arabic typography and the
   direction-sensitive decoration.
   ========================================================================= */

/* --------------------------------------------------- 1. TYPOGRAPHY / RTL */
[dir="rtl"] body {
    font-family: "Noto Sans Arabic", "Segoe UI", Tahoma, "Inter", sans-serif;
    line-height: 1.95;
}

[dir="rtl"] .display,
[dir="rtl"] .hero-title,
[dir="rtl"] .page-head h1,
[dir="rtl"] .pd-info h1,
[dir="rtl"] .cta h2,
[dir="rtl"] .card h3,
[dir="rtl"] .answer h2,
[dir="rtl"] .answer h3,
[dir="rtl"] .qa-q,
[dir="rtl"] .step h3,
[dir="rtl"] .rail-item h3,
[dir="rtl"] .prose h2,
[dir="rtl"] .prose h3 {
    letter-spacing: 0;
    line-height: 1.38;
}

[dir="rtl"] .hero-title { line-height: 1.24; }

[dir="rtl"] .kicker,
[dir="rtl"] .label,
[dir="rtl"] .btn,
[dir="rtl"] .chip,
[dir="rtl"] .stat span,
[dir="rtl"] .hero-strip span,
[dir="rtl"] .card-tag,
[dir="rtl"] .answer-tag,
[dir="rtl"] .pd-chips span,
[dir="rtl"] .page-meta span,
[dir="rtl"] .footer h2,
[dir="rtl"] .footer-badges span,
[dir="rtl"] .field label,
[dir="rtl"] table.specs thead th,
[dir="rtl"] .pd-table th,
[dir="rtl"] .figure-cap,
[dir="rtl"] .loader-steps,
[dir="rtl"] .loader-sub,
[dir="rtl"] .loader-status,
[dir="rtl"] .marquee-track span {
    letter-spacing: 0;
    text-transform: none;
}

[dir="rtl"] .lede,
[dir="rtl"] .prose p,
[dir="rtl"] .card p,
[dir="rtl"] .answer p,
[dir="rtl"] .qa-a,
[dir="rtl"] .step p,
[dir="rtl"] .rail-item p,
[dir="rtl"] .hero-lede {
    line-height: 2.05;
}

/* ------------------------------------------------------- 2. FLEX MIRRORING */
[dir="rtl"] .topbar-inner,
[dir="rtl"] .topbar ul,
[dir="rtl"] .hero-cta,
[dir="rtl"] .pd-actions,
[dir="rtl"] .footer-bottom,
[dir="rtl"] .cta-inner,
[dir="rtl"] .crumbs ol,
[dir="rtl"] .page-meta,
[dir="rtl"] .pd-chips,
[dir="rtl"] .filter-row,
[dir="rtl"] .loader-meter,
[dir="rtl"] .loader-steps {
    flex-direction: row-reverse;
}

[dir="rtl"] .pd-info,
[dir="rtl"] .card-body,
[dir="rtl"] .answer,
[dir="rtl"] .step,
[dir="rtl"] .rail-item,
[dir="rtl"] .prose,
[dir="rtl"] .qa-q,
[dir="rtl"] .head,
[dir="rtl"] .page-head,
[dir="rtl"] .figure-cap {
    text-align: right;
}

[dir="rtl"] .head-center { text-align: center; }

/* ------------------------------------------------------ 3. DECOR MIRRORING */
[dir="rtl"] .kicker::before {
    background: var(--amber-400);
}
[dir="rtl"] .head-center .kicker::after { content: ""; }

[dir="rtl"] .rule::before {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

[dir="rtl"] .menu a::after { transform-origin: right; }

[dir="rtl"] .btn .ico { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .ico { transform: scaleX(-1) translateX(5px); }

[dir="rtl"] .arrow-link { flex-direction: row-reverse; }
[dir="rtl"] .arrow-link span { display: inline-block; transform: scaleX(-1); }

[dir="rtl"] .stat::before { transform-origin: right; }

[dir="rtl"] .card::before {
    top: 8px;
    inset-inline-start: auto;
    inset-inline-end: 8px;
    border-inline-end: 1px solid var(--amber-400);
    border-inline-start: 0;
    border-bottom: 0;
}

[dir="rtl"] .step::before { inset-inline-start: auto; inset-inline-end: 0; }
[dir="rtl"] .step::after {
    inset-inline-start: auto;
    inset-inline-end: 3.4rem;
    background: linear-gradient(270deg, var(--amber-400), transparent);
}

[dir="rtl"] .rail::before { inset-inline-start: auto; inset-inline-end: 11px; }
[dir="rtl"] .rail-item { padding: 0 3.1rem 2.3rem 0; }
[dir="rtl"] .rail-item::before { inset-inline-start: auto; inset-inline-end: 4px; }

[dir="rtl"] .prose li { padding-inline-start: 0; padding-inline-end: 1.7rem; }
[dir="rtl"] .prose li::before { inset-inline-start: auto; inset-inline-end: 0; }

[dir="rtl"] .footer-links a:hover { padding-inline-start: 0; padding-inline-end: .45rem; }

[dir="rtl"] .hero-media::after {
    background:
        linear-gradient(264deg, rgba(245,246,248,.97) 0%, rgba(245,246,248,.9) 34%, rgba(245,246,248,.55) 60%, rgba(245,246,248,.92) 100%),
        radial-gradient(900px 560px at 16% 26%, rgba(226,46,43,.12), transparent 62%);
}

[dir="rtl"] .figure::after {
    background: linear-gradient(210deg, rgba(226,46,43,.08), transparent 55%);
}

[dir="rtl"] .cta::before {
    background: radial-gradient(760px 400px at 14% 50%, rgba(226,46,43,.38), transparent 64%);
}

/* --------------------------------------------------------- 4. COMPONENTS */
[dir="rtl"] .sub {
    inset-inline-start: auto;
    inset-inline-end: -.4rem;
}

[dir="rtl"] table.specs th,
[dir="rtl"] table.specs td,
[dir="rtl"] .pd-table th,
[dir="rtl"] .pd-table td {
    text-align: right;
}

[dir="rtl"] .field select {
    background-position: left 1.05rem center;
    padding-inline-end: 1.05rem;
    padding-inline-start: 2.5rem;
}

[dir="rtl"] .burger span:nth-child(2) { inset-inline-start: auto; inset-inline-end: 11px; }

[dir="rtl"] .hero-eyebrow { padding: .5rem .65rem .5rem 1.1rem; }

[dir="rtl"] .qa-q::after { margin-inline-start: 0; }

/* numbers stay LTR inside RTL text */
[dir="rtl"] .stat b,
[dir="rtl"] .hero-strip b,
[dir="rtl"] .pd-table td,
[dir="rtl"] table.specs tbody td,
[dir="rtl"] .label,
[dir="rtl"] .loader-pct,
[dir="rtl"] .rail-year {
    direction: ltr;
    unicode-bidi: embed;
}

[dir="rtl"] .stat b,
[dir="rtl"] .hero-strip b { text-align: right; }

[dir="rtl"] .marquee-track { animation-direction: reverse; }

/* ------------------------------------------------ 5. SCROLL / MOTION */
/* Hidden state only: a revealed element (.in) must return to transform: none,
   otherwise Arabic pages keep a 38px shift that overflows phone screens. */
[dir="rtl"] [data-fx="left"]:not(.in) { transform: translateX(38px); }
[dir="rtl"] [data-fx="right"]:not(.in) { transform: translateX(-38px); }

@media (max-width: 1240px) {
    [dir="rtl"] .menu { text-align: right; }
}