/*
 * Right-to-left (Arabic) adjustments.
 *
 * Loaded only when the page language is RTL (see slc_rtl_assets() in functions.php).
 * Most of the layout mirrors on its own, because the theme stylesheets use logical
 * properties (margin-inline-start, inset-inline-end, text-align: start ...).
 * This file covers what logical properties can't: transforms, icons that point
 * a direction, the Arabic font, and values that must stay left-to-right.
 */

/* ─── Arabic font ───────────────────────────────────────────── */
/* Inter and Cormorant Garamond have no Arabic glyphs. */
html[lang^="ar"] {
    --font-family: 'IBM Plex Sans Arabic', 'Inter', 'Segoe UI', Tahoma, 'Noto Sans Arabic', sans-serif;
}

/* Arabic letters join, so letter-spacing breaks words apart. */
html[lang^="ar"] body,
html[lang^="ar"] body * {
    letter-spacing: normal !important;
}

/* Serif italic accent words: no Arabic glyphs, and Arabic has no true italic. */
html[lang^="ar"] #typingTitle,
html[lang^="ar"] em,
html[lang^="ar"] i:not([class*="fa-"]) {
    font-family: var(--font-family);
    font-style: normal;
}

/* Font Awesome icons must keep their own font. */
html[lang^="ar"] [class*="fa-"] {
    letter-spacing: normal;
}

/* ─── Icons that point a direction ──────────────────────────── */
/* The `scale` property composes with `transform`, so hover nudges such as
   translateX(4px) on these icons are mirrored too. */
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-right-long,
[dir="rtl"] .fa-arrow-left-long,
[dir="rtl"] .fa-chevron-right,
[dir="rtl"] .fa-chevron-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angles-right,
[dir="rtl"] .fa-angles-left,
[dir="rtl"] .fa-caret-right,
[dir="rtl"] .fa-caret-left,
[dir="rtl"] .fa-long-arrow-alt-right,
[dir="rtl"] .fa-long-arrow-alt-left,
[dir="rtl"] .fa-arrow-circle-right,
[dir="rtl"] .fa-circle-arrow-right,
[dir="rtl"] .fa-paper-plane,
[dir="rtl"] .fa-quote-left,
[dir="rtl"] .fa-quote-right {
    scale: -1 1;
}

/* Text arrows (→) drawn by the theme */
[dir="rtl"] .sv-timeline-step .step-arrow,
[dir="rtl"] .sv-card-list li::before {
    display: inline-block;
    scale: -1 1;
}

/* ─── Horizontal movement ───────────────────────────────────── */
[dir="rtl"] .reveal-left { transform: translateX(60px); }
[dir="rtl"] .reveal-right { transform: translateX(-60px); }
[dir="rtl"] .reveal-left.visible,
[dir="rtl"] .reveal-right.visible { transform: translateX(0); }

[dir="rtl"] .sv-check-item:hover { transform: translateX(-4px); }
[dir="rtl"] .ju-process-step:hover { transform: translateX(-8px); }

/* Underlines that grow from the start edge */
[dir="rtl"] .ju-why-card::before,
[dir="rtl"] .ae-title em::after,
[dir="rtl"] .ae-flip-word::after,
[dir="rtl"] .be-title em::after {
    transform-origin: right;
}

/* Desktop menu flyouts slide in from the start edge */
@keyframes flyoutInRtl {
    from { opacity: 0; transform: translateX(10px); }
    to   { opacity: 1; transform: translateX(0); }
}
@media (min-width: 1024px) {
    [dir="rtl"] .menu-group:hover .dropdown-links {
        animation-name: flyoutInRtl;
    }
}

/* Centred with a physical left: 50% on desktop; on mobile the label sits in the flow,
   so the left offset has to be cleared for RTL. */
@media (max-width: 768px) {
    [dir="rtl"] .sv-timeline-label { left: auto; }
}

/* ─── Text that stays left-to-right ─────────────────────────── */
/* Phone numbers, emails and URLs read left-to-right inside Arabic text. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href*="wa.me/"],
[dir="rtl"] .ltr {
    direction: ltr;
    unicode-bidi: isolate;
}

[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] {
    direction: ltr;
    text-align: right;
}

[dir="rtl"] input[type="tel"]::placeholder,
[dir="rtl"] input[type="email"]::placeholder {
    direction: rtl;
}

/* Dropdown arrow drawn as a background image: move it to the left */
[dir="rtl"] .apply-field select {
    background-position: left 14px center;
}

/* Country code stays before the number: +60 | 12-345 6789 */
[dir="rtl"] .apply-phone {
    direction: ltr;
}
[dir="rtl"] .apply-phone input {
    text-align: left;
}
[dir="rtl"] .apply-phone select {
    background-position: right 14px center;
}

/* ─── Hero background ───────────────────────────────────────── */
/* The photo sits on the right and the map on the left, made for left-aligned text.
   Flip it so the busy photo moves left and the RTL text lands on the plain map side. */
.hero-main .hero-bg {
    transform: scaleX(-1);
}