/*
 * 导航栏的纯 CSS 交互层
 * ------------------------------------------------------------
 * pc/ 原版的目录展开依赖 Vue 的状态，编译产物里没有 display / hover 规则。
 * 这里只做「补差」，不覆盖任何已经编译好的视觉样式。
 */

/* 目录容器：既作为下拉框的定位参照，也扩大可悬停区域，
   避免鼠标从图标移到下拉框时穿过空隙导致菜单收起 */
.app-header .header-inner .menu-wrap {
  position: relative;
  padding: 20px 0;
}

/* 目录默认收起 */
.app-header .header-inner .menu-wrap .nav-dropdown {
  display: none;
  top: 100%;
  left: 0;
}

/* 悬停或键盘聚焦时展开 */
.app-header .header-inner .menu-wrap:hover .nav-dropdown,
.app-header .header-inner .menu-wrap:focus-within .nav-dropdown {
  display: block;
}

/* 原设计的悬停缩放挂在 .menu-wrap 上，但元素一旦有 transform 就会成为
   绝对定位下拉框的包含块，导致目录错位。这里把缩放挪到图标本身。 */
.app-header .header-inner .menu-wrap:hover {
  transform: none;
}

.app-header .header-inner .menu-wrap:hover .menu-btn {
  transform: scale(1.05);
}

/* Logo 改成真实链接后，接替原先挂在图片上的居中与悬停反馈 */
.app-header .logo-link {
  display: block;
  margin: 0 auto;
  line-height: 0;
  transition: opacity 150ms;
}

.app-header .logo-link:hover {
  opacity: 0.8;
}