/* ============================================================
   components/nav-v315.css — v315 导航栏（容器 + 下拉）
   来源：原 base_nav.html 内联 .dropdown* 块 + 各页内联 .navi* 块
   依赖：tokens.css（令牌）
   职责：v315 全站导航唯一事实来源。原各页在 <style> 中重复定义了完整 .navi
        样式，base_nav.html 另含一份 .dropdown*（含悬停展开关键规则），
        此处合并为单一文件，所有 v315 页面统一 <link> 引入，删除逐页内联。
   说明：保留原 !important（防御 legacy nav.css 意外注入，确保像素级一致）。
   ============================================================ */

/* ===== 下拉三角箭头 + 面板（原 base_nav.html 内联） ===== */
.hidden {
  display: none !important;
}

/* 下拉三角箭头 */
.dropdown>a::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--brand, #ef6a4c);
  margin-left: 0.5rem;
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.dropdown:hover>a::after {
  transform: rotate(180deg);
}

/* 下拉容器 */
.dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* 下拉面板 - 横向排列 */
.navi .dropdown-content {
  display: none;
  position: absolute;
  flex-direction: row;
  flex-wrap: wrap;
  gap: .5rem;
  /* 下拉项之间的间隙 8px */
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e3e6ef);
  border-radius: var(--r-lg, 12px);
  box-shadow: var(--sh-2, 0 10px 24px rgba(24, 28, 45, .12));
  z-index: 1;
  top: 100%;
  left: 0;
  padding: .5rem;
  overflow: hidden;
}

.navi .dropdown-content a {
  color: var(--text, #181c2d);
  padding: .5rem .65rem;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  border-radius: 6px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.navi .dropdown-content a:hover {
  background-color: rgba(239, 106, 76, .12);
  color: var(--brand, #ef6a4c);
}

/* 悬停显示下拉面板（关键：展开逻辑） */
.navi .dropdown:hover .dropdown-content {
  display: flex;
}

/* ===== v315 导航栏容器（原各页内联 body .navi*，!important 防御保留） ===== */
body .navi {
  font-family: var(--f-display, 'Microsoft YaHei', system-ui, sans-serif) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fff7f3 100%) !important;
  border-bottom: 1px solid rgba(239, 106, 76, .28) !important;
  box-shadow: 0 1px 3px rgba(24, 28, 45, .05) !important;
  height: 2.5rem !important;
  width: 100% !important;
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  /* 左组靠左 / 右组靠右 */
  flex-wrap: nowrap !important;
  padding: 0 1rem !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  transform: none !important;
  /* 抵消 nav.css 的 translateX 居中 */
  z-index: 1000 !important;
}

body .navi-left,
body .navi-right {
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  background: transparent !important;
}

/* 左组：紧凑左对齐 */
body .navi-left {
  justify-content: flex-start !important;
  gap: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* 右组：推到最右 */
body .navi-right {
  justify-content: flex-end !important;
  gap: 0 !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

body .navi-item {
  line-height: normal !important;
  margin-right: .5rem !important;
  font-size: .9rem !important;
}

body .navi-ico {
  width: 16px !important;
  height: 16px !important;
  flex-shrink: 0 !important;
  display: block !important;
  margin-right: 6px !important;
}

body .navi a {
  color: var(--text, #181c2d) !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: .15rem .35rem !important;
  border-radius: var(--r, 8px) !important;
  transition: background-color var(--transition-fast, .15s ease),
    color var(--transition-fast, .15s ease) !important;
}

/* 导航 SVG 图标统一为品牌橙 */
body .navi .navi-ico {
  color: var(--brand, #ef6a4c) !important;
}

body .navi a:hover {
  background-color: rgba(239, 106, 76, .12) !important;
  color: var(--brand, #ef6a4c) !important;
}

body .navi a:active {
  background-color: rgba(239, 106, 76, .22) !important;
}

/* ===== 原 base_nav.html 元素内联 style= 迁移（消除与共享件冲突） ===== */

/* 右组登录下拉面板：右对齐（覆盖通用 .navi .dropdown-content 的 left:0） */
body .navi-right .dropdown-content {
  right: 0;
  left: auto;
}

/* 右组最右项：精确排除右边距，其余 .navi-item 仍保留 .5rem 间距 */
body .navi-right .navi-item:last-child {
  margin-right: 0 !important;
}

/* ===== 响应式：窄屏（<= 1024px）次要项折叠到「更多」下拉 ===== */
@media (max-width: 1024px) {
  /* 隐藏原位的次要项（JS 会把它们的 DOM 移到 #navi-more 下拉里）。
     仅匹配 .navi-left / .navi-right 直系子，不影响「更多」下拉内部的次要项。 */
  body .navi-left > .navi-item[data-priority="secondary"],
  body .navi-right > .navi-item[data-priority="secondary"] {
    display: none !important;
  }

  body .navi #navi-more {
    display: inline-flex !important;
  }
}

/* 「更多」下拉：click 触发展开（.open 类由 JS 切换） */
body .navi #navi-more.open .dropdown-content {
  display: flex !important;
}
body .navi #navi-more.open > a::after {
  transform: rotate(180deg);
}

/* 「更多」下拉内部：垂直分组 + 分组标题 */
.navi-more-content {
  flex-direction: column !important;
  align-items: stretch !important;
  flex-wrap: nowrap !important;
  width: 13rem !important;
  max-height: 70vh;
  overflow-y: auto;
  padding: .35rem !important;
}
.navi-more-group {
  display: flex;
  flex-direction: column;
  padding: .15rem 0;
}
.navi-more-group + .navi-more-group {
  border-top: 1px solid rgba(239, 106, 76, .15);
  margin-top: .15rem;
  padding-top: .25rem;
}
.navi-more-group__title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: .3rem .5rem;
  font-size: .8rem;
  color: var(--brand, #ef6a4c);
  font-weight: 600;
  border-radius: 6px;
  background: rgba(239, 106, 76, .08);
}
.navi-more-group__title .navi-ico {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}
.navi-more-content a {
  display: block !important;
  padding: .35rem .65rem .35rem 1.6rem !important;
  color: var(--text, #181c2d) !important;
  font-size: .85rem;
  border-radius: 6px;
  transition: background-color .15s ease, color .15s ease;
}
.navi-more-content a:hover {
  background-color: rgba(239, 106, 76, .12) !important;
  color: var(--brand, #ef6a4c) !important;
}
/* 无子菜单的"链接型"项（数据更新/版本号）使用单行 + 图标 */
.navi-more-link {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: .35rem .65rem !important;
  font-size: .85rem;
}
.navi-more-link .navi-ico {
  width: 14px !important;
  height: 14px !important;
  flex-shrink: 0;
}