/* ============================================================
   Vootlabs — Arabic / right-to-left layer.
   Loaded after site.css on /ar/ pages only (<html lang="ar" dir="rtl">).
   ============================================================ */

/* ---------- type ---------- */
/* Arabic glyphs come from IBM Plex Sans Arabic; Latin words fall through to IBM Plex Sans. */
html[dir="rtl"] {
  --font: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Inter', 'Segoe UI', Tahoma, sans-serif;
}
html[dir="rtl"] body { font-feature-settings: normal; line-height: 1.75; }
/* Connected script: tracking breaks letter joins, so reset it everywhere. */
html[dir="rtl"] body, html[dir="rtl"] body * { letter-spacing: 0 !important; }
/* Arabic ascenders/descenders need more room than the tight Latin display leading. */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] .closing h2, html[dir="rtl"] .contact-aside h2,
html[dir="rtl"] .svc-row h3, html[dir="rtl"] .mobile-menu nav a { line-height: 1.35; }
html[dir="rtl"] .faq-a-inner, html[dir="rtl"] .prose p, html[dir="rtl"] .legal p { line-height: 1.85; }
/* Small labels were uppercase Latin with tracking; give Arabic a touch more size instead. */
html[dir="rtl"] .eyebrow, html[dir="rtl"] .work-meta .tag, html[dir="rtl"] .modal-body .tag { font-size: 13px; }
/* Keep Latin-only snippets (emails, the English switch) left-to-right inside Arabic lines. */
html[dir="rtl"] [lang="en"], html[dir="rtl"] a[href^="mailto:"] { unicode-bidi: isolate; }

/* ---------- direction-sensitive bits ---------- */
html[dir="rtl"] .legal ul { padding-left: 0; padding-right: 20px; }
html[dir="rtl"] .faq-q,
html[dir="rtl"] button.contact-card,
html[dir="rtl"] .closing { text-align: right; }

/* arrows point the reading direction */
html[dir="rtl"] .textlink svg { transform: scaleX(-1); }
html[dir="rtl"] .textlink:hover svg { transform: scaleX(-1) translateX(4px); }
html[dir="rtl"] .work-meta .arrow { transform: scaleX(-1); }
html[dir="rtl"] .work-card:hover .work-meta .arrow,
html[dir="rtl"] .work-card:focus-visible .work-meta .arrow { transform: scaleX(-1) translate(3px, -3px); }

/* close buttons and the modal title's clearance move to the left */
html[dir="rtl"] .modal-close,
html[dir="rtl"] .form-modal-close { right: auto; left: 16px; }
html[dir="rtl"] .form-modal-title { padding-right: 0; padding-left: 40px; }

/* select chevron on the left */
html[dir="rtl"] .form select { background-position: left 16px center; }

/* ---------- hero composition, mirrored ---------- */
html[dir="rtl"] .hl-dash  { left: auto; right: 2%;  transform: rotateY(18deg) rotateX(6deg); }
html[dir="rtl"] .hl-chat  { left: auto; right: -4%; transform: rotateY(18deg) rotateX(6deg); }
html[dir="rtl"] .hl-phone { left: auto; right: 70%; transform: rotateY(18deg) rotateX(6deg); }
html[dir="rtl"] .hl-dash img  { filter: drop-shadow(-20px 30px 38px rgba(40,25,12,0.22)); }
html[dir="rtl"] .hl-chat img  { filter: drop-shadow(-16px 26px 34px rgba(40,25,12,0.24)); }
html[dir="rtl"] .hl-phone img { filter: drop-shadow(-18px 28px 36px rgba(40,25,12,0.30)); }
html[dir="rtl"] .hero-stack:hover .hl-phone { transform: rotateY(16deg) rotateX(5deg) translate(-10px, -8px) scale(1.03); }
html[dir="rtl"] .hero-stack:hover .hl-chat  { transform: rotateY(16deg) rotateX(5deg) translate(12px, 6px) scale(1.03); }
html[dir="rtl"] .hero-stack:hover .hl-dash  { transform: rotateY(16deg) rotateX(5deg) translateY(-4px); }

/* ---------- small screens ---------- */
@media (max-width: 820px) {
  html[dir="rtl"] .mobile-menu nav a { font-size: 30px; }
}
@media (max-width: 560px) {
  html[dir="rtl"] h1 { line-height: 1.4; }
  html[dir="rtl"] .hl-chat { right: 0; }  /* keep the chat card off the screen edge */
}