/* ============================================================
   Webify Component Library — RTL layer
   ------------------------------------------------------------
   99% of layout is already mirrored by CSS logical properties
   in base.css / components.css. This file only handles what
   direction-neutral properties cannot: physical icon flips and
   bidi isolation of Latin/number runs inside Arabic text.
   Loaded on every page; scoped to [dir="rtl"] so it is inert
   in LTR.
   ============================================================ */

/* Directional glyphs (arrows, chevrons) must mirror in RTL.
   Add data-flip to any inline SVG whose meaning depends on
   reading direction (e.g. "next" / "back" arrows). */
[dir="rtl"] [data-flip] { transform: scaleX(-1); }

/* Keep phone numbers, emails, prices, latin brand names and
   dimensions readable inside RTL paragraphs. Wrap such runs in
   <bdi> or class .ltr-num in the markup. */
[dir="rtl"] .ltr-num,
[dir="rtl"] bdi {
  unicode-bidi: isolate;
  direction: ltr;
}

/* Hero gradient reads best angled toward the text side. */
[dir="rtl"] .hero {
  background:
    linear-gradient(200deg, color-mix(in srgb, var(--brand-primary-dark) 92%, transparent), color-mix(in srgb, var(--brand-primary) 78%, transparent)),
    var(--brand-primary);
}

/* WhatsApp float already uses inset-inline-end (mirrors itself);
   nothing to override. Mobile drawer flip handled in components.css. */

/* Arabic pages draw everything in the Arabic face. Components that name
   --font-heading / --font-body directly (the hero-stack titles, tier
   values, case-study labels, shop buttons, tags...) were falling through
   Outfit/Inter, which carry no Arabic, to whatever system font the OS
   picked, and once the fonts were self-hosted that also fetched Outfit on
   Arabic pages for their Latin runs. Remapping the two variables here
   (html[dir] outranks the inline :root block build.py emits) makes every
   Arabic page Cairo-only. Same variable names, same fallback stack. */
html[dir="rtl"] {
  --font-heading: var(--font-arabic);
  --font-body: var(--font-arabic);
}