/* Language menu (nav) and drawer chips, plus per-script typography for the
   translated pages (design/README.md, Typography + Internationalisation).
   Loaded by every page through partials/site-head.html. */
.ss-locale__menu[hidden] { display: none; }
.ss-locale__menu { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 320px; }
.ss-locale__trigger .ss-locale__now { font: 500 12px/1 var(--font-mono); letter-spacing: .06em; }
.ss-locale__opt { text-decoration: none; justify-content: space-between; }
.ss-locale__code { font: 500 11px/1 var(--font-mono); letter-spacing: .06em; color: var(--text-tertiary); }
.ss-locale__opt.is-selected .ss-locale__code { color: var(--brand-text); }
.ss-locale__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }

.ss-langs { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px 0 4px; }
.ss-langs__chip {
  display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line); color: var(--text-secondary); text-decoration: none; font: 500 14px/1 var(--font-sans);
}
.ss-langs__chip:hover { border-color: var(--line-strong); color: var(--text-primary); }
.ss-langs__chip.is-selected { border-color: var(--brand); color: var(--brand-text); }
@media (min-width: 961px) { .ss-langs { display: none; } }
/* the nav gets tight between the tablet breakpoint and wide desktop */
@media (max-width: 1180px) and (min-width: 961px) { .ss-nav__actions .ss-locale__now { display: none; } }

/* scripts: no negative tracking, 10% more leading */
:lang(hi) body, :lang(ar) body { --script-lh: 1.1; }
:lang(hi) :is(h1, h2, h3, h4, .display-2xl, .display-xl, .display-l, .h1, .h2, .h3, .h4, .lead, p, li),
:lang(ar) :is(h1, h2, h3, h4, .display-2xl, .display-xl, .display-l, .h1, .h2, .h3, .h4, .lead, p, li) { letter-spacing: 0; }
:lang(hi) :is(h1, h2, .display-2xl, .display-xl, .display-l, .h1, .h2),
:lang(ar) :is(h1, h2, .display-2xl, .display-xl, .display-l, .h1, .h2) { line-height: 1.22; }
:lang(hi) body { font-family: Outfit, "Noto Sans Devanagari", var(--font-sans); line-height: 1.75; }
:lang(ar) body { font-family: "Noto Sans Arabic", Outfit, var(--font-sans); line-height: 1.8; }
:lang(ja) body { font-family: Outfit, "Noto Sans JP", "Hiragino Sans", var(--font-sans); }
:lang(ko) body { font-family: Outfit, "Noto Sans KR", "Apple SD Gothic Neo", var(--font-sans); }
:lang(zh) body { font-family: Outfit, "Noto Sans SC", "PingFang SC", var(--font-sans); }
:lang(ru) body { font-family: Outfit, "Noto Sans", var(--font-sans); }
/* CJK headings read better without the display tracking and with a touch more leading */
:lang(ja) :is(h1, h2, .display-2xl, .display-xl, .display-l), :lang(ko) :is(h1, h2, .display-2xl, .display-xl, .display-l),
:lang(zh) :is(h1, h2, .display-2xl, .display-xl, .display-l) { letter-spacing: 0; line-height: 1.2; word-break: keep-all; overflow-wrap: anywhere; }
/* Arabic: the mono overline/ID face has no Arabic glyphs; use the text face */
:lang(ar) .ss-overline { font-family: "Noto Sans Arabic", var(--font-sans); letter-spacing: 0; }

/* Longer languages (de, fr, ru, es…) must not wrap nav labels: tighten the
   desktop nav before it would, and let the bar's message keep the room. */
.ss-nav__link, .ss-nav__actions .ss-btn { white-space: nowrap; }
@media (max-width: 1240px) and (min-width: 961px) {
  .ss-nav__inner { gap: 16px; }
  .ss-nav__links { gap: 0; }
  .ss-nav__link { padding-inline: 8px; }
}
@media (max-width: 1100px) and (min-width: 961px) {
  html:not([lang="en"]) .ss-nav__link[href$="#journey"] { display: none; }
}
@media (max-width: 1200px) { .ss-cbar__cta { display: none; } }

/* Phones: the menu button must always stay on screen, however long the
   nav CTA's label is in a language; the CTA gives way first. */
@media (max-width: 960px) {
  .ss-nav__logo, .ss-nav__burger, #ss-theme-toggle { flex-shrink: 0; }
  .ss-nav__actions { min-width: 0; }
  .ss-nav__actions .ss-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* Long words (ru, de, fr) must not stretch grid columns past the page:
   tracks may shrink below their longest word, which then hyphenates. */
.pr-grid > *, .stats > *, .ss-bento { min-width: 0; }
html:not([lang="en"]) :is(.ss-price, .ss-bento, .ss-card, h1, h2, h3, h4) { overflow-wrap: break-word; hyphens: auto; }