/* =====================================================================
   Arabic (RTL) — loaded only when the page language is Arabic.
   Deliberately short: main.css uses logical properties (margin-inline,
   inset-inline, padding-block) throughout, so the layout mirrors itself.
   Only genuinely direction-specific things need fixing here.
   ===================================================================== */

body {
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  /* Arabic script sits lower and needs a little more breathing room */
  line-height: 1.85;
}

h1, h2, h3, h4 {
  letter-spacing: 0;        /* negative tracking hurts Arabic letterforms */
  line-height: 1.35;
}

/* Numbers, phone numbers, emails and dates read left-to-right even inside
   Arabic text. Without this "+966 53 151 9792" displays with its parts
   reordered, and "2,000 m²" comes out backwards. */
.ltr,
.stat__num,
.head-top a[href^="tel:"],
.head-top a[href^="mailto:"],
.ft__badge .ltr,
input[type="tel"],
input[type="email"],
input[type="number"] {
  direction: ltr;
  unicode-bidi: isolate;
  text-align: start;
}

/* The transform-based drawer slide is the one thing logical properties
   cannot express — it has to come from the other side. */
[dir="rtl"] .drawer__panel { transform: translateX(-100%); }
[dir="rtl"] .drawer.is-open .drawer__panel { transform: none; }

/* Arrow glyphs point the wrong way once the layout mirrors.
   Every hover rule REPLACES transform rather than adding to it, so each one has to
   repeat the flip — otherwise the arrow snapped back to pointing right on hover,
   and it slid the wrong way as well. */
[dir="rtl"] .arw { transform: scaleX(-1); }
[dir="rtl"] .card:hover .card__link .arw       { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .about__link:hover .arw            { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .pcard:hover .pcard__more .arw     { transform: scaleX(-1) translateX(4px); }

/* The step counter used to carry `direction: ltr` here.
   That was wrong, and on a phone it was visibly wrong. `direction` does not
   only order the glyphs — it also decides what that element's own logical
   properties mean. The mobile timeline pins the number with
   `inset-inline-start: 0`, so forcing the pseudo-element to LTR resolved that
   to `left: 0` while the card's `padding-inline-start` stayed on the right:
   the numbered circle sat on the left, the connecting line on the right, and
   the text was indented away from both.

   It was never needed either. `counter(step, decimal-leading-zero)` produces
   "01" — a run of digits, which bidi already lays out left-to-right inside
   Arabic text. Isolating it is enough to keep it from interacting with the
   surrounding text, without touching the box's direction. */
.step-card::before { unicode-bidi: isolate; }

/* The hero line break is authored for English wording; Arabic wraps on its own. */
[dir="rtl"] .hero h1 br { display: none; }

/* Dropdowns open from the inline-start edge, which mirrors correctly, but a menu
   near the right edge would overflow the window — pin those to the other side. */
[dir="rtl"] .menu__item:last-child .menu__drop,
[dir="rtl"] .menu__item:nth-last-child(2) .menu__drop { inset-inline-start: auto; inset-inline-end: 0; }

/* =====================================================================
   The phone components, checked in Arabic.
   Most of them mirror by themselves — mobile.css contains no physical
   left/right at all — but these three could not.
   ===================================================================== */

/* The sheet slides up, which is direction-neutral, but the form inside it
   holds a phone number and an email that must still read left to right. */
[dir="rtl"] .sheet__body input[type="tel"],
[dir="rtl"] .sheet__body input[type="email"] { direction: ltr; text-align: start; }

/* The chip row scrolls from the right in Arabic; the browser handles that,
   but the active chip must not be nudged with a physical scroll offset. */
[dir="rtl"] .chipbar__in { scroll-padding-inline: var(--gut); }

/* The bottom bar's three cells flow right-to-left on their own. The only thing
   that does not is the phone number if it is ever shown there. */
[dir="rtl"] .mbar .ltr { direction: ltr; unicode-bidi: isolate; }

/* The hero's scroll cue is a downward chevron — no mirroring — but the
   slider arrows and the "back" arrows inside the drawer are. */
[dir="rtl"] .pslider__btn svg { transform: scaleX(-1); }

/* The mobile process timeline, checked in Arabic.
   Everything here is already logical (inset-inline-start, padding-inline-start),
   so it mirrors on its own once the pseudo-element stops overriding direction.
   These two only restate it so a future edit cannot quietly break it again. */
[dir="rtl"] .step-card::before { inset-inline-start: 0; inset-inline-end: auto; }
[dir="rtl"] .step-card::after  { inset-inline-start: 17px; inset-inline-end: auto; }

/* The industry chip's arrow is a direction cue like every other one. */
[dir="rtl"] a.chip:hover .arw { transform: scaleX(-1) translateX(3px); }

/* ---------------------------------------------------------------- preloader */

/* The sweep on the loading line travels left-to-right by construction. In Arabic it
   should run the other way — the eye follows the text direction, and a bar moving
   against it reads as something going backwards. */
[dir="rtl"] .pl__bar span { animation-name: pl-bar-rtl; }
@keyframes pl-bar-rtl {
  0%   { transform: translateX(120%); }
  100% { transform: translateX(-320%); }
}

/* The wordmark is Latin and stays Latin; the tagline under it is Arabic and needs
   the looser tracking that Arabic type wants rather than the uppercase spacing set
   for English. */
[dir="rtl"] .pl__tag { letter-spacing: 0; font-size: .8rem; }