/*
 * Right-to-left (Arabic) adjustments. Loaded only when the page language has dir="rtl" (includes/head.php).
 * main.css already uses logical properties (margin-inline-start, inset-inline-end…), so most of the layout
 * mirrors on its own; this file covers what logical properties cannot: fonts, transforms and directional icons.
 */

/* Arabic typeface; Inter stays first for Latin brand names, numbers and code */
:root[dir="rtl"] {
  --font-family: "Inter", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* Letter-spacing breaks Arabic letter joining; tight Latin-tuned line-heights clip Arabic marks */
[dir="rtl"] * { letter-spacing: 0 !important; }
[dir="rtl"] .display,
[dir="rtl"] h1,
[dir="rtl"] h2,
[dir="rtl"] h3 { line-height: 1.32; }

/* Forward arrows point left in RTL */
[dir="rtl"] svg:has(> path[d="M5 12h14m-6-6 6 6-6 6"]),
[dir="rtl"] svg:has(> path[d="M5 12h14M13 6l6 6-6 6"]) { transform: scaleX(-1); }
[dir="rtl"] .text-link:hover svg { transform: scaleX(-1) translateX(3px); }
[dir="rtl"] .site-footer--global .footer-col a:hover { transform: translateX(-2px); }

/* Elements centred with inset-inline-start: 50% + translateX(-50%) need the opposite shift */
[dir="rtl"] .hub-paradox::before,
[dir="rtl"] .showcase-map-node,
[dir="rtl"] .automation-node--trigger,
[dir="rtl"] .automation-node--condition,
[dir="rtl"] .automation-branch { transform: translateX(50%); }
[dir="rtl"] .solutions-compass__core { transform: translate(50%, -50%); }

/* Product screenshots, logo marquee, code and technical values keep their left-to-right layout */
[dir="rtl"] .partner-marquee,
[dir="rtl"] .feature-art .art-window,
[dir="rtl"] .shot-frame { direction: ltr; }
[dir="rtl"] code,
[dir="rtl"] pre,
[dir="rtl"] .code-block,
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"] { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .code-block,
[dir="rtl"] pre { text-align: left; }
[dir="rtl"] input[type="email"]::placeholder { direction: rtl; text-align: right; }