/**
 * 移动端导航样式增强
 * 为律所项目添加完整的移动端导航样式
 */

/* 移动端导航基础样式增强 */
@media (max-width: 1024px) {
    /* 汉堡菜单按钮样式优化 */
    .hamburger {
        display: block;
        margin-left: auto;
        width: 3.17rem;
        height: 2.83rem;
        border: none;
        background: transparent;
        padding: 0;
        cursor: pointer;
        position: relative;
        z-index: 1001;
        transition: all 0.3s ease;
    }
    
    .hamburger:hover {
        transform: scale(1.05);
    }
    
    .hamburger:focus {
        outline: 2px solid #E3C78D;
        outline-offset: 2px;
    }
    
    /* 汉堡菜单线条样式 */
    .hamburger span {
        display: block;
        height: 0.25rem;
        background: #333;
        border-radius: 0.17rem;
        margin: 0.5rem 0;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        transform-origin: center;
    }
    
    /* 菜单打开时汉堡图标变为X */
    .nav.open .hamburger span:nth-child(1) {
        transform: translateY(0.75rem) rotate(45deg);
    }
    
    .nav.open .hamburger span:nth-child(2) {
        opacity: 0;
        transform: scaleX(0);
    }
    
    .nav.open .hamburger span:nth-child(3) {
        transform: translateY(-0.75rem) rotate(-45deg);
    }
    
    /* 移动端菜单容器样式 */
    .menu {
        position: absolute;
        right: 1rem;
        top: 80px;
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: 1rem;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
        display: none;
        flex-direction: column;
        padding: 0.83rem;
        width: 18.33rem;
        max-height: calc(100vh - 100px);
        overflow-y: auto;
        z-index: 1000;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    /* 菜单打开状态 */
    .nav.open .menu {
        display: flex;
        animation: menuSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    }
    
    /* 菜单滑入动画 */
    @keyframes menuSlideIn {
        0% {
            opacity: 0;
            transform: translateY(-10px) scale(0.95);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    
    /* 菜单项样式 */
    .menu .menu-item {
        width: 100%;
        margin: 0;
    }
    
    .menu .menu-item > a {
        display: block;
        padding: 14px 16px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid #eee;
        color: #333;
        text-decoration: none;
        font-size: 1.33rem;
        font-weight: 500;
        transition: all 0.3s ease;
        border-radius: 8px;
        margin-bottom: 4px;
        position: relative;
    }
    
    .menu .menu-item > a:hover,
    .menu .menu-item > a:focus {
        background: #f8f9fa;
        color: #E3C78D;
        transform: translateX(4px);
    }
    
    .menu .menu-item > a.active {
        background: linear-gradient(135deg, #E3C78D, #D3A55A);
        color: white;
        font-weight: 600;
    }
    
    /* 有子菜单的项目箭头 */
    .menu .menu-item.has-sub > a::after {
        content: "";
        display: inline-block;
        width: 6px;
        height: 6px;
        border-right: 2px solid #999;
        border-bottom: 2px solid #999;
        transform: rotate(45deg);
        margin-left: auto;
        transition: all 0.3s ease;
        position: absolute;
        right: 16px;
        top: 50%;
        margin-top: -3px;
    }
    
    .menu .menu-item.has-sub > a:hover::after,
    .menu .menu-item.has-sub > a:focus::after {
        border-right-color: #E3C78D;
        border-bottom-color: #E3C78D;
    }
    
    .menu .menu-item.has-sub.open > a::after {
        transform: rotate(225deg);
        border-right-color: #E3C78D;
        border-bottom-color: #E3C78D;
    }
    
    /* 子菜单样式 */
    .menu .submenu {
        position: static;
        display: block;
        border: none;
        border-radius: 8px;
        box-shadow: none;
        padding: 0;
        background: #f8f9fa;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        transform: translateY(-2px);
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        margin: 4px 0 8px 0;
    }
    
    .menu .menu-item.open > .submenu {
        max-height: 300px;
        opacity: 1;
        transform: translateY(0);
        padding: 8px 0;
    }
    
    .menu .submenu li {
        list-style: none;
        margin: 0;
    }
    
    .menu .submenu a {
        display: block;
        padding: 12px 20px;
        color: #666;
        text-decoration: none;
        font-size: 1.2rem;
        transition: all 0.3s ease;
        border-radius: 6px;
        margin: 2px 8px;
    }
    
    .menu .submenu a:hover,
    .menu .submenu a:focus {
        background: white;
        color: #E3C78D;
        transform: translateX(4px);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }
    
    /* 菜单背景遮罩 */
    .nav.open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.3);
        z-index: 999;
        animation: fadeIn 0.3s ease;
    }
    
    @keyframes fadeIn {
        0% { opacity: 0; }
        100% { opacity: 1; }
    }
    
    /* 隐藏桌面端的导航操作 */
    .nav-actions {
        display: none;
    }
}

/* 平板设备优化 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    .hamburger {
        display: block;
    }
    
    .nav-actions {
        display: none;
    }
    
    .menu {
        position: absolute;
        right: 1.25rem;
        top: 80px;
        width: 22rem;
        padding: 1rem;
        gap: 0!important;
    }
    
    .menu .menu-item > a {
        font-size: 1.4rem;
        padding: 16px 18px;
    }
    
    .brand img {
        height: 2.2rem;
    }
    
    .nav.scrolled .nav {
        height: 80px;
    }
    
    .nav.scrolled .brand img {
        height: 2rem;
    }
    
}

/* 手机设备优化 (480px以下) */
@media (max-width: 480px) {
    .menu {
        right: 0.5rem;
        width: calc(100vw - 1rem);
        max-width: 20rem;
    }
    
    .menu .menu-item > a {
        font-size: 1.2rem;
        padding: 12px 14px;
    }
    
    .menu .submenu a {
        font-size: 1.1rem;
        padding: 10px 18px;
    }
    
    .hamburger {
        width: 2.5rem;
        height: 2.2rem;
    }
    
    .hamburger span {
        height: 0.2rem;
        margin: 0.4rem 0;
    }
}

/* 无障碍访问优化 */
@media (prefers-reduced-motion: reduce) {
    .hamburger span,
    .menu,
    .submenu,
    .menu .menu-item > a,
    .menu .submenu a {
        transition: none;
    }
    
    .nav.open .menu {
        animation: none;
    }
}

/* 高对比度模式支持 */
@media (prefers-contrast: high) {
    .menu {
        border: 2px solid #000;
        background: #fff;
    }
    
    .menu .menu-item > a {
        border-bottom: 1px solid #000;
    }
    
    .menu .submenu {
        background: #f0f0f0;
        border: 1px solid #000;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    .menu {
        /* background: #2a2a2a;
        border-color: #444;
        color: #fff; */
    }
    
    .menu .menu-item > a {
        /* color: #fff;
        border-bottom-color: #444; */
    }
    
    .menu .menu-item > a:hover,
    .menu .menu-item > a:focus {
        /* background: #3a3a3a; */
    }
    
    .menu .submenu {
        /* background: #1a1a1a; */
    }
    
    .menu .submenu a {
        /* color: #ccc; */
    }
    
    .menu .submenu a:hover,
    .menu .submenu a:focus {
        /* background: #3a3a3a; */
        /* color: #fff; */
    }
    
    .hamburger span {
        /* background: #fff; */
    }
}

/* 触摸设备优化 */
@media (hover: none) and (pointer: coarse) {
    .menu .menu-item > a,
    .menu .submenu a {
        min-height: 44px; /* 确保触摸目标足够大 */
        display: flex;
        align-items: center;
    }
    
    .menu .menu-item > a:hover,
    .menu .submenu a:hover {
        transform: none; /* 移除hover变换效果 */
    }
}

/* 确保菜单在所有情况下都能正确显示 */
.menu {
    /* 防止菜单被其他元素遮挡 */
    z-index: 1000 !important;
}

.nav.open .menu {
    /* 确保打开的菜单始终可见 */
    display: flex !important;
}

/* 修复可能的样式冲突 */
.nav .menu .menu-item {
    /* 重置可能的全局样式 */
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav .menu .submenu {
    /* 重置子菜单样式 */
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav .menu .submenu li {
    /* 重置子菜单项样式 */
    list-style: none;
    margin: 0;
    padding: 0;
}