/*
Theme: BAIHANGDA V6 Enterprise
File: assets/css/responsive.css
Version: 20260809-mobile-final
Purpose: Final tablet/mobile structural responsive layer
*/

/* JS adds submenu buttons on all viewports; keep them hidden on desktop. */
.submenu-toggle{
    display:none !important;
}

/* =========================================
TABLET / SMALL DESKTOP
========================================= */
@media(max-width:1024px){

    .v6-grid,
    .product-grid,
    .solution-grid,
    .category-products,
    .factory-grid,
    .case-grid,
    .certification-grid,
    .related-grid,
    .v6-related-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

    .v6-grid > *,
    .product-grid > *,
    .solution-grid > *,
    .category-products > *,
    .factory-grid > *,
    .case-grid > *,
    .certification-grid > *,
    .related-grid > *,
    .v6-related-grid > *{
        min-width:0;
    }
}

/* =========================================
MOBILE / TABLET HEADER + STRUCTURE
========================================= */
@media(max-width:900px){

    .bd-header{
        position:relative;
        z-index:9999;
    }

    .bd-container{
        width:92%;
        max-width:100%;
        margin:0 auto;
        min-height:80px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:15px !important;
        position:relative;
    }

    .bd-logo{
        min-width:0;
    }

    .bd-logo img{
        width:160px;
        max-width:100%;
        height:auto;
        display:block;
    }

    .baihangda-menu-toggle{
        display:block !important;
        flex:0 0 44px;
        width:44px;
        min-width:44px;
        height:44px;
        padding:8px !important;
        margin:0;
        border:0 !important;
        background:transparent !important;
        color:#0057b8 !important;
        cursor:pointer;
        z-index:10002;
        box-sizing:border-box;
    }

    .baihangda-menu-toggle span{
        display:block;
        width:28px;
        height:3px;
        margin:5px 0;
        background:#0057b8;
    }

    .baihangda-menu-toggle:focus-visible,
    .submenu-toggle:focus-visible{
        outline:2px solid #0057b8;
        outline-offset:2px;
    }

    .main-navigation{
        display:none !important;
        position:absolute !important;
        top:100% !important;
        left:0 !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        margin:0 !important;
        background:#fff !important;
        box-shadow:0 10px 25px rgba(0,0,0,.12) !important;
        z-index:10001 !important;
        max-height:calc(100vh - 80px);
        overflow-y:auto;
        overflow-x:hidden;
    }

    .main-navigation.active{
        display:block !important;
    }

    .main-navigation ul.mingda-menu{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:0 !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 !important;
        padding:10px 20px 20px !important;
        box-sizing:border-box;
    }

    .main-navigation ul.mingda-menu > li{
        display:block !important;
        width:100% !important;
        min-width:0 !important;
        position:relative !important;
        border-bottom:1px solid #eef2f6;
    }

    .main-navigation ul.mingda-menu li{
        min-width:0 !important;
    }

    .main-navigation ul.mingda-menu > li > a,
    .main-navigation ul.mingda-menu li > a{
        display:block !important;
        width:100% !important;
        max-width:100% !important;
        box-sizing:border-box;
        white-space:normal !important;
    }

    .main-navigation ul.mingda-menu > li > a{
        padding:13px 5px !important;
        font-size:16px !important;
    }

    /* Override desktop mega-menu / hover dropdown rules. */
    .main-navigation ul.mingda-menu ul.sub-menu,
    .main-navigation ul.mingda-menu > li.mega-menu > ul.sub-menu,
    .main-navigation ul.mingda-menu > li:not(.mega-menu) > ul.sub-menu,
    .main-navigation ul.sub-menu ul.sub-menu{
        display:none !important;
        position:static !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        width:100% !important;
        max-width:100% !important;
        min-width:0 !important;
        transform:none !important;
        grid-template-columns:1fr !important;
        gap:0 !important;
        box-shadow:none !important;
        background:#f7f9fc !important;
        margin:0 !important;
        padding:5px 0 8px 18px !important;
        box-sizing:border-box;
    }

    .main-navigation ul.mingda-menu ul.sub-menu a{
        padding:8px 46px 8px 10px !important;
        font-size:14px !important;
        line-height:1.5;
        white-space:normal !important;
    }

    /* Accordion: only the branch opened by JS is displayed. */
    .main-navigation ul.mingda-menu li.submenu-open > ul.sub-menu{
        display:block !important;
    }

    .main-navigation ul.mingda-menu li.menu-item-has-children{
        position:relative !important;
    }

    .main-navigation ul.mingda-menu li.menu-item-has-children > a{
        padding-right:50px !important;
    }

    .main-navigation .submenu-toggle{
        display:block !important;
        position:absolute;
        top:4px;
        right:2px;
        width:40px;
        min-width:40px;
        height:40px;
        padding:0 !important;
        margin:0 !important;
        border:0 !important;
        border-radius:0 !important;
        background:transparent !important;
        color:#0057b8 !important;
        font-size:20px;
        line-height:40px;
        text-align:center;
        cursor:pointer;
        z-index:3;
        transform:none;
        transition:transform .2s ease;
        box-sizing:border-box;
    }

    .main-navigation .submenu-toggle:hover,
    .main-navigation .submenu-toggle:focus{
        background:transparent !important;
        color:#0057b8 !important;
    }

    .main-navigation .submenu-toggle[aria-expanded="true"]{
        transform:rotate(180deg);
    }

    /* Main structural grids */
    .product-detail-layout,
    .about-layout,
    .v6-product-header{
        grid-template-columns:1fr !important;
    }

    .product-gallery,
    .product-info,
    .product-content,
    .product-meta,
    .related-products,
    .related-grid,
    .related-item,
    .v6-product-detail,
    .v6-product-header,
    .v6-product-image,
    .v6-product-info{
        min-width:0;
        max-width:100%;
    }

    .footer-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

/* =========================================
PHONE
========================================= */
@media(max-width:768px){

    .bd-logo img{
        width:145px;
    }

    .bd-header-quote{
        display:none !important;
    }

    .v6-section,
    .v6-blue,
    .v6-contact{
        padding-left:5%;
        padding-right:5%;
    }

    .v6-section{
        padding-top:50px;
        padding-bottom:50px;
    }

    .v6-blue,
    .v6-contact{
        padding-top:50px;
        padding-bottom:50px;
    }

    .v6-hero h1{
        font-size:32px;
        line-height:1.2;
    }

    .v6-card{
        padding:20px;
    }

    .breadcrumb{
        padding:16px 5%;
        overflow-wrap:anywhere;
    }
}

/* =========================================
SMALL PHONE: HERO / GRIDS / PRODUCT / RELATED
========================================= */
@media(max-width:600px){

    .bd-container{
        min-height:75px;
    }

    .bd-logo img{
        width:140px;
    }

    /* Home hero */
    .v6-hero{
        min-height:520px;
        display:flex;
        align-items:center;
    }

    .v6-hero-content{
        width:100%;
        max-width:100%;
        padding:40px 24px;
        box-sizing:border-box;
    }

    .v6-hero h1{
        font-size:32px;
        line-height:1.2;
        margin:0 0 18px;
    }

    .v6-hero p{
        font-size:16px;
        line-height:1.6;
        margin:0 0 24px;
        max-width:320px;
    }

    .v6-hero .v6-btn{
        display:inline-block;
        max-width:100%;
    }

    /* One-column mobile grids */
    .v6-grid,
    .product-grid,
    .solution-grid,
    .category-products,
    .factory-grid,
    .factory-box,
    .case-grid,
    .certification-grid,
    .footer-grid,
    .product-container,
    .related-grid,
    .v6-related-grid{
        grid-template-columns:minmax(0,1fr) !important;
    }

    /* Product top area */
    .product-detail-layout{
        grid-template-columns:minmax(0,1fr) !important;
        gap:20px !important;
    }

    .product-gallery{
        padding:20px !important;
        box-sizing:border-box;
    }

    .product-gallery img{
        display:block;
        width:100%;
        max-width:100%;
        height:auto;
    }

    .product-info h1{
        margin-top:0 !important;
        font-size:32px !important;
        line-height:1.2;
    }

    .product-content{
        font-size:16px;
        overflow-wrap:anywhere;
    }

    /* Product tables: keep data inside the viewport. */
    .product-spec-table,
    .v6-parameter-table,
    .product-specs table{
        width:100% !important;
        max-width:100% !important;
        table-layout:fixed;
    }

    .product-spec-table th,
    .product-spec-table td,
    .v6-parameter-table th,
    .v6-parameter-table td,
    .product-specs th,
    .product-specs td{
        word-break:break-word;
        overflow-wrap:anywhere;
    }

    /* Inquiry blocks */
    .v6-inquiry-box,
    .product-inquiry-box{
        max-width:100%;
        padding:25px !important;
        box-sizing:border-box;
    }

    .v6-inquiry-box input,
    .v6-inquiry-box textarea,
    .v6-inquiry-box select,
    .product-inquiry-box input,
    .product-inquiry-box textarea,
    .product-inquiry-box select{
        max-width:100%;
        box-sizing:border-box;
    }

    .v6-inquiry-box button,
    .product-inquiry-btn,
    .product-info .v6-btn{
        max-width:100%;
        white-space:normal;
    }

    /* Related Products: this fixes the measured 733px page overflow. */
    .related-products{
        width:100%;
        max-width:100%;
    }

    .related-grid{
        display:grid;
        grid-template-columns:minmax(0,1fr) !important;
        gap:20px !important;
        width:100%;
        max-width:100%;
        min-width:0;
    }

    .related-item{
        width:100%;
        max-width:100%;
        min-width:0;
        box-sizing:border-box;
    }

    .related-item img{
        max-width:100%;
    }

    .related-products h2{
        font-size:28px;
        line-height:1.25;
        margin-bottom:25px;
    }

    /* V6 alternate product-detail classes retained by main.css. */
    .v6-product-header{
        grid-template-columns:minmax(0,1fr) !important;
        gap:25px;
    }

    .v6-product-title{
        font-size:28px;
    }

    .v6-product-section-title{
        font-size:24px;
    }

    .v6-related-grid{
        grid-template-columns:minmax(0,1fr) !important;
        gap:20px;
    }

    /* Category / CTA */
    .category-hero{
        padding:35px 25px;
    }

    .category-hero h1{
        font-size:32px;
        line-height:1.2;
    }

    .cta-section h2{
        font-size:32px;
    }

    .cta-section p{
        font-size:16px;
    }

    /* Correct current WhatsApp class from functions.php. */
    .baihangda-whatsapp-float{
        right:12px !important;
        bottom:12px !important;
        padding:10px 16px !important;
        font-size:13px !important;
        max-width:160px !important;
        z-index:9998 !important;
        box-sizing:border-box;
    }

    /* Generic embedded media safety. */
    iframe,
    video,
    embed,
    object{
        max-width:100%;
    }
}

/* =========================================
VERY SMALL PHONE
========================================= */
@media(max-width:480px){

    .bd-container{
        width:94%;
        min-height:70px;
    }

    .bd-logo img{
        width:135px;
    }

    .main-navigation{
        max-height:calc(100vh - 70px);
    }

    .main-navigation ul.mingda-menu{
        padding:8px 14px 16px !important;
    }

    .v6-hero-content{
        padding:32px 20px;
    }

    .related-item{
        padding:16px;
    }

    .baihangda-whatsapp-float{
        right:10px !important;
        bottom:10px !important;
        padding:9px 14px !important;
        font-size:12px !important;
    }
}