/**
 * XysLink Typecho主题 - 菜单样式
 * 包含移动端菜单按钮和图标样式
 */

/* ========================================
   菜单按钮基础样式
   ======================================== */

.btn-menu {
    position: relative;
    background: none;
    border: none;
    cursor: pointer;
}

/* ========================================
   菜单图标实现
   ======================================== */

.icon-menu::before,
.icon-close::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 汉堡菜单图标 */
.icon-menu::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='3' y1='12' x2='21' y2='12'%3e%3c/line%3e%3cline x1='3' y1='6' x2='21' y2='6'%3e%3c/line%3e%3cline x1='3' y1='18' x2='21' y2='18'%3e%3c/line%3e%3c/svg%3e");
}

/* 关闭图标 */
.icon-close::before {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e");
}

/* ========================================
   图标显示状态
   ======================================== */

/* 默认状态：显示汉堡菜单，隐藏关闭图标 */
.btn-menu .icon-menu {
    display: inline-block;
}

.btn-menu .icon-close {
    display: none;
}

/* 菜单打开状态：隐藏汉堡菜单，显示关闭图标 */
.opened-menu .btn-menu .icon-menu {
    display: none;
}

.opened-menu .btn-menu .icon-close {
    display: inline-block;
}

/* ========================================
   移动端菜单容器
   ======================================== */

.menu-mobile {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* ========================================
   主体状态样式
   ======================================== */

/* 菜单打开时的body样式 */
.opened-menu {
    overflow: hidden;
}

/* ========================================
   主体状态样式
   ======================================== */

/* 菜单打开时的body样式 */
.opened-menu {
    overflow: hidden;
}