/* ==========================================================================
   DARSO STUDIO — RTL overrides (Arabic pages only)
   Loaded in addition to style.css when <html dir="rtl">.
   Flexbox/grid item order already mirrors automatically with dir="rtl";
   this file handles the remaining directional details.
   ========================================================================== */

html[dir="rtl"] body{
  font-family: 'Cairo', 'Inter', sans-serif;
}
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4{
  font-family: 'Cairo', 'Space Grotesk', sans-serif;
  letter-spacing: 0;
}
html[dir="rtl"] .eyebrow, html[dir="rtl"] .nav-links a, html[dir="rtl"] .btn,
html[dir="rtl"] .hero-kicker, html[dir="rtl"] .breadcrumb, html[dir="rtl"] .s-tags span,
html[dir="rtl"] .footer-col h4, html[dir="rtl"] .case-meta h4, html[dir="rtl"] .led-feature h4,
html[dir="rtl"] .value-num, html[dir="rtl"] .svc-num, html[dir="rtl"] .m-num{
  font-family: 'Cairo', 'IBM Plex Mono', monospace;
  letter-spacing: 0;
}

/* Scroll cue rotates with reading direction */
html[dir="rtl"] .hero-scroll{ right: auto; left: var(--gutter); }

/* Breadcrumb separator direction already reads fine with "/" — no change needed */

/* svc-glyph illustrations: subtle horizontal flip so any embedded directionality
   (e.g. the LED-wall perspective) reads naturally in an RTL layout */
html[dir="rtl"] .svc-glyph{ transform: translate(50%,-50%) perspective(1000px) rotateX(5deg) rotateY(7deg) scaleX(-1); }
html[dir="rtl"] .svc-glyph{ left: auto; right: 50%; }
html[dir="rtl"] .svc-slide.is-active .svc-glyph{ animation: svcFloat3dRtl 9s ease-in-out infinite; }
@keyframes svcFloat3dRtl{
  0%,100%{ transform: translate(50%,-50%) perspective(1000px) rotateX(7deg) rotateY(9deg) translateZ(0px) scale(1.02) scaleX(-1); }
  50%{ transform: translate(50%,-50%) perspective(1000px) rotateX(-3deg) rotateY(-8deg) translateZ(34px) scale(1.06) scaleX(-1); }
}

/* Method / value / stat numerals stay LTR (Western digits read the same),
   force ltr direction so "01", "360°" etc. don't get reshuffled */
html[dir="rtl"] .value-num, html[dir="rtl"] .svc-num, html[dir="rtl"] .m-num,
html[dir="rtl"] .s-index, html[dir="rtl"] .s-num, html[dir="rtl"] [data-count]{
  direction: ltr; display:inline-block;
}

/* Form fields: right-align labels and inputs, keep email/tel/url LTR for readability */
html[dir="rtl"] .field input[type="email"],
html[dir="rtl"] .field input[type="tel"],
html[dir="rtl"] .field input[type="url"]{
  direction: ltr; text-align: right;
}

/* Filter buttons / tags wrap naturally; no change needed thanks to dir=rtl */

/* Footer social row and language switch stay visually mirrored automatically
   via flexbox + dir=rtl; only fine-tune the small connector line in .eyebrow */
html[dir="rtl"] .eyebrow::before{ order: 2; }