/* ============================================================
   ar-styles.css — RTL + Arabic typography overrides
   Loaded ONLY on /ar/* pages, after the main styles.css
   ============================================================ */

/* ─── Arabic typography ─────────────────────────────────────── */
[dir="rtl"] {
  --font-display: 'Tajawal', 'Gilroy', system-ui, -apple-system, sans-serif;
  --font-body: 'Tajawal', system-ui, -apple-system, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6,
[dir="rtl"] p, [dir="rtl"] li, [dir="rtl"] a,
[dir="rtl"] button, [dir="rtl"] input,
[dir="rtl"] textarea, [dir="rtl"] select,
[dir="rtl"] span:not(.brand):not(.brand__logo) {
  font-family: 'Tajawal', system-ui, -apple-system, sans-serif !important;
  font-feature-settings: "kern", "liga";
}

/* Arabic looks heavier — tune line-height up */
[dir="rtl"] {
  line-height: 1.7;
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
  line-height: 1.25;
}

/* ─── Brand logo stays LTR (it's an SVG with English text) ─── */
[dir="rtl"] .brand,
[dir="rtl"] .brand__logo {
  direction: ltr;
}

/* English brand names embedded in Arabic should not mirror */
[dir="rtl"] .platform__body h3,
[dir="rtl"] em[lang="en"],
[dir="rtl"] [dir="ltr"] {
  direction: ltr;
  unicode-bidi: embed;
}

/* ─── Phone numbers, emails, URLs stay LTR ─────────────────── */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] code {
  direction: ltr;
  unicode-bidi: bidi-override;
  display: inline-block;
}

/* ─── Nav layout: flip the direction visually ───────────────── */
[dir="rtl"] .nav {
  flex-direction: row-reverse;
}
[dir="rtl"] .nav__links {
  flex-direction: row-reverse;
}

/* ─── Hero block positioning: mirror the absolute positions ── */
[dir="rtl"] .blocks .blk--1,
[dir="rtl"] .blocks .blk--2,
[dir="rtl"] .blocks .blk--3,
[dir="rtl"] .blocks .blk--4,
[dir="rtl"] .blocks .blk--metric,
[dir="rtl"] .blocks .blk--trust {
  /* Mirror by swapping left/right values */
  transform: scaleX(-1);
}
[dir="rtl"] .blocks .blk > * {
  /* Un-mirror the text inside the blocks */
  transform: scaleX(-1);
}

/* ─── Capabilities grid: reverse order on desktop ───────────── */
[dir="rtl"] .caps__grid {
  direction: rtl;
}

/* ─── Numbers in eyebrows: use Arabic numerals naturally ─── */
[dir="rtl"] .eyebrow__num,
[dir="rtl"] .blk__k,
[dir="rtl"] .step__k,
[dir="rtl"] .cap__num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* ─── Buttons: chevron icons should mirror via inline style ── */
[dir="rtl"] .btn svg {
  /* handled via inline transform:scaleX(-1) on each arrow */
}

/* ─── Marquee: reverse animation direction so it flows correctly ─── */
[dir="rtl"] .marquee__track {
  animation-direction: reverse;
}

/* ─── Forms: align labels to the right ─────────────────────── */
[dir="rtl"] .field span,
[dir="rtl"] .wstep__legend {
  text-align: right;
}
[dir="rtl"] .field input,
[dir="rtl"] .field textarea,
[dir="rtl"] .field select {
  text-align: right;
}
[dir="rtl"] .field input[type="email"],
[dir="rtl"] .field input[type="tel"],
[dir="rtl"] .field input[type="url"] {
  /* Email, phone, URL — keep input LTR for typing */
  direction: ltr;
  text-align: right;
}

/* ─── Footer grid: align right ──────────────────────────────── */
[dir="rtl"] .foot__grid > div {
  text-align: right;
}
[dir="rtl"] .foot__bottom {
  flex-direction: row-reverse;
}

/* ─── Language switcher button ──────────────────────────────── */
.lang-switch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid var(--border, rgba(0,0,0,0.15));
  color: var(--text, #1a1a1a);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.lang-switch:hover {
  background: var(--text, #1a1a1a);
  color: var(--bg, #f4f0ea);
  transform: translateY(-1px);
}

/* ─── Process rail: reverse order ────────────────────────────── */
[dir="rtl"] .process__rail {
  direction: rtl;
}

/* ─── Approach cols ────────────────────────────────────────── */
[dir="rtl"] .approach__cols {
  direction: rtl;
}

/* ─── Mobile responsive: keep nav clean on small screens ───── */
@media (max-width: 768px) {
  [dir="rtl"] .nav {
    padding: 12px 16px;
  }
  [dir="rtl"] .hero__copy {
    text-align: right;
  }
}

/* ─── Reading polish: Arabic justified text reads better ─── */
[dir="rtl"] .approach__lead,
[dir="rtl"] .approach__sub,
[dir="rtl"] .section-sub,
[dir="rtl"] .hero__lede {
  text-align: start;
  word-spacing: 0.05em;
}

/* ─── Chip buttons in Arabic: a tiny tweak for tajawal weight ── */
[dir="rtl"] .chip {
  font-weight: 500;
  letter-spacing: 0;
}

/* ─── Reel + project cards: ensure RTL flow ─────────────────── */
[dir="rtl"] .reel {
  direction: rtl;
}
[dir="rtl"] .shot__meta {
  text-align: right;
}
[dir="rtl"] .shot__meta span {
  direction: ltr;
  unicode-bidi: embed;
  display: inline-block;
}

/* ─── Logo position swap (so logo stays on right in RTL) ───── */
[dir="rtl"] .brand--lg {
  margin-left: auto;
  margin-right: 0;
}