/*
 * Right-to-left corrections for the elements this project adds. The theme
 * already ships 43 `body[dir=rtl]` rules covering its own components, so this
 * file deliberately only touches what it does not know about.
 */

/* Latin strings stay left-to-right inside a right-to-left page. */
body[dir='rtl'] .brand-wordmark,
body[dir='rtl'] .site-monogram,
body[dir='rtl'] .time-local {
    direction: ltr;
    unicode-bidi: isolate;
}

/* theme.css indents case-study lists on the left only; bullets sit on the right here. */
body[dir='rtl'] .ck-content ol,
body[dir='rtl'] .ck-content ul {
    padding-left: 0;
    padding-right: 1.5rem;
}

body[dir='rtl'] .project-stack {
    padding-right: 0;
}

body[dir='rtl'] .project-stack__item {
    text-align: right;
}

body[dir='rtl'] .contact-channel__wa {
    padding-left: 12px;
    padding-right: 10px;
}

body[dir='rtl'] .project-gallery__item figcaption {
    text-align: right;
}

/*
 * The theme mirrors the dot's 48px gutter to `margin-left` for RTL but only
 * zeroes `margin-right` on phones, so the Arabic dot drifts 48px from its date.
 */
@media (max-width: 575px) {
    body[dir='rtl'] .timeline-item .timeline-dot {
        margin-left: 0;
    }
}

/*
 * Phones keep the floating controls (menu gear, mode toggle, back-to-top) on
 * the right in both languages. The header is laid out like the English one so
 * its logo doesn't sit under the gear: logo on the left, clock on the right
 * with room reserved for the gear.
 */
@media (max-width: 991.98px) {
    body[dir='rtl'] .tf-left-bar,
    body[dir='rtl'] .sidebar-tools {
        left: auto;
        right: 16px;
    }

    body[dir='rtl'] .tf-header-wrap {
        flex-direction: row-reverse;
    }

    body[dir='rtl'] .tf-header-wrap .left {
        padding-left: 0;
        padding-right: 56px;
    }
}

/*
 * From 992px the profile card is pinned to the right in RTL, but the theme only
 * moves the floating controls off that side from 1600px, so in between they sit
 * on top of the card. Mirror them to the left, matching the header.
 */
@media (min-width: 992px) and (max-width: 1599.98px) {
    body[dir='rtl'] .tf-left-bar,
    body[dir='rtl'] .sidebar-tools {
        left: 16px;
        right: auto;
    }
}

/* Addresses and numbers are typed left-to-right; keep them aligned with the form. */
body[dir='rtl'] .contact-form input[type='email'],
body[dir='rtl'] .contact-form input[name='phone'] {
    direction: ltr;
    text-align: right;
}

/* Arabic letters join, so tracking would pull the glyphs apart. */
body[dir='rtl'] .contact-channel__label {
    letter-spacing: normal;
}