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

/* 抽屉开关：视觉上隐藏，但保留可点、可聚焦能力（display:none 会让 label 失效） */
.app-header .nav-toggle {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

/* 抽屉默认收起，勾选后展开 */
.app-header .nav-menu {
  display: none;
}

.app-header .nav-toggle:checked ~ .nav-menu {
  display: block;
}

/* 目录项：内边距从 li 挪到 a，让整行都是可点击区域 */
.app-header .nav-menu .nav-list > li {
  padding: 0;
  cursor: default;
}

.app-header .nav-menu .nav-list > li > a {
  display: block;
  padding: 12px 24px;
}

/* li 现在与 a 完全重合，按下时只保留 a 自身的反馈，避免半透明背景叠加两次 */
.app-header .nav-menu .nav-list > li:active {
  background-color: transparent;
}

.app-header .nav-menu .nav-list > li > a:active {
  background-color: rgba(255, 255, 255, 0.1);
}

/* Logo 改成真实链接后的定位
   编译产物里 .logo 是 position:absolute + translateX(-50%)，被 <a> 包起来之后
   它的静态位置会落到链接内部，导致整体往下跑。这里让链接接管定位，
   图片回到普通流，由链接自身的 flex 居中把 Logo 摆回原来的位置。 */
.app-header .logo-link {
  position: absolute;
  top: 0;
  left: 50%;
  height: 100%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
}

.app-header .logo-link .logo {
  position: static;
  transform: none;
}