/**
 * ============================================
 * SAMSUNG Z-FOLD MASTER FIX - SINGLE SOURCE OF TRUTH
 * HVAC247PRO - Complete Z-Fold Solution (No Conflicts)
 * ============================================
 *
 * This file is the ONLY Z-Fold specific CSS needed
 * Handles: Full-width layout, hamburger menu, grid layout, clean header
 * Samsung Z-Fold unfolded width: ~904px (884-924px range)
 *
 * Loads LAST to override all other CSS files
 * ============================================
 */

/* ============================================
   SAMSUNG Z-FOLD UNFOLDED - MASTER FIX
   884px - 924px width range
   ============================================ */

@media screen and (min-width: 884px) and (max-width: 924px) {

    /* ============================================
       GLOBAL - PREVENT HORIZONTAL SCROLL
       ============================================ */

    html,
    body {
        width: 100% !important;
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* ============================================
       FULL-WIDTH SECTIONS - EDGE-TO-EDGE
       ============================================ */

    /* All sections span full viewport width */
    section,
    .section,
    .hero,
    .hero-section,
    .services-section,
    .about-section,
    .testimonials-section,
    .why-choose-section,
    .contact-section,
    .partners-section,
    .cta-section,
    .stats-section,
    .trust-section,
    .blog-section,
    .faq-section,
    footer,
    .footer {
        width: 100vw !important;
        max-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* ============================================
       CONTENT CONTAINERS - CENTERED WITH PADDING
       ============================================ */

    /* Content inside sections - centered with proper padding */
    .hero-container,
    .services-container,
    .about-container,
    .testimonials-container,
    .why-choose-container,
    .contact-container,
    .partners-container,
    .stats-container,
    .section-content,
    .container-inner {
        max-width: 100% !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding-left: 30px !important;
        padding-right: 30px !important;
        box-sizing: border-box !important;
    }

    /* ============================================
       SERVICES GRID - 2 COLUMNS ON Z-FOLD
       ============================================ */

    .services-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
        max-width: 100% !important;
        padding: 0 30px !important;
    }

    /* Ensure service cards are equal height */
    .service-card {
        height: 100% !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* ============================================
       HEADER - TOP BAR FULL WIDTH
       ============================================ */

    .top-bar {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 0 !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
    }

    .top-bar-container {
        max-width: 100% !important;
        width: 100% !important;
        padding: 8px 20px !important;
        margin: 0 !important;
    }

    /* ============================================
       NAVBAR - FULL WIDTH WITH CLEAN LAYOUT
       ============================================ */

    .navbar,
    .main-header {
        width: 100vw !important;
        max-width: 100vw !important;
        margin: 0 !important;
        padding: 12px 20px !important;
        position: sticky !important;
        top: 40px !important;
        z-index: 999 !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
    }

    /* Navbar container - flexbox: logo left, hamburger right */
    .navbar-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 20px !important;
    }

    /* ============================================
       LOGO - LEFT SIDE, TRANSPARENT BACKGROUND
       ============================================ */

    .navbar-logo {
        order: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        flex-shrink: 0 !important;
    }

    .navbar-logo img {
        max-height: 40px !important;
        height: auto !important;
        width: auto !important;
        background: transparent !important;
        display: block !important;
    }

    .navbar-logo-text {
        font-size: 22px !important;
        background: transparent !important;
    }

    /* ============================================
       HIDE DESKTOP MENU COMPLETELY
       ============================================ */

    .navbar-menu,
    .navbar-links,
    .nav-links,
    .desktop-menu,
    .navbar-menu .btn-primary,
    .navbar-menu .emergency-cta,
    .navbar-menu [href^="tel:"],
    .navbar .nav-search:not(#navbarMenu .nav-search) {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* ============================================
       HAMBURGER ICON - RIGHT SIDE, ALWAYS VISIBLE
       ============================================ */

    .mobile-toggle {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-around !important;
        align-items: center !important;
        width: 58px !important;
        height: 58px !important;
        background: linear-gradient(135deg, rgba(0, 102, 204, 0.12) 0%, rgba(0, 102, 204, 0.18) 100%) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        border: 2px solid rgba(0, 102, 204, 0.35) !important;
        border-radius: 14px !important;
        padding: 14px !important;
        cursor: pointer !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        visibility: visible !important;
        position: relative !important;
        z-index: 10001 !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Hamburger lines */
    .mobile-toggle span {
        display: block !important;
        width: 28px !important;
        height: 3px !important;
        background: #0066CC !important;
        border-radius: 3px !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    /* Hamburger hover effect */
    .mobile-toggle:hover {
        background: linear-gradient(135deg, rgba(0, 102, 204, 0.2) 0%, rgba(0, 102, 204, 0.3) 100%) !important;
        border-color: #0066CC !important;
        transform: scale(1.05) !important;
        box-shadow: 0 4px 16px rgba(0, 102, 204, 0.3) !important;
    }

    /* Hamburger active state (X icon) */
    .mobile-toggle.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg) !important;
    }

    .mobile-toggle.active span:nth-child(2) {
        opacity: 0 !important;
        transform: translateX(-20px) !important;
    }

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

    /* ============================================
       MOBILE MENU PANEL - SIDE DRAWER
       ============================================ */

    #navbarMenu,
    .mobile-menu,
    .navbar-menu-mobile {
        display: none !important;
    }

    #navbarMenu.active,
    .mobile-menu.active,
    .navbar-menu-mobile.active {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        right: 0 !important;
        width: 90% !important;
        max-width: 500px !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%) !important;
        padding: 90px 30px 40px 30px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        z-index: 10000 !important;
        box-shadow: -10px 0 50px rgba(0, 0, 0, 0.6) !important;
        transform: translateX(0) !important;
        animation: slideInFromRight 0.3s ease-out !important;
    }

    /* Menu slide-in animation */
    @keyframes slideInFromRight {
        from {
            transform: translateX(100%) !important;
        }
        to {
            transform: translateX(0) !important;
        }
    }

    /* Menu backdrop overlay */
    #navbarMenu.active::before,
    .mobile-menu.active::before {
        content: '' !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: rgba(0, 0, 0, 0.75) !important;
        backdrop-filter: blur(8px) !important;
        -webkit-backdrop-filter: blur(8px) !important;
        z-index: -1 !important;
    }

    /* ============================================
       MOBILE MENU ITEMS STYLING
       ============================================ */

    #navbarMenu.active .navbar-link,
    .mobile-menu.active .navbar-link {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        padding: 18px 24px !important;
        margin-bottom: 10px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        border: 1px solid rgba(255, 255, 255, 0.12) !important;
        border-radius: 12px !important;
        color: #ffffff !important;
        font-size: 17px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }

    #navbarMenu.active .navbar-link:hover,
    .mobile-menu.active .navbar-link:hover {
        background: rgba(0, 102, 204, 0.3) !important;
        border-color: rgba(0, 102, 204, 0.5) !important;
        transform: translateX(8px) !important;
        box-shadow: 0 4px 16px rgba(0, 102, 204, 0.3) !important;
    }

    /* Menu link icons */
    #navbarMenu.active .navbar-link i,
    .mobile-menu.active .navbar-link i {
        margin-right: 15px !important;
        font-size: 20px !important;
        min-width: 28px !important;
        text-align: center !important;
        opacity: 0.9 !important;
    }

    /* ============================================
       EMERGENCY CTA BUTTON IN MENU
       ============================================ */

    #navbarMenu.active .emergency-cta,
    #navbarMenu.active .btn-primary,
    #navbarMenu.active [href^="tel:"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        background: linear-gradient(135deg, #DC2626 0%, #B91C1C 100%) !important;
        color: #ffffff !important;
        padding: 20px 30px !important;
        border-radius: 14px !important;
        text-align: center !important;
        font-weight: 700 !important;
        font-size: 18px !important;
        margin-top: 20px !important;
        box-shadow: 0 8px 24px rgba(220, 38, 38, 0.45) !important;
        text-decoration: none !important;
        border: none !important;
        transition: all 0.3s ease !important;
    }

    #navbarMenu.active .emergency-cta:hover,
    #navbarMenu.active .btn-primary:hover {
        transform: scale(1.03) translateY(-2px) !important;
        box-shadow: 0 12px 32px rgba(220, 38, 38, 0.6) !important;
    }

    /* ============================================
       SEARCH BAR IN MOBILE MENU
       ============================================ */

    #navbarMenu.active .nav-search,
    .mobile-menu.active .nav-search {
        display: flex !important;
        width: 100% !important;
        margin: 15px 0 20px 0 !important;
    }

    #navbarMenu.active .search-input,
    .mobile-menu.active .search-input {
        width: 100% !important;
        padding: 14px 18px !important;
        border-radius: 10px !important;
        background: rgba(255, 255, 255, 0.12) !important;
        border: 2px solid rgba(255, 255, 255, 0.2) !important;
        color: #ffffff !important;
        font-size: 15px !important;
        transition: all 0.3s ease !important;
    }

    #navbarMenu.active .search-input::placeholder,
    .mobile-menu.active .search-input::placeholder {
        color: rgba(255, 255, 255, 0.6) !important;
    }

    #navbarMenu.active .search-input:focus,
    .mobile-menu.active .search-input:focus {
        background: rgba(255, 255, 255, 0.18) !important;
        border-color: #0066CC !important;
        outline: none !important;
    }

    /* ============================================
       MEGA MENU & DROPDOWNS IN MOBILE
       ============================================ */

    #navbarMenu.active .mega-menu,
    #navbarMenu.active .dropdown-menu,
    .mobile-menu.active .mega-menu,
    .mobile-menu.active .dropdown-menu {
        position: static !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.1) !important;
        padding: 12px !important;
        margin: 8px 0 0 0 !important;
        border-radius: 8px !important;
        max-height: none !important;
        overflow: visible !important;
    }

    /* ============================================
       PREVENT BODY SCROLL WHEN MENU OPEN
       ============================================ */

    body.menu-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
    }

    /* ============================================
       RESPONSIVE IMAGES
       ============================================ */

    img,
    video,
    iframe {
        max-width: 100% !important;
        height: auto !important;
    }

    /* ============================================
       ACCESSIBILITY - MINIMUM TOUCH TARGETS
       ============================================ */

    .mobile-toggle,
    #navbarMenu.active .navbar-link {
        min-height: 48px !important;
        min-width: 48px !important;
    }

    /* Better tap feedback */
    .mobile-toggle:active {
        transform: scale(0.95) !important;
    }

    #navbarMenu.active .navbar-link:active {
        transform: translateX(4px) scale(0.98) !important;
    }
}

/* ============================================
   SAMSUNG Z-FOLD 3 VARIANT (Slightly Narrower)
   812px - 852px width range
   ============================================ */

@media screen and (min-width: 812px) and (max-width: 852px) {
    /* Apply same rules as main Z-Fold range */
    .navbar-menu {
        display: none !important;
    }

    .mobile-toggle {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* 2-column services grid */
    .services-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* ============================================
   LANDSCAPE MODE FOR FOLDABLES
   800px - 950px in landscape orientation
   ============================================ */

@media screen and (orientation: landscape) and (min-width: 800px) and (max-width: 950px) {
    .navbar-menu {
        display: none !important;
    }

    .mobile-toggle {
        display: flex !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    /* 2-column services grid in landscape */
    .services-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* ============================================
   SMOOTH SCROLLING FOR MOBILE MENU
   ============================================ */

@media screen and (max-width: 924px) {
    #navbarMenu.active,
    .mobile-menu.active {
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
    }
}

/* ============================================
   END OF SAMSUNG Z-FOLD MASTER FIX
   ============================================ */