/* ============================================================
   X THE WEB — RTL / Arabic overrides
   Loaded ONLY on /ar/ pages, after style.css. Do not load on
   English pages — it intentionally overrides shared selectors.
   ============================================================ */

:root{
  --font-display: 'Cairo', 'IBM Plex Sans Arabic', 'Tahoma', sans-serif;
  --font-body: 'IBM Plex Sans Arabic', 'Tahoma', sans-serif;
}

html{ direction: rtl; }
body{ direction: rtl; }

/* Directional icon mirroring — arrows that point "forward" in LTR
   need to point the other way in RTL to still read as "forward" */
.ri-arrow-right-line,
.ri-arrow-right-s-line,
.ri-arrow-right-up-line{
  display:inline-block; transform: scaleX(-1);
}
/* the services dropdown chevron is a "down" indicator, not directional — don't flip it */
.dropdown > a > .ri-arrow-down-s-line{ transform:none; }

/* Floating action buttons mirror sides so they don't collide with scrollbars/gestures */
#wa-float{ left:auto; right:26px; }
#scroll-top{ right:auto; left:26px; }
@media (max-width:640px){
  #wa-float{ left:auto; right:18px; }
  #scroll-top{ right:auto; left:18px; }
}

/* Portfolio hover icon (top-right in LTR) mirrors to top-left */
.pf-link-icon{ right:auto; left:16px; }

/* Marquee ticker scrolls the opposite physical direction so it still reads
   start-to-end for RTL users */
.marquee-track{ animation-direction: reverse; }

/* Nav toggle hamburger lines are symmetric already — no change needed */

/* Quote card avatar image kept LTR-safe (logo mark, not text) */
.quote-card .qa img{ direction: ltr; }

/* WhatsApp / phone numbers and email addresses read correctly left-to-right
   even inside RTL paragraphs */
.wa-number, .ltr-num, a[href^="mailto:"], a[href^="tel:"], a[href^="https://wa.me"]{
  unicode-bidi: plaintext;
}

/* Slightly larger line-height reads more comfortably for Arabic script */
body{ line-height: 1.75; }
.lead, .svc-lead{ line-height: 1.65; }

/* Form fields: right-aligned placeholder/text is automatic via dir=rtl,
   just make sure icons inside fields (if any) mirror too */
.fc-icon{ direction: ltr; }