/* =====================================================================
   HILLOOL — ARABIC (RTL) OVERRIDES
   Loaded after styles.css only on the Arabic page. Handles:
     1. Arabic font family
     2. Direction-flip for elements that use physical (not logical)
        left/right values in the base stylesheet
     3. Letter-spacing reset (negative tracking breaks Arabic glyph joining)
   ===================================================================== */

:root {
  --font-heading: 'Tajawal', sans-serif;
  --font-body: 'Tajawal', sans-serif;
}

html, body { direction: rtl; }

/* Arabic script is cursive — negative letter-spacing breaks joining, and
   uppercase tracking has no Arabic equivalent. Reset everywhere. */
* { letter-spacing: normal !important; }

/* ---------- Text alignment ---------- */
.step-card { text-align: right; }
@media (min-width: 768px) {
  .footer__legal { text-align: right; }
  .footer__bottom { text-align: right; }
}

/* ---------- List markers (padding-left / left-anchored ::before) ---------- */
.service-card__list li,
.method-card__list li {
  padding-left: 0;
}
.service-card__list li { padding-right: 1.1rem; }
.method-card__list li { padding-right: .9rem; }
.service-card__list li::before,
.method-card__list li::before {
  left: auto;
  right: 0;
}
.service-card__list li::before { content: '←'; }

.pain-card__icon-arc { transform: rotate(45deg); }

/* ---------- Trust card body indent ---------- */
.trust-card__body { padding-left: 0; padding-right: 1.75rem; }

/* ---------- Quote block leading border ---------- */
.about__quote {
  border-left: none;
  border-right: 3px solid var(--solar-amber);
  border-radius: .5rem 0 0 .5rem;
}

/* ---------- Hero scroll hint anchored to leading edge ---------- */
.hero__scroll-hint { left: auto; right: 0; }

/* ---------- Product card explore link arrow ---------- */
.product-card__link-arrow { display: inline-block; transform: scaleX(-1); }

/* ---------- Body-copy size bump ----------
   Arabic sets at the same px size as the Latin original reads visually
   smaller, so nudge the root scale up a bit. Rem-based spacing scales
   with it too, which is fine at this magnitude. */
html { font-size: 107%; }

/* ---------- Decorative circle motifs — mirror to the left ----------
   The English layout anchors every background circle/orbit to the
   right (right: -Xrem), which is where the English hero/section text
   is visually weighted. Arabic text is right-aligned instead, so the
   same right-anchored motifs would sit under the text. Mirror every
   anchor to the opposite edge, same magnitude. */
.hero__motif--1 { right: auto; left: -7rem; }
.hero__motif--2 { right: auto; left: -3rem; }
.hero__motif--orbit-inner { right: auto; left: -3rem; }
.hero__motif--orbit-outer { right: auto; left: -7rem; }
.hero__motif--orbit-outer-green { right: auto; left: -7rem; }
@media (min-width: 640px) {
  .hero__motif--1 { left: -13rem; }
  .hero__motif--2 { left: -5rem; }
  .hero__motif--orbit-inner { left: -5rem; }
  .hero__motif--orbit-outer,
  .hero__motif--orbit-outer-green { left: -13rem; }
}

/* Dot orbit radius is a fixed pixel offset from the ring's center — with
   the ring now anchored left (bleeding off-screen left), the visible arc
   is on the right side of the ring, so the horizontal bias flips sign. */
.hero__motif-dot--inner { transform: translate(calc(-50% + 127.4px), -50%); }
.hero__motif-dot--outer { transform: translate(calc(-50% + 131.7px), calc(-50% + 131.7px)); }
@media (min-width: 640px) {
  .hero__motif-dot--inner { transform: translate(calc(-50% + 206px), -50%); }
  .hero__motif-dot--outer { transform: translate(calc(-50% + 235.6px), calc(-50% + 235.6px)); }
}

.problem__motif { right: auto; left: -8rem; }
.credibility__motif { left: auto; right: -11rem; }
.wwd__motif { right: auto; left: -9rem; }
.reassurance__motif--1 { right: auto; left: 5rem; }
.reassurance__motif--2 { left: auto; right: -13rem; }
.testimonials__motif { right: auto; left: 5rem; transform: rotate(-10deg); }
.about__motif { right: auto; left: -11rem; }
.contact__motif--1 { right: auto; left: -13rem; }
.contact__motif--2 { left: auto; right: 1.5rem; transform: rotate(15deg); }
@media (min-width: 640px) { .contact__motif--2 { right: 2rem; } }
@media (min-width: 768px) { .contact__motif--2 { right: 3rem; } }
@media (min-width: 1024px) { .contact__motif--2 { right: 5rem; } }

/* ---------- Sliders (testimonials / founders) & logo marquee ----------
   Both rely on a child wider than its `overflow:hidden` parent, shifted
   with a raw pixel/percent `transform: translateX()` (JS index math for
   the sliders, a `-50%` keyframe for the marquee) — math calibrated on
   the assumption that the child starts left-aligned to the parent, i.e.
   flush with translateX(0).
   Under page-level dir:rtl that assumption breaks at the PARENT, not
   just the track: an in-flow child wider than an rtl containing block
   right-aligns and overflows off its LEFT edge instead of left-aligning
   and overflowing off its right edge. So the visible slice starts
   somewhere in the middle of the item list instead of at the first
   item, and every transform is now offset from a different baseline
   than the one it was calibrated for — the sliders skip/misalign and
   the marquee's loop runs past the real content into blank space.
   Fix at the parent (overflow:hidden) level so the child's own flow
   position is correct again; direction is inherited so the track
   doesn't need its own rule. Individual slide contents are flipped
   back to rtl so the Arabic text inside still reads correctly — the
   marquee has no text, just logos, so it needs no such override. */
.logo-marquee,
.testimonials__viewport,
.founders__viewport {
  direction: ltr;
}
.testimonial-card,
.founder-slide {
  direction: rtl;
}

/* ---------- Support chat widget — mirror the floating launcher/panel
   to the leading (left) edge, matching every other right-anchored
   fixed/absolute element above. Message bubble alignment doesn't need
   an override: it uses flex-start/flex-end, which is already direction-
   aware. ---------- */
.chat-widget__toggle { right: auto; left: 20px; }
.chat-widget { right: auto; left: 20px; }
@media (min-width: 640px) {
  .chat-widget__toggle { left: 32px; }
  .chat-widget { left: 32px; }
}
.chat-widget__close { margin-left: 0; margin-right: auto; }