/* ------------------------------------------------------------------
 * 分支兼容层（v1.7.9.1）—— 只有 1.7.9 分支版有这个开头
 *
 * 本文件是从主线 2.9.x 搬过来的，主线把颜色/字号都换成了语义变量，
 * 而分支的 main.css 还停在 --yellow / --dark 那一套。缺变量会让下拉里的
 * 文字颜色变成空值（继承成黑或透明），所以先把它们映射过去。
 *
 * 另外补一条：分支的 main.css 里 .lang-switch{display:flex} 已经删掉，
 * 这里再显式声明一次 block，防止将来有人把旧样式贴回来又把 <details> 撑坏。
 * ------------------------------------------------------------------ */
:root {
  --accent: var(--yellow, #ffc107);
  --accent-soft: rgba(255, 193, 7, 0.14);
  --surface-alt: #f6f7f9;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;
  --fs-2xs: 10px;
  --fs-xs: 11px;
  --fs-sm: 13px;
}

details.lang-switch {
  display: block;
}

/* 主线 header 用 .header-actions 包住「切换器 + Get Quote」，本文件下面的
   响应式规则也是按这个选择器写的；分支的 header 原来没有这层容器，这里补
   基础布局，否则媒体查询里的 gap / margin 全都落空。 */
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============================================
   Language switcher dropdown (v2.8.1)
   <details> based: opens without JS.

   位置：header 右侧、Get Quote 左边（.lang-switch--header）。
   v2.8.0 曾挂在深色顶栏 .topbar-right，菜单展开正好压在 Get Quote 上，
   且 .topbar 的 z-index(999) 低于 .header(1000)，上半截还会被裁掉。
   现在菜单从 header 下沿展开，只覆盖页面正文。

   顶栏深色变体（不带 --header 类）保留，供子主题把切换器放回顶栏时使用。
   ============================================ */

.lang-switch {
  position: relative;
  display: inline-block;
  z-index: 60;
}

/* ---------- header 容器：切换器 + Get Quote 成组 ---------- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* ---------- trigger（顶栏深色变体，默认） ---------- */
.lang-switch > summary.lang-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 9px 5px 8px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 4px;
  color: var(--text-light);
  font-family: inherit;
  font-size: var(--fs-xs);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: var(--transition);
  /* 去掉浏览器默认的三角标记 */
  list-style: none;
}

.lang-switch > summary.lang-switch__btn::-webkit-details-marker {
  display: none;
}

.lang-switch > summary.lang-switch__btn::marker {
  content: "";
}

.lang-switch > summary.lang-switch__btn:hover {
  color: var(--yellow);
  border-color: var(--yellow);
}

.lang-switch > summary.lang-switch__btn:focus {
  outline: none;
}

.lang-switch > summary.lang-switch__btn:focus-visible {
  color: var(--yellow);
  border-color: var(--yellow);
  box-shadow: 0 0 0 2px rgba(255, 184, 0, 0.35);
}

/* ---------- trigger（header 白底变体） ----------
   与导航同字号、同字重，做成「文字按钮」而不是描边胶囊：
   CTA 是实心橙，旁边再放一个描边按钮会抢焦点。 */
.lang-switch--header > summary.lang-switch__btn {
  padding: 9px 10px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.lang-switch--header > summary.lang-switch__btn:hover {
  color: var(--accent);
  background: var(--accent-soft);
  border-color: transparent;
}

.lang-switch--header > summary.lang-switch__btn:focus-visible {
  color: var(--accent);
  border-color: transparent;
  box-shadow: 0 0 0 2px rgba(255, 106, 0, 0.35);
}

/* 首页首屏：header 透明压在 hero 上，logo/导航都是白字，切换器跟着变白。
   滚动后 body 加上 .is-header-solid，自动回到深色文字。 */
body.trailx-hero-overlay:not(.is-header-solid) .header .lang-switch--header > .lang-switch__btn {
  color: #ffffff;
}

body.trailx-hero-overlay:not(.is-header-solid) .header .lang-switch--header > .lang-switch__btn:hover {
  color: var(--yellow);
  background: rgba(255, 255, 255, 0.12);
}

.lang-switch__globe {
  width: 15px;
  height: 15px;
  opacity: 0.85;
}

.lang-switch__hint {
  color: inherit;
  font-weight: 500;
  opacity: 0.75;
}

.lang-switch__label {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lang-switch__chev {
  width: 12px;
  height: 12px;
  margin-left: 1px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.lang-switch[open] .lang-switch__chev {
  transform: rotate(180deg);
}

/* ---------- menu ---------- */
.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: auto;
  z-index: 1200;
  min-width: 210px;
  max-height: 340px;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  list-style: none;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 14px 36px rgba(15, 23, 42, 0.2);
}

/* header 里离页面顶部更远一点，视觉上才不像粘在按钮上 */
.lang-switch--header .lang-switch__menu {
  top: calc(100% + 10px);
  min-width: 220px;
}

.lang-switch[open] > .lang-switch__menu {
  animation: langSwitchIn 0.16s ease both;
}

@keyframes langSwitchIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- items ----------
   选择器统一加 .lang-switch 前缀：main.css 里旧的 `.lang-switch a`
   （0,1,1）会给菜单项套上大写、灰字、黄色悬停底，这里必须压过它。 */
.lang-switch .lang-switch__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 4px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: normal;
  transition: background 0.15s ease, color 0.15s ease;
}

.lang-switch .lang-switch__item:hover {
  background: var(--surface-alt);
  color: var(--dark);
}

.lang-switch .lang-switch__item:focus {
  outline: none;
}

.lang-switch .lang-switch__item:focus-visible {
  background: var(--surface-alt);
  color: var(--dark);
  box-shadow: inset 0 0 0 2px rgba(255, 184, 0, 0.45);
}

.lang-switch .lang-switch__item.is-active {
  background: var(--accent-soft);
  color: var(--dark);
  font-weight: 700;
}

.lang-switch__name {
  flex: 1 1 auto;
}

.lang-switch__code {
  flex: 0 0 auto;
  color: var(--text-secondary);
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.lang-switch .lang-switch__item.is-active .lang-switch__code {
  color: var(--accent);
}

.lang-switch__check {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  color: var(--accent);
}

/* ---------- RTL ---------- */
[dir="rtl"] .lang-switch__menu {
  right: auto;
  left: 0;
}

[dir="rtl"] .lang-switch .lang-switch__item {
  text-align: right;
}

/* ---------- 中等宽度 ----------
   1180px 以下导航开始拥挤，先缩切换器，别让它把导航挤到换行。 */
@media (min-width: 769px) and (max-width: 1199px) {
  .header-actions {
    gap: 6px;
  }

  .lang-switch--header > summary.lang-switch__btn {
    padding: 8px 8px;
    font-size: var(--fs-xs);
  }

  .lang-switch--header .lang-switch__label {
    max-width: 84px;
  }
}

/* ---------- mobile ----------
   .nav-cta 在 768px 以下隐藏，切换器留在 header 里靠右（汉堡左侧）。 */
@media (max-width: 768px) {
  .header-actions {
    margin-left: auto;
    margin-right: 2px;
    gap: 2px;
  }

  .lang-switch--header > summary.lang-switch__btn {
    padding: 7px 7px;
    font-size: var(--fs-xs);
  }

  .lang-switch--header .lang-switch__label {
    max-width: 84px;
  }

  .lang-switch--header .lang-switch__chev {
    width: 11px;
    height: 11px;
  }

  .lang-switch__menu {
    min-width: 190px;
    max-height: 60vh;
  }
}

/* 尊重系统的「减少动态效果」 */
@media (prefers-reduced-motion: reduce) {
  .lang-switch[open] > .lang-switch__menu {
    animation: none;
  }

  .lang-switch__chev {
    transition: none;
  }
}

/* ==========================================================================
   语言建议条（v2.9.6）
   --------------------------------------------------------------------------
   只在英文页、「浏览器语言站上有对应版本」时由 JS 显示。默认 hidden，
   所以不加载 JS / JS 报错时页面上什么都不多出来。
   放在底部居中而不是顶部：顶部已经有 34px 顶栏 + header + 切换器，
   再压一条横杠会把首屏 hero 挤下去；底部这条更像 cookie 提示，打扰最小。
   ========================================================================== */
.lang-hint {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 9000;
  width: min(620px, calc(100vw - 32px));
  background: #1A3D6D;
  color: #fff;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(10, 25, 45, 0.28);
  animation: lang-hint-in 0.28s ease-out;
  /* cookie 条出现/消失时 bottom 由 JS 改写，加个过渡免得跳 */
  transition: bottom 0.22s ease;
}

.lang-hint[hidden] {
  display: none;
}

.lang-hint__body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
}

.lang-hint__text {
  margin: 0;
  flex: 1 1 auto;
  font-size: 14px;
  line-height: 1.5;
  color: #fff;
}

.lang-hint__cta {
  flex: 0 0 auto;
  padding: 8px 14px;
  border-radius: 6px;
  background: #FFC107;
  color: #1A1A1A;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s ease;
}

.lang-hint__cta:hover,
.lang-hint__cta:focus {
  background: #FFD24D;
  color: #1A1A1A;
}

.lang-hint__close {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s ease;
}

.lang-hint__close:hover,
.lang-hint__close:focus {
  background: rgba(255, 255, 255, 0.24);
}

.lang-hint__close span {
  display: block;
  margin-top: -2px;
}

/* 提示条浮在底部会盖住 footer 最后一行，显示期间给页面留出等高的空隙 */
html.has-lang-hint body {
  padding-bottom: 96px;
}

/* Cookie 同意条优先：它贴底、全宽、z-index 9990。
   v2.9.15 之前这里是 display:none —— 访客不点 ACCEPT，语言条就永远出不来，
   等于对大多数人关掉了这个功能。现在改成「让位」：JS 量出 cookie 条高度，
   把语言条的 bottom 抬到它上面（见 lang-hint.js 的 placeAboveBar）。
   保留 has-cookie-bar 这个 class 只是给样式留个钩子，不再隐藏。 */
html.has-cookie-bar .lang-hint {
  z-index: 9001;
}

@keyframes lang-hint-in {
  from {
    opacity: 0;
    transform: translate(-50%, 10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (max-width: 600px) {
  .lang-hint {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    transform: none;
    border-radius: 12px 12px 0 0;
    animation: none;
  }

  .lang-hint__body {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px 16px calc(14px + env(safe-area-inset-bottom, 0px));
  }

  .lang-hint__text {
    flex: 1 1 100%;
    padding-right: 32px;
    font-size: 13.5px;
  }

  .lang-hint__cta {
    flex: 1 1 auto;
    text-align: center;
    padding: 10px 14px;
  }

  .lang-hint__close {
    position: absolute;
    top: 8px;
    right: 8px;
  }

  html.has-lang-hint body {
    padding-bottom: 132px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lang-hint {
    animation: none;
  }
}