/* ================================================================
   明升历典 · 全局导航（下拉式）
   ----------------------------------------------------------------
   把主站菜单按大类分组，劝善因果故事置于最前。
   本文件是**新增**资源，不改动任何既有 hash 资源（site.afeacc89.css 等），
   由 site_nav_dropdown.py 批量注入引用，可整体回滚。

   ⚠️ 优先级说明（实测踩坑，勿删）
   页面自带的 `header.site nav a{color:#fff;font-size:14px;opacity:.92;
   position:relative}` 优先级为 (0,1,3)，会盖掉普通的类选择器 `.nm-sub a`
   (0,1,1)，导致下拉面板「白底白字」看不见。
   故此处一律用 `nav.mainnav.mainnav …` 提升到 (0,3,2) 以上，并对
   颜色 / 不透明度 / 外边距这类页面明确争抢的属性显式加 !important。
   顶栏文字改用 `color:inherit`——跟随页面自身页头配色（紫底=白字，浅底=深字），
   这样在任何代次的样式表里都不会出现低对比度。

   变量一律带 fallback：站内页面分别引用 site.css / site.afeacc89.css /
   longtail.css 等不同代次的样式表，取不到的变量不能导致导航塌掉。
   ================================================================ */

/* ---------------- 容器 ---------------- */
header.site nav.mainnav,
.lt-head nav.mainnav,
nav.mainnav.lt-mainnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px 1px;
  margin: 0;
  padding: 0;
}

/* 长尾页 / 工具页：导航条紧跟精简页头之后，补一条细分割线 */
nav.mainnav.lt-mainnav {
  margin: 2px 0 14px;
  padding: 0 0 8px;
  border-bottom: 1px solid var(--c-line, #ece5f5);
}

.nm-group { position: relative; }

/* 页面自带的下划线动效（::after 渐变条）在这里不需要，统一关掉 */
nav.mainnav.mainnav a::after,
nav.mainnav.mainnav a::before { content: none !important; display: none !important; }

/* ---------------- 顶层项 ---------------- */
nav.mainnav.mainnav a.nm-top {
  display: inline-block;
  padding: 7px 11px !important;
  margin: 0 !important;
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: normal;
  color: inherit !important;          /* 跟随页头配色，避免紫底上出现灰字 */
  opacity: 1 !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s, color .16s;
}

/* 浅底（长尾条 / 工具页）：hover 用紫色淡染 */
nav.mainnav.mainnav a.nm-top:hover,
nav.mainnav.mainnav .nm-group:hover > a.nm-top,
nav.mainnav.mainnav .nm-group:focus-within > a.nm-top,
nav.mainnav.mainnav .nm-group.open > a.nm-top {
  background: rgba(124, 77, 175, .12);
}

/* 紫底顶栏：hover 用白色淡染，对比更自然 */
header.site nav.mainnav.mainnav a.nm-top:hover,
header.site nav.mainnav.mainnav .nm-group:hover > a.nm-top,
header.site nav.mainnav.mainnav .nm-group:focus-within > a.nm-top,
header.site nav.mainnav.mainnav .nm-group.open > a.nm-top {
  background: rgba(255, 255, 255, .18);
}

.nm-arrow {
  display: inline-block;
  margin-left: 3px;
  font-size: 9px;
  opacity: .6;
  transform: translateY(-1px);
}

/* ---------------- 下拉面板 ---------------- */
.nm-sub {
  position: absolute;
  left: 0;
  top: calc(100% + 5px);
  z-index: 90;
  min-width: 178px;
  padding: 7px;
  background: #ffffff;
  border: 1px solid var(--c-line, #ece5f5);
  border-radius: 12px;
  box-shadow: var(--shadow-2, 0 8px 28px rgba(60, 40, 90, .14));
  display: none;
}
.nm-group:hover > .nm-sub,
.nm-group:focus-within > .nm-sub,
.nm-group.open > .nm-sub { display: block; }

/* 面板内一律深字白底（浮层，与页头底色无关） */
nav.mainnav.mainnav .nm-sub a {
  display: block;
  padding: 8px 11px !important;
  margin: 0 !important;
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.5;
  letter-spacing: normal;
  color: #2c3e50 !important;
  opacity: 1 !important;
  text-decoration: none;
  white-space: nowrap;
  transition: background .14s, color .14s;
}
nav.mainnav.mainnav .nm-sub a:hover {
  background: var(--c-bg-soft, #f6f2fc);
  color: var(--c-purple-3, #7c4daf) !important;
}
nav.mainnav.mainnav .nm-sub a.nm-on {
  background: var(--c-line, #ece5f5);
  color: var(--c-purple-3, #7c4daf) !important;
  font-weight: 600;
}

/* ---------------- 「劝善因果」置顶强调 ---------------- */
nav.mainnav.mainnav .nm-group.nm-first > a.nm-top {
  font-weight: 700;
}
/* 紫底顶栏上给一点暖色，呼应劝善主题 */
header.site nav.mainnav.mainnav .nm-group.nm-first > a.nm-top {
  color: #ffe6a8 !important;
}
header.site nav.mainnav.mainnav .nm-group.nm-first > a.nm-top:hover {
  color: #fff !important;
}

/* ---------------- 响应式 ---------------- */
@media (max-width: 980px) {
  nav.mainnav.mainnav a.nm-top { padding: 6px 9px !important; font-size: 13.5px; }
  .nm-sub { min-width: 162px; }
}

@media (max-width: 560px) {
  .nm-arrow { display: none; }
  nav.mainnav.mainnav a.nm-top { padding: 6px 8px !important; font-size: 13px; }
  nav.mainnav.lt-mainnav { margin-bottom: 10px; }

  /* 窄屏下拉改「就地展开」：整组独占一行，面板在标题下方展开，
     避免浮层溢出屏幕，也避免与后续大类挤在同一行。 */
  .nm-group.open { flex-basis: 100%; }
  .nm-sub {
    position: static;
    display: none;
    min-width: 0;
    padding: 2px 0 6px 10px;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .nm-group.open > .nm-sub { display: block; }
  nav.mainnav.mainnav .nm-sub a {
    padding: 7px 8px !important;
    font-size: 13px;
    color: inherit !important;
    opacity: .95 !important;
  }
  nav.mainnav.mainnav .nm-sub a.nm-on { background: rgba(124, 77, 175, .12); }
}