/* ============================================
   NAVETTA — RTL OVERRIDES (Arabic)
   Uses CSS logical properties where possible
   ============================================ */

[dir="rtl"] {
    direction: rtl;
    text-align: right;
}

/* ========================================
   NAVBAR RTL
   ======================================== */
[dir="rtl"] .nav-container {
    flex-direction: row-reverse;
}

[dir="rtl"] .nav-menu {
    flex-direction: row-reverse;
}

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

[dir="rtl"] .nav-dropdown-menu {
    left: auto;
    right: 50%;
    transform: translateX(50%) translateY(-10px);
}

[dir="rtl"] .nav-dropdown:hover .nav-dropdown-menu {
    transform: translateX(50%) translateY(0);
}

[dir="rtl"] .dropdown-item {
    flex-direction: row-reverse;
    text-align: right;
}

/* ========================================
   LAYOUT RTL
   ======================================== */
[dir="rtl"] .section-header {
    text-align: right;
}

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

[dir="rtl"] .section-tag {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ========================================
   BUTTONS RTL
   ======================================== */
[dir="rtl"] .btn {
    flex-direction: row-reverse;
}

[dir="rtl"] .btn__arrow {
    transform: scaleX(-1);
}

[dir="rtl"] .btn--primary:hover .btn__arrow,
[dir="rtl"] .btn--secondary:hover .btn__arrow {
    transform: scaleX(-1) translateX(4px);
}

/* ========================================
   CARDS RTL
   ======================================== */
[dir="rtl"] .product-card__link {
    flex-direction: row-reverse;
}

[dir="rtl"] .product-card__link svg {
    transform: scaleX(-1);
}

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

/* ========================================
   HERO RTL
   ======================================== */
[dir="rtl"] .hero-content {
    text-align: center; /* hero stays centered */
}

[dir="rtl"] .hero-cta {
    flex-direction: row-reverse;
}

/* ========================================
   HERO TYPO RTL (typography-heavy home)
   ======================================== */
[dir="rtl"] .hero-typo__cta {
    justify-content: flex-start;
}

[dir="rtl"] .statement__kicker,
[dir="rtl"] .capabilities__kicker {
    direction: ltr;
    unicode-bidi: isolate;
}

[dir="rtl"] .capability__name {
    direction: ltr;
    unicode-bidi: isolate;
}

/* ========================================
   GRIDS RTL
   ======================================== */
[dir="rtl"] .two-col {
    direction: rtl;
}

[dir="rtl"] .two-col--reverse {
    direction: ltr;
}

/* ========================================
   FOOTER RTL
   ======================================== */
[dir="rtl"] .footer-grid {
    direction: rtl;
}

[dir="rtl"] .footer-bottom {
    flex-direction: row-reverse;
}

[dir="rtl"] .footer-social {
    flex-direction: row-reverse;
}

/* ========================================
   COMPARISON TABLE RTL
   ======================================== */
[dir="rtl"] .comparison-table th,
[dir="rtl"] .comparison-table td {
    text-align: right;
}

/* ========================================
   LISTS RTL
   ======================================== */
[dir="rtl"] .feature-list li {
    padding-left: 0;
    padding-right: var(--space-8);
}

[dir="rtl"] .feature-list li::before {
    left: auto;
    right: 0;
}

/* ========================================
   MOBILE RTL
   ======================================== */
@media (max-width: 768px) {
    [dir="rtl"] .nav-menu {
        transform: translateX(-100%);
    }

    [dir="rtl"] .nav-menu.active {
        transform: translateX(0);
    }

    [dir="rtl"] .nav-container {
        flex-direction: row;
    }
}

/* ========================================
   BRAND NAME — ALWAYS LTR
   ======================================== */
[dir="rtl"] .brand-name,
[dir="rtl"] .logo-text,
[dir="rtl"] .footer-logo,
[dir="rtl"] .product-card__name {
    direction: ltr;
    unicode-bidi: isolate;
    font-family: var(--font-brand) !important;
}