/* Reveal the Dream: script fallbacks for the translated site.
   No remote font request: this site's CSP ships font-src 'self' only, and every platform we
   ship to already carries a system font for its own language. This file only REORDERS the
   fallback stack per :lang() so a script with no Latin glyphs (Devanagari, Thai, Hebrew, CJK)
   renders with the OS's own font instead of falling through to nothing. Loaded on every
   translated page; harmless (and inert) on English pages that don't link it. */

:lang(ja) body, :lang(ja) input, :lang(ja) button {
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", -apple-system,
    BlinkMacSystemFont, sans-serif;
}
:lang(ko) body, :lang(ko) input, :lang(ko) button {
  font-family: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", -apple-system,
    BlinkMacSystemFont, sans-serif;
}
:lang(zh-Hans) body, :lang(zh-Hans) input, :lang(zh-Hans) button,
:lang(zh) body, :lang(zh) input, :lang(zh) button {
  font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", "Heiti SC", -apple-system,
    BlinkMacSystemFont, sans-serif;
}
:lang(hi) body, :lang(hi) input, :lang(hi) button {
  font-family: "Noto Sans Devanagari", "Nirmala UI", "Kohinoor Devanagari", "Mangal",
    -apple-system, BlinkMacSystemFont, sans-serif;
}
:lang(he) body, :lang(he) input, :lang(he) button {
  font-family: "Noto Sans Hebrew", "Arial Hebrew", "Miriam Libre", "Segoe UI", -apple-system,
    BlinkMacSystemFont, sans-serif;
}
:lang(th) body, :lang(th) input, :lang(th) button {
  font-family: "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Ayuthaya", -apple-system,
    BlinkMacSystemFont, sans-serif;
}

/* Chinese breaks a line between ANY two characters, so the front page headline split its
   two-character words across lines on phones ("照 / 片", "揭 / 开") at the display size, which
   fits about six characters. The translation already puts a line break between its two clauses,
   so break only there and at punctuation, and size each clause to fit its own line. 12vw fits
   seven characters in the hero column from 360px up. Desktop is untouched. */
:lang(zh-Hans) .hero h1 {
  word-break: keep-all;
}
@media (max-width: 600px) {
  :lang(zh-Hans) .hero h1 {
    font-size: min(var(--font-size-display), 12vw);
  }
}

/* The language switcher injected by tools/i18n/build.py on every translated page. Logical
   properties (inset-inline-start, margin-inline-start) so it needs no mirroring under RTL. */
.lang-switch {
  position: relative;
  display: inline-block;
  margin-inline-start: 1rem;
}
.lang-switch-toggle {
  font: inherit;
  background: none;
  border: 1px solid currentColor;
  border-radius: 6px;
  padding: 0.25em 0.75em;
  cursor: pointer;
}
.lang-switch-list {
  display: none;
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  z-index: 20;
  list-style: none;
  margin: 0.25rem 0 0;
  padding: 0.25rem;
  background: var(--color-surface, #fff);
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  min-width: 10rem;
  max-height: 70vh;
  overflow-y: auto;
}
.lang-switch:hover .lang-switch-list,
.lang-switch:focus-within .lang-switch-list,
.lang-switch.is-open .lang-switch-list {
  display: block;
}
.lang-switch-list a {
  display: block;
  padding: 0.35em 0.6em;
  white-space: nowrap;
}
.lang-switch-list a[aria-current="true"] {
  font-weight: 700;
}

/* Long single-word headings: German compounds ("Nutzungsbedingungen", "Datenschutzerklärung")
   are wider than a 375px phone at heading size and ran past the edge (check-layout-faults.py,
   2026-09-28). Let headings hyphenate in the Latin-script translations, with the browser's own
   dictionary for the page's lang, and break a word only if even that fails. Scoped by :lang(), so
   English pages, which load this file for the language button, keep their headings as they were. */
:lang(de) :is(h1, h2, h3), :lang(fr) :is(h1, h2, h3), :lang(it) :is(h1, h2, h3),
:lang(es) :is(h1, h2, h3), :lang(pt) :is(h1, h2, h3), :lang(vi) :is(h1, h2, h3) {
  -webkit-hyphens: auto;
  hyphens: auto;
  overflow-wrap: break-word;
}

/* The "this page is a translation; the English version governs" line build.py puts at the top of
   the translated legal pages. It had no style at all, so on a phone it sat flush against the left
   edge of the screen. Same gutter as the page, smaller and quieter than the text it introduces. */
.i18n-legal-banner {
  margin: 0;
  padding: var(--space-4, 1rem);
  font-size: var(--font-size-small, 0.875rem);
  line-height: 1.5;
  color: var(--color-text-muted, #46534f);
  background: var(--color-surface, #fffdf9);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  text-align: center;
}