/* AsoRank 统一导航组件 —— 全站共用
   主色沿用站内紫 #6153ff，命名前缀 asonav- 避免与各模板既有样式冲突 */

:root {
  --asonav-primary: #6153ff;
  --asonav-primary-dark: #4a3ce0;
  --asonav-ink: #1e183f;
  --asonav-muted: #6b6a80;
  --asonav-border: #ece9f5;
  --asonav-h: 72px;
}

.asonav {
  position: relative;
  z-index: 1000;
  background: #fff;
  border-bottom: 1px solid var(--asonav-border);
  font-family: Roboto, "Helvetica Neue", Arial, "PingFang SC", "Microsoft YaHei", sans-serif;
}

.asonav__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  height: var(--asonav-h);
  display: flex;
  align-items: center;
  gap: 32px;
}

/* Logo */
.asonav__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
}
.asonav__logo img {
  height: 36px;
  width: auto;
  display: block;
}

/* 菜单 */
.asonav__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

.asonav__item { position: relative; }

.asonav__link {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 10px 14px;
  color: var(--asonav-ink);
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.asonav__link:hover,
.asonav__item.is-open > .asonav__link {
  color: var(--asonav-primary);
  background: #f4f2ff;
}

/* 下拉箭头 */
.asonav__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: .55;
  transition: transform .2s ease;
}
.asonav__item.is-open .asonav__caret { transform: rotate(180deg); }

/* 下拉面板 */
.asonav__drop {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 232px;
  background: #fff;
  border: 1px solid var(--asonav-border);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(30, 24, 63, .12);
  padding: 8px;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.asonav__item.is-open .asonav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.asonav__drop a {
  display: block;
  padding: 10px 12px;
  color: var(--asonav-ink);
  font-size: 14px;
  line-height: 1.5;
  text-decoration: none;
  border-radius: 8px;
  transition: background .15s ease, color .15s ease;
}
.asonav__drop a:hover {
  background: #f4f2ff;
  color: var(--asonav-primary);
}
.asonav__drop .asonav__drop-desc {
  display: block;
  color: var(--asonav-muted);
  font-size: 12px;
  margin-top: 2px;
}

/* 右侧操作区 */
.asonav__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.asonav__lang {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 7px 12px;
  font-size: 14px;
  color: var(--asonav-muted);
  text-decoration: none;
  border: 1px solid var(--asonav-border);
  border-radius: 8px;
  transition: color .15s ease, border-color .15s ease;
}
.asonav__lang:hover {
  color: var(--asonav-primary);
  border-color: var(--asonav-primary);
}
/* 在线咨询（次要按钮，客户指定保留入口） */
.asonav__chat {
  padding: 9px 16px;
  background: #fff;
  color: var(--asonav-primary);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--asonav-primary);
  border-radius: 8px;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.asonav__chat:hover { background: var(--asonav-primary); color: #fff; }

.asonav__cta {
  padding: 10px 20px;
  background: var(--asonav-primary);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  white-space: nowrap;
  transition: background .18s ease;
}
.asonav__cta:hover { background: var(--asonav-primary-dark); color: #fff; }

/* 汉堡按钮 */
.asonav__burger {
  display: none;
  width: 42px;
  height: 42px;
  padding: 0;
  background: none;
  border: 1px solid var(--asonav-border);
  border-radius: 8px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.asonav__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--asonav-ink);
  border-radius: 2px;
  transition: transform .22s ease, opacity .18s ease;
}
.asonav.is-mobile-open .asonav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.asonav.is-mobile-open .asonav__burger span:nth-child(2) { opacity: 0; }
.asonav.is-mobile-open .asonav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 移动端 */
@media (max-width: 991px) {
  .asonav__inner { gap: 12px; padding: 0 16px; }
  .asonav__burger { display: flex; }
  /* 中文切换保留在移动端导航（汉堡左侧） */
  .asonav__actions .asonav__lang { padding: 7px 10px; font-size: 13px; }

  .asonav__menu {
    position: absolute;
    top: var(--asonav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--asonav-border);
    box-shadow: 0 12px 24px rgba(30, 24, 63, .1);
    max-height: calc(100vh - var(--asonav-h));
    overflow-y: auto;
    padding: 8px 16px 16px;
    display: none;
  }
  .asonav.is-mobile-open .asonav__menu { display: flex; }

  .asonav__item { border-bottom: 1px solid #f5f4fa; }
  .asonav__link {
    justify-content: space-between;
    padding: 14px 4px;
    border-radius: 0;
    font-size: 16px;
  }
  .asonav__drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    padding: 0 0 8px 12px;
    min-width: 0;
    display: none;
  }
  .asonav__item.is-open .asonav__drop { display: block; }
  .asonav__cta { display: none; }
  /* 汉堡按钮推到最右侧 */
  .asonav__actions { gap: 8px; margin-left: auto; }
  .asonav__chat { padding: 7px 12px; font-size: 13px; }
}

@media (max-width: 480px) {
  .asonav__logo img { height: 30px; }
  .asonav__chat { padding: 6px 10px; font-size: 12px; }
  .asonav { --asonav-h: 56px; }
}

/* --- 老模板遗留修复 ---------------------------------------------------------
   滚动时模板 JS 会给 .header-index 加 .header-nav-fixed（position:fixed）。
   asoworld 原站里 .header-index 是顶部吸顶条，但本站它被当成整页内容容器
   （高度约 4000px），一变 fixed 就整页脱离文档流、高度塌陷，浏览器把
   scrollTop 夹回 0 —— 表现就是「页面完全滚不动」。这里强制它保持 static。
   -------------------------------------------------------------------------- */
.header-index.header-nav-fixed { position: static !important; }

/* 同上：滚动时模板 JS 给 .head-primary 加 .primary-all-header-padding（padding-top:7rem），
   那是给"吸顶头部"让位的，本站头部不吸顶，留了只会让页面在滚动瞬间长高 70px 抖一下。 */
.head-primary.primary-all-header-padding { padding-top: 0 !important; }