/* ========================================
   Language Switch — 公開サイト共通ヘッダーの言語切替
   Tailwind のビルド対象外（tailwind.config.js の content は ja のみ）のため、
   ja / en 双方で確実に効くよう独立したCSSとして定義する。
   ======================================== */

.lang-switch {
  --lang-switch-size: 44px;
  --lang-switch-fg: #333333;
  --lang-switch-accent: #FF6B9D;
  --lang-switch-border: #E8E6E9;
  --lang-switch-bg: #FFFFFF;
  --lang-switch-bg-hover: #FAF6F8;
  --lang-switch-radius: 9999px;
  --lang-switch-menu-radius: 14px;
  --lang-switch-menu-width: 152px;
  --lang-switch-shadow: 0 12px 32px rgba(51, 51, 51, 0.14);
  --lang-switch-duration: 0.2s;
  --lang-switch-check: '✓';
  /* 地球儀アイコン。Material Symbols のサブセットフォントに language グリフが
     含まれないため、CSSマスク（data URI SVG）で描画して文字色に追従させる。 */
  --lang-switch-icon-src: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4.2' ry='9'/%3E%3Cpath d='M3.3 9h17.4M3.3 15h17.4'/%3E%3C/svg%3E");

  position: relative;
  flex-shrink: 0;
}

/* ── トグルボタン ── */
.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: var(--lang-switch-size);
  padding: 0 12px;
  background: transparent;
  border: 1.5px solid var(--lang-switch-border);
  border-radius: var(--lang-switch-radius);
  color: var(--lang-switch-fg);
  cursor: pointer;
  transition: color var(--lang-switch-duration) ease,
              border-color var(--lang-switch-duration) ease,
              background var(--lang-switch-duration) ease;
}

.lang-switch-btn:hover,
.lang-switch-btn:focus-visible {
  color: var(--lang-switch-accent);
  border-color: var(--lang-switch-accent);
}

.lang-switch-icon {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
  background-color: currentColor;
  -webkit-mask: var(--lang-switch-icon-src) center / contain no-repeat;
  mask: var(--lang-switch-icon-src) center / contain no-repeat;
}

.lang-switch-code {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.lang-switch-chevron {
  font-size: 18px;
  line-height: 1;
  transition: transform var(--lang-switch-duration) ease;
}

.lang-switch.is-open .lang-switch-chevron {
  transform: rotate(180deg);
}

/* ── ドロップダウン ── */
.lang-switch-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: var(--lang-switch-menu-width);
  background: var(--lang-switch-bg);
  border: 1px solid var(--lang-switch-border);
  border-radius: var(--lang-switch-menu-radius);
  box-shadow: var(--lang-switch-shadow);
  overflow: hidden;
}

.lang-switch.is-open .lang-switch-menu {
  display: block;
}

.lang-switch-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--lang-switch-fg);
  text-decoration: none;
  transition: background var(--lang-switch-duration) ease,
              color var(--lang-switch-duration) ease;
}

.lang-switch-item:hover,
.lang-switch-item:focus-visible {
  background: var(--lang-switch-bg-hover);
  color: var(--lang-switch-accent);
}

.lang-switch-item.is-current {
  color: var(--lang-switch-accent);
}

.lang-switch-item.is-current::after {
  content: var(--lang-switch-check);
  margin-left: auto;
  font-size: 0.8125rem;
}

/* ── 狭い画面ではアイコンのみ（ロゴ・メニューと並べても収まるように） ── */
@media (max-width: 480px) {
  .lang-switch-btn {
    width: var(--lang-switch-size);
    padding: 0;
    border-color: transparent;
  }

  .lang-switch-code,
  .lang-switch-chevron {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-switch-btn,
  .lang-switch-chevron,
  .lang-switch-item {
    transition: none;
  }
}