/* =========================================================
   ar-overrides.css — Arabic / RTL language overrides
   Loaded LAST so it wins source-order ties with !important
   rules elsewhere. Applies at all viewport sizes.
   ========================================================= */

/* ---------------------------------------------------------
   1. NO ITALICS IN ARABIC
   --------------------------------------------------------- */
[dir="rtl"] em,
[lang="ar"] em,
[dir="rtl"] i,
[lang="ar"] i,
[dir="rtl"] .display em,
[dir="rtl"] .hero-h em,
[dir="rtl"] h1 em,
[dir="rtl"] h2 em,
[dir="rtl"] h3 em,
[dir="rtl"] h4 em,
[dir="rtl"] .hero--v2 .hero-h .line em,
[dir="rtl"] .offices .offices-intro h2 em,
[dir="rtl"] .cta-card h2 em,
[dir="rtl"] .career-start-text em,
[dir="rtl"] .pitch-quote em,
[dir="rtl"] .pitch-quote {
  font-style: normal !important;
  font-family: inherit !important;
}
/* Arabic emphasis tokens render as serif Kufi color accent
   without italic slant. */
[dir="rtl"] .display em,
[dir="rtl"] .hero-h em,
[dir="rtl"] h1 em,
[dir="rtl"] h2 em,
[dir="rtl"] h3 em {
  font-family: 'Noto Kufi Arabic', 'Plus Jakarta Sans', sans-serif !important;
  font-weight: 500 !important;
}

/* ---------------------------------------------------------
   2. RTL TEXT ALIGNMENT — mirror everything that is hard-
   coded to text-align: left in English so it reads right
   aligned in Arabic.
   --------------------------------------------------------- */

/* Hero headlines and bodies */
[dir="rtl"] .hero-copy,
[dir="rtl"] .hero-copy .hero-h,
[dir="rtl"] .hero-copy .hero-h .line,
[dir="rtl"] .hero-copy .hero-h .line > span,
[dir="rtl"] .hero-copy .hero-h .line > em,
[dir="rtl"] .hero-copy .hero-sub,
[dir="rtl"] .hero--v2 .hero-h,
[dir="rtl"] .hero--v2 .hero-h .line,
[dir="rtl"] .hero--v2 .hero-h .line span,
[dir="rtl"] .hero--v2 .hero-h .line em,
[dir="rtl"] .hero .hero-h,
[dir="rtl"] .hero .hero-h .line,
[dir="rtl"] .hero .hero-h .line span,
[dir="rtl"] .hero .hero-h .line em,
[dir="rtl"] .hero .hero-sub,
[dir="rtl"] .hero-sub--full,
[dir="rtl"] .hero-sub {
  text-align: right !important;
}

/* Hero copy block should sit on the right side in RTL */
[dir="rtl"] .hero-copy {
  margin-left: auto !important;
  margin-right: 0 !important;
}
[dir="rtl"] .hero-copy .hero-h,
[dir="rtl"] .hero-copy .hero-sub {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Page heads (Who We Are / What We Do / Careers / Portal) */
[dir="rtl"] .page-head,
[dir="rtl"] .page-head .h-xl,
[dir="rtl"] .page-head .h-xl .line,
[dir="rtl"] .page-head .h-xl .line > span,
[dir="rtl"] .page-head .h-xl .line > em,
[dir="rtl"] .page-head .lede,
[dir="rtl"] .page-route[data-route="what"] .page-head,
[dir="rtl"] .page-route[data-route="what"] .page-head h1,
[dir="rtl"] .page-route[data-route="what"] .page-head .lede {
  text-align: right !important;
}
[dir="rtl"] .page-head .lede {
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Arabic-only home-hero H1 size: anchored at 85px (vs the English
   95px default) with fluid scaling preserved on narrower viewports.
   The expanded selector list covers the parent, each .line, and the
   child spans/ems so any inline 95px / 85px declarations on those
   elements are overridden and the whole headline scales together.
   Scoped to [dir="rtl"] so the English home hero is untouched. */
[dir="rtl"] #home .hero .hero-h,
[dir="rtl"] #home .hero .hero-h .line,
[dir="rtl"] #home .hero .hero-h .line > span,
[dir="rtl"] #home .hero .hero-h .line > em {
  font-size: clamp(40px, 9vw, 85px) !important;
}

/* Arabic-only page-head H1 size + rhythm: anchored at 80px as the
   default with fluid scaling on narrower viewports (the clamp()
   handles responsive shrink/grow). line-height: 1.25 gives the
   Arabic glyphs (which have taller ascenders/descenders) enough
   vertical room to breathe. `!important` is required so this
   beats the mobile-breakpoint `.h-xl` overrides in revisions.css and
   mobile.css (both of which use `!important`). The selector list
   covers the parent, each .line, and the child span/em so the inline
   `font-size: 85px` / inline `height: …px` declarations on the HTML
   (left intact per scope rules) cannot pin those elements to fixed
   values. height: auto lets every node size naturally to its content
   + line-height, keeping multi-line headlines visually tight. */
[dir="rtl"] .page-head .h-xl,
[dir="rtl"] .page-head .h-xl .line,
[dir="rtl"] .page-head .h-xl .line > span,
[dir="rtl"] .page-head .h-xl .line > em {
  font-size: clamp(38px, 8.5vw, 80px) !important;
  line-height: 1.25 !important;
  height: auto !important;
}

/* Arabic-only fix for Portal page-head clipping. The three Arabic
   text boxes on the Portal headline ("ابنِ معنا التقنيات", "التي تُحرّك",
   "أسواق المال.") were rendering shorter than the glyphs' full
   ascender/descender extent, so diacritics at the top and tails at
   the bottom were getting clipped. Giving each inner span/em a
   min-height of 150px gives the Arabic glyphs enough vertical room
   to render fully. `display: inline-block` is required so an inline
   element actually honors `min-height`. Nothing else (font-size,
   line-height, color, weight) is touched. */
[dir="rtl"] #portal .page-head .h-xl .line > span,
[dir="rtl"] #portal .page-head .h-xl .line > em {
  display: inline-block !important;
  min-height: 100px !important;
}

/* Pitch quote + body — match the hero block alignment */
[dir="rtl"] .pitch-quote,
[dir="rtl"] .pitch-body {
  text-align: right !important;
}

/* Section heads + ledes inside content blocks */
[dir="rtl"] .display.h-md,
[dir="rtl"] .display.h-md em,
[dir="rtl"] .display.h-md > *,
[dir="rtl"] .display.h-lg,
[dir="rtl"] .lede,
[dir="rtl"] .body-text,
[dir="rtl"] .systems-prose,
[dir="rtl"] .systems-prose h3,
[dir="rtl"] .systems-prose p,
[dir="rtl"] .book-prose,
[dir="rtl"] .book-prose h2,
[dir="rtl"] .book-prose p,
[dir="rtl"] .offices .offices-intro,
[dir="rtl"] .offices .offices-intro h2,
[dir="rtl"] .offices .offices-intro .lede,
[dir="rtl"] .offices .office h4,
[dir="rtl"] .offices .office p,
[dir="rtl"] .edge-card,
[dir="rtl"] .edge-card h4,
[dir="rtl"] .edge-card p,
[dir="rtl"] .outcome,
[dir="rtl"] .outcome h4,
[dir="rtl"] .outcome p,
[dir="rtl"] .value-row,
[dir="rtl"] .value-row h4,
[dir="rtl"] .value-row p,
[dir="rtl"] .reason,
[dir="rtl"] .reason h4,
[dir="rtl"] .reason p {
  text-align: right !important;
}

/* CTA card — restore standard centering rules don't apply
   to CTA card content (the desktop CTA card centers in EN).
   On mobile and elsewhere where CTA aligns left in EN, it
   should align right in AR. */
[dir="rtl"] .cta-card h2,
[dir="rtl"] .cta-card p,
[dir="rtl"] .career-start-text,
[dir="rtl"] .career-start-text h2,
[dir="rtl"] .career-start-text p {
  text-align: right !important;
}

/* Careers hero CTA — flip its inline alignment for RTL */
[dir="rtl"] #careers .page-head .careers-cta {
  justify-content: flex-end !important;
}

/* Search input + filter labels */
[dir="rtl"] .portal-search input,
[dir="rtl"] .filter-check,
[dir="rtl"] .role-card,
[dir="rtl"] .role-card .ttl,
[dir="rtl"] .role-card .meta {
  text-align: right !important;
}

/* ---------------------------------------------------------
   3. MOBILE-SPECIFIC RTL alignment fixes
   --------------------------------------------------------- */
@media (max-width: 1023.98px) {
  /* Stats: in EN we center, but in AR the section title and
     ledes above should still mirror right. Stat boxes
     themselves stay centered. */
  [dir="rtl"] .lede,
  [dir="rtl"] .pitch-quote,
  [dir="rtl"] .pitch-body,
  [dir="rtl"] .body-text {
    text-align: right !important;
  }

  /* Portal job rows: flip the grid areas in RTL so Apply
     sits on the left and the title/meta on the right. */
  [dir="rtl"] #portal .role-card {
    grid-template-areas: "apply ttl" "apply meta" !important;
    text-align: right !important;
  }

  /* Footer mobile: in RTL the three columns flip, logo
     right-aligned, social column left-aligned (which is the
     "outer" edge in RTL). */
  [dir="rtl"] .footer-mobile,
  [dir="rtl"] .footer-mobile-cols,
  [dir="rtl"] .footer-mobile-col,
  [dir="rtl"] .footer-mobile-col a {
    text-align: right !important;
  }
  [dir="rtl"] .footer-mobile-col {
    align-items: flex-end !important;
  }
  [dir="rtl"] .footer-mobile-brand {
    align-self: flex-end !important;
  }
}

/* ---------------------------------------------------------
   4. KILL inline style="text-align: left" overrides on
   author-edited spans. !important on a [style] attribute
   selector beats inline declarations.
   --------------------------------------------------------- */
[dir="rtl"] [style*="text-align: left"],
[dir="rtl"] [style*="text-align:left"] {
  text-align: right !important;
}