/* PC 端顶部导航条样式（LOGO 左 / 导航居中 / 搜索右），由 header.htm 引入
   独立成文件以避免 commons.css 的浏览器缓存导致新样式不生效。 */
/* ===== PC 端顶部导航条（LOGO 左 / 导航居中 / 搜索右），静态化重建 ===== */
.header .header-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 24px;
}

.header .header-left {
  flex: 0 0 auto;
}

/* 中间导航区：在 LOGO 与右侧功能区之间居中 */
.header .header-nav {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--gta-header-h, 60px);
}

.header .header-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 100%;
  padding: 0 16px;
  position: relative;
  font-size: 15px;
  font-weight: var(--fw-medium, 500);
  color: #0B0F1A;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color .2s ease;
}

.header .header-nav-item:hover,
.header .header-nav-item.is-active {
  color: var(--color-brand);
}

/* 当前页下划线：对齐原站 .navigation-tab.active 的 2px 品牌色 */
.header .header-nav-item.is-active::after {
  content: '';
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 2px;
  background-color: var(--color-brand);
}

.header .header-nav-item-arrow {
  font-size: 12px;
  transition: transform .2s ease;
}

.header .header-nav-dropdown {
  height: 100%;
  display: flex;
  align-items: center;
}

/* 下拉面板：以 .header-inner 为定位基准，宽度与内容容器一致 */
.header .header-nav-panel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: all .2s ease;
  z-index: 100;
  overflow-y: auto;
  max-height: 309px;
}

.header .header-nav-dropdown:hover .header-nav-panel {
  opacity: 1;
  visibility: visible;
}

.header .header-nav-dropdown:hover .header-nav-item {
  color: var(--color-brand);
}

.header .header-nav-dropdown:hover .header-nav-item-arrow {
  transform: rotate(180deg);
}

/* 右侧：快捷链接 + 搜索框 */
.header .header-right {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 0 0 auto;
}

.header .header-quick-nav {
  font-size: 14px;
}

.header .header-search {
  display: flex;
  align-items: center;
  width: 280px;
  height: 40px;
  padding: 0 4px 0 16px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  transition: border-color .2s ease, box-shadow .2s ease;
}

.header .header-search:focus-within {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand) 15%, transparent);
}

.header .header-search-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: none;
  background: transparent;
  font-size: 14px;
  color: #333;
}

.header .header-search-input::placeholder {
  color: #9AA0A6;
}

.header .header-search-btn {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-brand);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}

.header .header-search-btn:hover {
  background: var(--color-bg-subtle);
}

/* 登录 / 注册：暂不启用，结构保留便于后期开启（删掉本块即可恢复显示） */
.header .header-auth--disabled {
  display: none;
}

/* 手机端仍走汉堡菜单抽屉，导航与搜索框不显示 */
@media (max-width: 768px) {
  .header .header-nav,
  .header .header-search {
    display: none;
  }
}