/* =========================================================
   LinSync — RTL / Arabic overrides
   Loaded ONLY on the Arabic page (ar/index.html), after main.css.
   Everything here is scoped to html[dir="rtl"] so it can never
   affect the English site.
   ========================================================= */

/* ---------- Typography ---------- */
html[dir="rtl"] body {
  font-family: 'Tajawal', 'Space Grotesk', system-ui, -apple-system, sans-serif;
}

/* Elements that used the Latin mono face get a clean Arabic face */
html[dir="rtl"] .section-tag,
html[dir="rtl"] .hero-eyebrow,
html[dir="rtl"] .marquee-track,
html[dir="rtl"] .service-num,
html[dir="rtl"] .service-list li,
html[dir="rtl"] .stat-num,
html[dir="rtl"] .stat-label,
html[dir="rtl"] .scroll-hint,
html[dir="rtl"] .pkg-tab,
html[dir="rtl"] .pkg-price .from,
html[dir="rtl"] .pkg-price .amount,
html[dir="rtl"] .package-note,
html[dir="rtl"] .form-title,
html[dir="rtl"] .stack-pill,
html[dir="rtl"] .advanced-pills span,
html[dir="rtl"] .contact-meta strong {
  font-family: 'Tajawal', sans-serif;
}

/* Keep the wordmark + the lang switch glyph on-brand (Latin) */
html[dir="rtl"] .nav-logo-text,
html[dir="rtl"] .footer-name {
  font-family: 'Space Grotesk', sans-serif;
}

/* Arabic is cursive — letter-spacing severs the joins. Kill it everywhere. */
html[dir="rtl"] * { letter-spacing: normal !important; }

/* Arabic glyphs are taller — give headings room so nothing clips */
html[dir="rtl"] .hero-title  { line-height: 1.35; }
html[dir="rtl"] .section-title { line-height: 1.3; }

/* ---------- Mirrored bits that don't flip automatically ---------- */

/* Service index number to the visual left */
html[dir="rtl"] .service-num { right: auto; left: 28px; }

/* "Forward" arrows should point the reading direction (left) */
html[dir="rtl"] .btn svg,
html[dir="rtl"] .nav-cta svg,
html[dir="rtl"] .service-cta span {
  display: inline-block;
  transform: scaleX(-1);
}

/* Typewriter caret on the other side */
html[dir="rtl"] .cursor-bar { margin-left: 0; margin-right: 4px; }

/* Contact heading is force-left in main.css — bring it back to the edge */
html[dir="rtl"] .contact-left .section-title { text-align: right; }

/* Hover nudge mirrors */
html[dir="rtl"] .contact-option:hover { transform: translateX(-4px); }

/* Footer copy to the natural far edge */
html[dir="rtl"] .footer-copy { text-align: left; }

/* Mobile menu drops from the right edge in RTL */
@media (max-width: 900px) {
  html[dir="rtl"] .nav-links.open { right: auto; left: 16px; }
}

/* Marquee: run the track as an LTR strip so the 50% loop stays seamless.
   Each <span> still shapes its Arabic correctly via Unicode bidi. */
html[dir="rtl"] .marquee-track { direction: ltr; }

/* ---------- WhatsApp floating bubble ---------- */
html[dir="rtl"] .wa-bubble { padding: 0 0 0 22px; }
html[dir="rtl"] .wa-pulse  { left: auto; right: 0; }
html[dir="rtl"] .wa-label  { transform: translateX(10px); }
html[dir="rtl"] .wa-bubble:hover .wa-label { transform: translateX(0); }
@media (max-width: 600px) {
  html[dir="rtl"] .wa-bubble { padding: 0; }
}