/* 言語切替（全ページのヘッダー）と、外国語のページだけの調整。日本語ページの見た目は styles.css のまま。
   ページは scripts/build-i18n.mjs が i18n/<locale>.json から作る（訳文が1つも無い間は、どのページもこのファイルを読まない）。
   やさか（clients/yasaka/30_納品/yasaka-web/dist/i18n.css）から写し、色を日の丸の赤の系統に直した。 */

.lang-switch { position: relative; margin-left: auto; font-size: 12px; letter-spacing: .08em; line-height: 1.5; color: #fff; }
.lang-switch ~ .gnav { margin-left: 0; }
.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 var(--gold); 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(21, 18, 16, .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; color: var(--on-dark); }
.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: #e3a3a6; }

/* 日本語の原文（品名・7言語の本文に小さく添える） */
.ja-original {
  display: block;
  margin-top: 3px;
  font-family: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-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: "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo", sans-serif; }
.i18n-note { margin-top: -6px; }
.hours-row .ja-original { grid-column: 1 / -1; }
/* 外国語では曜日の名前が長くなるので、曜日の下に時刻を並べる。日本語ページの「折り返さない」（.nw）も外す */
html:not([lang="ja"]) .nw { white-space: normal; }
html:not([lang="ja"]) .hours-row { grid-template-columns: minmax(0, 1fr); }
html:not([lang="ja"]) .hours-day { grid-row: auto; }
html:not([lang="ja"]) .hours-row .nw { grid-column: auto; }
/* 外国語では長い1語がはみ出さないようにする（ドイツ語の複合語など） */
html:not([lang="ja"]) p, html:not([lang="ja"]) dd, html:not([lang="ja"]) dt, html:not([lang="ja"]) li, html:not([lang="ja"]) summary, html:not([lang="ja"]) a { overflow-wrap: anywhere; }

/* 看板の三品の英字の飾り（Steak など）は、英語のページでは見出しと同じ語が2回並ぶので出さない */
html[lang="en"] .sig .en { display: none; }

/* 7言語の固定ページの最後の案内 */
.i18n-scope { padding: 56px var(--gutter); background: var(--card); border-top: 1px solid var(--line); font-size: 14px; }
.i18n-scope p { max-width: 720px; margin: 0 auto 14px; }
.i18n-scope ul { display: flex; flex-wrap: wrap; gap: 8px 22px; max-width: 720px; margin: 0 auto; padding: 0; list-style: none; }
.i18n-scope a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ember); text-decoration: underline; text-underline-offset: 4px; }

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

/* 外国語は日本語より長くなるので、大きな見出しを少し小さくし、長い1語がはみ出さないようにする */
html:not([lang="ja"]) h1, html:not([lang="ja"]) h2, html:not([lang="ja"]) h3, html:not([lang="ja"]) h4 { overflow-wrap: break-word; hyphens: auto; letter-spacing: .02em; }
html:not([lang="ja"]) .hero-catch { font-size: clamp(28px, 4.6vw, 60px); letter-spacing: .02em; }
html:not([lang="ja"]) .gnav { letter-spacing: .04em; }
html:not([lang="ja"]) .info-list dt { overflow-wrap: anywhere; hyphens: auto; }
html:not([lang="ja"]) .info-list > div { grid-template-columns: minmax(7.5em, 34%) minmax(0, 1fr); }
@media (min-width: 1081px) and (max-width: 1320px) {
  html:not([lang="ja"]) .gnav > a:not(.gnav-cta) { display: none; }
}
@media (max-width: 760px) {
  html:not([lang="ja"]) .brand-text strong { font-size: 16px; letter-spacing: .03em; }
  html:not([lang="ja"]) .info-list > div { grid-template-columns: 1fr; }
}
/* 幅の狭いスマホでは地球のマークだけにして、店名が折り返さないようにする（言語名は読み上げ用ラベルに入っている） */
@media (max-width: 374px) {
  .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-text strong { font-size: 14px; letter-spacing: 0; }
}