/* Loaded only on /ar/ pages, after site.css. The English site never sees it.
   site.css is already logical-property based (text-align:start/end,
   padding-inline, inset-inline-*), so direction:rtl does most of the work;
   this file adds the Arabic webfont and patches decorations that don't flip
   on their own. tokens.css is vendored/no-edit, so the font override lives
   here. Numerals stay Western (0-9); do not switch to font-feature Eastern. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap');

:root {
  --rp-font-arabic: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', system-ui, sans-serif;
}

html[lang="ar"] body,
html[dir="rtl"] body {
  font-family: var(--rp-font-arabic);
}

/* Headings/display use the same Arabic family (Sora has no Arabic glyphs). */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ar"] .h2, html[lang="ar"] .hero-title,
html[lang="ar"] .brand__name, html[lang="ar"] .site-footer__brand-name {
  font-family: var(--rp-font-arabic);
}

/* Decoration patches: any ::before/::after list bullets or arrows that were
   authored pointing one way. Verified against the 390px render in Step 3 —
   add a rule here ONLY for a decoration that actually looks wrong RTL. */

/* /ar/demo/'s header has no nav/hamburger to tuck the EN|ع switcher into
   (unlike the home page, where it lives inside the collapsible nav) — it is
   a third always-visible item next to the brand and the Sign-in button.
   "تسجيل الدخول" is wider than "Sign in", and together with the switcher
   that no longer fits the bar below ~345px (found at the 320px render in
   Step 6). The footer still carries the same switcher, so hiding the
   header one here below 365px loses no functionality, only bar crowding —
   365px rather than site.css's own 359px header breakpoint because the
   translated "تسجيل الدخول" needs a few pixels more room than "Sign in"
   even alone; measured empirically against the render (no overflow from
   320px through 400px with this threshold).
   `.site-header__inner > .nav__lang-group` — a direct-child selector,
   deliberately — only matches the demo pages' header, where the switcher
   sits straight in the bar; on the home pages it is nested one level
   deeper inside `.nav`/`#siteNav`, which this must not touch (that markup
   is the *only* place it survives on a narrow home page — .nav itself is
   hidden below 1080px until the hamburger opens it). */
@media (max-width: 364px) {
  html[dir="rtl"] .site-header__inner > .nav__lang-group { display: none; }
}