/* Responsive Header, Footer & Layout Optimizations */

/* Mobile (up to 767px) */
@media (max-width: 767px) {
    /* 1. General layout constraints */
    html, body {
        overflow-x: hidden !important;
        max-width: 100vw;
    }
    
    img {
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain;
    }

    /* 2. Container safety & padding */
    .e-con {
        padding-left: 20px !important;
        padding-right: 20px !important;
        box-sizing: border-box;
        max-width: 100vw;
    }

    /* Stack elements vertically in standard containers */
    main .e-con.e-flexbox {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
    }

    /* 3. Header specific */
    .elementor-location-header > .e-con,
    header.e-con {
        flex-direction: row !important; /* Keep logo and menu inline */
        flex-wrap: wrap !important;
        justify-content: space-between !important;
        align-items: center !important;
        min-height: 70px !important;
        padding: 10px 16px !important;
    }

    /* Logo constraints */
    .elementor-location-header img,
    .elementor-widget-theme-site-logo img {
        max-width: 140px !important;
        width: 100%;
    }

    /* Navigation */
    .elementor-nav-menu--main {
        display: none !important; /* Hide desktop menu */
    }
    
    .elementor-nav-menu__toggle {
        display: flex !important; /* Show hamburger */
    }

    /* Mobile Dropdown Menu */
    .elementor-nav-menu--dropdown {
        background-color: #FAFAFA !important; /* Light beige/white */
        width: 100% !important;
        margin-top: 15px !important;
        box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    }
    
    .elementor-nav-menu--dropdown a {
        padding: 15px 20px !important;
        font-size: 16px !important;
        color: #333 !important;
        text-align: left;
    }

    /* Header CTA Button - force full width under the header items */
    .elementor-location-header .elementor-widget-button {
        width: 100% !important;
        margin-top: 15px !important;
        order: 3; /* Move to the bottom of the flex wrap */
        display: flex;
        justify-content: center;
    }
    
    .elementor-location-header .elementor-widget-button .elementor-button {
        width: 100% !important;
        background-color: #222 !important; /* Dark button */
        color: #fff !important;
        padding: 15px !important;
        border-radius: 4px;
        text-align: center;
    }

    /* 4. Footer specific */
    .elementor-location-footer .e-con,
    footer .e-con {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        padding-top: 30px !important;
        padding-bottom: 30px !important;
    }
    
    .elementor-location-footer img {
        max-width: 150px !important;
        margin: 0 auto 20px !important;
    }

    /* 5. Generic buttons */
    main .elementor-widget-button .elementor-button {
        width: 100% !important;
        justify-content: center;
    }
}

/* Tablet (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
    html, body {
        overflow-x: hidden !important;
    }
    
    .e-con {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .elementor-location-header > .e-con,
    header.e-con {
        padding: 0 20px !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
}