/* Languages: the picker in the nav, system-font fallbacks for the scripts Satoshi does not cover,
   and typography that suits each script. Loaded after the other sheets (see index.html). i18n.js sets <html lang> and data-lang. */

/* Until the translation is in, a non-English page stays hidden for a moment instead of flashing English (i18n.js adds and removes the class). */
html.i18n-wait body { visibility: hidden; }

/* ───────── the language picker in the nav pill ─────────
   A round-ish chip with a globe and the language code. The real <select> sits invisibly on top, so a click opens
   the browser's own list of languages (a proper picker on phones) and keyboard and screen readers work as usual. */
.lang {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 13px 0 11px; border-radius: 999px;
  border: 1px solid rgba(216, 216, 203, 0.18); background: rgba(216, 216, 203, 0.07); color: inherit;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.lang:hover { background: rgba(216, 216, 203, 0.14); border-color: rgba(216, 216, 203, 0.34); }
.lang:focus-within { outline: 2px solid #a9c6e8; outline-offset: 2px; }
.lang svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
.lang-code { font-size: 13.5px; font-weight: 500; letter-spacing: 0.04em; line-height: 1; }
.lang select {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer;
  appearance: none; -webkit-appearance: none; font: inherit; font-size: 16px; /* 16px: iOS Safari does not zoom the page when it opens */
  color: #041122; background: #d8d8cb;
}
.lang option { color: #041122; background: #d8d8cb; }
@media (prefers-reduced-motion: reduce) { .lang { transition: none; } }

/* On a phone the pill is crowded: keep the globe, drop the code, and let the button's label shrink to what is left. */
@media (max-width: 520px) {
  .lang { width: 38px; padding: 0; justify-content: center; }
  .lang-code { display: none; }
  .nav-pill { gap: 6px; padding: 0 6px 0 14px; min-width: 0; max-width: 100%; }
  .nav-pill .brand { font-size: 18px; gap: 7px; }
  .nav-pill .btn-sm { min-width: 0; padding: 0 13px; font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 380px) {
  .nav-pill .brand { gap: 0; font-size: 0; } /* the logo mark alone */
  .nav-pill .brand .logo { width: 26px; height: 26px; }
}

/* ───────── typography per script ───────── */
/* Headlines get a hard break instead of a column that scrolls sideways, in every language. */
h1, h2, h3, .story-copy p, .lead, .faq summary, .tile p { overflow-wrap: break-word; }

/* Chinese, Japanese, Korean: Satoshi has no CJK glyphs, so name the system faces in order, per language
   (the same Han characters are drawn differently in each). Medium (500) is the heaviest weight everywhere. */
:root:lang(zh) { --font: "Satoshi", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif; }
:root:lang(ja) { --font: "Satoshi", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Meiryo", "Noto Sans CJK JP", "Noto Sans JP", ui-sans-serif, system-ui, sans-serif; }
:root:lang(ko) { --font: "Satoshi", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Noto Sans KR", ui-sans-serif, system-ui, sans-serif; }
/* Satoshi has no Cyrillic (nor Greek or Vietnamese): those glyphs fall back to the system sans in the --font stack. The page tight tracking (-0.05em) is made for Latin, so ease it for Russian. */
:root:lang(ru) :is(h1, h2, h3, .brand, .g-name b, .g-read .txt b, .ring-mid b, .w-cond, .visa-big b, .gs-n, .h-next .when) { letter-spacing: -0.02em; }

/* CJK text is already full-width: no negative tracking, a taller line, and sensible line breaking. */
:root:is(:lang(zh), :lang(ja), :lang(ko)) :is(body, body *) { letter-spacing: 0 !important; }
:root:is(:lang(zh), :lang(ja), :lang(ko)) :is(.hero h1, .head h2, .story h3, .foot-cta h2, .tile h3, .g-top h3) { line-height: 1.18; }
:root:is(:lang(zh), :lang(ja)) body { line-break: strict; word-break: normal; }
:root:lang(ko) body { word-break: keep-all; line-break: strict; }
:root:is(:lang(zh), :lang(ja), :lang(ko)) .tile .label, :root:is(:lang(zh), :lang(ja), :lang(ko)) .gs-label, :root:is(:lang(zh), :lang(ja), :lang(ko)) .trip-head { text-transform: none; }

/* Long compound words (German, Czech, Russian): hyphenate running text where the browser knows how. */
:root:is(:lang(de), :lang(cs), :lang(ru), :lang(fr), :lang(it), :lang(es), :lang(pt-BR)) :is(p, .lead, .faq summary) { hyphens: auto; -webkit-hyphens: auto; }