/* ==========================================================================
   Numera v1 - rtl.css
   Arabic RTL overrides - loads AFTER ../css/main.css
   Only overrides what needs direction-flipping or Arabic-specific sizing.
   ========================================================================== */

/* ---- Direction + Arabic body font ---- */
html, body {
  direction: rtl;
  text-align: right;
}
body {
  font-family: var(--font-arabic);
  font-size: 18px;
  line-height: 1.7;
}

/* ==========================================================================
   FONT FAMILY OVERRIDE — force Tajawal across all display text
   ==========================================================================
   main.css sets var(--font-display) (DM Sans) explicitly on .hero__title and
   .pill / .nav__cta. Without this override, those render in DM Sans on AR
   even though body inherits Tajawal. Force Tajawal everywhere except where
   we WANT Latin (.nav__logo-text = "Numera" wordmark, .stat__v / .tier__price
   / .zatca__deadline / .wedge__n = LTR Western numerals in JetBrains Mono). */
.hero__title,
.hero__sub,
.section h2,
.wedges__title,
.pricing__title,
.founders__title,
.zatca__headline,
.zatca__sub,
.cta__title,
.manifesto__body,
.manifesto__eyebrow,
.wedges__eyebrow,
.pricing__eyebrow,
.founders__eyebrow,
.cta__eyebrow,
.wedge h3,
.wedge p,
.tier__name,
.tier__volume,
.tier__incl,
.tier__incl li,
.tier__badge,
.pricing__addons,
.founder__name,
.founder__role,
.founder__bio,
.footer h4,
.footer__col a,
.footer__col p,
.pill,
.pill--primary,
.pill--ghost,
.pill--accent,
.pill--ghost-dark,
.nav__cta {
  font-family: var(--font-arabic) !important;
}

/* ---- Hero title + sub ----
   Per ui-ux-pro-max: Arabic weight stays 600-700 (not 800); Tajawal glyphs at
   800 + 130px overrun the hero and stress letter joining. Drop the clamp,
   lighten the weight, breathe the line-height, and tighten max-width so the
   tagline wraps to 2 lines cleanly. */
.hero__title {
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 700;
  line-height: 1.2;
  max-width: 720px;
}
.hero__sub {
  font-size: clamp(18px, 1.9vw, 22px);
  font-family: var(--font-arabic);
  font-weight: 400;
  line-height: 1.55;
  max-width: 480px;
}

/* ==========================================================================
   ARABIC LETTER-JOINING PRESERVATION (universal reset)
   ==========================================================================
   EN main.css uses letter-spacing across many selectors:
     -0.02em (display headlines, tight Latin tracking)
     -0.015em, -0.01em (section titles)
     -0.005em (manifesto body)
     +0.04em, +0.06em (logo text, small labels)
     +0.08em, +0.1em (medium caps tags)
     +0.14em (eyebrows: "What we do", "Pricing", etc.)
     +0.22em (scroll cue)
   ALL of these break Arabic cursive joining. Negative spacing collapses joins;
   positive spacing disconnects them. Both fail.
   Native Arabic typography uses TATWEEL (kashida U+0640) for visual stretching,
   never CSS letter-spacing. Reset everything to normal here. */
*, *::before, *::after {
  letter-spacing: normal !important;
  word-spacing: normal !important;
}

/* ---- Section headings: keep generous line-height for Arabic ---- */
.section h2,
.wedges__title,
.pricing__title,
.founders__title,
.zatca__headline,
.cta__title,
.manifesto__body,
.founder__name {
  line-height: 1.2;
}

/* ---- Eyebrows: EN uses 11px MONO UPPERCASE which is unreadable in Arabic.
   Arabic has no uppercase + no mono Arabic glyphs (JetBrains Mono falls back
   ugly). Override to Cairo at readable size, drop uppercase, keep accent
   color + tracking-equivalent weight. ---- */
.manifesto__eyebrow,
.wedges__eyebrow,
.pricing__eyebrow,
.founders__eyebrow,
.zatca__eyebrow {
  font-family: var(--font-arabic);
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
}

/* Body sizes (single source of truth, sizes only in this block) */
.manifesto__body { font-size: clamp(20px, 2.2vw, 26px); }
.zatca__sub { font-size: 19px; }
.founder__bio { font-size: 17px; line-height: 1.65; }

/* ---- Manifesto eyebrow + body ---- */
.manifesto__eyebrow {
  text-align: right;
}

/* ---- Wedge number stays LTR (01 / 02 / 03) ---- */
.wedge__n {
  direction: ltr;
  display: inline-block;
  font-family: var(--font-mono);
}

/* ---- Pricing: Western numerals stay LTR for tabular alignment ---- */
.tier__price,
.tier__period {
  direction: ltr;
  display: inline-block;
  font-family: var(--font-mono);
}

/* ---- Tier volume + badge ---- */
.tier__volume {
  text-align: right;
}

/* ---- Tier inclusion list: bullets on right in RTL ---- */
.tier__incl {
  padding: 0 18px 0 0;
}
.tier__incl li {
  text-align: right;
}

/* ---- Pricing addons ---- */
.pricing__addons {
  text-align: right;
}

/* ---- Numbers / stats: align the whole cell to the right in RTL.
   EN main.css sets .stat { text-align: left } which leaves the number on the
   left edge of its cell while the AR label is right-aligned -> misalignment.
   Override the parent to right-align both. ---- */
.stat { text-align: right; }
.stat__v,
.stat__v[data-target] {
  direction: ltr;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: clamp(44px, 5.4vw, 64px);
}
.stat__k {
  text-align: right;
  font-size: 18px;
  line-height: 1.5;
  max-width: 240px;
  margin-top: 12px;
  margin-right: 0;
  margin-left: auto;
}

/* ---- ZATCA: deadline + days stay LTR ---- */
.zatca__deadline,
.zatca__days {
  direction: ltr;
  display: inline-block;
  font-family: var(--font-mono);
}
.zatca__setup-line {
  text-align: right;
}

/* ---- Founder card text ---- */
.founder__name,
.founder__role,
.founder p,
.founder__bio {
  text-align: right;
}

/* ---- Footer ---- */
.footer__inner,
.footer__bottom {
  direction: rtl;
}
.footer__col h4,
.footer__col a,
.footer__col p,
.footer__brand p {
  text-align: right;
}
.footer__name {
  text-align: right;
}

/* ---- Nav: LTR children need direction reset for logo + links ---- */
.nav__logo {
  direction: ltr;
}
.nav__right {
  direction: ltr;
}

/* ---- Hero CTA pills: RTL native flow handles; keep pills LTR internally ---- */
.pill {
  direction: ltr;
}

/* ---- Scroll cue ---- */
.hero__scroll-cue {
  direction: ltr;
  font-family: var(--font-mono);
}

/* ---- Wedge header ---- */
.wedges__eyebrow,
.pricing__eyebrow,
.founders__eyebrow,
.zatca__eyebrow {
  text-align: right;
}

/* ---- Wedge grid items ---- */
.wedge h3,
.wedge p {
  text-align: right;
}

/* ---- CTA section title ---- */
.cta__title {
  text-align: right;
}