/*
 * Language Switcher — thai-massage 多言語 v2（ビルド時生成）
 * Spec: docs（i18n）/ DESIGN.md §4-1（ヘッダ nav 行）/ §9（レスポンシブ）
 *
 * クライアント翻訳ウィジェット（Google 翻訳）は厳格 CSP（unsafe-inline 禁止）と
 * 非互換のため不採用。本切替はビルド時生成の静的リンク（/ ↔ /en/ …）のみで、
 * inline script / inline style / 色直書きを含まない（CSP クリーン）。
 *
 * 色は var(--color-*) 経由のみ（ハードコード禁止 / Palsea --brand-* 不使用）。
 * 出し分け:
 *   ≥1024px : .lang-switch（desktop）を nav 行に表示 / .menu-toggle 非表示
 *   ≤1023px : .lang-switch（desktop）非表示 / 言語切替は .lang-switch--mobile（sidebar 内）
 */

.lang-switch {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.lang-switch__item {
  flex: 0 0 auto;
}

/* 項目間の区切り（縦線） */
.lang-switch__item + .lang-switch__item {
  border-left: 1px solid var(--color-border);
  padding-left: var(--gap-xs);
}

.lang-switch__link,
.lang-switch__current {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 0.2em 0.4em;
  color: var(--color-text-on-dark);
  transition:
    color 0.2s ease,
    opacity 0.2s ease;
}

.lang-switch__link:hover,
.lang-switch__link:focus-visible {
  color: var(--color-primary);
}

/* 現在の言語（非リンク・強調） */
.lang-switch__current {
  font-weight: 700;
  color: var(--color-primary);
}

/* スクロール後のヘッダ（cream 背景）では本文色へ切替（header.css の .is-scrolled に追従） */
.site-header.is-scrolled .lang-switch__link {
  color: var(--color-text);
}
.site-header.is-scrolled .lang-switch__link:hover,
.site-header.is-scrolled .lang-switch__link:focus-visible,
.site-header.is-scrolled .lang-switch__current {
  color: var(--color-primary);
}

/* ≤1023px: nav 行内のデスクトップ用切替は隠す（モバイルは sidebar 内 --mobile を使う） */
@media (max-width: 1023px) {
  .header-nav-row .lang-switch:not(.lang-switch--mobile) {
    display: none;
  }
}

/* ── モバイルドロワー内の言語切替（sidebar はダーク背景） ── */
.lang-switch--mobile {
  justify-content: center;
  gap: var(--gap-sm);
  margin-top: var(--gap-lg);
}

.lang-switch--mobile .lang-switch__link,
.lang-switch--mobile .lang-switch__current {
  color: var(--color-text-on-dark);
  font-size: 0.9rem;
}

.lang-switch--mobile .lang-switch__link:hover,
.lang-switch--mobile .lang-switch__link:focus-visible,
.lang-switch--mobile .lang-switch__current {
  color: var(--color-primary);
}