/* ═══════════════════════════════════════════════════════════════
   Votrix — languages
   The language menu (nav, mobile menu, footer) and the per-language
   type adjustments. Loaded after site.css / pages.css on every page.
   ═══════════════════════════════════════════════════════════════ */

/* ─── Language menu ─── */
.dd-lang > button { gap: 6px; padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--ink-2); transition: background .2s, color .2s; }
.dd-lang > button:hover, .dd-lang.open > button { background: rgba(27,38,32,.05); color: var(--ink); }
.dd-lang .dd-panel { width: 210px; left: auto; right: 0; transform: translateY(-6px); }
.dd-lang.open .dd-panel { transform: none; }
.dd-lang-item { display: block; padding: 9px 12px; border-radius: 10px; font-size: 14px; color: var(--ink-2); transition: background .15s, color .15s; }
.dd-lang-item:hover { background: var(--paper); color: var(--ink); }
.dd-lang-item.on { color: var(--green); font-weight: 500; }
.dd-lang-item.on::after { content: '✓'; float: right; }
@media (max-width: 960px) { .nav-cta .dd-lang { display: none; } }

.mnav .mlang { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 4px; }
.mnav .mlang a { display: inline-flex; padding: 7px 14px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--sans); font-size: 14px; }
.mnav .mlang a.on { border-color: var(--green); color: var(--green); }

.foot-lang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin-top: 48px; font-size: 13px; color: var(--muted); }
.foot-lang svg { color: var(--faint); margin-right: -8px; }
.foot-lang a { color: var(--muted); transition: color .2s; }
.foot-lang a:hover, .foot-lang a.on { color: var(--green); }
.foot-lang + .foot-bottom { margin-top: 20px; }

/* ─── Japanese ───
   Newsreader / Geist have no kana or kanji, so those glyphs fall through to
   Noto. Negative tracking and synthetic italics both hurt Japanese. */
html[lang="ja"] {
  --serif: 'Newsreader', 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  --sans:  'Geist', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', system-ui, sans-serif;
}
html[lang="ja"] body { line-height: 1.8; }
html[lang="ja"] :is(h1, h2, h3, h4, .h1, .h2, .h3, .display, .serif) {
  letter-spacing: .01em !important; word-break: auto-phrase; line-break: strict;
}
html[lang="ja"] :is(h1, .h1) { line-height: 1.3 !important; }
html[lang="ja"] :is(h2, .h2) { line-height: 1.35 !important; }
html[lang="ja"] em, html[lang="ja"] i, html[lang="ja"] .serif em { font-style: normal; }
html[lang="ja"] :is(p, li) { word-break: auto-phrase; line-break: strict; }
/* katakana compounds like AIマーケティングチーム are one unbreakable phrase;
   on phones they must fit the line instead of running off it */
@media (max-width: 640px) {
  html[lang="ja"] :is(h1, .h1) { font-size: clamp(28px, 7.8vw, 44px) !important; }
  html[lang="ja"] :is(h2, .h2) { font-size: clamp(24px, 6.6vw, 36px) !important; }
  html[lang="ja"] .ln > span { max-width: 100%; }
}

/* ─── German / French / Portuguese: long words in big headings ─── */
html[lang="de"] :is(h1, h2, h3, .h1, .h2, .h3),
html[lang="fr"] :is(h1, h2, h3, .h1, .h2, .h3),
html[lang="pt-BR"] :is(h1, h2, h3, .h1, .h2, .h3) { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }