/* ==========================================================================
   语言切换器 —— 独立文件（不侵入 style.css，中文站与英文站共用）
   站点：www.guangyinyun.com   维护：scripts/build_i18n.py
   依赖：无。样式自包含，仅在引用本文件的页面生效。
   ========================================================================== */

.lang-switch { position: relative; display: inline-flex; flex: 0 0 auto; margin-right: 4px; }

/* —— 位置（09-22 李总拍板）：切换器从「立即询价」前移到品牌 logo 后面。
      它现在是 .container 的直接子元素（navbar-nav 之外）。
      margin-right:auto 吃掉全部富余空间 → logo 与切换器贴左成组，
      导航与 CTA 仍靠右，桌面/手机同一套规则。 */
.navbar .container > .lang-switch { margin: 0 auto 0 16px; }

/* ★ 2026-09-22 护住 logo —— 窄屏「logo 消失」的根治。
   根因是**双层 flex 收缩**：.navbar-brand 是 .container(flex) 的 flex 项，
   它内部的 <img class="logo-img"> 又是 .navbar-brand(flex) 的 flex 项，两层默认
   flex-shrink:1。空间不够时图片宽度被压到 0、高度仍 46px → 渲染成一条看不见的
   竖线（实测 800px 时 .navbar-brand 宽 0px）。
   注意：单靠这两条并不能让窄屏放得下（实测英文 1280px 仍溢出 +43px），
   必须与「导航抽屉 ≤1024」配套 —— 见 responsive.css 顶部块。 */
.navbar-brand,
.navbar-brand .logo-img { flex: 0 0 auto; }

.lang-switch > button.lang-switch-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 11px;
  border: 1px solid rgba(11, 31, 58, .16); border-radius: 999px;
  background: #fff; color: #0B1F3A;
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1;
  cursor: pointer; transition: border-color .18s, color .18s, background .18s;
}
.lang-switch > button.lang-switch-btn:hover,
.lang-switch.is-open > button.lang-switch-btn {
  border-color: #1E88E5; color: #1E88E5; background: #F5FAFF;
}
.lang-switch .lang-globe { width: 15px; height: 15px; flex: 0 0 auto; }
.lang-switch .lang-caret {
  width: 9px; height: 9px; flex: 0 0 auto; transition: transform .18s;
}
.lang-switch.is-open .lang-caret { transform: rotate(180deg); }

.lang-switch-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 176px; padding: 6px;
  background: #fff; border: 1px solid rgba(11, 31, 58, .12); border-radius: 12px;
  box-shadow: 0 10px 30px rgba(11, 31, 58, .13);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.lang-switch.is-open .lang-switch-menu { opacity: 1; visibility: visible; transform: none; }

/* 桌面端 hover 兜底：有人习惯悬停展开，不必先点一下。
   ::before 桥接按钮与菜单之间那 8px 间隙 —— 否则鼠标从按钮移向菜单时 hover
   断开，菜单闪一下就没了（经典坑）。 */
@media (hover: hover) and (pointer: fine) {
  .lang-switch:hover > button.lang-switch-btn {
    border-color: #1E88E5; color: #1E88E5; background: #F5FAFF;
  }
  .lang-switch:hover .lang-caret { transform: rotate(180deg); }
  .lang-switch:hover .lang-switch-menu { opacity: 1; visibility: visible; transform: none; }
  .lang-switch-menu::before {
    content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px;
  }
}

/* JS 主动关闭时的一次性抑制：指针还悬在按钮上时按 Esc / 再点按钮，
   is-open 虽然移除了，但上面的 :hover 兜底会让菜单继续挂着——
   表现为「关了又像没关」。is-force-closed 必须写在 hover 块之后才压得住，
   mouseleave 时由 JS 摘掉。 */
.lang-switch.is-force-closed .lang-switch-menu {
  opacity: 0 !important; visibility: hidden !important; transform: translateY(-6px) !important;
}
.lang-switch.is-force-closed > button.lang-switch-btn {
  border-color: rgba(11, 31, 58, .16); color: #0B1F3A; background: #fff;
}
.lang-switch.is-force-closed .lang-caret { transform: none; }

/* ==========================================================================
   顶栏导航适配 —— 英文标签比中文长得多，不改就会换行/出格
   （李总 09-22 反馈：英文版下来菜单都显大、都出格了）
   ========================================================================== */

/* 1) 不换行：这是「Brand / family」折成两行的直接原因。
      中英文都适用（中文标签短，无副作用）。 */
.navbar-nav a,
.navbar-nav .nav-dropdown > span { white-space: nowrap; }

/* 2) 英文站按屏宽分两档收紧 —— 与 responsive.css 的档位对齐。
      用 html[lang="en"] 提特异性，避免覆盖中文原有的压缩规则。
      ★ 2026-09-22：桌面导航起点由 769 提到 1025（≤1024 整体走汉堡抽屉，
        见 responsive.css 顶部块），所以这里只保留 ≥1025 的两档。
      ★ 英文一级标签已同步精简（Brand family→Brands / Products & services→Products /
        Guangyin Academy→Academy，见 build_i18n.py NAV_SHORT），
        实测英文 nav 由 902px 降到 729px，≥1025 全宽度不再溢出。 */
@media (min-width: 1025px) and (max-width: 1180px) {
  html[lang="en"] .navbar-nav { gap: 0; }
  html[lang="en"] .navbar-nav a,
  html[lang="en"] .navbar-nav .nav-dropdown > span {
    font-size: 0.80rem; padding: 8px 7px; letter-spacing: -0.015em;
  }
  html[lang="en"] .navbar-nav .nav-dropdown > span::after { margin-left: 2px; }
  html[lang="en"] .navbar-brand { font-size: 1.05rem; }
  html[lang="en"] .navbar-nav a.nav-cta { padding: 7px 12px; margin-left: 4px; }
}
@media (min-width: 1181px) {
  html[lang="en"] .navbar-nav { gap: 0; }
  html[lang="en"] .navbar-nav a,
  html[lang="en"] .navbar-nav .nav-dropdown > span {
    font-size: 0.86rem; padding: 8px 10px; letter-spacing: -0.01em;
  }
  html[lang="en"] .navbar-nav .nav-dropdown > span::after { margin-left: 3px; }
  html[lang="en"] .navbar-nav a.nav-cta { padding: 8px 16px; margin-left: 6px; }
}

.lang-switch-menu a {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: auto; padding: 9px 12px; border: 0; border-radius: 8px;
  color: #0B1F3A; font-size: 13.5px; font-weight: 400; text-decoration: none;
  transition: background .16s, color .16s;
}
.lang-switch-menu a:hover { background: #E9F2FC; color: #0D47A1; }
.lang-switch-menu a.is-active {
  background: #FFF8E1; color: #8a6d00; font-weight: 500;
}
.lang-switch-menu a .lang-tag {
  font-size: 11px; font-weight: 500; letter-spacing: .06em; color: #8896A8;
}
.lang-switch-menu a.is-active .lang-tag { color: #B9930A; }
.lang-switch-menu a.is-soon { opacity: .5; pointer-events: none; }
.lang-switch-menu a.is-soon .lang-tag { color: #A5B0BD; }

/* —— 广印学院：淡黄底胶囊 + NEW 角标（09-22 李总拍板方案 A）——
      醒目但不抢「立即询价」的实心黄主 CTA；配色全在站点色板内。 */
.navbar-nav a.nav-academy {
  background: #FFF8E1; border: 1px solid #FFC107; color: #0B1F3A;
  font-weight: 500; border-radius: 999px;
}
.navbar-nav a.nav-academy:hover,
.navbar-nav a.nav-academy.active { background: #FFC107; color: #0B1F3A; }
.navbar-nav a.nav-academy.active::after { display: none; }
.navbar-nav a.nav-academy .nav-badge {
  display: inline-block; margin-left: 5px; padding: 1px 6px 2px;
  background: #FFC107; color: #0B1F3A; border-radius: 999px;
  font-size: 10px; font-weight: 500; line-height: 1.4;
  letter-spacing: .04em; vertical-align: 1px;
}

/* 抽屉模式（≤1024）：切换器在顶栏（logo 与汉堡键之间），不再随导航抽屉竖排。
   省宽度：只留地球 + 箭头，菜单往下弹。
   ★ 2026-09-22：断点由 768 提到 1024 —— 与「导航抽屉 ≤1024」同界，
     抽屉形态下顶栏是 logo + 切换器 + 汉堡。 */
@media (max-width: 1024px) {
  .navbar .container > .lang-switch { margin: 0 auto 0 10px; }
  .lang-switch > button.lang-switch-btn { height: 34px; padding: 0 9px; gap: 5px; }
  .lang-switch .lang-cur { display: none; }
  .lang-switch-menu { right: 0; }
  .lang-switch-menu a { padding: 10px 12px; min-width: 132px; }
  /* 抽屉里的「广印学院」高亮项：drawer 行为 width:100%，
     胶囊圆角在整行宽度下会变成怪异的跑道形，这里收回方角。 */
  .navbar-nav a.nav-academy { border-radius: 8px; }
}