/**
 * 移动端导航按钮图标增强
 * 通过图标变化提供更直观的菜单状态反馈
 */

/* 导航按钮图标容器 */
.mobile-menu-toggle-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
    position: relative;
}

/* 菜单关闭状态下的汉堡图标 */
.menu-toggle:not(.menu-open) .mobile-menu-toggle-icon::before,
.menu-toggle:not(.menu-open) .mobile-menu-toggle-icon::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background-color: currentColor;
    left: 0;
}

.menu-toggle:not(.menu-open) .mobile-menu-toggle-icon::before {
    top: 6px;
}

.menu-toggle:not(.menu-open) .mobile-menu-toggle-icon::after {
    bottom: 6px;
}

/* 菜单打开状态下的关闭图标 (X形) - 保持图标变换但移除动画 */
.menu-open .mobile-menu-toggle-icon::before {
    transform: rotate(45deg);
    top: 50%;
    margin-top: -1.5px;
}

.menu-open .mobile-menu-toggle-icon::after {
    transform: rotate(-45deg);
    top: 50%;
    margin-top: -1.5px;
}

/* 确保图标在任何状态下都可见 */
.mobile-menu-toggle-icon img {
    /* 移除透明度过渡动画 */
}

/* 菜单关闭状态下的图片图标 */
.menu-toggle:not(.menu-open) .mobile-menu-toggle-icon img {
    opacity: 1;
}

/* 菜单打开状态下的图片图标 (隐藏) */
.menu-open .mobile-menu-toggle-icon img {
    opacity: 0;
}

/* 移除按钮悬停和点击效果 */
.menu-toggle:hover .mobile-menu-toggle-icon {
    /* 移除悬停效果 */
}

.menu-toggle:active .mobile-menu-toggle-icon {
    /* 移除点击效果 */
}

/* 确保图标容器始终可见 */
[data-section="section-header-mobile-trigger"] .wmmb-button-wrap .mobile-menu-toggle-icon {
    display: inline-block !important;
    visibility: visible !important;
}