/* ==========================================================================
   ZJ Navbar — 顶部导航（对齐线上 https://www.yanhuoidc.com/ 的设计规格）
   --------------------------------------------------------------------------
   命名空间 .zj-nav : 与主题原有 nav.css（1443 行、超深选择器）完全隔离
   图标方案         : 内联 SVG，不依赖任何图标字体
   设计规格来源     : 线上 nav.css / wwwCSS.css 实测 +
                      headless 浏览器像素采样（1920 视口）

   与线上的关键一致性：
     · 导航栏默认「透明 + 毛玻璃」，鼠标悬停变半透明白（wwwCSS.css:157 的写法）
     · 右侧无内边距，注册按钮为满高实心块、贴右边缘、无圆角
     · 搜索框 #f8f8f9 / 圆角 1px / 放大镜在右
     · 分隔线 #ccc 1×14px，子项左右各 8px
   ========================================================================== */

.zj-nav {
  /* ---- 尺寸（对齐 --navheight / --PcLogo / --navfontSize） ---- */
  --zj-h: 63px;
  --zj-pad-l: 40px;
  --zj-inner-max: 1800px;
  --zj-logo-h: 48px;
  --zj-font: 18px;

  /* ---- 品牌色 ---- */
  --zj-brand: #0052d9;
  --zj-brand-dark: #0043b0;
  --zj-register: #0056ff;          /* 对齐 --nav_register */
  --zj-register-hover: #ffc107;    /* 对齐 --nav_registerHover */

  /* ---- 文字 ---- */
  --zj-text: #181818;              /* 对齐 --txtcl */
  --zj-text-2: #4a5568;
  --zj-text-3: #8a94a6;

  /* ---- 面 / 线 ---- */
  --zj-field: #f8f8f9;             /* 对齐线上搜索框底色 */
  --zj-line: #e8ecf2;
  --zj-delimiter: #ccc;            /* 对齐线上 .delimiter */

  /* ---- 毛玻璃 ---- */
  --zj-glass: rgba(255, 255, 255, 0.92);
  --zj-blur: 12px;

  /* ---- 圆角 / 阴影 ---- */
  --zj-r-sm: 8px;
  --zj-r-md: 10px;
  --zj-r-lg: 14px;
  --zj-shadow-nav: 0 1px 3px rgba(49, 49, 49, 0.1);
  --zj-shadow-pop: 0 12px 32px -8px rgba(16, 24, 40, 0.14), 0 2px 8px rgba(16, 24, 40, 0.06);

  /* ---- 动效 ---- */
  --zj-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --zj-dur: 0.22s;

  /* ---- 角标色（对齐线上） ---- */
  --zj-tag-autumn: #faad14;
  --zj-tag-blue: #1e90ff;
  --zj-tag-red: #ff2626;

  position: fixed;
  inset: 0 0 auto 0;
  z-index: 999;
  height: var(--zj-h);
  /* 默认透明 —— 叠在首屏 Hero 上，靠毛玻璃保证文字可读 */
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: blur(var(--zj-blur));
  backdrop-filter: blur(var(--zj-blur));
  box-shadow: var(--zj-shadow-nav);
  transition: background-color var(--zj-dur) var(--zj-ease),
              border-color var(--zj-dur) var(--zj-ease);
}

/* 悬停变白（对齐 wwwCSS.css:157 的行为） */
.zj-nav:hover {
  background: var(--zj-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* 滚动后保持毛玻璃白底，避免正文从导航栏下面透出来
   （这是相对线上的增补：线上无滚动状态处理） */
.zj-nav.is-scrolled {
  background: var(--zj-glass);
  border-bottom-color: var(--zj-line);
}

/* 占位（默认透明导航不需要；深色页面可选用） */
.zj-nav-spacer {
  height: var(--zj-h, 63px);
}

/* ==========================================================================
   内容容器
   ========================================================================== */

.zj-nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
  /* 不加 max-width —— 对齐线上 .horizontal-menu-navbar（只有 padding-left，右侧贴边） */
  /* 只留左侧内边距 —— 右侧靠注册块自身贴边 */
  padding: 0 0 0 var(--zj-pad-l);
}

/* ==========================================================================
   Logo
   ========================================================================== */

.zj-nav__logo {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
}

.zj-nav__logo img {
  display: block;
  height: var(--zj-logo-h);
  width: auto;
}

/* ==========================================================================
   主导航菜单
   ========================================================================== */

.zj-nav__menu {
  flex: 1 1 auto;
  min-width: 0;
}

.zj-nav__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.zj-nav__item {
  position: static;
  margin-left: 14px;
}

.zj-nav__item:first-child {
  margin-left: 0;
}

.zj-nav__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  height: var(--zj-h);
  padding: 0 10px;
  color: var(--zj-text);
  font-size: var(--zj-font);
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--zj-dur) var(--zj-ease);
}

.zj-nav__link:hover,
.zj-nav__link:focus-visible {
  color: var(--zj-brand);
  outline: none;
}

.zj-nav__item.is-active > .zj-nav__link {
  color: var(--zj-brand);
}

/* 下拉箭头：内联 SVG，替代原 ::after{content:"\e695";font-family:develop} */
.zj-nav__chevron {
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  margin-top: 2px;
  color: #959cad;
  transition: transform var(--zj-dur) var(--zj-ease),
              color var(--zj-dur) var(--zj-ease);
}

.zj-nav__item:hover > .zj-nav__link .zj-nav__chevron,
.zj-nav__item:focus-within > .zj-nav__link .zj-nav__chevron {
  transform: rotate(180deg);
  color: var(--zj-brand);
}

/* ---- 角标（秋季 / HOT）：悬浮在文字上方，对齐线上 .navbar-menu-tag ---- */
.zj-nav__badge {
  flex: 0 0 auto;
  align-self: flex-start;
  margin-top: 12px;
  padding: 2px 5px;
  border-radius: 6px;
  border-bottom-left-radius: 0;      /* 对齐线上那处切角 */
  color: #fff;
  font-family: "Bodrum", "Microsoft YaHei", Arial, sans-serif;  /* 主题已有 Bodrum，未加载自动回退 */
  font-size: 10px;
  font-weight: 700;
  line-height: 10px;
  letter-spacing: 0.2px;
  /* 对齐线上 nav.css:250 */
  box-shadow: 2px 2px 4px 0 rgba(55, 99, 170, 0.31);
  transform: translateY(-2px);
}

.zj-nav__badge--autumn { background: var(--zj-tag-autumn); }
.zj-nav__badge--blue   { background: var(--zj-tag-blue); }
.zj-nav__badge--red    { background: var(--zj-tag-red); }

/* ==========================================================================
   二级菜单挂载区（承接原 .nav-data 里的真实菜单内容）
   ========================================================================== */

.zj-nav__panel-host {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 40;
  display: none;
  background: #fff;
  box-shadow: var(--zj-shadow-pop);
}

.zj-nav__panel-host.is-open {
  display: block;
}

.zj-nav__panel-host .menu-dropdown-close {
  display: none;
}

/* ==========================================================================
   右侧操作区
   ========================================================================== */

.zj-nav__actions {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: auto;
}

/* 子项左右各 8px，对齐线上 > div { margin: 0 8px } */
.zj-nav__actions > * {
  margin: 0 8px;
}

/* ---- 搜索框（#f8f8f9 / 圆角 1px / 放大镜在右） ---- */
.zj-search {
  flex: 0 0 auto;
}

.zj-search__field {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 16px;
  background: var(--zj-field);
  border-radius: 1px;
  cursor: text;
  transition: background-color var(--zj-dur) var(--zj-ease),
              box-shadow var(--zj-dur) var(--zj-ease);
}

.zj-search__field:hover {
  background: #f1f1f3;
}

.zj-search__field:focus-within {
  background: #fff;
  box-shadow: 0 0 0 1px var(--zj-brand);
}

.zj-search__input {
  flex: 0 0 auto;
  width: 92px;                        /* 对齐线上 .search-input width: 92px */
  border: 0;
  background: transparent;
  color: var(--zj-text);
  font-size: var(--zj-font);
  font-family: inherit;
  outline: none;
}

.zj-search__input::placeholder {
  color: #757575;
}

/* 放大镜在文字右侧 */
.zj-search__icon {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  color: #595959;
  opacity: 0.7;
  transition: opacity var(--zj-dur) var(--zj-ease);
}

.zj-search__field:hover .zj-search__icon,
.zj-search__field:focus-within .zj-search__icon {
  opacity: 1;
}

/* ---- 快捷入口（文档中心 / 控制台） ---- */
.zj-nav__quick {
  display: flex;
  align-items: center;
  gap: 2px;
  color: var(--zj-text);
  font-size: var(--zj-font);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--zj-dur) var(--zj-ease);
}

.zj-nav__quick:hover,
.zj-nav__quick:focus-visible {
  color: var(--zj-brand);
  outline: none;
}

.zj-nav__quick svg {
  flex: 0 0 auto;
  width: 21px;                        /* 对齐线上 width="21" */
  height: 21px;
  margin: 0 5px;
}

/* ---- 分隔线（#ccc / 1×14px） ---- */
.zj-nav__divider {
  flex: 0 0 auto;
  width: 1px;
  height: 14px;
  background: var(--zj-delimiter);
}

/* ---- 登录 ---- */
.zj-nav__login {
  display: flex;
  align-items: center;
  color: var(--zj-text);
  font-size: var(--zj-font);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--zj-dur) var(--zj-ease);
}

.zj-nav__login:hover,
.zj-nav__login:focus-visible {
  color: var(--zj-brand);
  outline: none;
}

/* ---- 免费注册：满高实心块、贴右边缘、无圆角 ---- */
.zj-nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--zj-h);
  padding: 0 27px;
  background: var(--zj-register);
  color: #fff;
  font-size: var(--zj-font);
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--zj-dur) var(--zj-ease);
}

/* 注册图标：内联 SVG data URI，避免依赖 register.png 的路径/目录映射 */
.zj-nav__cta::before {
  content: "";
  flex: 0 0 auto;
  width: 14px;
  height: 38px;
  margin-right: 5px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Ccircle cx='8' cy='6' r='3.2' stroke='%23fff' stroke-width='1.6'/%3E%3Cpath d='M2.8 17c0-2.9 2.3-5.2 5.2-5.2s5.2 2.3 5.2 5.2' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M15.5 8.5v5M13 11h5' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") right center no-repeat;
  background-size: 14px 14px;
}

.zj-nav__cta:hover,
.zj-nav__cta:focus-visible {
  background: var(--zj-register-hover);   /* 对齐 --nav_registerHover */
  outline: none;
}

/* 注册块贴紧视口右缘：抵消容器的 8px 外边距
   注意：不能用 :last-child —— DOM 里移动端汉堡按钮排在它之后（虽然默认 display:none） */
.zj-nav__actions > .zj-nav__cta {
  margin-right: 0;
}

/* ---- 移动端汉堡 ---- */
.zj-nav__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--zj-r-sm);
  color: var(--zj-text);
  cursor: pointer;
  transition: background-color var(--zj-dur) var(--zj-ease);
}

.zj-nav__burger:hover {
  background: rgba(0, 0, 0, 0.05);
}

.zj-nav__burger svg {
  width: 22px;
  height: 22px;
}

/* ==========================================================================
   响应式
   ========================================================================== */

@media (max-width: 1400px) {
  .zj-nav__inner { gap: 14px; }
  .zj-nav__link { font-size: 16px; }
  .zj-nav { --zj-font: 16px; --zj-logo-h: 42px; }
  .zj-nav__actions > * { margin: 0 6px; }
}

@media (max-width: 1180px) {
  .zj-nav__quick span { display: none; }   /* 只留图标 */
}

@media (max-width: 992px) {
  .zj-nav { --zj-pad-l: 16px; --zj-logo-h: 34px; }
  .zj-nav__inner { gap: 10px; padding-right: 16px; }
  .zj-nav__menu,
  .zj-nav__divider,
  .zj-nav__login { display: none; }
  .zj-nav__burger { display: flex; order: 2; margin-right: 0; }
  .zj-nav__cta { order: 1; height: 36px; padding: 0 16px; border-radius: 0; }
  /* 移动端导航栏保持毛玻璃白底：透明导航在手机上不可用 */
  .zj-nav,
  .zj-nav.is-scrolled {
    background: var(--zj-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* ---- 汉堡抽屉 ---- */
  .zj-nav.is-drawer-open .zj-nav__menu {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 30;
    max-height: calc(100vh - var(--zj-h));
    overflow-y: auto;
    padding: 8px 12px 16px;
    background: #fff;
    border-top: 1px solid var(--zj-line);
    box-shadow: var(--zj-shadow-pop);
  }
  .zj-nav.is-drawer-open .zj-nav__list {
    flex-direction: column;
    align-items: stretch;
  }
  .zj-nav.is-drawer-open .zj-nav__item { margin-left: 0; }
  .zj-nav.is-drawer-open .zj-nav__link {
    height: 48px;
    justify-content: flex-start;
    border-radius: var(--zj-r-sm);
  }
  .zj-nav.is-drawer-open .zj-nav__badge {
    align-self: center;
    margin-top: 0;
    margin-left: 6px;
    transform: none;
  }
  .zj-nav.is-drawer-open .zj-nav__chevron { margin-left: auto; }
}

@media (max-width: 640px) {
  .zj-nav { --zj-h: 56px; --zj-font: 15px; --zj-logo-h: 30px; }
  .zj-nav__quick { display: none; }
  .zj-nav__actions > * { margin: 0 4px; }
  .zj-search__field { padding: 0 11px; }
  .zj-search__input { width: 74px; }
  .zj-nav__cta { padding: 0 12px; }
  .zj-nav__cta::before { display: none; }
}

/* ==========================================================================
   深色 Hero 可选方案：给导航栏加 .zj-nav--inverse 即转为白字
   ========================================================================== */

.zj-nav--inverse .zj-nav__link,
.zj-nav--inverse .zj-nav__quick,
.zj-nav--inverse .zj-nav__login,
.zj-nav--inverse .zj-search__input,
.zj-nav--inverse .zj-nav__burger {
  color: #fff;
}

.zj-nav--inverse .zj-nav__logo img { filter: brightness(0) invert(1); }
.zj-nav--inverse .zj-search__field { background: rgba(255, 255, 255, 0.16); }
.zj-nav--inverse .zj-search__input::placeholder { color: rgba(255, 255, 255, 0.72); }
.zj-nav--inverse .zj-search__icon { color: #fff; }
.zj-nav--inverse .zj-nav__divider { background: rgba(255, 255, 255, 0.4); }

/* ==========================================================================
   无障碍：尊重系统「减少动态效果」
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .zj-nav,
  .zj-nav *,
  .zj-nav *::before,
  .zj-nav *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}