/* RTL corrections.
   Layout already mirrors correctly because every rule uses logical
   properties. Only decorative direction and Latin-in-Arabic runs need help. */

[dir='rtl'] .hero::before {
  background:
    radial-gradient(62vw 44vh at 18% -12%, color-mix(in srgb, var(--lime) 13%, transparent), transparent 62%),
    radial-gradient(48vw 38vh at 96% 112%, color-mix(in srgb, var(--mint) 11%, transparent), transparent 62%);
}

/* Credential IDs, URLs, phone numbers and code stay left-to-right. */
[dir='rtl'] .cred__id,
[dir='rtl'] .linklist .value,
[dir='rtl'] pre,
[dir='rtl'] code {
  direction: ltr;
  text-align: start;
  unicode-bidi: isolate;
}

/* Latin technology names inside Arabic text should not flip punctuation. */
[dir='rtl'] .badge {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir='rtl'] .chat__card-body,
[dir='rtl'] .chat__msg {
  text-align: start;
}

/* The heading ornament and footer hairline are drawn with physical
   gradients — mirror them so the pipeline flows right-to-left. */
[dir='rtl'] .section__head h2::after,
[dir='rtl'] .site-footer::before {
  transform: scaleX(-1);
}

/* the contact-link arrow points with the reading direction */
[dir='rtl'] .linklist a::after { content: '←'; }

/* the "see all" arrow points with the reading direction */
[dir='rtl'] .section__more-arrow { transform: scaleX(-1); }

/* Mirrored hover motion, gated the same way the LTR rules are — a tap must
   not leave the arrow displaced. */
@media (hover: hover) {
  [dir='rtl'] .linklist a:hover::after { transform: translateX(-4px); }
  [dir='rtl'] .section__more:hover .section__more-arrow { transform: scaleX(-1) translateX(3px); }
}

/* ---------- phone ---------- */

/* Layout mirrors for free through logical properties. Only the tab-bar
   indicator is drawn with a physical offset and needs help. */
@media (max-width: 767px) {
  [dir='rtl'] .mobile-tabs a[aria-current='page']::after {
    inset-inline-start: 22%;
  }
}