/* ============================================================
   RTL OVERRIDES — Only applied when [dir="rtl"]
   Loaded by ALL Arabic pages.
   ============================================================ */

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

/* ===== Nav — RTL: Logo RIGHT, CTA LEFT =====
   In RTL flex, lower order = RIGHT side (flex reversed).
   Desired visual (right → left): [brand] [links] [cta] [calc] [hamburger]
   So orders: brand=1, links=2, cta=3, calc=4, hamburger=5
*/
html[dir="rtl"] .nav {
    direction: rtl;
}
@media (min-width: 1025px) {
html[dir="rtl"] .nav-inner {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 14px 32px !important;
}
}
/* Desktop-only RTL nav overrides. Wrapped in a min-width media
   query so they do NOT override the base CSS mobile rules that hide
   .nav-links / .nav-cta and show .nav-hamburger on phones. */
@media (min-width: 1025px) {
html[dir="rtl"] .brand {
    order: 1 !important;
    margin-right: 0 !important;
    margin-left: 48px !important;
}
html[dir="rtl"] .nav-links {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    gap: 32px !important;
}
html[dir="rtl"] .nav-cta {
    order: 3 !important;
    margin-left: 0 !important;
    margin-right: 24px !important;
    display: inline-flex !important;
}
html[dir="rtl"] .nav-calc-btn {
    order: 4 !important;
    margin-left: 0 !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}
html[dir="rtl"] .nav-hamburger {
    order: 5 !important;
}
html[dir="rtl"] .nav-links a {
    padding: 8px 8px !important;
}
}
html[dir="rtl"] .nav-projects-item .nav-dropdown {
    text-align: right !important;
    left: auto !important;
    right: 0 !important;
    transform: translateX(0) translateY(8px) !important;
}
html[dir="rtl"] .nav-projects-item:has(.nav-projects-link:hover) .nav-dropdown,
html[dir="rtl"] .nav-projects-item:has(.nav-dropdown:hover) .nav-dropdown,
html[dir="rtl"] .nav-projects-item .nav-dropdown.open {
    transform: translateX(0) translateY(0) !important;
}
/* Hover bridge so cursor doesn't lose hover when moving from trigger into dropdown */
html[dir="rtl"] .nav-projects-item::after {
    content: "";
    position: absolute;
    top: 100%;
    left: -240px;
    right: 0;
    height: 320px;
    display: block;
    pointer-events: all;
}

/* ===== Utility bar ===== */
html[dir="rtl"] .util-links {
    flex-direction: row-reverse;
}
html[dir="rtl"] .util-locale {
    flex-direction: row-reverse;
}

/* ===== Hero ===== */
html[dir="rtl"] .hero-text {
    text-align: right;
}
html[dir="rtl"] .hero-products {
    direction: ltr;
    text-align: right;
}
html[dir="rtl"] .hero-side-tag {
    right: auto;
    left: 24px;
}
html[dir="rtl"] .hero-media-arrow.hero-media-prev {
    left: auto;
    right: 12px;
}
html[dir="rtl"] .hero-media-arrow.hero-media-next {
    right: auto;
    left: 12px;
}
html[dir="rtl"] .hero-grid-lines {
    transform: scaleX(-1);
}

/* ===== Trust strip ===== */
html[dir="rtl"] .trust-strip-inner {
    direction: ltr;
}
html[dir="rtl"] .trust-item .label em {
    font-style: normal;
}

/* ===== Sections ===== */
html[dir="rtl"] .industries-title {
    text-align: right;
}
html[dir="rtl"] .industry-label {
    text-align: right;
}
html[dir="rtl"] .events-card {
    direction: rtl;
}
html[dir="rtl"] .events-meta {
    flex-direction: row-reverse;
}
html[dir="rtl"] .event-meta-item {
    flex-direction: row-reverse;
}
html[dir="rtl"] .section-head {
    flex-direction: row-reverse;
}
html[dir="rtl"] .vc-body {
    text-align: right;
}
html[dir="rtl"] .featured-body {
    text-align: right;
}
html[dir="rtl"] .featured-tag {
    left: auto;
    right: 12px;
}
html[dir="rtl"] .why-card {
    text-align: right;
}
html[dir="rtl"] .why-card .icon {
    margin-right: 0;
    margin-left: 12px;
}
html[dir="rtl"] .marquee-title {
    text-align: right;
}
html[dir="rtl"] .marquee-track {
    direction: ltr;
}
html[dir="rtl"] .facility-head {
    text-align: right;
}
html[dir="rtl"] .facility-video-caption {
    text-align: right;
}
html[dir="rtl"] .facility-stat {
    text-align: right;
}
html[dir="rtl"] .branches-box {
    direction: rtl;
}
html[dir="rtl"] .branch-info {
    text-align: right;
    margin-left: 0;
    margin-right: 12px;
}
html[dir="rtl"] .branches-head {
    flex-direction: row-reverse;
}

/* ===== CTA strip ===== */
html[dir="rtl"] .cta-strip-inner {
    flex-direction: row-reverse;
}
html[dir="rtl"] .cta-strip .actions {
    flex-direction: row-reverse;
}

/* ===== Footer ===== */
html[dir="rtl"] .footer-grid {
    direction: rtl;
}
html[dir="rtl"] .footer-bottom {
    flex-direction: row-reverse;
}
html[dir="rtl"] .footer-social {
    flex-direction: row-reverse;
}

/* ===== Buttons (arrows) ===== */
html[dir="rtl"] .btn-arrow::after {
    /* arrow flipped via SVG if needed */
}

/* ===== Generic RTL alignment helpers ===== */
html[dir="rtl"] p,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] li,
html[dir="rtl"] .desc,
html[dir="rtl"] .body,
html[dir="rtl"] .card,
html[dir="rtl"] .caption,
html[dir="rtl"] .title {
    text-align: right;
}

/* ===== Mobile menu ===== */
html[dir="rtl"] .mobile-menu-drawer {
    right: auto;
    left: 0;
}
html[dir="rtl"] .mobile-menu-close {
    right: auto;
    left: 16px;
}
html[dir="rtl"] .mobile-nav-links {
    text-align: right;
}
html[dir="rtl"] .mobile-projects-row {
    flex-direction: row-reverse;
}
html[dir="rtl"] .mobile-projects-toggle svg {
    transform: rotate(180deg);
}

/* ===== Lang dropdown menu ===== */
html[dir="rtl"] .lang-menu {
    left: auto;
    right: 0;
}
html[dir="rtl"] .lang-menu a,
html[dir="rtl"] .lang-menu li {
    text-align: right;
}

/* ============================================================
   ARABIC MOBILE FIXES — make AR pages render identical to EN
   on phones (same layout, just Arabic text).
   ============================================================ */

@media (max-width: 768px) {

    /* Reset to LTR layout for the mobile drawer so it visually
       matches the EN drawer. Arabic text still reads correctly
       because we keep `direction: rtl` on the body content. */
    html[dir="rtl"] .mobile-menu-overlay,
    html[dir="rtl"] .mobile-menu-drawer {
        direction: ltr;
    }
    html[dir="rtl"] .mobile-menu-drawer {
        right: 0;
        left: auto;
        transform: translateX(100%);
    }
    html[dir="rtl"] .mobile-menu-overlay.open .mobile-menu-drawer {
        transform: translateX(0);
    }
    html[dir="rtl"] .mobile-menu-close {
        right: auto;
        left: 16px;
        margin-left: auto;
    }
    html[dir="rtl"] .mobile-menu-brand,
    html[dir="rtl"] .mobile-nav-links,
    html[dir="rtl"] .mobile-lang-switcher {
        direction: rtl;
        text-align: right;
    }
    html[dir="rtl"] .mobile-nav-links li {
        text-align: right;
    }
    html[dir="rtl"] .mobile-projects-row {
        flex-direction: row-reverse;
    }
    html[dir="rtl"] .mobile-projects-toggle svg {
        transform: rotate(180deg);
    }
    html[dir="rtl"] .mobile-submenu {
        text-align: right;
        padding-right: 16px;
        padding-left: 0;
    }

    /* Prevent horizontal overflow that makes the page look like
       a "website inside a phone". */
    html[dir="rtl"] body {
        overflow-x: hidden;
    }

    /* Collapse 2-column hero/grid layouts on phones so they
       match EN behavior (stacked). */
    html[dir="rtl"] .hero-grid,
    html[dir="rtl"] .exh-row,
    html[dir="rtl"] .contact-grid,
    html[dir="rtl"] .featured-grid,
    html[dir="rtl"] .video-grid,
    html[dir="rtl"] .why-grid,
    html[dir="rtl"] .industries-grid,
    html[dir="rtl"] .products-grid,
    html[dir="rtl"] .equipment-grid,
    html[dir="rtl"] .projects-grid,
    html[dir="rtl"] .office-grid,
    html[dir="rtl"] .footer-grid {
        grid-template-columns: 1fr !important;
        direction: rtl;
    }

    html[dir="rtl"] .hero-text,
    html[dir="rtl"] .exh-row-left,
    html[dir="rtl"] .contact-info,
    html[dir="rtl"] .contact-form,
    html[dir="rtl"] .featured-card,
    html[dir="rtl"] .why-card,
    html[dir="rtl"] .product-card,
    html[dir="rtl"] .equipment-card,
    html[dir="rtl"] .project-card,
    html[dir="rtl"] .footer-brand,
    html[dir="rtl"] .footer-col {
        text-align: right;
    }

    /* Make sure utility bar wraps nicely on small screens in RTL. */
    html[dir="rtl"] .util-locale,
    html[dir="rtl"] .util-links {
        flex-wrap: wrap;
    }

    /* Hero text alignment should be right (RTL) but layout LTR. */
    html[dir="rtl"] .hero-text {
        text-align: right;
    }
    html[dir="rtl"] .hero-actions {
        flex-direction: row-reverse;
        justify-content: flex-end;
    }
}