/* ════════════════════════════════════════════════════════════════
   ARABIC  (html[lang="ar"][dir="rtl"])
   /style.css already carries a full [dir="rtl"] block. This file adds only
   what that block does not cover, plus the language switcher.
════════════════════════════════════════════════════════════════ */

/* Arabic glyphs read larger than Latin at the same px, so the whole page steps
   down slightly. Carried over from the hand-tuned overrides on the live /ar/ page. */
html[lang="ar"] {
  font-size: 95%;
}

/* Latin-only elements keep LTR internally. Their layout is hard-coded for Latin
   and a bidi flip reorders them wrongly: "+971 54" becomes "54 971+". */
html[lang="ar"] .footer-logo,
html[lang="ar"] .nav-logo,
html[lang="ar"] .yka-signature,
html[lang="ar"] .stat-num,
html[lang="ar"] .film-url,
html[lang="ar"] .lang-switch {
  direction: ltr;
  unicode-bidi: embed;
}

/* ── Language switcher ─────────────────────────────────────────── */
/* direction:ltr above keeps EN / ع / 中 in a stable reading order on both
   sides of the site rather than reversing between languages. */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-inline: 6px;
}
.lang-switch .lang-opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border: 1px solid rgba(201, 168, 76, 0.3);
  border-radius: 999px;
  color: var(--gold);
  font-family: 'Tajawal', 'DM Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.lang-switch .lang-opt:hover {
  background: var(--gold);
  color: var(--black);
  border-color: var(--gold);
}
.lang-switch .lang-opt.is-current {
  background: rgba(201, 168, 76, 0.16);
  border-color: var(--gold);
  cursor: default;
}
/* Below 768px the nav collapses to the hamburger drawer, which carries the
   language options. Matches how the original two-way toggle behaved. */
@media (max-width: 768px) {
  .lang-switch { display: none; }
}

/* ── Heading leading, all viewports ─────────────────────────────
   /style.css sets [dir="rtl"] h1 to line-height 1.15 and .section-headline to
   1.2. Measured on the live desktop page, every Arabic heading overflowed its
   line box by 9 to 16px: Arabic stacks a hamza and a shadda above the Latin cap
   height and drops ج ع ل م well below the baseline. The hero sits inside a
   section with overflow:hidden, so there it was genuinely cut off.
   Measured: 1.4 still left 2 to 4px, 1.45 left 2px, 1.5 clears every heading on
   the site at every size. */
html[lang="ar"] .hero-content h1,
html[lang="ar"] h1,
html[lang="ar"] h2,
html[lang="ar"] .section-headline,
html[lang="ar"] .showreel-headline,
html[lang="ar"] .contact-headline,
html[lang="ar"] .about-h2-top,
html[lang="ar"] .about-h2-bottom {
  line-height: 1.5;
}

/* ── Mobile heading leading ─────────────────────────────────────
   /style.css sets [dir="rtl"] h1 to line-height 1.15 and .section-headline to
   1.2. Those work at desktop sizes but clip on a 390px viewport: Arabic
   descenders (ج ع ل م) drop well below the Latin baseline, and the ascending
   hamza and shadda sit above the Latin cap height. Measured at 5 to 8px of
   overflow on the homepage before this rule. Pre-existing on the live /ar/ page. */
@media (max-width: 768px) {
  html[lang="ar"] .hero-content h1,
  html[lang="ar"] h1 {
    line-height: 1.35;
  }
  html[lang="ar"] .section-headline,
  html[lang="ar"] .about-h2-top,
  html[lang="ar"] .about-h2-bottom,
  html[lang="ar"] .showreel-headline,
  html[lang="ar"] h2 {
    line-height: 1.4;
  }
}

/* ── Arrows on the pages built from the English source ─────────── */
/* The English markup writes its arrows as literal ← and → glyphs inside the
   copy, not as .arrow spans, so the existing scaleX(-1) rule never reaches them.
   In RTL a "back" arrow points right and "forward" points left. The translation
   maps already carry the correct glyph per string, so nothing is flipped here.
   This rule only isolates them so bidi cannot drag them to the wrong end. */
html[lang="ar"] .back-link,
html[lang="ar"] .project-nav a,
html[lang="ar"] .btn-gold,
html[lang="ar"] .btn-outline-dim,
html[lang="ar"] .btn-outline-gold {
  unicode-bidi: isolate;
}

/* ── Arabic film title ──────────────────────────────────────────
   Arabic script is cursive: adjacent letters join with connecting strokes.
   Any letter-spacing pulls those joins apart, so the word stops reading as one
   connected shape. .illicit-ar-title carried 0.02em from the Latin design,
   which is what made ابعد الحلال look broken. It also sat at line-height 1,
   clipping 13px of descender off the final ل.

   This element carries lang="ar" but lives inside the English and Chinese pages
   as well, where the [dir="rtl"] rules in /style.css never reach it, so the same
   block is appended to en.css and zh.css. */
.illicit-ar-title,
[lang="ar"]:not(html) {
  letter-spacing: normal !important;
}
.illicit-ar-title {
  line-height: 1.45;
  padding-bottom: 0.08em;
}

/* Reem Kufi is a geometric Kufi face. On this particular string it compresses
   ح ل ا ل into a single unreadable block, which is what made the title look
   broken. Amiri is a classical naskh with the same high-contrast calligraphic
   character as Playfair Display next to it, and it renders ابعد الحلال cleanly. */
.illicit-ar-title {
  font-family: 'Amiri', 'Tajawal', serif !important;
  font-weight: 700;
  line-height: 1.6;   /* Amiri sits taller than Reem Kufi; 1.45 still clipped 3px */
}

/* ── Client logo marquee ────────────────────────────────────────
   .clients-track is display:flex with width:max-content, animated from
   translateX(0) to translateX(-50%). Under dir="rtl" the flex box extends
   leftward from the container's right edge, and the translate then pushes it
   further left: measured at left:-4345px on a 1440px viewport, so the whole
   strip sat off-screen and the logos were invisible in Arabic.

   A logo strip carries no reading order, so this one element stays LTR and the
   original animation works unchanged. animation-direction stays reverse, which
   now scrolls the strip in the Arabic reading direction. */
html[lang="ar"] .clients-marquee,
html[lang="ar"] .clients-track {
  direction: ltr;
}