/* brand-ar.css v1 — AR locale layer: IBM Plex Arabic fonts + RTL overrides. Load AFTER brand.css. */

/* IBM Plex Sans Arabic — self-hosted, SIL OFL 1.1.
   unicode-range gates Arabic glyphs only — latin text (40%, AzimutBet, RevShare,
   CPA, 2026, numerals) continues to use Plus Jakarta Sans / Bebas Neue via the
   first-listed-wins rule in :root. Weight 800 не поддерживается upstream —
   .featured-pill (font-weight:800) fallback на 700 by browser nearest-weight. */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-arabic-400.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-arabic-500.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-arabic-600.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/ibm-plex-arabic-700.woff2") format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC;
}

/* ============================================================
   AR font stack overrides
   ============================================================ */
:root{
  --display:     'IBM Plex Sans Arabic', 'Bebas Neue', sans-serif;
  --body:        'IBM Plex Sans Arabic', 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ============================================================
   Letter-spacing removals (Arabic cursive script — spacing breaks ligatures)
   ============================================================ */
.eyebrow{
  letter-spacing: normal;
}

.hdr-link{
  letter-spacing: normal;
}

.brand-hero h1{
  letter-spacing: normal;
}

/* Arabic is cursive — letter-spacing breaks shaping; EN keeps .18em. */
.brand-card__tag{
  letter-spacing: normal;
}

.brand-card__title{
  letter-spacing: normal;
}

.trust-card h3{
  letter-spacing: normal;
}

.promote-card h3{
  letter-spacing: normal;
}

/* ============================================================
   Measure tweak
   ============================================================ */
.lead{max-width:48ch} /* Arabic-tuned measure */

/* ============================================================
   Logical property overrides (RTL-aware positioning)
   ============================================================ */
.skip-link{
  left: auto;
  inset-inline-start: 12px;
}

.mobile-nav__panel{
  right: auto;
  inset-inline-end: 0;
  border-left: none;
  border-inline-start: 1px solid var(--line);
}

.step-num{
  right: auto;
  inset-inline-end: 26px;
}

.benefit{
  padding-right: 0;
  padding-inline-end: 14px;
}

.model-link::after{
  right: auto;
  inset-inline-end: 24px;
}

.featured-pill{
  right: auto;
  inset-inline-end: 26px;
}

/* ============================================================
   RTL directional overrides
   ============================================================ */
/* ============================================================
   RTL overrides (same set as ar/index.html — logical properties handle
   the anchoring; only direction-INSENSITIVE transforms + glyphs need overrides)
   ============================================================ */
/* Drawer transform — CSS transforms are direction-INSENSITIVE, so translateX(100%)
   would slide the panel off the right edge even though RTL anchors it to the left.
   Override to translateX(-100%) so the drawer slides off the LEFT and animates back
   in from the left (natural for RTL reading order). */
[dir="rtl"] .mobile-nav__panel{transform:translateX(-100%)}
[dir="rtl"] .mobile-nav.open .mobile-nav__panel{transform:translateX(0)}

/* "→" arrows in buttons mirror to "←" under RTL — but exclude brand-icon
   buttons (Telegram paper-plane) where the SVG is a logo, not a directional glyph. */
[dir="rtl"] .btn:not(.btn-tg) svg{transform:scaleX(-1)}

/* model-link::after chevron mirrors. Unicode glyph (not scaleX) so the character
   reads naturally; hover slides toward the AR reading direction (leftward). */
[dir="rtl"] .model-link::after{content:"←"}
[dir="rtl"] .model-link:hover::after,
[dir="rtl"] .model-link:focus-visible::after{transform:translateX(-4px)}

/* ============================================================
   VERTICAL / APP PAGE COMPONENTS — RTL overrides (Sprint 4)
   ============================================================ */

/* breadcrumb: separator › reads left-to-right in LTR; in RTL the
   browser reverses the flex flow so the separator reads correctly
   without a glyph swap — no override needed for the text. The
   spacing is handled by gap so no margin-flip is required. */

/* article: Arabic text is naturally right-aligned under dir=rtl;
   no text-align override needed — browser default handles it.
   Letter-spacing on headings is zeroed out (cursive script). */
.article h2{letter-spacing:normal}
.article h3{letter-spacing:normal}
.cross-link-card__title{letter-spacing:normal}
.app-module__title{letter-spacing:normal}

/* cross-link arrow: flip Unicode glyph leftward */
[dir="rtl"] .cross-link-card::after{content:"←"}
[dir="rtl"] .cross-link-card:hover::after{transform:translateX(-3px)}

/* app-module steps: text is rtl-native; counter stays numeric */

/* app-hero grid: copy block text alignment */
[dir="rtl"] .app-hero__copy h1,
[dir="rtl"] .app-hero__copy .lead{text-align:right}
[dir="rtl"] .app-hero__copy .brand-hero__ctas{justify-content:flex-start}