/*
 * Elementor Integration Fixes
 * Prevents Elementor from overriding the theme's Font Awesome 6 icons.
 * Also includes global mobile responsiveness fixes for Elementor layouts.
 */

/* =========================================
   GLOBAL MOBILE OVERFLOW FIX
   =========================================
   Prevent Elementor sections/containers from causing horizontal scroll.
   This is the most common cause of "white space on the right" on mobile.
*/
@media (max-width: 768px) {
    .elementor-section,
    .elementor-container,
    .elementor-widget-wrap,
    .elementor-column,
    .elementor-column-wrap,
    .e-container,
    .e-con,
    .e-con-inner {
        max-width: 100% !important;
        overflow-x: hidden;
    }

    /* Ensure Elementor section inner containers stay within viewport */
    .elementor-section .elementor-container {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Fix for Elementor full-width sections that can overflow */
    .elementor-section.elementor-section-full_width .elementor-container {
        max-width: 100%;
    }
}

/* Mobile-specific: disable parallax/fixed backgrounds which cause iOS zoom glitches */
@media (max-width: 1024px) {
    .elementor-section[data-settings],
    .e-con[data-settings],
    .hero-single-image {
        background-attachment: scroll !important;
    }
}

/* Ensure all inner widget wrappers don't overflow on mobile */
@media (max-width: 768px) {
    .elementor-widget-container {
        overflow: hidden;
        max-width: 100%;
    }

    /* Remove any negative margins that could cause bleed */
    .elementor-section > .elementor-container > .elementor-row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* =========================================
       EDGE-TO-EDGE MOBILE SECTIONS
       Remove left/right padding on structural elements so section
       backgrounds bleed fully to screen edges.
       Theme widget interiors are re-padded below.
    ========================================= */

    /* Section shell — remove horizontal padding */
    .elementor-section,
    .e-con {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Column shell — remove horizontal padding */
    .elementor-column > .elementor-widget-wrap,
    .elementor-column-wrap {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Inner container (Elementor Flexbox containers) */
    .e-con-inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* =========================================
       RESTORE PADDING FOR THEME CUSTOM WIDGETS
       These widgets need inner breathing room even on mobile.
    ========================================= */
    .elementor-widget-property_grid .elementor-widget-container,
    .elementor-widget-property_list .elementor-widget-container,
    .elementor-widget-featured_properties .elementor-widget-container,
    .elementor-widget-property_search .elementor-widget-container,
    .elementor-widget-property_map .elementor-widget-container,
    .elementor-widget-vesta-city-featured-properties .elementor-widget-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        overflow: visible;
    }
}

/* Force theme icons to use Font Awesome 6 over Elementor's Font Awesome 5 */
/* Force theme icons to use Font Awesome 6 over Elementor's Font Awesome 5 */
body i.fas:not(.eicon), 
body i.fa-solid:not(.eicon),
body i.far:not(.eicon), 
body i.fa-regular:not(.eicon),
body .fas:not(.eicon), 
body .fa-solid:not(.eicon),
body .far:not(.eicon), 
body .fa-regular:not(.eicon) {
    font-family: "Font Awesome 6 Free" !important;
}

body i.fab:not(.eicon), 
body i.fa-brands:not(.eicon),
body .fab:not(.eicon), 
body .fa-brands:not(.eicon) {
    font-family: "Font Awesome 6 Brands" !important;
}

/* Ensure font weights match FA 6 requirements */
body i.fas:not(.eicon), 
body i.fa-solid:not(.eicon), 
body i.fa-vector-square:not(.eicon),
body .fas:not(.eicon), 
body .fa-solid:not(.eicon), 
body .fa-vector-square:not(.eicon) {
    font-weight: 900 !important;
}

body i.far:not(.eicon), 
body i.fa-regular:not(.eicon),
body .far:not(.eicon), 
body .fa-regular:not(.eicon) {
    font-weight: 400 !important;
}

/* Fix Elementor's global CSS resets (if they target i elements) */
body [class^="fa-"]:not(.eicon):not(.elementor-editor-active *), 
body [class*=" fa-"]:not(.eicon):not(.elementor-editor-active *),
body i[class^="fa-"]:not(.eicon):not(.elementor-editor-active *), 
body i[class*=" fa-"]:not(.eicon):not(.elementor-editor-active *) {
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    display: inline-block !important;
}