/* ==========================================================================
   Smart Kernel — Arabic / RTL layer. Loaded only when <html dir="rtl">.

   The vendor stylesheet is written almost entirely in logical properties
   (margin-inline, inset-inline, border-start-…), so the layout mirrors on its
   own. What does NOT mirror automatically:

     1. Directional glyphs in the icon font — an arrow drawn pointing right
        still points right when the page flows the other way.
     2. transform: translateX() used for hover motion.
     3. Latin-first typography defaults (letter-spacing, uppercase) that do
        nothing useful for Arabic and hurt its legibility.
   ========================================================================== */

/* ----------------------------------------------------------- typeface ---- */

/* The Latin stack carries no Arabic glyphs, so without this the Arabic pages
   fall through to whatever the operating system happens to provide — different
   metrics on every machine. Clear Pro Arabic is the brand book's face; Tajawal
   is the closest free stand-in (geometric, circular bowls) until the licensed
   files are dropped in. */
html[lang="ar"],
html[lang="ar"] body {
  --tj-ff-body: 'Clear Pro Arabic', 'Tajawal', sans-serif;
  --tj-ff-heading: 'Clear Pro Arabic', 'Tajawal', sans-serif;
}

/* ------------------------------------------------------- button labels --- */

/* Measured at 16px: Poppins needs a 17px line box, Tajawal needs 24px — Arabic
   ascenders and descenders (ج ح خ ع غ) reach much further. The Latin value of
   1.4 (22.4px) clips them, so RTL gets 1.6 (25.6px).
   Still under the 30px `text-shadow: 0 30px 0` offset that the hover swap
   slides to, so the overflow mask keeps working. */
[dir="rtl"] .tj-primary-btn .btn-text span,
[dir="rtl"] .text-btn .btn-text span,
[dir="rtl"] .footer-cta .cta-btn .btn-text span {
  line-height: 1.6;
}

/* ------------------------------------------------- directional glyphs ---- */

[dir="rtl"] .tji-arrow-right-long,
[dir="rtl"] .tji-arrow-right,
[dir="rtl"] .tji-arrow-right-big,
[dir="rtl"] .tji-arrow-left,
[dir="rtl"] .tji-arrow-down-long {
  display: inline-block;
  transform: scaleX(-1);
}

/* The banner's large arrow sits inside a circular button. */
[dir="rtl"] .banner-link span i { transform: scaleX(-1); }

/* Slider prev/next keep their visual roles; only the glyph flips. */
[dir="rtl"] .slider-prev .anim-icon i,
[dir="rtl"] .slider-next .anim-icon i { transform: scaleX(-1); }

/* ------------------------------------------------------ hover motion ----- */

/* The template nudges button icons with translateX on hover; in RTL that
   pushes them the wrong way, and it also cancels the scaleX flip above. */
[dir="rtl"] .tj-primary-btn:hover .btn-icon i,
[dir="rtl"] .text-btn:hover .btn-icon i {
  transform: scaleX(-1) translateX(4px);
}

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

/* Arabic has no case, and letter-spacing breaks the joining of its letters.
   Both are Latin conventions the template applies globally. */
[dir="rtl"] .sub-title,
[dir="rtl"] .sk-service-sub,
[dir="rtl"] .sk-preloader-label,
[dir="rtl"] .count-text,
[dir="rtl"] .widget-nav-menu .title,
[dir="rtl"] .hamburger-title {
  letter-spacing: 0;
  text-transform: none;
}

/* Clear Pro Arabic / Tajawal sit smaller on the line than the Latin face. */
[dir="rtl"] body { line-height: 1.9; }
[dir="rtl"] .sec-title,
[dir="rtl"] .banner-title,
[dir="rtl"] .tj-page-title { line-height: 1.35; letter-spacing: 0; }
[dir="rtl"] .desc,
[dir="rtl"] .faq-text p { line-height: 1.95; }

/* --------------------------------------------------------- components --- */

/* Scope bullets are positioned with logical insets already; the column rule
   just needs the reading order to feel right. */
[dir="rtl"] .sk-scope { direction: rtl; }

/* The vertical "scroll down" label is rotated; mirror it so it reads upward
   on the side it now sits on. */
[dir="rtl"] .banner-scroll .scroll-down { transform: rotate(180deg); }

/* The map keeps its leftward shift (the form card moves to the left in RTL, so
   the Middle East still lands in the open half). */
[dir="rtl"] .global-map-img {
  margin-inline-start: 0;
  margin-inline-end: -220px;
}

/* The office pins are the one thing that must NOT mirror: the map is an <img>
   and stays as drawn, so a logical inset flips the pin off its own country.
   Pin from the physical left in both directions. */
[dir="rtl"] .location-indicator.loc-1 {
  inset-inline-start: auto;
  left: 60%;
}
[dir="rtl"] .location-indicator.loc-2 {
  inset-inline-start: auto;
  left: 63%;
}

/* Numerals, phone numbers and service codes keep Latin order inside Arabic
   prose. (Also set in sk-brand.css; repeated here for the office blocks.) */
[dir="rtl"] .location-tooltip a,
[dir="rtl"] .footer-office a,
[dir="rtl"] .process-step { direction: ltr; unicode-bidi: isolate; }

/* ================================================ physical box values =====
   The vendor stylesheet is logical almost everywhere, but a handful of rules
   use four-value padding shorthands, which are physical and therefore do not
   mirror. Each one below keeps its left value on the left in RTL, so the space
   meant for the text ends up on the icon side and vice versa.

   Re-expressed as `padding-inline: <start> <end>`, which resolves correctly in
   both directions. Values are the vendor's own — nothing is redesigned, only
   put on the side the reading direction asks for.

   Found by rendering each page LTR and RTL and comparing computed boxes; the
   scan is _build/README.md → "RTL box check".
   ========================================================================== */

/* Pill button: the 25px breathing room belongs beside the label, not the icon. */
[dir="rtl"] .tj-primary-btn { padding-inline: 25px 5px; }
[dir="rtl"] .tj-primary-btn-lg { padding-inline: 44px 7px; }

/* Accordion: the 60px reserve is for the +/- mark, which sits inline-end. */
[dir="rtl"] .tj-faq .accordion-item .faq-title { padding-inline: 0 60px; }

/* Hero arrow link and the two offset card wrappers. */
[dir="rtl"] .banner-content .banner-link { padding-inline: 0 30px; }
[dir="rtl"] .banner-right-box .box-area { padding-inline: 0 15px; }
[dir="rtl"] .faq-img-area .box-area { padding-inline: 15px 0; }
[dir="rtl"] .testimonial-img-area .box-area { padding-inline: 15px 0; }

/* Closing call to action. */
[dir="rtl"] .cta-area .cta-content { padding-inline: 55px 15px; }