/* Header typography: branded Latin/Cyrillic with script-aware, self-hosted fallbacks. */
@import url("/fonts/header/fonts.css?v=1");

:root { --font-header: "Header Onest", "Header Noto Sans", "Header Noto Sans Arabic", "Header Noto Sans Hebrew", "Header Noto Sans Devanagari", "Header Noto Sans Bengali", "Header Noto Sans Telugu", "Header Noto Sans Tamil", "Header Noto Sans Gujarati", "Header Noto Sans Gurmukhi", "Header Noto Sans Kannada", "Header Noto Sans Malayalam", "Header Noto Sans Oriya", "Header Noto Sans Thai", "Header Noto Sans Lao", "Header Noto Sans Myanmar", "Header Noto Sans Khmer", "Header Noto Sans Sinhala", "Header Noto Sans Ethiopic", "Header Noto Sans SC", "Header Noto Sans TC", "Header Noto Sans JP", "Header Noto Sans KR", system-ui, sans-serif; }
:root:lang(ja) { --font-header-cjk: "Header Noto Sans JP"; }
:root:lang(ko) { --font-header-cjk: "Header Noto Sans KR"; }
:root:lang(zh-Hant), :root:lang(yue) { --font-header-cjk: "Header Noto Sans TC"; }
:root:lang(zh-Hans), :root:lang(wuu), :root:lang(nan) { --font-header-cjk: "Header Noto Sans SC"; }
.nav { font-family: var(--font-header-cjk, "Header Onest"), var(--font-header); }
.nav-links a, .nav-mobile-links a { line-height: 1.5; }
.nav-mobile-links a { overflow-wrap: anywhere; }
.nav .nav-cta { font-family: inherit; }
.lang-currency-sheet { font-family: var(--font-header-cjk, "Header Onest"), var(--font-header); }
.lang-currency-sheet .lang-currency-opt, .lang-currency-sheet .lang-currency-name, .lang-currency-sheet .lang-currency-head h3 { font-family: inherit; }
/* Avoid clipping vowels/diacritics in Indic, Arabic and Southeast Asian scripts. */
.nav :is(a, button) { text-underline-offset: .2em; }
[dir="rtl"] .nav-account-balance { padding-left: 0; border-left: 0; padding-right: 8px; border-right: 1px solid #BDE7D2; direction: ltr; unicode-bidi: isolate; }
@media (max-width: 560px) { [dir="rtl"] .nav-account-balance { padding-right: 0; border-right: 0; } }

/* Keep all mobile header controls readable, including a currency chip and a funded wallet. */
@media (max-width: 560px) {
  .nav .nav-inner {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px;
  }
  .nav-inner > .logo { grid-area: 1 / 1; }
  .nav-inner > .nav-menu-toggle { grid-area: 1 / 2; justify-self: end; }
  .nav-inner > .lang-currency {
    grid-area: 2 / 1; justify-self: start; max-width: 100%; flex-wrap: wrap;
  }
  .nav-inner > .nav-account-cta {
    grid-area: 2 / 2; justify-self: end; max-width: 45vw;
  }
  .nav .nav-account-balance { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
}