/**
 * RTL Override — Arabic Version (rtl.css)
 * ─────────────────────────────────────────
 * Imports Cairo font, sets RTL direction, mirrors all directional properties.
 * Load AFTER main.css in index-ar.html.
 * lang-switcher class is defined in main.css so both pages share it.
 */

@import url('https://fonts.googleapis.com/css2?family=Cairo:ital,wght@0,300;0,400;0,600;0,700;0,800;0,900;1,400&display=swap');

/* ═══════════════════════════════════════════
   1. BASE DIRECTION & FONT
   ═══════════════════════════════════════════ */
html[dir="rtl"] {
    direction: rtl;
}

[dir="rtl"] body,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5,
[dir="rtl"] p,
[dir="rtl"] span,
[dir="rtl"] a,
[dir="rtl"] li,
[dir="rtl"] td,
[dir="rtl"] th,
[dir="rtl"] button,
[dir="rtl"] .btn,
[dir="rtl"] .nav-link,
[dir="rtl"] .section-label,
[dir="rtl"] .stat-label,
[dir="rtl"] .stat-number,
[dir="rtl"] .client-badge,
[dir="rtl"] .footer-desc {
    font-family: 'Cairo', system-ui, sans-serif;
}

[dir="rtl"] body {
    font-size: 17px; /* Arabic reads slightly larger */
}

/* Headings: no letter-spacing in Arabic */
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3,
[dir="rtl"] h4,
[dir="rtl"] h5 {
    letter-spacing: 0;
    line-height: 1.25; /* Arabic headings need a bit more leading */
}

/* Body text line height — looser for Arabic */
[dir="rtl"] p {
    line-height: 1.85;
}

/* ═══════════════════════════════════════════
   2. HEADER / NAV
   ═══════════════════════════════════════════ */

/* Active underline anchors to the right in RTL */
[dir="rtl"] .nav-link::after {
    left: auto;
    right: 0;
}

/* ── Mobile drawer: slides in from LEFT in RTL ── */
@media (max-width: 992px) {
    [dir="rtl"] .nav-links {
        right: auto;
        left: -110%;
        align-items: flex-end;            /* Text aligns right inside drawer */
        transition: left 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    }

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

    [dir="rtl"] .nav-links .nav-link {
        font-size: 1.2rem;
    }
}

/* ═══════════════════════════════════════════
   3. HERO
   ═══════════════════════════════════════════ */
[dir="rtl"] .hero-content {
    text-align: right;
}

/* Tagline: handled correctly by native RTL flow */

[dir="rtl"] .hero-desc {
    margin-right: 0;
    margin-left: auto; /* Allow it to flow from right */
}



/* Scroll indicator stays centred — no change needed */

/* ═══════════════════════════════════════════
   4. BUTTONS
   ═══════════════════════════════════════════ */


/* Arrow icon faces left (mirrored) in Arabic */
[dir="rtl"] .btn .btn-icon {
    transform: scaleX(-1);
}

[dir="rtl"] .btn:hover .btn-icon {
    transform: scaleX(-1) rotate(45deg);
}

/* ═══════════════════════════════════════════
   5. SECTION HEADERS
   ═══════════════════════════════════════════ */
[dir="rtl"] .section-header {
    text-align: right;
}



[dir="rtl"] .section-desc {
    margin-right: 0;
    margin-left: auto;
}

/* ═══════════════════════════════════════════
   6. CARDS
   ═══════════════════════════════════════════ */
[dir="rtl"] .card {
    text-align: right;
}

[dir="rtl"] .card h3,
[dir="rtl"] .card h4 {
    text-align: right;
}

/* ═══════════════════════════════════════════
   7. STATS BAR
   ═══════════════════════════════════════════ */

/* Flip the separator borders */
[dir="rtl"] .stats-grid {
    direction: rtl;
}

[dir="rtl"] .stat-item {
    border-right: 1px solid rgba(255,255,255,0.1);
    border-left: none;
}

[dir="rtl"] .stat-item:first-child {
    border-right: none;
}

@media (max-width: 768px) {
    [dir="rtl"] .stat-item:nth-child(3) {
        border-right: none;
        border-left: 1px solid rgba(255,255,255,0.1);
    }
}

/* ═══════════════════════════════════════════
   8. SPLIT LAYOUT (About section)
   ═══════════════════════════════════════════ */
[dir="rtl"] .split-layout {
    direction: rtl;
}

/* ═══════════════════════════════════════════
   9. INNOVATION
   ═══════════════════════════════════════════ */

/* Blockquote: border on RIGHT in RTL */
[dir="rtl"] .innovation-quote {
    border-left: none;
    border-right: 4px solid var(--accent-gold);
    border-radius: 12px 0 0 12px;
    text-align: right;
}

/* Pillar cards: accent border on RIGHT */
[dir="rtl"] .pillar-card {
    border-left: none;
    border-right: 5px solid var(--accent-gold);
    text-align: right;
}

/* ═══════════════════════════════════════════
   10. LEADERSHIP TABLE
   ═══════════════════════════════════════════ */
[dir="rtl"] .org-table {
    direction: rtl;
}

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

/* ═══════════════════════════════════════════
   11. CLIENTS & PARTNERS
   ═══════════════════════════════════════════ */
[dir="rtl"] .clients-grid {
    direction: rtl;
}

[dir="rtl"] .partner-card {
    text-align: right;
}

/* ═══════════════════════════════════════════
   12. FOOTER
   ═══════════════════════════════════════════ */
[dir="rtl"] .footer-grid {
    direction: rtl;
    text-align: right;
}

[dir="rtl"] .footer-col {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Reverse the 3-col order so logo appears on the right */
[dir="rtl"] .footer-grid > *:first-child {
    order: 3;
}
[dir="rtl"] .footer-grid > *:last-child {
    order: 1;
}

/* Contact items: icon on RIGHT naturally in RTL */
[dir="rtl"] .footer-contact-item i {
    margin-top: 3px;
}

/* Footer quick-links align right */
[dir="rtl"] .footer-links {
    align-items: flex-start;
    text-align: right;
}

[dir="rtl"] .footer-links a:hover {
    padding-left: 0;
    padding-right: 6px;
}

/* Footer bottom bar */

/* ═══════════════════════════════════════════
   13. BACK TO TOP — mirror to left side
   ═══════════════════════════════════════════ */
[dir="rtl"] .back-to-top {
    right: auto;
    left: 2rem;
}

/* ═══════════════════════════════════════════
   14. MOBILE STATS RESPONSIVE FIX
   ═══════════════════════════════════════════ */
@media (max-width: 768px) {
    [dir="rtl"] .stat-item:nth-child(2) {
        border-right: none;
    }
    [dir="rtl"] .stat-item:nth-child(3) {
        border-right: 1px solid rgba(255,255,255,0.1);
        border-left: none;
    }
}