/* ============================================================
   全站共享导航样式  nav.css
   ------------------------------------------------------------
   为什么要有这个文件？
   本站是两套渲染体系：
     · 首页            index.html 等  → <nav class="intl-nav">  (样式 international.css)
     · 内页(419 页)                  → <nav class="nav">       (样式 style.css + intl-reskin.css)
   以前"导航 + 下拉"的规则在这两处各写一份，所以每次改导航
   总要改两遍、还容易漏一边（首页漏改 / 内页漏改）。

   现在：导航与下拉的全部规则集中到本文件，两套页面都加载它。
        今后改导航只改本文件，首页与内页自动保持一致。

   加载顺序：必须放在 international.css / intl-reskin.css 之后。
   依赖：无。本文件使用字面色值，不引用任何 CSS 变量，
         因此在两套体系中都独立生效。
   ============================================================ */

/* ---------- 1. 导航条本身 ---------- */
.nav,
.intl-nav{
  position:relative;              /* 建立层叠上下文，防止下拉被下方 hero/区块盖住 */
  z-index:40;                     /* 高于内容区，低于吸顶头部 .intl-header(50) */
  background:#fff;
  border-bottom:1px solid #e6ebf2;
}
.intl-nav{ box-shadow:0 1px 2px rgba(15,23,42,.04); }
.intl-nav .wrap{ display:flex; align-items:center; justify-content:space-between; }

/* ---------- 2. 一级菜单 ---------- */
.nav .menu,
.intl-nav .menu{
  display:flex; flex-wrap:wrap; align-items:stretch;
  list-style:none; margin:0; padding:0;
}
.intl-nav .menu{ gap:4px; }

.nav .menu > li,
.intl-nav .menu > li{ position:relative; }

/* 一级项：纯文字，无下划线 / 无圆角（避免"弯弯的蓝条"） */
.nav .menu > li > a,
.intl-nav .menu > li > a{
  display:block;
  height:auto !important;         /* 盖掉旧 style.css 的 height:50px / line-height:50px */
  line-height:1.4 !important;
  padding:17px 20px;
  color:#334155; font-size:15px; font-weight:500;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  transition:color .2s ease;
}
.nav .menu > li > a:hover,
.intl-nav .menu > li > a:hover,
.nav .menu > li > a.active,
.intl-nav .menu > li > a.active{
  color:#1d4ed8 !important;
  background:transparent !important;
}
.nav .menu > li > a.active,
.intl-nav .menu > li > a.active{ font-weight:700; }

/* ---------- 3. 下拉分类面板（三列分组） ---------- */
.nav .sub,
.intl-nav .sub{
  position:absolute; top:100%; left:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px 28px;
  min-width:560px; padding:18px 20px; margin:0;
  background:#fff;
  border:1px solid #e6ebf2; border-radius:14px;
  box-shadow:0 18px 44px rgba(15,23,42,.14);
  list-style:none; z-index:99;
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s, transform .2s, visibility .2s;
}
/* 悬停展开：显式写 display:grid，盖掉旧 style.css 的 `li:hover>.sub{display:block}` */
.nav .menu > li:hover > .sub,
.intl-nav .menu > li:hover > .sub{
  display:grid;
  opacity:1; visibility:visible; transform:translateY(0);
}

/* 「解决方案」下拉是 4 组（比产品中心多一列「RFID 场景」），单独放宽面板 */
.nav .sub-4,
.intl-nav .sub-4{
  grid-template-columns:repeat(4,1fr);
  min-width:760px;
}

/* ---------- 4. 分组：小标题 + 条目 ---------- */
.nav .sub-group,
.intl-nav .sub-group{
  display:flex; flex-direction:column; gap:2px; min-width:150px;
}
.nav .sub-group-title,
.intl-nav .sub-group-title{
  font-size:12px; font-weight:700; letter-spacing:.5px;
  color:#1d4ed8; white-space:nowrap;
  padding:0 12px 8px; margin:0 0 4px;
  border-bottom:1px solid #e6ebf2;
}
.nav .sub-group a,
.intl-nav .sub-group a{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; border-radius:8px;
  font-size:13.5px; color:#475569; text-align:left;
  height:auto !important; line-height:1.5 !important;
  transition:background .15s, color .15s, transform .15s;
}
.nav .sub-group a::after,
.intl-nav .sub-group a::after{
  content:"\203A";                /* › */
  color:#94a3b8; opacity:0;
  transform:translateX(-4px); transition:all .15s;
}
.nav .sub-group a:hover,
.intl-nav .sub-group a:hover{
  background:#f1f5f9 !important;
  color:#1d4ed8 !important;
  transform:translateX(2px);
}
.nav .sub-group a:hover::after,
.intl-nav .sub-group a:hover::after{
  opacity:1; transform:translateX(0); color:#1d4ed8;
}

/* ---------- 5. 响应式 ---------- */
/* 首页：中屏下拉面板收成两列并右对齐，避免超出视口（900~980px 仍是桌面 hover 下拉） */
@media (max-width:980px){
  .intl-nav .sub{ grid-template-columns:repeat(2,1fr); min-width:auto; left:auto; right:0; }
}

/* 移动端（≤900px）：导航收成「汉堡抽屉」，首页与内页行为统一。
   ------------------------------------------------------------
   历史坑（2026-09-16 修正）：
     · 旧版内页在这里写成「常驻展开」（理由：触屏没有 hover）→ 一进页面
       整块分类全部铺开，移动端首屏被导航占满。
     · 旧版首页在 ≤560px 直接 `.intl-nav .menu{display:none}` 却**没给任何入口**
       → 首页在手机上完全看不到导航。
   现在：菜单默认收起，由 header 里的 .nav-toggle 切换 .menu-open；
        含二级的一级项点击展开（accordion），首屏干净。 */
@media (max-width:900px){
  /* 收起态：nav 条不占高度、不留边线（菜单展开时才出现分隔与阴影） */
  .nav, .intl-nav{ border-bottom:0; box-shadow:none; }
  .nav .wrap, .intl-nav .wrap{ padding:0; max-width:none; }

  /* 菜单本体：纵向排列，默认隐藏 */
  .nav .menu,
  .intl-nav .menu{
    display:none;
    flex-direction:column; flex-wrap:nowrap; gap:0;
    width:100%; padding:6px 0 8px;
    background:#fff;
    border-bottom:1px solid #e6ebf2;
    box-shadow:0 18px 44px rgba(15,23,42,.14);
  }
  /* 打开态：面板**固定**到吸顶头部正下方。
     历史坑（2026-09-16）：面板原本是文档流里的普通块，而 <nav> 位于文档最顶部；
     页面滚到底部时，头部是 sticky 的（汉堡一直可见可点），可面板却在**视口上方**
     的文档顶部展开 → 用户看到的是"点了没反应"。
     固定定位后，无论滚到哪里，面板都出现在汉堡正下方，且自身可滚动。 */
  .nav.menu-open .menu,
  .intl-nav.menu-open .menu{
    display:flex;
    position:fixed;
    top:var(--nav-top, 64px);           /* 头部实测高度，由 nav-mobile.js 写入 */
    left:0; right:0;
    max-height:calc(100vh - var(--nav-top, 64px));
    overflow-y:auto; -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  /* 抬高整个 nav 层：抽屉需盖过页面内其它 sticky 元素（如 .catbar z-index:88） */
  .nav.menu-open,
  .intl-nav.menu-open{ z-index:200; }

  /* 一级项 */
  .nav .menu > li,
  .intl-nav .menu > li{
    position:static;
    border-bottom:1px solid #f1f5f9;
  }
  .nav .menu > li:last-child,
  .intl-nav .menu > li:last-child{ border-bottom:0; }
  .nav .menu > li > a,
  .intl-nav .menu > li > a{
    display:flex; align-items:center; justify-content:space-between;
    padding:14px 20px; font-size:15.5px;
  }
  /* 含二级的项：右侧加 ▾ 指示，展开时旋转 */
  .nav .menu > li.has-sub > a::after,
  .intl-nav .menu > li.has-sub > a::after{
    content:"\25BE"; font-size:11px; color:#94a3b8;
    transition:transform .2s ease;
  }
  .nav .menu > li.has-sub.open > a::after,
  .intl-nav .menu > li.has-sub.open > a::after{
    transform:rotate(180deg); color:#1d4ed8;
  }

  /* 二级：默认收起；触屏 hover 不再误展开（覆盖上面的 li:hover 规则） */
  .nav .menu > li:hover > .sub,
  .intl-nav .menu > li:hover > .sub{ display:none; }
  .nav .sub,
  .intl-nav .sub{
    position:static; display:none; min-width:0;
    grid-template-columns:1fr; gap:0;
    padding:0 0 8px;
    background:#f8fafc; border:0; border-radius:0; box-shadow:none;
    opacity:1; visibility:visible; transform:none;
  }
  .nav .menu > li.open > .sub,
  .intl-nav .menu > li.open > .sub{ display:block; }

  /* 二级分组 */
  .nav .sub-group,
  .intl-nav .sub-group{ min-width:0; gap:0; }
  .nav .sub-group-title,
  .intl-nav .sub-group-title{
    font-size:12px; color:#1d4ed8;
    padding:12px 20px 4px; margin:0; border-bottom:0;
  }
  .nav .sub-group a,
  .intl-nav .sub-group a{
    color:#475569 !important;
    padding:10px 20px !important; font-size:14px;
  }
  .nav .sub-group a::after,
  .intl-nav .sub-group a::after{ display:none; }
}