/* ============================================================
   Lanneas UI 增强  (lanneas-ui.css)
   ------------------------------------------------------------
   1) 让 .site-header 的 position:sticky 真正生效（吸顶）
   2) 产品导航下拉面板完整显示（不再被页头裁掉）
   3) 页头语言切换按钮 + 下拉面板（Google 翻译驱动）
   4) 屏蔽 Google 翻译自带的横幅/悬浮气泡
   加载顺序：注入在 </head> 之前，晚于 style.css / theme.css，
   同特异度规则由本文件覆盖。
   ============================================================ */

/* ---------- 1. 吸顶导航修复 ----------------------------------
   style.css 里 html 与 body 都写了 overflow-x:hidden。
   按 CSS 溢出传播规则，只有「源头元素」的 used value 会降级为 visible：
     · html 的 overflow 不是 visible（hidden/auto），所以由 html 向视口传播，
       html 自身被降级为 visible —— html 不是滚动容器，横向溢出仍由视口裁剪；
     · 但 body 上的 hidden 没有被传播、也就不会被降级，于是 body 变成了
       一个不滚动的滚动容器 —— sticky 元素被锁死在 body 盒子里，看起来就是失效。
   因此真正的修复是撤销 body 上的 hidden。 */
html{overflow-x:clip}     /* 现代浏览器用 clip（不创建滚动容器）；
                             旧浏览器若不识别会忽略本行，回落到 style.css 的 hidden 也无妨 */
body{overflow-x:visible}  /* 关键：让 body 不再是滚动容器，position:sticky 恢复生效 */

/* ---------- 2. 页头不再裁剪纵向溢出 -------------------------
   原 .site-header{overflow-x:hidden} 会把 overflow-y 计算成 auto，
   下拉面板一超出页头高度就被裁掉——这正是产品下拉只显示一条的原因。 */
.site-header{overflow:visible}

/* ---------- 3. 产品导航下拉：完整显示全部条目 ---------------- */
.nav-links li.has-drop .drop{
  min-width:320px;
  max-width:420px;
  padding:10px;
  max-height:min(72vh,520px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
.nav-links li.has-drop .drop a{padding:10px 13px;line-height:1.4}
/* 鼠标从 "Products" 移到面板途中不会断开 hover */
.nav-links li.has-drop::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:12px;
}
/* 键盘/触屏可达 */
.nav-links li.has-drop:focus-within .drop{
  opacity:1;visibility:visible;transform:translateY(0);
}

/* ---------- 4. 语言切换 ------------------------------------- */
.lang-switch{position:relative;display:inline-flex;align-items:center}
.lang-switch__btn{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:none;cursor:pointer;
  color:var(--navy,#0F2D4E);
  padding:8px;border-radius:8px;
  font-family:var(--font-head,inherit);font-weight:700;font-size:12.5px;
  letter-spacing:.5px;line-height:1;
}
.lang-switch__btn:hover{background:var(--bg-2,#eef3f9)}
.lang-switch__btn svg{display:block}
.lang-switch__code{min-width:16px;text-align:center}

.lang-switch__panel{
  position:absolute;top:calc(100% + 12px);right:0;
  width:322px;max-width:calc(100vw - 28px);
  background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:16px;
  box-shadow:0 20px 55px rgba(15,45,78,.22);
  padding:10px;z-index:90;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  max-height:min(74vh,560px);overflow-y:auto;overscroll-behavior:contain;
}
.lang-switch.open .lang-switch__panel{
  opacity:1;visibility:visible;transform:translateY(0);
}
.lang-switch__panel a{
  display:flex;align-items:center;gap:14px;
  padding:15px 16px;border-radius:10px;
  color:var(--ink,#1a2433);text-decoration:none;
  font-size:16.5px;font-weight:500;line-height:1.25;
}
.lang-switch__panel a:hover,
.lang-switch__panel a:focus{background:#f1f3f6;color:var(--ink,#1a2433)}
.lang-switch__panel a[aria-current="true"]{background:#f1f3f6}
.lang-switch__flag{
  width:30px;height:22px;flex:0 0 30px;border-radius:3px;object-fit:cover;
  background:#e9eef4;box-shadow:inset 0 0 0 1px rgba(15,45,78,.14);
}
.lang-switch__name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 语言面板本身不参与翻译：JS 会给它加 Google 的 notranslate 类，
   否则 "Français/日本語" 这些原生语言名会被机翻掉。 */

/* 移动端：语言入口并入汉堡菜单 */
.mobile-menu .mobile-langs{
  display:flex;flex-wrap:wrap;gap:6px;
  padding:14px 8px 4px;margin-top:10px;border-top:1px solid var(--line,#e2e8f0);
}
.mobile-menu .mobile-langs a{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 11px;border:1px solid var(--line,#e2e8f0);border-radius:999px;
  font-size:12.5px;font-weight:700;letter-spacing:.4px;
  color:var(--ink,#1a2433);text-decoration:none;
}
.mobile-menu .mobile-langs a[aria-current="true"]{
  background:var(--bg-2,#eef3f9);border-color:var(--accent,#00a8a8);
}
.mobile-menu .mobile-langs img{width:20px;height:15px;border-radius:2px;flex:0 0 20px}

/* ---------- 5. 失败提示 toast -------------------------------- */
.lns-toast{
  position:fixed;left:50%;bottom:26px;z-index:9999;
  transform:translateX(-50%) translateY(12px);
  background:rgba(15,45,78,.96);color:#fff;
  font-size:13.5px;line-height:1.5;text-align:center;
  padding:11px 18px;border-radius:10px;max-width:min(88vw,420px);
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  opacity:0;visibility:hidden;
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.lns-toast.show{opacity:1;visibility:visible;transform:translateX(-50%)}

/* ---------- 6. 屏蔽 Google 翻译自带 UI -----------------------
   否则它会在页面顶部插一条横幅，把吸顶导航顶下去。 */
body{top:0!important}
.goog-te-banner-frame,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover,
.goog-te-spinner-pos{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
/* 真实的语言下拉由我们自己渲染；Google 的 select 放到屏幕外，
   但保留渲染（display:none 会导致它不生成 .goog-te-combo）。 */
#google_translate_element{
  position:absolute!important;left:-9999px!important;top:0!important;
  width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none;
}

/* ============================================================
   7. 右侧浮动联系栏（lanneas-rail）
   ------------------------------------------------------------
   竖直排在视口右侧、垂直居中。与右下角 #toTop（right:20px;
   bottom:20px;z-index:40）错开，互不遮挡。
   深蓝圆底 + 白图标 = 默认态；hover 变主题青色并浮出左侧标签气泡。
   ============================================================ */

/* ------------------------------------------------------------
   停用站点自带的旧浮动联系栏 .floating-contact
   ------------------------------------------------------------
   main.js 会在页面里另建一套 .floating-contact（style.css 里
   定位在右侧、z-index:999），与本栏功能重复，但层级更高：
   它会盖住本栏、并吞掉本栏按钮的点击（实测点击被其 <svg> 拦截）。
   本栏才是唯一入口，故在此隐藏旧栏；用 !important 压制它的
   样式表与行内规则（display:none 的元素不再接收指针事件）。 */
.floating-contact{display:none!important;visibility:hidden!important}

.lns-rail{
  position:fixed;right:16px;top:50%;
  transform:translateY(-50%);
  z-index:9000;              /* 高于旧栏的 999 与各弹层，避免被遮挡/截获点击 */
  display:flex;flex-direction:column;gap:10px;
  /* 页面内任何祖先的 overflow 都不应裁掉它，固定定位本身已脱离文档流 */
  pointer-events:none;          /* 只有按钮可点，空白区不挡正文 */
  font-family:var(--font-body,inherit);
}
.lns-rail > *{pointer-events:auto}

.lns-rail__item{position:relative;display:block}

.lns-rail__btn{
  display:grid;place-items:center;
  width:46px;height:46px;
  border:none;border-radius:50%;cursor:pointer;
  background:var(--navy,#0F2D4E);color:#fff;
  padding:0;
  transition:background .18s ease,transform .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.lns-rail__btn svg{display:block;width:21px;height:21px}
.lns-rail__btn:hover,
.lns-rail__btn:focus-visible{background:var(--accent,#00a8a8);transform:scale(1.06)}
.lns-rail__btn:focus-visible{outline:2px solid var(--accent,#00a8a8);outline-offset:2px}
.lns-rail__item.is-open > .lns-rail__btn{background:var(--accent,#00a8a8)}

/* 左侧标签气泡（截图里 "WeChat" 那种） */
.lns-rail__label{
  position:absolute;right:calc(100% + 10px);top:50%;
  transform:translateY(-50%);
  background:var(--navy,#0F2D4E);color:#fff;
  font-size:12.5px;font-weight:600;line-height:1;
  letter-spacing:.3px;white-space:nowrap;
  padding:9px 12px;border-radius:8px;
  opacity:0;visibility:hidden;
  transition:opacity .16s ease,visibility .16s ease;
  pointer-events:none;
}
.lns-rail__label::after{
  content:"";position:absolute;left:100%;top:50%;
  transform:translateY(-50%);
  border:6px solid transparent;border-left-color:var(--navy,#0F2D4E);
}
.lns-rail__item:hover .lns-rail__label,
.lns-rail__item:focus-within .lns-rail__label{opacity:1;visibility:visible}

/* ---------- 二维码面板 ---------- */
.lns-qr{
  position:absolute;right:calc(100% + 12px);top:50%;
  transform:translateY(-50%) scale(.96);
  width:232px;max-width:calc(100vw - 78px);
  background:#fff;border:1px solid var(--line,#e2e8f0);border-radius:16px;
  box-shadow:0 18px 46px rgba(15,45,78,.24);
  padding:14px;text-align:center;
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:2;
}
.lns-rail__item.is-open .lns-qr{
  opacity:1;visibility:visible;transform:translateY(-50%) scale(1);
}
.lns-rail__item.is-open .lns-rail__label{opacity:0;visibility:hidden}
.lns-qr__img{
  display:block;width:100%;height:auto;aspect-ratio:1/1;
  border:1px solid var(--line,#e2e8f0);border-radius:10px;
  background:#fff;object-fit:contain;
}
.lns-qr__title{
  margin:11px 0 3px;font-size:14px;font-weight:700;
  color:var(--navy,#0F2D4E);line-height:1.3;
}
.lns-qr__hint{
  margin:0;font-size:12.5px;line-height:1.5;color:var(--muted,#5b6b80);
}
.lns-qr__link{
  display:inline-block;margin-top:9px;font-size:12.5px;font-weight:600;
  color:var(--accent,#00a8a8);text-decoration:none;
}
.lns-qr__link:hover{text-decoration:underline}
.lns-qr__name{
  display:block;margin-top:9px;font-size:12px;
  color:var(--muted,#5b6b80);word-break:break-all;
}

/* ---------- 移动端：仍竖排在右，整体缩小 ---------- */
@media (max-width:980px){
  .lns-rail{right:10px;gap:8px}
  .lns-rail__btn{width:42px;height:42px}
  .lns-rail__btn svg{width:19px;height:19px}
  .lns-qr{width:206px;padding:12px}
}
@media (max-width:480px){
  .lns-rail{right:8px;gap:7px}
  .lns-rail__btn{width:40px;height:40px}
  .lns-rail__btn svg{width:18px;height:18px}
  .lns-qr{width:190px;max-width:calc(100vw - 64px);padding:11px}
  .lns-qr__title{font-size:13px}
  .lns-qr__hint{font-size:12px}
}

/* ---------- 打印时不要 ---------- */
@media print{.lns-rail{display:none!important}}

/* ============================================================
   8. 询盘弹窗的降级兜底
   ------------------------------------------------------------
   老 Safari 没有 dialog.showModal()，个别实现又是空实现。
   这时 JS 会加 .lns-dialog-fallback：它不在 top layer 里，
   所以必须自己补居中定位和层级（要高于浮动联系栏的 60）。 */
dialog.quote.lns-dialog-fallback{
  position:fixed;left:50%;top:50%;
  transform:translate(-50%,-50%);
  margin:0;max-height:92vh;overflow-y:auto;
  z-index:9998;
}