/*
 * RTL / Arabic overrides.
 * Loaded only by layout-ar.antlers.html, so nothing here can affect the English site.
 * Flex and grid containers mirror on their own under dir="rtl"; this file only fixes
 * the fonts and the handful of hardcoded directional rules in style.css / custom.css.
 */

:root {
    --font-ar: 'IBM Plex Sans Arabic', 'Tajawal', 'Segoe UI', Tahoma, Arial, sans-serif;
}

/* ---------- Layout ---------- */

/* custom.css clears the fixed header with 110px; the Arabic page sits tighter. */
[dir="rtl"] main {
    padding-top: 30px;
}

/* ---------- Typography ---------- */

html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3,
html[dir="rtl"] h4,
html[dir="rtl"] h5,
html[dir="rtl"] h6 {
    font-family: var(--font-ar);
}

[dir="rtl"] .ser_s1_column2 h2,
[dir="rtl"] .contact_left h1,
[dir="rtl"] .widget-title {
    font-weight: 500;
    letter-spacing: 0;
}

[dir="rtl"] .projectLinksBox a,
[dir="rtl"] .project_resource_links_title,
[dir="rtl"] .upperCase {
    letter-spacing: 0;
    text-transform: none;
}

/* ---------- Project info section ---------- */

[dir="rtl"] .ser_s1_column2 {
    padding-left: 0;
    padding-right: 6%;
    text-align: right;
}

@media screen and (max-width: 1024px) {
    [dir="rtl"] .ser_s1_column2 {
        padding-right: 0;
    }
}

[dir="rtl"] .s1_content,
[dir="rtl"] .s1_content p {
    text-align: right;
}

[dir="rtl"] .project_info_section ul {
    padding-left: 0;
    padding-right: 20px;
}

/* ---------- Form ---------- */

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

/* Breathing room between the form column and the image column. */
[dir="rtl"] .contact_left.flex_column {
    padding: 5%;
    box-sizing: border-box;
}

[dir="rtl"] .form_container label {
    display: block;
    text-align: right;
}

[dir="rtl"] .form_container input,
[dir="rtl"] .form_container select,
[dir="rtl"] .form_container textarea {
    text-align: right;
}

/* Latin-only inputs stay left aligned so email addresses and phone numbers read correctly. */
[dir="rtl"] .form_container input[dir="ltr"] {
    direction: ltr;
    text-align: left;
}

/* intl-tel-input keeps its own contents LTR (flag, +971, chevron in that order and
   the digits left aligned), but the whole selector moves to the right edge of the
   field, and the input padding swaps sides to make room for it. */
[dir="rtl"] .form_wrapper .iti {
    direction: ltr;
    text-align: left;
    width: 100%;
}

[dir="rtl"] .form_wrapper .iti--allow-dropdown .iti__flag-container,
[dir="rtl"] .form_wrapper .iti--separate-dial-code .iti__flag-container {
    left: auto;
    right: 0;
}

[dir="rtl"] .form_wrapper .iti--allow-dropdown input,
[dir="rtl"] .form_wrapper .iti--separate-dial-code input {
    padding-left: 6px !important;
    padding-right: 62px;
}

[dir="rtl"] .form_wrapper .iti__country-list {
    left: auto;
    right: 0;
}

/* Eyebrow line above the form heading. */
[dir="rtl"] .contact_eyebrow {
    margin: 0 0 8px;
    font-size: 14px;
    color: rgba(0, 0, 0, .55);
    text-align: right;
}

[dir="rtl"] .form_submit,
[dir="rtl"] .submit_c .wpcf7-form-control.wpcf7-submit {
    text-align: right;
}

[dir="rtl"] .submit_c::after,
[dir="rtl"] .contact_us .wpcf7-form-control.wpcf7-submit::after {
    right: auto;
    left: 20px;
    transform: scaleX(-1);
}

@media screen and (max-width: 767px) {
    [dir="rtl"] .submit_c::after {
        right: auto;
        left: 12px;
    }
}

[dir="rtl"] .phone-field-error {
    text-align: right;
}

/* ---------- Renders gallery and PDF viewer ---------- */

[dir="rtl"] #projectPdfBox .pdf-viewer-title {
    text-align: right;
    font-family: var(--font-ar);
    letter-spacing: 0;
}

/* The chevrons are drawn pointing left/right, so mirror the glyphs to match the
   mirrored button order. */
[dir="rtl"] .renders-nav svg,
[dir="rtl"] .renders-mobile-btn svg {
    transform: scaleX(-1);
}

[dir="rtl"] .renders-gallery-counter {
    direction: ltr;
}

/* ---------- Footer ---------- */

[dir="rtl"] .footer_bottom ul li {
    border-right: 0;
    border-left: 1px solid #6c6d6e;
    padding-right: 0;
    padding-left: 10px;
    margin-right: 0;
    margin-left: 10px;
}

[dir="rtl"] .footer_bottom ul li:last-child {
    border: 0;
    padding-left: 0;
    margin-left: 0;
}

[dir="rtl"] .footer_btm_list .fa {
    margin-right: 0;
    margin-left: 6px;
}

@media screen and (max-width: 810px) {
    [dir="rtl"] .footer_right ul li:nth-child(3) {
        border-left: 0;
        padding-left: 0;
        margin-left: 0;
    }

    [dir="rtl"] .footer_right ul li:last-child {
        padding-left: 0;
        margin-left: 0;
    }
}