/* ============================================================
   nav-dropdown.css — 顶级精简 + 悬停下拉（海康式）
   顶级：关于艾马 · 产品与方案 ▾ · 案例与文章 ▾ · 联系我们
   全站共用；移动端在汉堡菜单里平铺展开
   ============================================================ */

/* ---- Logo 统一尺寸（全站唯一来源）----
   logo-nav.png = 原图裁掉 78% 透明留白 + 上下各留 8% 呼吸空间
   内容占整图 86%，故 35px 整高 → 内容实高 30.2px
   与改造前「原图 984²+height:140px」的 30.3px 完全一致 */
.nav .logo,
.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.logo img {
  height: 35px !important;
  width: auto !important;
  max-width: none;
  display: block;
  filter: brightness(0) invert(1);
}
@media (max-width: 768px) {
  .logo img { height: 30px !important; }
}

/* ---- 统一顶级项：普通链接与下拉触发项同高、同字号、垂直居中 ---- */
/* 桌面端保证 nav-links 是 flex（部分页面内联样式未定义）
   注意必须限定 min-width，否则会覆盖 responsive.css 的移动端 display:none，汉堡菜单失效 */
@media (min-width: 769px) {
  .nav-links {
    display: flex;
    align-items: stretch !important;   /* 各项等高，内部再居中 */
    gap: 30px;
  }
}
.nav-links > a,
.nav-item > .nav-trigger {
  display: inline-flex;
  align-items: center;
  font-size: 15px;
  line-height: 1;
  padding: 0 !important;             /* 清掉原有的 4px 底边距 */
  height: 100%;
  white-space: nowrap;
  /* 关键：显式指定颜色，否则浏览器套用默认链接色（未访问蓝 / 已访问紫） */
  color: var(--text-secondary, #8899B4) !important;
  text-decoration: none;
  transition: color .2s;
}
/* 覆盖浏览器 :visited 默认紫色 */
.nav-links > a:visited {
  color: var(--text-secondary, #8899B4) !important;
}
.nav-links > a:hover {
  color: var(--accent, #00D4FF) !important;
}

/* 下拉容器 */
.nav-item {
  position: relative;
  display: flex;
  align-items: stretch;
}

/* 顶级触发项 */
.nav-item > .nav-trigger {
  gap: 5px;
  margin-right: -11px;   /* 抵消箭头(6px)+gap(5px)，使各项视觉间距一致 */
  cursor: pointer;
  color: var(--text-secondary, #8899B4);
  text-decoration: none;
  transition: color .2s;
}
.nav-item:hover > .nav-trigger {
  color: var(--accent, #00D4FF);
}

/* 当前所在页：文字色统一，下划线沿用 animations.css 的 .nav-links a::after 机制
   下拉触发项是 span，animations.css 选中不到 —— 这里补一条同规格的，保证两类项表现一致 */
.nav-item > .nav-trigger {
  position: relative;
}
.nav-links > a.active,
.nav-item > .nav-trigger.active {
  color: var(--text-primary, #E8ECF1) !important;
}
/* a 标签的下划线由 animations.css 提供（bottom:0，紧贴文字底部）
   为使两类项下划线等高，a 标签也撑满高度，并把线定位到同一位置 */
.nav-links > a {
  align-items: center;
}
.nav-links > a::after {
  bottom: 22px !important;   /* 与 span 触发项的下划线同高 */
}

/* 仅给 span 触发项补下划线（a 标签已由 animations.css 处理，不可重复添加） */
.nav-item > span.nav-trigger::before {
  content: "";
  position: absolute;
  left: 0; right: 11px;      /* 右侧留出箭头宽度 */
  bottom: 22px;              /* 与 a 标签的下划线同高 */
  height: 2px;
  background: var(--accent, #00D4FF);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s;
}
.nav-item:hover > span.nav-trigger::before,
.nav-item > span.nav-trigger.active::before {
  transform: scaleX(1);
}

/* 箭头指示 */
.nav-trigger::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .22s;
  opacity: .75;
}
.nav-item:hover .nav-trigger::after {
  transform: rotate(225deg) translateY(-2px);
}

/* 下拉面板 */
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 235px;
  background: rgba(15, 40, 71, .98);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s, transform .22s, visibility .22s;
  z-index: 200;
}
/* 隐形桥梁：鼠标从触发项移到面板时不会中断 hover（挂在 nav-item 上避免与 active 下划线冲突） */
.nav-item::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 12px;
}
.nav-item:hover .nav-dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

/* 下拉项 */
.nav-dropdown a {
  display: block;
  padding: 11px 14px;
  border-radius: 8px;
  color: var(--text-primary, #E8ECF1);
  text-decoration: none;
  font-size: 14.5px;
  line-height: 1.45;
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.nav-dropdown a:hover {
  background: rgba(0, 212, 255, .12);
  color: var(--accent, #00D4FF);
}
.nav-dropdown a .dd-sub {
  display: block;
  font-size: 12px;
  color: #A9BDD6;
  margin-top: 3px;
  white-space: nowrap;
}
.nav-dropdown a:hover .dd-sub { color: rgba(0, 212, 255, .75); }

/* 分隔线 */
.nav-dropdown .dd-divider {
  height: 1px;
  background: rgba(255, 255, 255, .08);
  margin: 8px 6px;
}

/* ---------- 移动端：汉堡菜单内平铺 ---------- */
@media (max-width: 768px) {
  /* 汉堡按钮：各页内联曾有 display:flex / flex+column+padding 两种写法，
     统一在此声明，避免按钮本身大小位置不一致 */
  .hamburger {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
    padding: 10px !important;
    cursor: pointer;
    z-index: 200;
  }
  .hamburger span {
    display: block !important;
    width: 26px !important;
    height: 3px !important;
    background: #fff;
    border-radius: 2px;
  }

  /* 抽屉容器：原先各页内联各写一套（三代写法并存），现统一在此定义。
     text-align/align-items 必须显式声明 —— 缺了就会退回 flex 默认值，
     表现为「有些页面菜单项居中、有些靠左」 */
  .nav-links {
    display: none !important;
  }
  .nav-links.open {
    display: flex !important;
    position: fixed;
    top: 0;
    right: 0;
    width: 260px;
    height: 100vh;
    flex-direction: column;
    align-items: stretch !important;   /* 项占满抽屉宽 */
    text-align: left !important;       /* 文字一律左对齐 */
    /* gap 必须显式归零：各页内联有 .nav-links{gap:24px} / {gap:28px} 等
       全局写法，纵向抽屉下会与项自身的 padding 叠加，导致各页间距不同。
       项间留白统一由下面 a/.nav-trigger 的 padding:12px 0 提供。 */
    gap: 0 !important;
    row-gap: 0 !important;
    column-gap: 0 !important;
    background: #0F1F38;
    padding: 80px 32px 32px;
    z-index: 150;
    border-left: 1px solid rgba(0, 212, 255, .12);
    overflow-y: auto !important;       /* 项多时可滚动 */
  }
  /* 未展开状态也归零，避免动画/闪现时抖动 */
  .nav-links {
    gap: 0 !important;
    row-gap: 0 !important;
  }

  .nav-item { display: block; width: 100%; }
  /* 手机端一律块级 + 左对齐，不用 flex，避免抽屉的 column flex 打乱缩进 */
  /* 关键：撤掉桌面端的 white-space:nowrap —— 抽屉只有 260px，
     「2D 视觉检测」「自动化输送线」等长标题会溢出左边界被裁掉 */
  .nav-links > a,
  .nav-item > .nav-trigger,
  .nav-dropdown a {
    white-space: normal !important;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .nav-links > a,
  .nav-item > .nav-trigger {
    display: block !important;
    width: auto !important;
    height: auto !important;
    text-align: left !important;
    padding: 12px 0 !important;
    font-size: 16px !important;   /* 全站统一：各页内联曾有 13/14/16px 三种 */
  }
  /* 兜底：部分页面用后代选择器 .nav-links.open a 或 .nav-links a 指定字号 */
  .nav-links.open a,
  .nav-links > a {
    font-size: 16px !important;
  }
  .nav-dropdown a {
    display: block !important;
    width: auto !important;
    text-align: left !important;
  }
  .nav-item > .nav-trigger { color: var(--text-primary, #E8ECF1); }
  /* 手机端彻底关掉所有下划线/箭头伪元素：
     桌面端蓝线定位在 bottom:22px，手机端改块级布局后会压到文字上 */
  .nav-trigger::after,
  .nav-item::after,
  .nav-links > a::after,
  .nav-links > a::before,
  .nav-item > .nav-trigger::before,
  .nav-item > span.nav-trigger::before,
  .nav-links > a.active::after,
  .nav-links > a.active::before,
  .nav-item > .nav-trigger.active::before {
    display: none !important;
    content: none !important;
  }
  .nav-links > a.active,
  .nav-item > .nav-trigger.active { color: var(--accent, #00D4FF); }
  /* animations.css 用的是后代选择器 .nav-links a::after，需单独兜底 */
  .nav-links a::after,
  .nav-links a::before {
    display: none !important;
    content: none !important;
  }

  .nav-dropdown {
    position: static;
    /* 必须显式归零：桌面端用 left:50% + translateX(-50%) 做居中，
       手机端只撤 position/transform 不够 —— left 与 :hover 里的
       translateX(-50%) 仍会把子菜单整体左移出抽屉 */
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    min-width: 0;
    max-width: 100%;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    padding: 0 0 6px 12px;
  }
  /* 触摸屏也会触发 :hover，必须一并压掉它的 translateX(-50%) */
  .nav-item:hover .nav-dropdown,
  .nav-item .nav-dropdown {
    transform: none !important;
    left: auto !important;
  }
  .nav-dropdown a {
    padding: 9px 0;
    font-size: 14px !important;   /* 子项统一 14px，比顶级项 16px 小一级 */
    color: var(--text-secondary, #8899B4);
  }
  .nav-dropdown a .dd-sub { display: none; }
  .nav-dropdown .dd-divider { display: none; }
}