/* Right-to-left pages (ADR-0018): loaded AFTER the mirrored stylesheets (static/css/rtl/, generated by
   tools/build_rtl.py) on pages whose locale is in clsI18n.RTL — Arabic today. The mirrored files flip
   the layout; this file only carries what mirroring can't: the Arabic typeface and the tracking the
   Latin fonts add. (fonts.css sets a Latin font on every element, hence the universal selectors.) */

[dir="rtl"], [dir="rtl"] * {
  font-family: "Segoe UI", Tahoma, "Noto Sans Arabic", "Noto Naskh Arabic", "Helvetica Neue", Arial, sans-serif;
  letter-spacing: 0;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 { font-weight: 700; }
/* Latin names and codes inside Arabic copy keep their shape (WebHR, e-mails, phone numbers). */
[dir="rtl"] input, [dir="rtl"] textarea { unicode-bidi: plaintext; }
[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"], [dir="rtl"] code { direction: ltr; unicode-bidi: isolate; }
/* Things that read left-to-right whatever the page direction: the hero mock's clipped logo (overflow would
   show its far end), the instance address field (yourcompany.webhr.co), the counted-up hero stats (163+). */
[dir="rtl"] .wh-mock__logo, [dir="rtl"] .wh-login__field { direction: ltr; }
[dir="rtl"] .wh-hero__stat strong { direction: ltr; unicode-bidi: isolate; }
/* Directional icons point the reading way: the "arrow" (→) becomes ← (icons get a wh-i-<name> class). */
[dir="rtl"] .wh-i-arrow, [dir="rtl"] .wh-i-arrow-right { transform: scaleX(-1); }
/* The hover nudge on those arrows (nav.css / app.css / footer.css: translateX(3px), mirrored to -3px) replaces
   the transform, so it is restated with the flip: slide 3px further along the reading direction (left). */
[dir="rtl"] .wh-nav__foot a:hover .wh-i-arrow, [dir="rtl"] .wh-nav__btn:hover .wh-i-arrow,
[dir="rtl"] .wh-foot__btn:hover .wh-i-arrow, [dir="rtl"] .wh-btn--primary:hover svg.wh-i-arrow { transform: scaleX(-1) translateX(3px); }