/**
 * 移动端Footer修复CSS
 * 解决移动端底部链接被覆盖的问题
 * 作者：AI助手
 * 创建时间：2025-10-11
 */

/* ========== 移动端Footer修复 ========== */
@media (max-width: 768px) {
    
    /* 修复footer-bottoms容器 */
    .footer-bottoms {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        min-height: auto !important;
        padding: 20px 0 !important;
        background: white !important;
        z-index: 100 !important;
        margin-top: 0 !important;
    }
    
    /* 修复footer-bottom-links容器 */
    .footer-bottom-links {
        position: static !important; /* 改为static，避免被覆盖 */
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        padding: 16px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
        background: white !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        z-index: 100 !important;
    }
    
    /* 修复底部链接样式 */
    .footer-bottom-links a {
        width: 100% !important;
        padding: 14px 20px !important;
        text-align: center !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 16px !important;
        line-height: 1.5 !important;
        display: block !important;
        box-sizing: border-box !important;
        min-height: 44px !important; /* 确保点击区域足够大 */
        transition: background-color 0.3s ease !important;
        border-bottom: 1px solid #e9ecef !important;
    }
    
    /* 最后一个链接不需要底部边框 */
    .footer-bottom-links a:last-child {
        border-bottom: none !important;
    }
    
    /* Hover效果 */
    .footer-bottom-links a:hover,
    .footer-bottom-links a:active {
        background-color: #f5f5f5 !important;
        color: #09a2e6 !important;
    }
    
    /* 确保footer主容器不会被遮挡 */
    .footer {
        position: relative !important;
        z-index: 50 !important;
        margin-bottom: 0 !important;
    }
    
    /* 确保footer-background不会产生负边距导致覆盖 */
    .footer-background {
        position: relative !important;
        z-index: 51 !important;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
    
    /* 确保footer-content有足够的底部间距 */
    .footer-content {
        padding-bottom: 30px !important;
        margin-bottom: 0 !important;
    }
    
    /* 确保footer-bottom版权信息有足够的底部间距 */
    .footer-bottom {
        padding-bottom: 20px !important;
        margin-bottom: 0 !important;
    }
    
    /* ========== Contact us内容居中 ========== */
    
    /* footer-center容器居中 */
    .footer-center {
        text-align: center !important;
    }
    
    /* Contact us标题居中 */
    .footer-contact h4 {
        text-align: center !important;
    }
    
    /* Contact us联系项目居中 */
    .contact-item {
        justify-content: center !important;
        text-align: center !important;
    }
    
    /* 确保contact-icon和文字都居中 */
    .contact-item span {
        display: inline-block !important;
    }
}

/* ========== 超小屏幕优化 ========== */
@media (max-width: 480px) {
    
    .footer-bottoms {
        padding: 16px 0 !important;
    }
    
    .footer-bottom-links {
        padding: 12px 16px !important;
    }
    
    .footer-bottom-links a {
        padding: 12px 16px !important;
        font-size: 14px !important;
        min-height: 44px !important;
    }
}

/* ========== 确保移动端导航不会覆盖footer ========== */
@media (max-width: 768px) {
    
    /* 移动端导航的z-index应该低于footer底部链接 */
    .new-mobile-nav {
        z-index: 10000 !important; /* 导航在最上层 */
    }
    
    .new-mobile-menu-panel {
        z-index: 9999 !important; /* 菜单面板稍低 */
    }
    
    /* 确保footer在正常的文档流中，不被fixed元素覆盖 */
    body {
        position: relative !important;
    }
    
    /* 如果页面有padding-bottom，确保footer可见 */
    main,
    .main-content {
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
    }
}