/* ===== Arabic site (/ar) — right-to-left overrides =====
   Loaded only by app/(ar)/layout.tsx, after bundle.css. Grid and flex rows
   already mirror under dir="rtl"; this file fixes what doesn't: fonts,
   letter-spacing, and physical left/right positioning. */

/* every font variable the site uses → the Arabic family */
:root {
  --font-orbitron: var(--font-arabic);
  --font-poppins: var(--font-arabic);
  --font-sora: var(--font-arabic);
  --ff-display: var(--font-arabic), "IBM Plex Sans Arabic", system-ui, sans-serif;
  --ff-body: var(--font-arabic), "IBM Plex Sans Arabic", system-ui, sans-serif;
}

/* letter-spacing pulls Arabic letters apart and breaks the joins between them */
[dir="rtl"] *,
[dir="rtl"] *::before,
[dir="rtl"] *::after { letter-spacing: 0 !important; }

/* Arabic needs more vertical room than Orbitron/Poppins were tuned for */
[dir="rtl"] body { line-height: 1.8; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4 { line-height: 1.45; }

/* serif intro paragraphs have no Arabic glyphs */
[dir="rtl"] .sol-intro-txt,
[dir="rtl"] .intro-txt { font-family: var(--ff-body); }

/* arrows and chevrons that point "forward" */
[dir="rtl"] .sol-rel-go,
[dir="rtl"] .btn svg,
[dir="rtl"] .arrow-flip { transform: scaleX(-1); }
[dir="rtl"] .sol-rel-go { right: auto; left: 22px; }
[dir="rtl"] .sol-rel-card:hover .sol-rel-go { transform: scaleX(-1) translateX(4px); }

/* text that was forced left */
[dir="rtl"] .footer-col,
[dir="rtl"] .sec-head { text-align: right; }

/* the chat widget sits on the left in RTL so it mirrors the layout */
[dir="rtl"] .tc { right: auto; left: 26px; }
[dir="rtl"] .tc-launcher { margin-left: 0; margin-right: auto; }
[dir="rtl"] .tc-greet { right: auto; left: 74px; border-bottom-right-radius: 16px; border-bottom-left-radius: 5px; transform-origin: bottom left; }

/* code snippets, emails and phone numbers stay left-to-right */
[dir="rtl"] code, [dir="rtl"] pre, [dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] a[href^="mailto:"], [dir="rtl"] a[href^="https://wa.me"] { unicode-bidi: isolate; }

/* header + mobile menu */
[dir="rtl"] .mnav-acc-head { text-align: right; }
@media (max-width: 768px) {
  [dir="rtl"] .nav-cta { margin-left: 0; margin-right: auto; }
}
[dir="rtl"] .nav-caret { margin-left: 0; margin-right: 4px; }

/* Decorative glows and marquees bleed past the screen edge. In LTR that overflow
   sits on the right, where it can't be scrolled to; in RTL it lands on the side
   the page CAN scroll toward, and phones then let the whole page drift sideways.
   clip (unlike hidden) creates no scroll container, so sticky elements still work. */
[dir="rtl"] main,
[dir="rtl"] .site-footer { overflow-x: clip; }

/* chat panel opens from the launcher's side */
[dir="rtl"] .tc-panel { right: auto; left: 0; transform-origin: bottom left; }
@media (max-width: 430px) {
  [dir="rtl"] .tc { left: 16px; }
}