/* 默认情况下，子菜单是隐藏的 */
ul.subnav {
  display: none;
  list-style: none;
  padding-left: 0;
  max-width: 250px; /* 设置子菜单的最大宽度 */
  white-space: nowrap; /* 防止文字折行 */
  overflow: hidden; /* 防止超出宽度的文字溢出 */
  font-size: 16px;  /* 默认字体大小 */
}

/* 鼠标悬浮时，PC端显示子菜单 */
li:hover > ul.subnav {
  display: block;
}

/* 使用 :focus-within 保证点击子菜单时仍然能展开 */
li:focus-within > ul.subnav,
li:hover > ul.subnav {
  display: block;
}

/* 主菜单按钮（移动端） */
#menu-toggle {
  display: none;  /* 隐藏复选框本身 */
}

.menu-icon {
  cursor: pointer;
  font-size: 24px;
  color: #333;
}

/* 默认显示导航栏（PC端） */
.nav-bar {
  display: block;
}

/* 复选框控制主菜单栏的显示（移动端） */
#menu-toggle:checked + .nav-bar {
  display: block;
}

/* 在移动端点击菜单按钮时显示导航栏 */
@media screen and (max-width: 768px) {
  .nav-bar {
    display: none;  /* 默认隐藏导航栏 */
  }

  /* 点击按钮时，显示导航栏 */
  #menu-toggle:checked + .nav-bar {
    display: block;
  }

  /* 给“关闭”按钮（×）的交互效果 */
  #menu-toggle:checked + .nav-bar + .m-btn .menu-icon:before {
    content: "×";  /* 在菜单打开时显示“关闭”图标 */
    font-size: 30px;
  }

  /* 隐藏PC端的复选框 */
  #menu-toggle {
    display: none;  /* 隐藏复选框 */
  }

  /* 使子菜单能够展开/收起 */
  li > a {
    cursor: pointer;
  }

  li > a:hover {
    text-decoration: underline;
  }

  /* 控制子菜单的展开 */
  li > a:focus + .subnav,
  li > a:hover + .subnav {
    display: block;
  }

  /* 当用户点击进入子菜单后，保持复选框选中状态 */
  #menu-toggle:checked + .nav-bar li > a:focus + .subnav {
    display: block;
  }
}

/* PC端子菜单的自适应宽度和字体大小 */
@media screen and (min-width: 768px) {
  ul.subnav {
    font-size: 16px;  /* 默认字体大小 */
  }

  /* 自动根据屏幕宽度缩小字体以适应菜单项 */
  ul.subnav li a {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: unset;  /* 不显示省略号 */
    font-size: calc(12px + 0.5vw); /* 根据视口宽度动态计算字体大小 */
  }

  /* 控制子菜单最大宽度和文字自动适应 */
  ul.subnav li {
    max-width: 100%; /* 限制最大宽度 */
  }
}