/*
 * RTL corrections.
 *
 * Loaded only on right-to-left pages, after main.rtl.css, so it is the last
 * word. Everything here is something the mechanical mirror in
 * RtlCssTransformer cannot decide for itself:
 *
 *   - typography, which is a language choice rather than a direction one
 *   - glyphs and icons that carry a direction in their artwork
 *   - places where the LTR source used a physical property that mirrors
 *     wrongly, or a shorthand the transform deliberately left alone
 *
 * If something here could have been mirrored automatically, it belongs in the
 * transformer instead - this file should stay short.
 */

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

/*
 * Cairo covers Arabic properly; Rubik, the theme's Latin face, has no Arabic
 * glyphs at all and was silently falling back to whatever the OS offered.
 * Latin runs inside Arabic text (company names, job titles, "PHP") still want
 * the theme face, so it stays in the stack behind Cairo.
 */
[dir='rtl'] body,
[dir='rtl'] .twm-job-title,
[dir='rtl'] h1,
[dir='rtl'] h2,
[dir='rtl'] h3,
[dir='rtl'] h4,
[dir='rtl'] h5,
[dir='rtl'] h6,
[dir='rtl'] .site-button,
[dir='rtl'] input,
[dir='rtl'] select,
[dir='rtl'] textarea,
[dir='rtl'] button {
    font-family: 'Cairo', 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Arabic script sits taller than Latin; the theme's tight leading clips it. */
[dir='rtl'] body {
    line-height: 1.75;
}

/*
 * Arabic has no capital letters, so uppercase transforms do nothing to Arabic
 * text while still shouting at any Latin mixed into it. Letter-spacing is
 * actively harmful: it breaks the cursive joins between Arabic letters.
 */
[dir='rtl'] .eyebrow,
[dir='rtl'] .section-head-small,
[dir='rtl'] .twm-s-title,
[dir='rtl'] .jb-featured-badge {
    text-transform: none;
    letter-spacing: normal;
}

/* --- Directional glyphs --------------------------------------------------- */

/*
 * Arrows point the other way when the page reads the other way. These are
 * font glyphs rather than images, so a transform could never have caught them.
 */
[dir='rtl'] .feather-arrow-right,
[dir='rtl'] .feather-arrow-left,
[dir='rtl'] .fa-arrow-right,
[dir='rtl'] .fa-arrow-left,
[dir='rtl'] .fa-angle-right,
[dir='rtl'] .fa-angle-left,
[dir='rtl'] .fa-chevron-right,
[dir='rtl'] .fa-chevron-left,
[dir='rtl'] .ti-arrow-right,
[dir='rtl'] .ti-arrow-left {
    transform: scaleX(-1);
}

/* Breadcrumb and pagination separators are drawn, not written. */
[dir='rtl'] .breadcrumb-item + .breadcrumb-item::before {
    transform: scaleX(-1);
    display: inline-block;
}

/* --- Components the mirror could not reach -------------------------------- */

/*
 * Bootstrap's dropdown alignment classes are physical by name. Under RTL the
 * mirrored sheet flips their offsets, but the ...-end variant still needs to
 * anchor to what is now the visual left.
 */
[dir='rtl'] .dropdown-menu-end {
    --bs-position: start;
}

/*
 * Number inputs and anything holding a bare numeral, a currency figure or a
 * date read left-to-right even inside Arabic prose - a salary range mirrored
 * character by character is simply wrong.
 */
[dir='rtl'] .twm-jobs-amount,
[dir='rtl'] .twm-job-post-duration,
[dir='rtl'] input[type='number'],
[dir='rtl'] input[type='tel'],
[dir='rtl'] input[type='email'],
[dir='rtl'] input[type='url'],
[dir='rtl'] .font-monospace {
    direction: ltr;
    /* Keep it visually on the reading edge despite the LTR run. */
    text-align: right;
}

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

/*
 * The phone-number widget renders its country flag and dial code as a prefix,
 * which the mirror moves to the right while the input itself stays LTR.
 */
[dir='rtl'] .iti {
    direction: ltr;
    text-align: left;
}

/* --- Features added in this session --------------------------------------- */

/*
 * These were written with logical properties, so they mirror on their own.
 * What remains is where a fixed visual side was intentional.
 */

/* The featured badge sits on the far corner from the reading edge either way -
   already handled by inset-inline-end, so nothing is needed for placement. */

/* The notification dropdown is wider than the viewport on small RTL screens
   only because the bell sits nearer the edge; clamp it from the other side. */
[dir='rtl'] .jb-notification-menu {
    inset-inline-end: auto;
    inset-inline-start: 0;
}

/* Sidebar ad units centre themselves; nothing directional. Support ticket and
   CV layouts use tables and logical properties throughout. */