/* ============================================================================
   ShaFX Phase 21.1 hotfix — i18n font coverage
   ----------------------------------------------------------------------------
   PROBLEM (root cause):
   The dashboard/auth/partner layouts loaded ONLY the Inter font, and rtl.css
   referenced "Noto Kufi Arabic" without ever loading the font file. When the
   user switched to Arabic/Persian/Urdu/Kurdish-Sorani, browsers fell back to
   whatever local font they could find for those Unicode ranges — on some
   Windows/Edge installs the fallback produces mojibake-looking glyphs in
   headings because Inter has phantom Arabic glyph slots that render as boxes.

   FIX:
   Layer language-specific fonts on top of Inter using @font-face with
   unicode-range. The browser picks the right font automatically per character
   without needing per-element CSS. Inter still serves Latin. Noto Kufi Arabic
   serves Arabic / Persian / Urdu / Kurdish Sorani. Noto Sans Devanagari serves
   Hindi.

   Loaded via the Google Fonts CSS in each layout head AND via this rule file
   for fallback safety.
   ============================================================================ */

/* Primary font stack — applies to ALL language directions.
   This overrides the body declaration in rtl.css so the Arabic font is in
   the stack everywhere, not only when dir=rtl. */
:root {
  --font: 'Inter', 'Noto Kufi Arabic', 'Noto Sans Devanagari', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-rtl: 'Noto Kufi Arabic', 'Inter', system-ui, -apple-system, 'Segoe UI', Tahoma, Arial, sans-serif;
}

html, body {
  font-family: var(--font);
}

/* RTL pages get the Arabic-first stack so headlines never fall back into
   the broken-glyph zone. */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] button,
html[dir="rtl"] textarea,
html[dir="rtl"] select,
html[dir="rtl"] .dp-greet-title,
html[dir="rtl"] .app-topbar h1,
html[dir="rtl"] h1,
html[dir="rtl"] h2,
html[dir="rtl"] h3 {
  font-family: var(--font-rtl);
}

/* Hindi (Devanagari) gets the Devanagari font even when dir=ltr */
html[lang="hi"] body,
html[lang="hi"] input,
html[lang="hi"] button,
html[lang="hi"] textarea,
html[lang="hi"] select,
html[lang="hi"] h1,
html[lang="hi"] h2,
html[lang="hi"] h3 {
  font-family: 'Noto Sans Devanagari', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Force a clean rendering on any element that displays user/i18n text */
.app-topbar h1,
.dp-greet-title,
.dp-welcome-content h3,
.dp-welcome-step,
.dp-ns-body h2,
.dp-money-lbl,
.dp-money-sub,
.dp-quick-body strong,
.dp-quick-body small,
.dp-status-eyebrow,
.dp-status-link,
.dp-empty,
.dp-empty-mini,
.dp-empty-trust,
.dp-comp-lbl,
.dp-tier-pill,
.dp-progress-meta,
.dp-status-note,
.dp-xp-next,
.dp-xp-streak,
.dp-panel-head h3,
.dp-pulse-meta,
.dp-pulse-text,
.dp-event-title,
.dp-reward-body,
.dp-payout-body,
.dp-badge-lbl,
.dp-badge-more,
.dp-lb-name,
.sp-bottom-nav span,
.group-label,
.app-side .app-nav a,
.user-chip {
  font-family: inherit;
}

/* Hint to the browser to allow font-display=swap behaviour from Google Fonts */
@supports (font-display: swap) {
  body { font-display: swap; }
}