/*
 * RTL overrides for the Arabic (/ar/) version of the site.
 * Loaded ONLY on Arabic pages, after custom.css.
 *
 * Approach: this legacy Bootstrap 3 / float-based codebase does not mirror
 * automatically under dir="rtl" (only flexbox/grid and text respond to
 * dir). Rather than attempting a pixel-perfect mirror of every rule across
 * thousands of lines of legacy CSS, this file targets the components that
 * matter for readability and brand presentation: typography, header/nav,
 * buttons, footer, and hero captions. Hero caption BOXES keep the same
 * on-screen position as the English version (they're pinned to open space
 * in a fixed photo that isn't mirrored) — only the text alignment inside
 * them flips. The interactive engine-illustration diagram is deliberately
 * left LTR (wrapped with dir="ltr" in the markup) since its hotspots are
 * pinned to fixed pixel coordinates on a diagram image.
 */

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

html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] select,
html[lang="ar"] button {
    font-family: 'Cairo', 'Tahoma', sans-serif;
}

/* Keep the GTF wordmark and other Latin brand marks untouched */
html[lang="ar"] .logo,
html[lang="ar"] .gtf-wordmark {
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
}

html[lang="ar"] {
    direction: rtl;
}

html[lang="ar"] body {
    text-align: right;
}

/* Header / nav */
html[lang="ar"] .desktop-nav {
    flex-direction: row-reverse;
}

html[lang="ar"] .primary-menu-container ul.menu-wrapper {
    flex-direction: row-reverse;
}

html[lang="ar"] .lang-switch {
    margin-inline-start: 16px;
    margin-inline-end: 0;
}

/* Generic two-column rows (Bootstrap float grid) mirror their column order */
html[lang="ar"] .row {
    direction: rtl;
}

html[lang="ar"] .row > [class*="col-"] {
    float: right;
}

/* Hero captions: keep box position, flip the text itself to read naturally */
html[lang="ar"] .hero-caption,
html[lang="ar"] .machinery-caption,
html[lang="ar"] .agri-caption,
html[lang="ar"] .evx-caption-text {
    text-align: right;
    direction: rtl;
}

html[lang="ar"] .home-slider .luxury-slide .machinery-caption {
    text-align: center;
}

html[lang="ar"] .evx-caption {
    direction: ltr; /* keep the flex order (text box, then product can) matching the photo */
}

html[lang="ar"] .evx-caption-text {
    direction: rtl;
    text-align: center;
}

/* Why-section, product cards, value cards etc. read fine centered; only
   force right alignment where the source used left-aligned body copy */
html[lang="ar"] .why-description p,
html[lang="ar"] .about-content p,
html[lang="ar"] .value-description,
html[lang="ar"] .contact-info-item p,
html[lang="ar"] .legal-content p {
    text-align: right;
}

/* Footer */
html[lang="ar"] .footer-content-grid {
    direction: rtl;
}

html[lang="ar"] #footerLegal .legal-left {
    direction: rtl;
}

html[lang="ar"] #footerLegal .legal-left ul {
    direction: rtl;
}

/* Timeline (about page) mirrors its accent border side */
html[lang="ar"] .timeline-item {
    text-align: right;
}

/* Contact form labels */
html[lang="ar"] .contact-form label {
    text-align: right;
    display: block;
}

/* Force any element explicitly marked as LTR content (the engine diagram,
   phone numbers, emails) to keep left-to-right internal flow */
html[lang="ar"] [dir="ltr"] {
    text-align: left;
}

/* Stat boxes (about page): the number and its suffix are separate sibling
   spans (e.g. "250" + "K"). Under RTL, sibling inline elements lay out
   right-to-left, which reverses them to read "K250" instead of "250K".
   Force that pair back to LTR order while keeping the Arabic label RTL. */
html[lang="ar"] .stat-box {
    direction: ltr;
}

html[lang="ar"] .stat-label {
    direction: rtl;
    display: block;
    text-align: center;
}