/**
 * www.at8.fun — 移动端侧栏菜单样式
 * 与官网移动菜单面板保持一致的观感：深色面板、40px 行高、滑入子菜单。
 * 作用域仅限 Astra 的 off-canvas 抽屉（#ast-mobile-popup），不影响桌面端。
 */

/* ---------- 面板本体 ---------- */
#ast-mobile-popup.ast-mobile-popup-drawer .ast-mobile-popup-inner {
  width: 300px;
  max-width: 100%;
  background-color: #222222;
  overscroll-behavior: contain;
  transition: transform 200ms ease-in-out, opacity 200ms ease-in-out;
  overflow-x: hidden;
}

/* ---------- 遮罩 ---------- */
#ast-mobile-popup.ast-mobile-popup-drawer.active .ast-mobile-popup-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* ---------- 关闭按钮：移到面板外侧右上角 ---------- */
#ast-mobile-popup.ast-mobile-popup-drawer .ast-mobile-popup-header {
  position: fixed;
  top: 0;
  left: calc(min(100vw - 40px, 300px));
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: 0;
  z-index: 11;
  visibility: hidden;
  opacity: 0;
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}

#ast-mobile-popup.ast-mobile-popup-drawer.active .ast-mobile-popup-header {
  visibility: visible;
  opacity: 1;
}

#ast-mobile-popup.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: #ffffff;
  cursor: pointer;
}

#ast-mobile-popup.ast-mobile-popup-drawer .ast-mobile-popup-header .menu-toggle-close svg {
  width: 16px;
  height: 16px;
  fill: #ffffff;
}

/* ---------- 菜单内容区 ---------- */
#ast-mobile-popup.ast-mobile-popup-drawer .ast-mobile-popup-content {
  padding: 0;
  background-color: transparent;
}

#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu.main-header-menu {
  background-color: transparent;
  padding: 0;
}

/* 一级菜单项：白字 14px、行高 40px、左右内距 10px */
#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu > li > .menu-link {
  color: #ffffff;
  font-size: 14px;
  line-height: 40px;
  min-height: 40px;
  padding: 0 10px;
  background-color: transparent;
}

#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu > li > .menu-link:hover,
#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu > li > .menu-link:focus,
#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu > li.current-menu-item > .menu-link,
#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu > li.current-menu-ancestor > .menu-link,
#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu > li.ast-submenu-expanded > .menu-link {
  color: #ffffff;
  background-color: #333333;
}

/* 子菜单项：逐级缩进 20px / 30px */
#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu .sub-menu {
  background-color: transparent;
  border: 0;
}

#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu .sub-menu .menu-link {
  color: #ffffff;
  font-size: 14px;
  line-height: 40px;
  min-height: 40px;
  padding: 0 10px 0 20px;
  background-color: transparent;
}

#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu .sub-menu .sub-menu .menu-link {
  padding-left: 30px;
}

#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu .sub-menu .menu-link:hover,
#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu .sub-menu .menu-link:focus,
#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu .sub-menu .current-menu-item > .menu-link {
  color: #ffffff;
  background-color: #333333;
}

/* 子菜单展开箭头 */
#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu .ast-menu-toggle {
  width: 40px;
  height: 40px;
  color: #ffffff;
  background-color: transparent;
  border: 0;
}

#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu .ast-menu-toggle svg {
  fill: #ffffff;
}

/* ---------- 子菜单横向滑入（slide right） ---------- */
@keyframes at8-mm-slide-right {
  from {
    transform: translateX(100%);
    opacity: 0.4;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

#ast-mobile-popup.ast-mobile-popup-drawer #ast-hf-mobile-menu li.ast-submenu-expanded > .sub-menu {
  animation: at8-mm-slide-right 200ms ease-in-out both;
}

/* ---------- 汉堡按钮：三线变 X ---------- */
.at8-mm-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 22px;
  height: 22px;
}

.at8-mm-burger i {
  display: block;
  width: 22px;
  height: 2px;
  background-color: currentColor;
  transform-origin: center;
  transition: transform 200ms ease-in-out, opacity 150ms ease-in-out;
}

button.menu-toggle.at8-mm-open .at8-mm-burger i:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

button.menu-toggle.at8-mm-open .at8-mm-burger i:nth-child(2) {
  opacity: 0;
}

button.menu-toggle.at8-mm-open .at8-mm-burger i:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

button.menu-toggle.at8-mm-has-burger .mobile-menu-toggle-icon {
  display: none;
}