/* ---------------------------------------------------------------
   Language dropdown switcher
   Button looks IDENTICAL to the original .nav-lang pill (white,
   light-grey border, dark text, no emoji, no chevron). Adds a
   dropdown menu on click with clean text-only entries.
   --------------------------------------------------------------- */

.nav-lang-dd {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-inner > .nav-cta + .nav-lang-dd { margin-left: 12px; }

/* Button matches .nav-lang exactly */
.nav-lang-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 36px;
  padding: 0 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #111;
  border: 1.5px solid #ececec;
  background: white;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .2s, color .2s, background .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}

.nav-lang-btn:hover,
.nav-lang-btn:focus-visible {
  border-color: var(--brand-red, #e00303);
  color: var(--brand-red, #e00303);
  outline: none;
}

.nav-lang-btn:active { transform: scale(.97); }

/* Dropdown menu */
.nav-lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 148px;
  background: #fff;
  border-radius: 12px;
  box-shadow:
    0 14px 36px -14px rgba(20, 6, 6, 0.30),
    0 2px 6px rgba(20, 6, 6, 0.08),
    inset 0 0 0 1px rgba(99, 0, 0, 0.05);
  padding: 5px;
  margin: 0;
  list-style: none;
  z-index: 1200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity 0.16s ease,
    transform 0.18s cubic-bezier(0.18, 0.89, 0.32, 1.18),
    visibility 0.16s linear;
  pointer-events: none;
}

.nav-lang-dd.is-open .nav-lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.nav-lang-menu li { margin: 0; padding: 0; }

.nav-lang-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: #111;
  font: 600 13px/1.2 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
  letter-spacing: 0.01em;
  transition: background 0.14s ease, color 0.14s ease;
  white-space: nowrap;
}

.nav-lang-menu a:hover,
.nav-lang-menu a:focus-visible {
  background: #fdf4f0;
  color: var(--brand-red, #e00303);
  outline: none;
}

.nav-lang-menu a[aria-current="true"] {
  background: var(--brand-red, #e00303);
  color: #fff;
}

.nav-lang-menu a[aria-current="true"]:hover,
.nav-lang-menu a[aria-current="true"]:focus-visible {
  background: #800505;
  color: #fff;
}

/* CJK label fonts — let the browser fall back to system CJK fonts so
   "한국어" / "日本語" / "简体中文" render naturally. */
.nav-lang-menu a[lang^="zh"],
.nav-lang-menu a[lang="ko"],
.nav-lang-menu a[lang="ja"] {
  font-family:
    'Be Vietnam Pro',
    'PingFang SC', 'Hiragino Sans GB',
    'Noto Sans CJK SC', 'Noto Sans CJK KR', 'Noto Sans CJK JP',
    'Apple SD Gothic Neo', 'Hiragino Kaku Gothic ProN',
    'Microsoft YaHei', 'Malgun Gothic', 'Meiryo',
    system-ui, sans-serif;
}

@media (max-width: 640px) {
  .nav-lang-btn { min-width: 36px; height: 32px; font-size: 11px; padding: 0 8px; }
  .nav-lang-menu { right: -4px; min-width: 140px; }
}

/* Body locale font fallbacks for CJK locales */
body[data-lang="zh-CN"],
body[data-lang="zh"] {
  --cjk-font: 'PingFang SC', 'Hiragino Sans GB', 'Noto Sans CJK SC', 'Microsoft YaHei', 'WenQuanYi Micro Hei';
}
body[data-lang="ko"] {
  --cjk-font: 'Apple SD Gothic Neo', 'Noto Sans CJK KR', 'Malgun Gothic', 'NanumGothic';
}
body[data-lang="ja"] {
  --cjk-font: 'Hiragino Kaku Gothic ProN', 'Noto Sans CJK JP', 'Yu Gothic', 'Meiryo', 'MS PGothic';
}

body[data-lang="zh-CN"],
body[data-lang="zh"],
body[data-lang="ko"],
body[data-lang="ja"] {
  font-family: 'Be Vietnam Pro', var(--cjk-font), system-ui, -apple-system, sans-serif;
}

/* Hero H1: just allow it to wrap so long subtitles (CJK + long EN) drop
   to the next line instead of overflowing. Nothing else changes. */
.hero-brand h1 {
  white-space: normal !important;
}
.hero-brand h1 .accent {
  white-space: normal !important;
}