/**
 * 移动端汉堡菜单CSS修复补丁
 * 解决移动端首页汉堡按钮和菜单显示问题
 */

/* 移动端导航菜单容器 - 只在移动端生效 */
@media screen and (max-width: 1023px) {
    /* 确保汉堡按钮在移动端可见且可点击 */
    .mobnav-btn {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
        z-index: 10000 !important;
        position: relative !important;
        background: transparent !important;
        border: none !important;
        padding: 5px !important;
        margin: 0 !important;
    }

    /* 汉堡按钮三条线样式 */
    .mobnav-btn span {
        display: block !important;
        width: 25px !important;
        height: 3px !important;
        background: #333 !important;
        margin: 4px 0 !important;
        transition: all 0.3s ease !important;
        border-radius: 2px !important;
    }

    /* 汉堡按钮激活状态（X图标） */
    .mobnav-btn.g_close span:nth-child(1) {
        transform: rotate(45deg) translate(6px, 6px) !important;
    }

    .mobnav-btn.g_close span:nth-child(2) {
        opacity: 0 !important;
    }

    .mobnav-btn.g_close span:nth-child(3) {
        transform: rotate(-45deg) translate(7px, -8px) !important;
    }

    .header-nav {
        position: fixed !important;
        top: 62px !important;
        left: 0 !important;
        width: 100% !important;
        height: calc(100vh - 62px) !important;
        background: #ffffff !important;
        z-index: 9999 !important;
        /* 不使用display: none，而是用visibility和opacity隐藏 */
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        transition: visibility 0s, opacity 0.3s ease !important;
    }

    /* 显示菜单 - 使用更强的选择器 */
    .header-nav.show,
    .header-nav.show.commonweb,
    body .header-nav.show {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        display: block !important;
    }

    /* 移动端隐藏PC导航按钮 */
    .pcnavmenubtn {
        display: none !important;
    }

    /* 移动端导航菜单样式 */
    .header-nav ul {
        padding: 0 !important;
        margin: 0 !important;
        background: #ffffff !important;
    }

    .header-nav li {
        position: relative !important;
        border-bottom: 1px solid #f0f0f0 !important;
        background: #ffffff !important;
    }

    .header-nav li h3 {
        margin: 0 !important;
        padding: 15px 50px 15px 20px !important;
        position: relative !important;
        background: #ffffff !important;
    }

    .header-nav li h3 a {
        color: #333 !important;
        font-size: 16px !important;
        font-weight: normal !important;
        background: transparent !important;
        text-decoration: none !important;
    }

    .header-nav li h3 a:hover {
        color: #d82019 !important;
    }

    /* 激活状态样式 */
    .header-nav li.cur > h3 a {
        color: #d82019 !important;
        font-weight: 600 !important;
    }

    /* 二级菜单展开按钮 */
    .phsearchicon {
        position: absolute !important;
        right: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 30px !important;
        height: 30px !important;
        cursor: pointer !important;
        z-index: 10 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: none !important;
    }

    .phsearchicon:after {
        content: '+' !important;
        font-size: 20px !important;
        color: #666 !important;
        font-weight: bold !important;
    }

    .header-nav li.cur .phsearchicon:after {
        content: '−' !important;
        color: #d82019 !important;
    }

    /* 二级菜单样式 */
    .sub-nav {
        display: none !important;
        background: #f8f8f8 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .sub-nav .sub-item {
        border-bottom: 1px solid #e0e0e0 !important;
        background: #f8f8f8 !important;
    }

    .sub-nav .sub-item h4 {
        margin: 0 !important;
        padding: 12px 20px 12px 30px !important;
    }

    .sub-nav .sub-item h4 a {
        color: #666 !important;
        font-size: 14px !important;
        text-decoration: none !important;
        background: transparent !important;
    }

    .sub-nav .sub-item h4 a:hover {
        color: #d82019 !important;
    }

    /* 三级菜单样式 */
    .three-nav {
        display: none !important;
        background: #f0f0f0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .three-nav a {
        display: block !important;
        padding: 10px 20px 10px 40px !important;
        color: #888 !important;
        font-size: 13px !important;
        text-decoration: none !important;
        background: transparent !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    .three-nav a:hover {
        color: #d82019 !important;
        background: #ffffff !important;
    }

    /* 移动端遮罩层 */
    .mobile-overlay {
        display: none !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: rgba(0, 0, 0, 0.5) !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        transition: opacity 0.3s ease !important;
    }

    .mobile-overlay.show {
        display: block !important;
        opacity: 1 !important;
    }

    /* 语言选择器样式 */
    .headlanguage {
        position: fixed !important;
        top: 62px !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        z-index: 9999 !important;
        display: none !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1) !important;
        padding: 15px 20px !important;
        border-bottom: 1px solid #f0f0f0 !important;
    }


/* 移动端头部样式调整 */
@media screen and (max-width: 1023px) {
    .headerweb {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 10000 !important;
        background: #ffffff !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
        height: 62px !important;
    }

    /* 只有内页需要padding-top，首页不需要 */
    body:not(.home) {
        padding-top: 62px !important;
        margin-top: 0 !important;
    }

    /* 首页banner从顶部开始，内容区域自己处理间距 */
    .home .hero-banner,
    body.home .hero-banner {
        margin-top: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        top: 0 !important;
    }

    /* 首页hero-banner内容区域向下移动，避开header */
    .hero-content-wrapper {
        padding-top: 70px !important; /* 减少padding让内容更靠上 */
        min-height: 100vh !important;
    }

    /* 内页banner从header下方开始 */
    body:not(.home) .inside-banner,
    body:not(.home) .banner {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }

    /* 超小屏幕优化 */
    @media screen and (max-width: 380px) {
        .header-nav li h3 {
            padding: 12px 45px 12px 15px !important;
            font-size: 15px !important;
        }

        .sub-nav .sub-item h4 {
            padding: 10px 15px 10px 25px !important;
            font-size: 13px !important;
        }

        .mobnav-btn span {
            width: 20px !important;
            height: 2px !important;
        }
    }
}

/* 确保修复CSS在所有情况下都生效 */
.mobnav-btn,
.mobnav-btn span,
.mobnav-btn span:nth-child(1),
.mobnav-btn span:nth-child(2),
.mobnav-btn span:nth-child(3),
.header-nav,
.mobile-overlay {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
}