/* Base styles overrides for RTL languages. 
   We apply a custom Arabic font for the document body and headers. */

[dir="rtl"] body {
    font-family: 'Readex Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

[dir="rtl"] .section-title,
[dir="rtl"] .hero-title,
[dir="rtl"] .location-hero-title,
[dir="rtl"] .location-cta-title,
[dir="rtl"] .nav-logo,
[dir="rtl"] .silo-card h3,
[dir="rtl"] .feature-card h3,
[dir="rtl"] .download-content h2,
[dir="rtl"] .prose-header h1,
[dir="rtl"] .prose h1,
[dir="rtl"] .prose h2,
[dir="rtl"] .prose h3,
[dir="rtl"] .prose h4,
[dir="rtl"] .prose thead th {
    font-family: 'Readex Pro', sans-serif;
}

/* Fix flex layout elements that were manually reversed. The `dir="rtl"` attribute already handles flex-direction naturally, so we must undo manual reversals. */

/* 1. Left/Right text alignment overrides */
[dir="rtl"] .silo-card,
[dir="rtl"] .feature-card,
[dir="rtl"] .faq-list,
[dir="rtl"] .prose thead th {
    text-align: right;
}

/* 2. Fix spacing on the "terminal" labels (e.g., ~/ The Problem) */
[dir="rtl"] .section-label::before {
    margin-right: 0;
    margin-left: 6px;
}

/* 3. Demo verdict flag margin */
[dir="rtl"] .demo-verdict .demo-flag {
    margin-right: 0;
    margin-left: 8px;
}

/* 4. Showcase alternating grids. 
   In LTR, .showcase-grid is LTR and .reverse uses direction:rtl to flip columns.
   In RTL, .showcase-grid is naturally RTL. To flip columns for .reverse in RTL, 
   we force direction:ltr on the container, but we must restore direction:rtl on its children. */
[dir="rtl"] .showcase-grid.reverse {
    direction: ltr;
}
[dir="rtl"] .showcase-grid.reverse > * {
    direction: rtl;
}

/* 5. Mobile navigation spacing overrides */
@media (max-width: 768px) {
    [dir="rtl"] .nav-links {
        margin-left: 12px;
        margin-right: auto;
    }
}

/* 6. Prose page list links (support/legal pages) */
[dir="rtl"] .prose-page-list span {
    margin-left: 0;
    margin-right: auto;
}

[dir="rtl"] .prose-page-list a::after {
    content: "←";
    margin-left: 0;
    margin-right: auto;
}