/* 言語切替（全ページのヘッダー）と、外国語のページだけの調整。日本語ページの見た目は styles.css のまま。
   ページは scripts/build-i18n.mjs が i18n/<locale>.json から作る。 */

.lang-switch { position: relative; margin-left: auto; margin-right: clamp(14px, 2vw, 32px); font-size: 12px; letter-spacing: .08em; line-height: 1.5; }
.lang-switch summary { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 4px; list-style: none; cursor: pointer; white-space: nowrap; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:focus-visible { outline: 2px solid #dcc49a; outline-offset: 3px; }
.lang-switch-icon { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.3; }
.lang-switch ul {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  right: 0;
  min-width: 210px;
  max-height: min(70vh, 540px);
  overflow-y: auto;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: rgba(14, 13, 10, .98);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
}
.lang-switch li a { display: block; padding: 10px 20px; font-size: 14px; letter-spacing: .04em; }
.lang-switch li a:hover, .lang-switch li a:focus-visible { background: rgba(255, 255, 255, .08); }
.lang-switch li a[aria-current="page"] { color: #dcc49a; }

/* 日本語の原文（品名・7言語の本文に小さく添える） */
.ja-original {
  display: block;
  margin-top: 3px;
  font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  letter-spacing: .04em;
  line-height: 1.7;
  opacity: .72;
  text-transform: none;
  white-space: normal;
}
:where(html:not([lang="ja"])) :where([lang="ja"]) { font-family: "Noto Serif JP", "Yu Mincho", "Hiragino Mincho ProN", serif; }
.i18n-note { margin-top: -12px; }

/* 7言語の固定ページの最後の案内 */
.i18n-scope { padding: 56px clamp(24px, 9vw, 150px); background: var(--paper-strong); border-top: 1px solid var(--line); font-size: 14px; }
.i18n-scope p { max-width: 720px; margin: 0 0 14px; }
.i18n-scope ul { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.i18n-scope a { text-decoration: underline; text-underline-offset: 4px; }

/* 文字の形を言語に合わせる（中国語・韓国語・タイ語は日本語の字形を使わない） */
:root:lang(zh-Hans) { --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", serif; --display: var(--serif); }
:root:lang(zh-Hant) { --serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif; --display: var(--serif); }
:root:lang(ko) { --serif: "Noto Serif KR", "AppleMyungjo", "Nanum Myeongjo", "Batang", serif; --display: var(--serif); }
:root:lang(th) { --serif: "Noto Serif Thai", "Noto Sans Thai", "Thonburi", "Tahoma", serif; --display: var(--serif); }
:root:lang(vi) { --serif: "Noto Serif", Georgia, "Times New Roman", serif; --display: var(--serif); }

/* 外国語は日本語より長くなるので、大きな見出しを少し小さくし、決め打ちの改行をやめる */
html:not([lang="ja"]) .heading-line { white-space: normal; }
html:not([lang="ja"]) .hero h1 { font-size: clamp(44px, 6.2vw, 96px); overflow-wrap: break-word; hyphens: auto; }
html:not([lang="ja"]) .menu-intro h2 { font-size: clamp(44px, 5.6vw, 84px); }
html:not([lang="ja"]) .reservation h2 { font-size: clamp(40px, 5.4vw, 80px); }
html:not([lang="ja"]) section h2, html:not([lang="ja"]) .dish-copy h3, html:not([lang="ja"]) .dish-text-card h3 { overflow-wrap: break-word; hyphens: auto; }
html:not([lang="ja"]) .global-nav { letter-spacing: .04em; }
html:not([lang="ja"]) .dish-text-card li span { width: auto; min-width: 54px; margin-right: 8px; }
html:not([lang="ja"]) .space-panel dl div { grid-template-columns: minmax(88px, 36%) 1fr; column-gap: 12px; }
/* 長い1語（ドイツ語の Exklusivbuchung など）が狭い列からはみ出さないようにする */
html:not([lang="ja"]) .space-panel dt { overflow-wrap: anywhere; hyphens: auto; }
@media (min-width: 761px) {
  html:not([lang="ja"]) .dish-text-card li { grid-template-columns: minmax(54px, max-content) minmax(0, 1fr); }
}
@media (min-width: 761px) and (max-width: 1280px) {
  html:not([lang="ja"]) .global-nav > a:not(.nav-cta) { display: none; }
}
@media (max-width: 760px) {
  .lang-switch { margin-right: 4px; }
  html:not([lang="ja"]) .brand-copy strong { font-size: 14px; letter-spacing: .03em; }
  html:not([lang="ja"]) .hero h1 { font-size: clamp(36px, 10.5vw, 56px); }
  html:not([lang="ja"]) .menu-intro h2 { font-size: 44px; }
  html:not([lang="ja"]) .reservation h2 { font-size: clamp(32px, 9vw, 48px); }
}
/* 幅の狭いスマホでは地球のマークだけにして、店名が折り返さないようにする（言語名は読み上げ用ラベルに入っている） */
@media (max-width: 374px) {
  .lang-switch { margin-right: 0; }
  .lang-switch summary { gap: 0; padding: 0 3px; }
  .lang-switch summary > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  html:not([lang="ja"]) .brand-copy strong { font-size: 13px; letter-spacing: 0; }
}
@media (max-width: 309px) {
  .site-header { padding: 0 12px; }
  .brand { gap: 10px; }
}