/* ============================================================
   VOLTAHEAT — language switcher + multilingual typography
   ============================================================ */

/* desktop: keep nav flush right, switcher sits after it */
.header-inner { gap: 8px; }
.main-nav { margin-left: auto; }
.main-nav > a { white-space: nowrap; }

.lang-switch { position: relative; flex: 0 0 auto; margin-left: 8px; }

.lang-trigger {
  display: flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 11px; border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #dce5f3; font-size: 13.5px; font-weight: 500;
  transition: background .2s, border-color .2s, color .2s;
}
.lang-trigger:hover { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .34); color: #fff; }
.lang-globe svg { width: 16px; height: 16px; display: block; opacity: .9; }
.lang-current { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lang-caret svg { width: 13px; height: 13px; display: block; opacity: .75; transition: transform .2s; }
.lang-switch.open .lang-caret svg { transform: rotate(180deg); }

.lang-menu {
  position: absolute; top: calc(100% + 10px); right: 0;
  width: 236px; max-height: min(66vh, 436px); overflow-y: auto;
  background: #fff; border-radius: 12px; padding: 6px;
  box-shadow: 0 18px 48px rgba(9, 20, 36, .26), 0 2px 8px rgba(9, 20, 36, .12);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 960;
}
.lang-switch.open .lang-menu { opacity: 1; visibility: visible; transform: none; }
.lang-menu::-webkit-scrollbar { width: 8px; }
.lang-menu::-webkit-scrollbar-thumb { background: #d7dee9; border-radius: 8px; }

.lang-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border: 0; background: none; border-radius: 8px;
  font-size: 14px; color: #24344a; text-align: left; transition: background .15s, color .15s;
}
.lang-item:hover { background: #f4f6fa; color: #0a1626; }
.lang-item.active { background: #fff5ef; color: var(--orange-dark); font-weight: 700; }
.lang-flag {
  width: 22px; height: 15px; flex: 0 0 auto; border-radius: 2px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(10, 22, 38, .14);
}
.lang-flag svg { width: 100%; height: 100%; display: block; }
.lang-name { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lang-check { width: 14px; height: 14px; flex: 0 0 auto; opacity: 0; color: var(--orange); }
.lang-check svg { width: 14px; height: 14px; display: block; }
.lang-item.active .lang-check { opacity: 1; }

/* ---------- RTL (Arabic) ---------- */
html[dir="rtl"] .lang-menu { right: auto; left: 0; }
html[dir="rtl"] .lang-item { text-align: right; }
html[dir="rtl"] .main-nav { margin-left: 0; margin-right: auto; }
html[dir="rtl"] .checklist li { flex-direction: row-reverse; }
html[dir="rtl"] .info-line { flex-direction: row-reverse; }
html[dir="rtl"] .badge-float { right: auto; left: 16px; }
html[dir="rtl"] .cat-more::after,
html[dir="rtl"] .link-arrow::after { transform: scaleX(-1); }

/* ---------- Script-specific typography ---------- */
body.vh-lang-zh { font-family: "Inter", "PingFang SC", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", sans-serif; }
body.vh-lang-zh h1, body.vh-lang-zh h2, body.vh-lang-zh h3 { letter-spacing: 0; }
body.vh-lang-ko { font-family: "Inter", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif; }
body.vh-lang-th { font-family: "Inter", "Leelawadee UI", "Thonburi", "Noto Sans Thai", sans-serif; line-height: 1.8; }
body.vh-lang-ar { font-family: "Segoe UI", Tahoma, "Noto Naskh Arabic", "Geeza Pro", Arial, sans-serif; }
body.vh-lang-hu, body.vh-lang-ru, body.vh-lang-vi { font-family: "Inter", "Segoe UI", Arial, sans-serif; }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) and (min-width: 861px) {
  .main-nav > a { font-size: 14px; padding: 9px 10px; }
  .lang-current { max-width: 72px; }
}

@media (max-width: 860px) {
  .lang-switch { margin-left: auto; margin-right: 6px; }
  .lang-trigger { height: 36px; padding: 0 9px; }
  .lang-current { max-width: 74px; font-size: 13px; }
  .lang-menu { width: 214px; max-height: 62vh; }
  .nav-toggle { order: 3; }
}
@media (max-width: 420px) {
  .lang-current { display: none; }
  .lang-trigger { gap: 5px; padding: 0 8px; }
  .lang-menu { width: 196px; }
}