/* 公共导航样式：桌面端显示当前一级栏目对应的悬停下拉菜单。 */
body.menu-open { overflow: hidden; }
.menu-button { display: none; }
.site-nav { position: absolute; z-index: 30; left: 50%; bottom: 60px; width: min(var(--page-width), calc(100% - 80px)); height: 100px; transform: translateX(-50%); background: rgba(255, 255, 255, .94); border-radius: 6px; box-shadow: 0 12px 36px rgba(0, 0, 0, .13); backdrop-filter: blur(18px); }
.nav-list { height: 100%; margin: 0; padding: 0 50px; display: grid; grid-template-columns: repeat(10, 1fr); align-items: center; list-style: none; }
.nav-list > li { height: 100%; }
.nav-list a { position: relative; display: flex; height: 100%; align-items: center; justify-content: center; font-size: 20px; white-space: nowrap; transition: color .2s ease; }
.nav-list a::after { position: absolute; right: 50%; bottom: 20px; left: 50%; height: 4px; content: ""; background: var(--blue); transform: translateX(-50%) scaleX(0); transform-origin: center; transition: transform .2s ease; }
.nav-list a:hover, .nav-list a:focus-visible { color: var(--blue); }
/* 一级导航激活态继承普通文字颜色，保留原有横线标记，统一适配首页、内页和移动端。 */
.nav-list > li.active a { color: inherit; }
.nav-list > li.active a::after,
.nav-list a:hover::after,
.nav-list a:focus-visible::after { width: 60px; transform: translateX(-50%) scaleX(1); }

/* Figma 下拉菜单：160px 面板、20px 圆角、18px 文字和分隔线。 */
.mega-menu { position: absolute; top: 100%; left: var(--submenu-left, 10px); width: 160px; padding: 0px; visibility: hidden; opacity: 0; transform: translateY(-6px); background: rgba(255, 255, 255, .9); border-radius: 20px; box-shadow: 0 4px 4px rgba(0, 0, 0, .1); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.site-nav.has-submenu .mega-menu { visibility: visible; opacity: 1; transform: translateY(0); }
/* 首页 Figma 设计要求二级菜单从导航栏上方展开，内页仍保持向下展开。 */
.home-page .site-nav.has-submenu::before {
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 14px;
  content: "";
}
.home-page .mega-menu { top: auto; bottom: calc(100% + 14px); transform: translateY(6px); }
.home-page .site-nav.has-submenu .mega-menu { transform: translateY(0); }
.mega-menu-inner { display: block; }
.mega-column { display: none; min-width: 0; }
.mega-column.is-active { display: block; }
.mega-column h3 { display: none; }
.mega-column a { display: block; height: 65px; padding: 0; color: #333; font-size: 18px; line-height: 65px; text-align: center; border-bottom: 1px solid #d9d9d9; transition: color .2s ease; }
.mega-column a:last-child { border-bottom: 0; }
.mega-column a:hover,
.mega-column a:focus-visible {
  color: #333;
  transform: none;
  /* Figma 激活态背景：悬停或键盘聚焦时显示蓝橙双色装饰条。 */
  background: url('../images/nav-submenu-active.png') center center / 100% 34px no-repeat;
}

/* 移动端汉堡菜单只展示一级栏目，二级面板始终隐藏。 */
html.is-mobile body.menu-open .hero { overflow: visible; }
html.is-mobile .menu-button { width: 44px; height: 44px; padding: 11px; display: flex; flex-direction: column; justify-content: space-between; flex: 0 0 44px; border: 1px solid rgba(255, 255, 255, .5); border-radius: 8px; background: rgba(255, 255, 255, .12); }
html.is-mobile .menu-button span { width: 100%; height: 2px; display: block; background: #fff; transition: transform .2s ease, opacity .2s ease; }
html.is-mobile .menu-button[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
html.is-mobile .menu-button[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
html.is-mobile .menu-button[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
html.is-mobile .site-nav { position: absolute; top: 76px; right: 0; bottom: auto; left: auto; width: 340px; height: calc(100vh - 76px); height: calc(100dvh - 76px); overflow-y: auto; transform: translateX(105%); border-radius: 0; background: rgba(255, 255, 255, .98); box-shadow: -12px 0 30px rgba(0, 0, 0, .14); transition: transform .25s ease; }
html.is-mobile .site-nav.open { transform: translateX(0); }
html.is-mobile .nav-list { height: auto; padding: 12px 24px 30px; display: block; }
html.is-mobile .nav-list li { border-bottom: 1px solid #eee; }
html.is-mobile .nav-list a { height: 56px; justify-content: flex-start; font-size: 17px; }
html.is-mobile .nav-list a::after, html.is-mobile .mega-menu { display: none !important; }
