/* =========================================================
   rtl.css — Arabic/RTL-only overrides
   Most layout uses logical properties; this handles the edge cases.
   ========================================================= */

html[dir="rtl"] body {
    font-family: 'IBM Plex Sans Arabic', 'Inter', system-ui, sans-serif;
}

html[dir="rtl"] .logo { letter-spacing: 0; }

/* Highlight rotation mirrors for Arabic */
html[dir="rtl"] .highlight::before {
    transform: rotate(1deg);
    left: auto;
    right: -2%;
}

/* Mobile nav slide direction */
html[dir="rtl"] .portal-sidebar { transform: translateX(100%); }
html[dir="rtl"] .portal-sidebar.open { transform: translateX(0); }

/* Scroll hint stays centered */
html[dir="rtl"] .hero-scroll {
    inset-inline-start: 50%;
}

/* Nav hamburger alignment */
html[dir="rtl"] .nav-toggle span { transform-origin: right; }

/* Preserve numeric formatting for amounts */
html[dir="rtl"] .kpi-card .value,
html[dir="rtl"] .stat-block .stat-number {
    direction: ltr;
    unicode-bidi: embed;
    display: inline-block;
}

/* Timeline dot side (logical props mostly handle it, but make sure) */
html[dir="rtl"] .timeline { padding-inline-start: 28px; padding-right: 28px; padding-left: 0; }
html[dir="rtl"] .timeline::before { right: 10px; left: auto; }
html[dir="rtl"] .timeline-item::before { right: -24px; left: auto; }

/* Marquee direction handled in components.css with animation-direction */

/* Arabic headings breathe a bit more */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3 {
    line-height: 1.35;
}