/* ==========================================================================
   Right-to-left layout, applied only when i18n.js puts dir="rtl" on <html>.

   Loads AFTER the <style> block index.html carries inline, so it wins on
   cascade order without a single !important and without editing the client's
   stylesheet — the same arrangement images.css uses.

   WHAT THE CLIENT'S OWN RTL RULES DID, AND WHY TWO OF THEM ARE NOT HERE:

   jereh-saudi-landing-ar.html shipped four rules. Two of them,

       html[dir="rtl"] nav            { flex-direction: row-reverse; }
       html[dir="rtl"] .header-content{ flex-direction: row-reverse; }

   undo the mirroring instead of producing it. A flex row inside dir="rtl"
   already lays its items out right-to-left; row-reverse flips that back, so
   the header came out reading left-to-right in the middle of an Arabic page.
   They are dropped on purpose. Same for `.process-flow { direction: rtl }`,
   which is inherited from <html> and changes nothing.

   The fourth one is real and is kept below: an arrow glyph is not mirrored
   by the bidi algorithm, so it has to be flipped by hand.
   ========================================================================== */

/* --------------------------------------------------------------- typography

   Arabic needs a face with Arabic glyphs, and every name here is a system
   font — nothing is downloaded, which matters because the CSP allows
   `font-src 'self'` and no web font could load anyway. The original Latin
   stack stays at the tail for the words that remain in English. */
html[dir="rtl"] body {
  font-family: 'Noto Naskh Arabic', 'Noto Sans Arabic', 'Segoe UI', Tahoma,
               'Geeza Pro', 'Arabic Typesetting', -apple-system,
               BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Tracking is a Latin typographic device. Applied to Arabic it prises apart
   letters that are supposed to be joined, and the word stops looking like a
   word. The page sets it in three places; this clears all of them at once
   rather than chasing each selector. */
html[dir="rtl"] body,
html[dir="rtl"] body * {
  letter-spacing: normal;
}

/* ------------------------------------------------------------------ arrows */

/* "→" between the stages of the treatment diagrams. Bidi reorders text, not
   glyphs, so this one has to be turned around explicitly. */
html[dir="rtl"] .flow-arrow {
  transform: scaleX(-1);
}

/* Same reasoning for the arrow appended to every "Learn more". */
html[dir="rtl"] .learn-more::after {
  content: "←";
}

/* ------------------------------------------------------- mirrored spacing

   Everything below is a margin, a padding or an alignment that was written
   against the left edge and has to move to the right one. Nothing here is a
   redesign: each rule mirrors an existing declaration, nothing more. */

html[dir="rtl"] .cta-button-outline {
  margin-left: 0;
  margin-right: 12px;
}

@media (max-width: 768px) {
  html[dir="rtl"] .cta-button-outline {
    margin-right: 0;
  }
}

/* Off-screen parking spots. Left at -9999px on an RTL page they hang off the
   inline-start edge, which some browsers answer with a horizontal scrollbar
   across the whole site. */
html[dir="rtl"] .jf-skip {
  left: auto;
  right: -9999px;
  border-radius: 0 0 0 var(--jf-radius);
}

html[dir="rtl"] .jf-skip:focus {
  right: 0;
}

html[dir="rtl"] .jf-hp {
  left: auto;
  right: -9999px;
}

/* The form block is explicitly left-aligned so that it stays readable inside
   the centred contact section. Mirror it rather than let it inherit. */
html[dir="rtl"] .jf-form-wrap {
  text-align: right;
}

/* The asterisk that marks a required field sits after the label text. */
html[dir="rtl"] .jf-req {
  margin-left: 0;
  margin-right: 2px;
}

/* The select's chevron is a background image pinned to one side, and the
   padding that keeps the text clear of it has to move with it. */
html[dir="rtl"] .jf-select {
  background-position: left 13px center;
  padding-right: 13px;
  padding-left: 36px;
}

/* Character counter, which trails the textarea. */
html[dir="rtl"] .jf-counter {
  text-align: left;
}

/* Spinner inside the submit button, which precedes its label. */
html[dir="rtl"] .jf-spinner {
  margin-right: 0;
  margin-left: 8px;
}

/* ---------------------------------------------------- numbers left to right

   Digits are neutral to the bidi algorithm but the symbols around them are
   not, so on an RTL line they get re-ordered against the run and come out
   backwards: "20+" reads "+20", "0 / 4000" reads "4000 / 0", and the phone
   number "+966 (56) 175-1700" lands as "175-1700 (56) 966+", which is not a
   number anyone can dial.

   These three carry no Arabic at all, so the fix is to give each its own
   left-to-right island rather than to fight the algorithm sentence by
   sentence. Phone numbers written INSIDE a sentence are left alone: there
   the surrounding words give the algorithm what it needs and they come out
   right on their own. */
html[dir="rtl"] .stat-number,
html[dir="rtl"] .jf-counter,
html[dir="rtl"] .footer-section a[href^="tel:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Turning the phone number around also moved it: `start` now means the left
   edge, and it drifted away from the three links stacked under it. */
html[dir="rtl"] .footer-section a[href^="tel:"] {
  text-align: right;
}