/* Translations (scripts/i18n-site.mjs, docs/site/i18n.md): language switcher, CJK fonts, legal note.
   Linked on every page by the build, after the page CSS. styles.css stays untouched. */

/* ---------- Switcher ---------- */
.lang-switch { position: relative; }
.lang-switch summary {
  list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 8px 10px; border-radius: 8px;
  font: 500 var(--fs-sm)/1 var(--body); color: var(--ink); white-space: nowrap;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover, .lang-switch[open] summary { background: var(--line); }
.lang-switch summary:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.lang-globe { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; flex: none; }
.lang-switch ul {
  position: absolute; z-index: 40; right: 0; top: calc(100% + 4px);
  min-width: 11rem; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm, 10px);
  box-shadow: 0 10px 30px rgba(35, 34, 29, 0.14);
}
.lang-switch li { margin: 0; }
.lang-switch a {
  display: block; padding: 10px 12px; border-radius: 8px;
  color: var(--ink); text-decoration: none; font-size: var(--fs-sm); line-height: 1.2;
}
.lang-switch a:hover { background: var(--bg); }
.lang-switch a[aria-current="true"] { font-weight: 600; }
.lang-switch a[aria-current="true"]::after { content: " ✓"; }

/* In the header, phones show only the globe. */
.lang-switch-head .lang-name { display: none; }
@media (min-width: 1024px) { .lang-switch-head .lang-name { display: inline; } }

/* In the footer's base row (styles.css): after the legal links, opening upwards; on the left on phones, at the
   right end of the row from 720 px. */
.lang-switch-foot { order: 2; }
.lang-switch-foot summary { min-height: 36px; padding: 6px 0; color: var(--muted); }
.lang-switch-foot summary:hover, .lang-switch-foot[open] summary { background: none; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.lang-switch-foot ul { top: auto; bottom: calc(100% + 4px); left: 0; right: auto; }
@media (min-width: 720px) {
  .lang-switch-foot { order: 3; }
  .lang-switch-foot ul { left: auto; right: 0; }
}

/* ---------- Legal pages: "the English version governs" ---------- */
.i18n-legal-note {
  margin: 0 0 var(--s-5, 24px); padding: 10px 14px; border-radius: 8px;
  background: var(--bg); color: var(--muted); font-size: var(--fs-sm);
}

/* ---------- Fonts ----------
   Latin (en fr de es pt): DM Sans, DM Mono and Unbounded, self-hosted (css/fonts.css). The latin-ext slice (œ ő ă …) loads
   on demand next to latin (é ß ç ã ñ), so every accent renders in the brand faces.
   CJK: those three faces have no CJK glyphs. The build (scripts/i18n-site.mjs) links one Noto Sans family on
   each CJK page only (self-hosted from /fonts/noto/<lang>/fonts.css, unicode-range slices + display=swap: a
   page fetches just the slices it uses). Latin runs keep DM Sans / DM Mono; the Unbounded display lines (hero, CTA band) switch to the CJK
   face at 900 so they stay loud. System CJK faces follow, for before the web font arrives or if it is
   blocked. The wordmark keeps Unbounded. */
html:lang(ja) {
  --cjk: "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", Meiryo, "Noto Sans CJK JP";
}
html:lang(zh-TW) {
  --cjk: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Heiti TC";
}
html:lang(zh-CN) {
  --cjk: "Noto Sans SC", "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Heiti SC";
}
html:lang(ko) {
  --cjk: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans CJK KR", "Nanum Gothic";
}
html:is(:lang(ja), :lang(zh-TW), :lang(zh-CN), :lang(ko)) {
  --body: 'DM Sans', var(--cjk), system-ui, sans-serif;
  --display: var(--cjk), 'DM Sans', system-ui, sans-serif;
  --mono: 'DM Mono', var(--cjk), ui-monospace, monospace;
}
html:is(:lang(ja), :lang(zh-TW), :lang(zh-CN), :lang(ko)) .brand span { font-family: 'Unbounded', 'DM Sans', system-ui, sans-serif; }
/* Latin tracking (tight headings, wide uppercase labels) and uppercase don't suit CJK; the wordmark keeps its own. */
html:is(:lang(ja), :lang(zh-TW), :lang(zh-CN), :lang(ko)) body *:not(.brand span) { letter-spacing: normal; text-transform: none; }
/* CJK needs more leading than the Latin 1.04-1.3 heading values. */
html:is(:lang(ja), :lang(zh-TW), :lang(zh-CN), :lang(ko)) body { line-height: 1.75; }
html:is(:lang(ja), :lang(zh-TW), :lang(zh-CN), :lang(ko)) :is(h1, h2, h3, .section-title) { line-height: 1.4; text-wrap: pretty; }
/* Short CJK titles otherwise strand one or two characters on the last line. */
html:is(:lang(ja), :lang(zh-TW), :lang(zh-CN), :lang(ko)) :is(h1, .section-title) { text-wrap: balance; }
html:is(:lang(ja), :lang(zh-TW), :lang(zh-CN), :lang(ko)) :is(.hero h1, .close-card h2, .cta-band h2) { line-height: 1.3; }
/* Home hero: CJK glyphs fill the full em box, so the 900 line reads larger than Latin at the same size; step it
   down a little and start each sentence on its own line so a phrase isn't split across the break. */
html:is(:lang(ja), :lang(zh-TW), :lang(zh-CN), :lang(ko)) .hero h1.home-h1 { font-size: clamp(30px, 7vw, 48px); max-width: none; }
html:is(:lang(ja), :lang(zh-TW), :lang(zh-CN), :lang(ko)) .hero h1.home-h1 span { display: block; }
/* Chinese hero: break at the translators' spaces and punctuation, not inside a word (overflow-wrap still rescues). */
html:is(:lang(zh-TW), :lang(zh-CN)) .hero h1.home-h1 { word-break: keep-all; }
/* No faux italics on CJK glyphs. */
html:is(:lang(ja), :lang(zh-TW), :lang(zh-CN), :lang(ko)) :is(em, cite) { font-style: normal; }
/* Line breaking: kinsoku for ja/zh, whole words (eojeol) for ko. */
html:is(:lang(ja), :lang(zh-TW), :lang(zh-CN)) body { line-break: strict; overflow-wrap: anywhere; }
html:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; }
html:lang(ko) body { word-break: keep-all; overflow-wrap: anywhere; }

/* Long German, French, Spanish and Portuguese words in narrow headings: hyphenate by the page lang, never overflow. */
html:is(:lang(de), :lang(fr), :lang(es), :lang(pt)) :is(h1, h2, h3, .section-title) { hyphens: auto; overflow-wrap: break-word; }

/* The home chat demo's empty-input hint lives in styles.css as CSS content. */
html:lang(fr) :is(.sim-typed, .how-typed):empty::before { content: "Écrivez à votre IA"; }
html:lang(de) :is(.sim-typed, .how-typed):empty::before { content: "Nachricht an deine KI"; }
html:lang(es) :is(.sim-typed, .how-typed):empty::before { content: "Escribe a tu IA"; }
html:lang(pt) :is(.sim-typed, .how-typed):empty::before { content: "Mensagem para sua IA"; }
html:lang(zh-TW) :is(.sim-typed, .how-typed):empty::before { content: "傳訊息給 AI"; }
html:lang(zh-CN) :is(.sim-typed, .how-typed):empty::before { content: "给 AI 发消息"; }
html:lang(ko) :is(.sim-typed, .how-typed):empty::before { content: "AI에게 메시지 보내기"; }
html:lang(ja) :is(.sim-typed, .how-typed):empty::before { content: "AI にメッセージを送信"; }

/* Header on the narrowest phones: French "Log in" + "Start free" don't fit beside the mark under 340 px, so Start
   free gives way there (each page's hero has its own). Every other language keeps both (styles.css, header). */
@media (max-width: 339px) { html:lang(fr) .head-actions .head-cta { display: none; } }