/* RTL + Arabic type overrides for the /ar/ sub-pages.
 *
 * Loaded AFTER what-we-do/css/style.css, which stays the single source of truth for
 * layout and colour — this file only flips the handful of rules in it that are
 * direction-specific, plus the font stack. Keep it that way: anything that could live
 * in style.css belongs there, or the two will drift.
 *
 * The audit of style.css found exactly three direction-dependent rules; they are the
 * three blocks below. The mobile .site-nav uses left:0 + right:0 together, which is
 * already symmetric, and every other layout rule is flexbox or centred text.
 */

body {
  /* Inter carries no Arabic glyphs — without this the page silently falls back to a
     system Arabic face and loses the type design entirely. */
  font-family: "IBM Plex Sans Arabic", "Inter", system-ui, -apple-system, sans-serif;
}

/* Arabic script is cursive — letters join. style.css tracks Latin type in five places
 * (.brand-name, .eyebrow, h1, .footer-tagline, .legal-hero .eyebrow), and every one of
 * them is wrong here: positive letter-spacing pulls joined letterforms apart, and the
 * negative -0.01em values crush them together. text-transform: uppercase is simply a
 * no-op, since Arabic has no letter case.
 *
 * Each override must MATCH the original selector, not just the element. A universal `*`
 * reset has zero specificity and loses to all of them, and a bare `h1` (0,0,1) loses to
 * `.hero h1` (0,1,1). Add to this list if you add a tracked rule to style.css. */
.brand-name,
.eyebrow,
.hero h1,
.legal-hero h1,
.footer-tagline,
.legal-hero .eyebrow {
  letter-spacing: normal;
  text-transform: none;
}

/* Arabic has no ascender/descender rhythm to tighten against, and the Latin heading
   sizes crowd at these weights. Loosen the leading rather than shrink the type.
   .hero h1 / .legal-hero h1 are listed for the same specificity reason as above. */
h1, h2, h3,
.hero h1,
.legal-hero h1 {
  line-height: 1.4;
}

.hero-lede,
.section-subtitle,
.feature-card p,
.layer-card p {
  line-height: 1.9;
}

/* style.css:80 — .brand-name sits to the right of the logo mark in RTL. */
.brand-name {
  margin-left: 0;
  margin-right: 10px;
}

/* style.css:272 — the numbered layer cards are the only left-aligned block. */
.layer-card {
  text-align: right;
}

/* style.css:480 — legal pages only. Included so a future Arabic terms/privacy page
   doesn't reintroduce the bug; harmless on the pages that exist today. */
.legal-body ul,
.legal-body ol {
  padding-left: 0;
  padding-right: 22px;
}