/*!
 * Blue Cave Okinawa — JP / EN トグルのスタイル
 * トップページ (.header-inner) と下層ページ (.cb-header-inner) の両方で使う。
 * ボタン自体は assets/js/i18n.js が生成するため、HTML側の記述は不要。
 */

.bc-lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-right: 10px;
}

.bc-lang-btn {
  appearance: none;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.36);
  color: rgba(255, 255, 255, 0.7);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.6;
  padding: 3px 9px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.bc-lang-btn:hover:not(.is-active) {
  border-color: #d4c46d;
  color: #d4c46d;
}

.bc-lang-btn.is-active {
  background: #d4c46d;
  border-color: #d4c46d;
  color: #04243f;
}

.bc-lang-btn:focus-visible {
  outline: 2px solid #d4c46d;
  outline-offset: 2px;
}

/* ヘッダーが白背景に切り替わるページ用 */
.site-header.is-solid .bc-lang-btn,
.cb-header.is-solid .bc-lang-btn,
.cb-header.scrolled .bc-lang-btn {
  border-color: rgba(4, 36, 63, 0.28);
  color: rgba(4, 36, 63, 0.62);
}

.site-header.is-solid .bc-lang-btn.is-active,
.cb-header.is-solid .bc-lang-btn.is-active,
.cb-header.scrolled .bc-lang-btn.is-active {
  background: #04243f;
  border-color: #04243f;
  color: #fff;
}

/* ── モバイルメニュー内 ── */
/* メニューは縦積み（block または column flex）なので、
   どちらでも中央に来るよう auto マージンで寄せる。
   前後のリンクと詰まって見えないよう上に余白を取る。 */
.bc-lang-toggle-mobile {
  display: flex;
  flex: 0 0 auto;
  align-self: center;
  justify-content: center;
  gap: 10px;
  width: fit-content;
  margin: 56px auto 0;
}

.bc-lang-toggle-mobile .bc-lang-btn {
  min-width: 92px;
  padding: 12px 0;
  font-size: 13px;
  text-align: center;
}

/* ── スマホ表示のヘッダー ── */
/* トップページはスマホ幅で .site-header ごと消え、ロゴとハンバーガーだけが
   画面に固定される。JSが差し込んだ固定トグルをその間に並べる。 */
.bc-lang-toggle-fixed {
  display: none;
}

@media (max-width: 900px) {
  .header-inner > .bc-lang-toggle {
    display: none;
  }

  .bc-lang-toggle-fixed {
    position: fixed;
    top: 14px;
    right: 78px; /* ハンバーガー（幅52px・右14px）の左隣 */
    z-index: 50;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 52px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid rgba(246, 241, 221, 0.2);
    border-radius: 18px;
    background: rgba(0, 42, 76, 0.34);
    box-shadow:
      0 16px 36px rgba(0, 20, 38, 0.18),
      inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(18px) saturate(1.25);
  }

  /* メニューを開いている間はオーバーレイ側のトグルに任せる */
  body.mobile-menu-open .bc-lang-toggle-fixed {
    display: none;
  }
}

/* 下層ページはスマホ幅でもヘッダーが残るので、
   ハンバーガーの左隣にそのまま表示する。 */
@media (max-width: 768px) {
  .cb-header-inner > .bc-lang-toggle {
    display: inline-flex;
    margin-left: auto;
    margin-right: 4px;
  }
}

/* 英語表示中に日本語専用の要素を隠したい場合に使うユーティリティ */
:root[data-lang="en"] .bc-ja-only {
  display: none !important;
}

:root[data-lang="ja"] .bc-en-only {
  display: none !important;
}