/* 顶部下拉导航专用样式：仅作用于菜单本身，不改动页面内容布局 */

/* 桌面菜单项 = 主入口链接 + 独立展开按钮 */
.nav-item { display: flex; align-items: center; gap: 4px; }

.nav-caret {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--c-gray-2);
  cursor: pointer;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}

.nav-caret:hover { color: var(--c-ink); }
.nav-caret[aria-expanded='true'] { color: var(--c-ink); }
.nav-caret svg { transition: transform 0.3s var(--ease); }
.nav-caret[aria-expanded='true'] svg { transform: rotate(180deg); }

/* 宽幅白色下拉面板：定位在导航条正下方并居中 */
.nav-panel {
  position: absolute;
  top: 100%;
  left: 50%;
  width: min(calc(100% - 80px), 1000px);
  padding: 18px;
  background: #ffffff;
  border: 1px solid var(--c-line);
  border-radius: 16px;
  box-shadow: 0 20px 48px -20px rgba(23, 23, 23, 0.2);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity 0.24s var(--ease), transform 0.24s var(--ease), visibility 0.24s;
}

.nav-panel.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

/* 入口分栏：名称加一句灰色说明，不加多余图标 */
.nav-panel-grid { display: grid; gap: 6px; }
.nav-panel-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nav-panel-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.nav-entry {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  transition: background-color 0.25s var(--ease);
}

.nav-entry:hover { background: var(--c-panel); }

.nav-entry-name { display: block; font-size: 15px; line-height: 1.5; color: var(--c-ink); }

.nav-entry-desc { display: block; margin-top: 3px; font-size: 13px; line-height: 1.6; color: var(--c-gray); }

/* 移动端菜单：按产品/服务/技术分组，原生 details 展开，提供实际子页面入口 */
.mobile-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 8px;
  font-size: 17px;
  color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
  cursor: pointer;
  list-style: none;
}

.mobile-group summary::-webkit-details-marker { display: none; }

.mobile-caret { flex-shrink: 0; color: var(--c-gray-2); transition: transform 0.3s var(--ease); }
.mobile-group[open] .mobile-caret { transform: rotate(180deg); }

.mobile-sub {
  display: flex;
  flex-direction: column;
  padding: 6px 8px 16px;
  border-bottom: 1px solid var(--c-line);
}

.mobile-menu .mobile-sub a {
  padding: 11px 10px;
  font-size: 15px;
  color: var(--c-body);
  border-bottom: none;
}

.mobile-menu .mobile-sub a:hover { color: var(--c-ink); }
.mobile-name { display: block; color: var(--c-ink); }
.mobile-desc { display: block; margin-top: 2px; font-size: 13px; line-height: 1.6; color: var(--c-gray); }