/* Knova Digital Solutions: right-to-left layer for the Arabic pages (/ar/).
   The compiled Tailwind file uses physical left/right utilities. Each directional utility the
   pages actually use is mirrored here under [dir="rtl"]; symmetric ones (px-*, mx-auto, inset-x-0)
   need nothing. Versioned file name: css is cached as immutable, so a change means a new name. */

/* ---- Arabic type ---- */
html[lang="ar"], html[lang="ar"] body { font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif; }
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4 { font-family: 'IBM Plex Sans Arabic', 'Geist', 'Inter', sans-serif; }
/* Letter-spacing pulls Arabic letters apart and breaks their joins: never space Arabic. */
html[lang="ar"] * { letter-spacing: 0 !important; }
html[lang="ar"] body { line-height: 1.7; }
/* Phone numbers and emails keep their own left-to-right order inside Arabic sentences. */
[dir="rtl"] a[href^="tel:"], [dir="rtl"] a[href^="mailto:"] { unicode-bidi: isolate; direction: ltr; }

/* ---- Tailwind utilities, mirrored ---- */
[dir="rtl"] .ml-2 { margin-left: 0; margin-right: .5rem; }
[dir="rtl"] .ml-10 { margin-left: 0; margin-right: 2.5rem; }
[dir="rtl"] .ml-auto { margin-left: 0; margin-right: auto; }
[dir="rtl"] .pl-3\.5 { padding-left: 0; padding-right: .875rem; }
[dir="rtl"] .pl-6 { padding-left: 0; padding-right: 1.5rem; }
[dir="rtl"] .pr-4 { padding-right: 0; padding-left: 1rem; }
[dir="rtl"] .wa-float.pl-3\.5.pr-4 { padding-left: 1rem; padding-right: .875rem; }
[dir="rtl"] .left-0 { left: auto; right: 0; }
[dir="rtl"] .right-0 { right: auto; left: 0; }
[dir="rtl"] .left-0.right-0 { left: 0; right: 0; }
[dir="rtl"] .right-8 { right: auto; left: 2rem; }
[dir="rtl"] .-left-4 { left: auto; right: -1rem; }
[dir="rtl"] .-left-14 { left: auto; right: -3.5rem; }
[dir="rtl"] .-left-28 { left: auto; right: -7rem; }
[dir="rtl"] .-left-32 { left: auto; right: -8rem; }
[dir="rtl"] .-right-10 { right: auto; left: -2.5rem; }
[dir="rtl"] .-right-16 { right: auto; left: -4rem; }
[dir="rtl"] .-right-24 { right: auto; left: -6rem; }
[dir="rtl"] .-right-28 { right: auto; left: -7rem; }
[dir="rtl"] .-right-32 { right: auto; left: -8rem; }
[dir="rtl"] .focus\:left-3:focus { left: auto; right: .75rem; }
[dir="rtl"] .border-l-4 { border-left-width: 0; border-right-width: 4px; }
[dir="rtl"] .rounded-2xl.rounded-bl-sm { border-bottom-left-radius: 1rem; border-bottom-right-radius: .125rem; }
[dir="rtl"] .rounded-2xl.rounded-br-sm { border-bottom-right-radius: 1rem; border-bottom-left-radius: .125rem; }
[dir="rtl"] .-translate-x-1 { --tw-translate-x: .25rem; }
[dir="rtl"] .group:hover .group-hover\:translate-x-1 { --tw-translate-x: -.25rem; }
@media (min-width: 640px) {
  [dir="rtl"] .sm\:text-left { text-align: right; }
}

/* ---- the site's own components (inline stylesheet in the page head) ---- */
[dir="rtl"] .nav-link::after { left: auto; right: 0; }
[dir="rtl"] #progress { left: auto; right: 0; }
[dir="rtl"] .caret::after { margin-left: 0; margin-right: 1px; }
[dir="rtl"] .nav-dd-panel { left: auto; right: 0; }
[dir="rtl"] .nav-dd-panel.nav-dd-wide { right: auto; left: 50%; }
[dir="rtl"] .wa-float { right: auto; left: 20px; }
/* the hero's mini terminal is code: prompts ($, >) and commands read left to right */
[dir="rtl"] .term { direction: ltr; text-align: left; }
/* the logo marquee is a seamless loop of brand names: keep its own left-to-right motion */
[dir="rtl"] .marquee-track { direction: ltr; }

/* ---- icons that point along the reading direction ---- */
[dir="rtl"] [data-lucide="arrow-right"], [dir="rtl"] .lucide-arrow-right,
[dir="rtl"] [data-lucide="send"], [dir="rtl"] .lucide-send { scale: -1 1; }