/* 全局响应式适配样式 */

/* 移动端通用调整 */
@media (max-width: 768px) {
    :root {
        --header-height: 70px;
        --spacing-lg: 40px;
        --spacing-xl: 60px;
    }

    /* 强制防止横向滚动 - 仅移动端 */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw !important;
        width: 100% !important;
        position: relative !important;
    }

    /* 所有主要容器防止溢出 - 仅移动端 */
    main, section, header, footer, nav {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
    
    .container {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    .section-title {
        font-size: 1.8rem;
    }

    .section-subtitle {
        font-size: 0.9rem;
    }

    .section-padding {
        padding: var(--spacing-lg) 0;
    }

    /* 按钮在移动端更易点击 */
    .btn {
        padding: 14px 20px;
        max-width: 100%;
    }

    /* 首屏按钮在移动端保持一行 */
    .hero-btns {
        width: 100%;
        max-width: 100%;
        display: flex;
        flex-direction: row;
        gap: 10px;
    }

    .hero-btns .btn {
        flex: 1;
        margin-bottom: 0;
        font-size: 14px;
        padding: 12px 16px;
        white-space: nowrap;
        max-width: 100%;
    }

    /* 修复footer宽度问题 */
    .footer-top {
        width: 100% !important;
        max-width: 100vw !important;
    }
}

/* 导航栏汉堡菜单动画 */
@media (max-width: 992px) {
    .nav-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }

    .nav-toggle.active span:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

/* 小屏幕设备文字微调 */
@media (max-width: 480px) {
    html {
        font-size: 14px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .container {
        padding: 0 15px;
        max-width: 100vw !important;
    }

    /* 首屏按钮在小屏幕进一步优化 */
    .hero-btns .btn {
        font-size: 12px;
        padding: 10px 12px;
    }

    /* 确保所有section不超出视口 */
    section {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* 视网膜屏幕高清图标适配 (可选) */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* 如果有位图资源，可以在这里提供高清版本 */
}

/* 打印样式 */
@media print {
    .header, .hero-scroll-down, .nav-toggle, .hero-btns {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .section-padding {
        padding: 20px 0;
    }
}