/* 粘性导航栏样式 - Sticky Navigation Styles */

/* 桌面端粘性导航栏 */
@media screen and (min-width: 769px) {
    /* Header粘性定位 */
    .header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        transition: all 0.3s ease !important;
    }
    
    /* Navigation粘性定位 */
    .nav {
        position: sticky !important;
        top: 64px !important; /* header的高度 */
        z-index: 999 !important;
        transition: all 0.3s ease !important;
        backdrop-filter: blur(10px) !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
    }
    
    /* 滚动时的视觉效果 */
    .header.scrolled {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
    }
    
    .nav.scrolled {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
    }
    
    /* 确保内容不被导航栏遮挡 */
    .main-content {
        padding-top: 0 !important;
    }
    
    /* 页面banner调整 */
    .page-banner {
        margin-top: 0 !important;
    }
}

/* 移动端粘性导航栏 - 使用最高优先级 */
@media screen and (max-width: 768px) {
    /* 移动端header粘性定位 - 强制覆盖所有其他样式 */
    body .header,
    html .header,
    .header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1002 !important;
        transition: all 0.3s ease !important;
        backdrop-filter: blur(10px) !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        min-height: 60px !important;
    }
    
    /* 移动端滚动时的header效果 */
    body .header.scrolled,
    html .header.scrolled,
    .header.scrolled {
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15) !important;
        background-color: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(15px) !important;
    }
    
    /* 移动端导航菜单保持fixed定位 */
    body .nav,
    html .nav,
    .nav {
        position: fixed !important;
        top: 0 !important;
        left: -100% !important;
        width: 300px !important;
        height: 100vh !important;
        z-index: 1001 !important;
    }
    
    body .nav.active,
    html .nav.active,
    .nav.active {
        left: 0 !important;
    }
    
    /* 确保移动端内容不被header遮挡 */
    body .main-content,
    html .main-content,
    .main-content {
        padding-top: 0 !important;
    }
    
    body .page-banner,
    html .page-banner,
    .page-banner {
        margin-top: 0 !important;
    }
    
    /* 移动端header容器高度优化 */
    body .header .container,
    html .header .container,
    .header .container {
        min-height: 60px !important;
    }
}

/* 平滑滚动效果 */
html {
    scroll-behavior: smooth;
}

/* 确保粘性元素在滚动时有正确的层级 */
.header,
.nav {
    will-change: transform;
    transform: translateZ(0);
}

/* 为不同页面类型优化粘性导航 */
.page-banner + .main-content {
    padding-top: 0 !important;
}

/* 超小屏幕优化 */
@media screen and (max-width: 480px) {
    .header {
        min-height: 56px !important;
    }
    
    .header .container {
        min-height: 56px !important;
    }
    
    .nav {
        width: 280px !important;
    }
}

/* 确保在打印时不使用粘性定位 */
@media print {
    .header,
    .nav {
        position: static !important;
        top: auto !important;
    }
}