/* ============================================================
   ar.css — Arabic (RTL) overrides for ahmedsimary.com
   Loaded AFTER main.css, only on /ar/ pages (dir="rtl").
   Purpose:
   1. Kill letter-spacing + uppercase (both break Arabic joining).
   2. Force the Arabic type face on display headings / serif accents
      that main.css otherwise sets to the Latin display font.
   3. Correct a few physical-direction paddings/margins for RTL.
   The English site is untouched — every rule is scoped to [dir="rtl"].
   ============================================================ */

/* --- 1. Neutralise Latin micro-typography that corrupts Arabic --- */
[dir="rtl"] .eyebrow,
[dir="rtl"] .scene-label,
[dir="rtl"] .wm,
[dir="rtl"] .menu a,
[dir="rtl"] .menu-btn,
[dir="rtl"] .menu-label,
[dir="rtl"] .btn,
[dir="rtl"] .hero-h1,
[dir="rtl"] .hero-support,
[dir="rtl"] .hero-proof,
[dir="rtl"] .hero-pause,
[dir="rtl"] .sect-h,
[dir="rtl"] .sect-more,
[dir="rtl"] .metric-label,
[dir="rtl"] .metric-val,
[dir="rtl"] .case-big-label,
[dir="rtl"] .case-title,
[dir="rtl"] .case-kicker,
[dir="rtl"] .case-stats,
[dir="rtl"] .case-cta,
[dir="rtl"] .disc h3,
[dir="rtl"] .disc-num,
[dir="rtl"] .tags span,
[dir="rtl"] .tags li,
[dir="rtl"] .film-pause,
[dir="rtl"] .film-caption,
[dir="rtl"] .man-body,
[dir="rtl"] .pull,
[dir="rtl"] .client-wall li,
[dir="rtl"] .client-wall span,
[dir="rtl"] .rec-who,
[dir="rtl"] .rec-who span,
[dir="rtl"] .rec-verified,
[dir="rtl"] .post-meta,
[dir="rtl"] .post-title,
[dir="rtl"] .post-desc,
[dir="rtl"] .closing-h,
[dir="rtl"] .closing-line,
[dir="rtl"] .crumbs,
[dir="rtl"] .page-h1,
[dir="rtl"] .page-intro,
[dir="rtl"] .archive-body h3,
[dir="rtl"] .archive-stats,
[dir="rtl"] .assignment dt,
[dir="rtl"] .assignment dd,
[dir="rtl"] .case-hero-media figcaption,
[dir="rtl"] .case-body h2,
[dir="rtl"] .related-sub,
[dir="rtl"] .role-head h2,
[dir="rtl"] .role-meta,
[dir="rtl"] .lead-list h3,
[dir="rtl"] .toolkit dt,
[dir="rtl"] .cat,
[dir="rtl"] .toc h2,
[dir="rtl"] .toc a,
[dir="rtl"] .field label,
[dir="rtl"] .ftr-name,
[dir="rtl"] .ftr-line,
[dir="rtl"] .ftr-nav a,
[dir="rtl"] .ftr-actions a,
[dir="rtl"] .ftr-base,
[dir="rtl"] .article-body h2,
[dir="rtl"] .article-body h3,
[dir="rtl"] .article-meta,
[dir="rtl"] .article-lede,
[dir="rtl"] .article-nav-item,
[dir="rtl"] .related-card,
[dir="rtl"] .lang-toggle {
  letter-spacing: normal;
  text-transform: none;
}

/* --- 2. Use the Arabic face wherever main.css forces a Latin face --- */
[dir="rtl"] .wm,
[dir="rtl"] .menu a,
[dir="rtl"] .btn,
[dir="rtl"] .hero-h1,
[dir="rtl"] .sect-h,
[dir="rtl"] .case-title,
[dir="rtl"] .case-kicker,
[dir="rtl"] .disc h3,
[dir="rtl"] .post-title,
[dir="rtl"] .closing-h,
[dir="rtl"] .page-h1,
[dir="rtl"] .archive-body h3,
[dir="rtl"] .case-body h2,
[dir="rtl"] .role-head h2,
[dir="rtl"] .lead-list h3,
[dir="rtl"] .toc h2,
[dir="rtl"] .article-body h2,
[dir="rtl"] .article-body h3,
[dir="rtl"] .man-body,
[dir="rtl"] .hero-support,
[dir="rtl"] .sect-copy,
[dir="rtl"] .page-intro,
[dir="rtl"] .article-lede,
[dir="rtl"] .article-body p,
[dir="rtl"] .article-body li {
  font-family: var(--ar-face);
}

/* Instrument Serif italic accents have no Arabic glyphs — reset to
   the Arabic face and drop the italic so they render cleanly. */
[dir="rtl"] .serif,
[dir="rtl"] em.serif,
[dir="rtl"] .hero-serif,
[dir="rtl"] .pull.serif,
[dir="rtl"] .closing-line.serif {
  font-family: var(--ar-face);
  font-style: normal;
}

/* --- 3. Headings read better slightly looser in Arabic --- */
[dir="rtl"] .hero-h1 { line-height: 1.15; }
[dir="rtl"] .sect-h,
[dir="rtl"] .closing-h,
[dir="rtl"] .page-h1 { line-height: 1.25; }
[dir="rtl"] .article-body p,
[dir="rtl"] .man-body,
[dir="rtl"] .sect-copy,
[dir="rtl"] .hero-support { line-height: 1.95; }

/* --- 4. Physical-direction fixes for RTL flow --- */
[dir="rtl"] .skip { left: auto; right: var(--space-4); }
[dir="rtl"] .film-pause { left: auto; right: 10px; }
[dir="rtl"] .hero-pause { right: auto; left: var(--mx); }
[dir="rtl"] .eyebrow { text-align: right; }
[dir="rtl"] .ftr-name .ar-sig { margin-left: 0; margin-right: 10px; }
[dir="rtl"] .article-body blockquote {
  border-left: 0;
  border-right: 2px solid var(--accent);
  padding-left: 0;
  padding-right: var(--space-5);
}
[dir="rtl"] .lead-list h3::before {
  margin-right: 0;
  margin-left: var(--space-3);
}
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="tel"],
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] .metric-val,
[dir="rtl"] time {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Keep Latin brand marks (wordmark Latin line, FIN., phone, emails,
   LinkedIn/WhatsApp) rendering left-to-right inside the RTL page. */
[dir="rtl"] .fin,
[dir="rtl"] .wm,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] .ltr { direction: ltr; unicode-bidi: isolate; }

/* Header nav lays the language toggle inline with the menu (or the
   mobile menu button) instead of stacking. Applies to EN + AR. */
.hdr-nav { display: flex; align-items: center; gap: 14px; }

/* --- 5. Language toggle (EN/AR) pill in the header --- */
.lang-toggle {
  font-family: var(--font-display);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-display);
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 7px 12px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  transition: color 180ms var(--ease2), border-color 180ms var(--ease2);
}
.lang-toggle:hover { color: var(--text-primary); border-color: var(--text-secondary); }
[dir="rtl"] .lang-toggle { direction: ltr; unicode-bidi: isolate; }