/* ===================================================================
   WORDPRESS / ELEMENTOR OVERRIDES
   High-specificity rules that fix standalone-HTML artifacts
   when pages are rendered inside WordPress + Elementor.
   =================================================================== */

/* 1. Ensure sections rendered by ProRapid widgets span full width and have no gaps */
[class*="elementor-widget-prorapid_"] > .elementor-widget-container > section {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    max-width: 100vw !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* 2. Fix the Hero Overlap: The header is transparent, so the hero background MUST start at top (margin 0), 
      but its text content needs to be pushed down below the menu (padding 130px) */
[class*="elementor-widget-prorapid_"] section:first-of-type {
    margin-top: 0 !important;
    padding-top: 130px !important;
}

/* 3. Restore Flexbox layouts that Elementor's default CSS overrides */
.our-story, .experience-trust {
    display: flex !important;
    align-items: stretch !important;
}

/* Fix classic flexbox bug: make image wrappers flex containers so their child images inherit the stretched height */
.our-story-image, .experience-trust-image {
    display: flex !important;
    align-items: stretch !important;
}
.our-story-image img, .experience-trust-image img {
    flex: 1 !important;
}

/* Force the text blocks inside the left 50% wrappers to push towards the center (right side of their wrapper) */
.our-story-content-wrapper, .experience-trust-content {
    display: flex !important;
    justify-content: flex-end !important;
}
.our-story-text, .experience-trust-text {
    margin-left: auto !important;
}

/* Fix Elementor tiny text bug: if a user types in the rich text editor, Elementor wraps text in <p>. 
   This prevents generic paragraph styles from shrinking the H2 titles. */
h2.section-title p, h1.hero-title p {
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    margin: 0 !important;
}

@media (max-width: 991px) {
    .our-story, .experience-trust {
        flex-direction: column !important;
    }
    .our-story-text, .experience-trust-text {
        margin-left: 0 !important;
        margin: 0 auto !important;
    }
}

/* Ensure Custom Homes "Our Work" section grid doesn't get stacked and images stretch correctly */
.homes-inspire .inspire-grid {
    display: flex !important;
    align-items: center !important;
    gap: 50px !important;
}
.homes-inspire .inspire-images {
    display: flex !important;
    flex: 1 !important;
    gap: 20px !important;
}
.homes-inspire .inspire-img {
    flex: 1 !important;
    height: 400px !important;
    background: transparent !important;
}
.homes-inspire .inspire-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
    max-width: 100% !important;
}

/* 4. Strip spacing from widget wrapper + container to remove any leftover gaps */
[class*="elementor-widget-prorapid_"],
[class*="elementor-widget-prorapid_"] > .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

/* 5. Ensure Footer always stays on top of relative Elementor sections */
.footer {
    position: relative !important;
    z-index: 9999 !important;
}

/* 6. Fix image baseline gaps causing bright strips at the bottom of hero/CTA sections */
.hero-bg, .about-hero-bg, .ch-hero-bg, .db-hero-bg, .contact-hero-bg, .ow-hero-bg, .ow-stats-bg, .ch-cta-bg, .contact-cta-bg, .db-cta-bg, .about-hero-overlay, .ch-cta-overlay, .db-cta-overlay {
    overflow: hidden !important;
}
.hero-bg img, .about-hero-bg img, .ch-hero-bg img, .db-hero-bg img, .contact-hero-bg img, .ow-hero-bg img, .ow-stats-bg img, .ch-cta-bg img, .contact-cta-bg img, .db-cta-bg img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 7. Mobile Hero Fixes: Force long text to break, shrink titles, and allow height to expand */
@media (max-width: 767px) {
    .ch-hero, .db-hero, .contact-hero, .ow-hero, .about-hero {
        height: auto !important;
        min-height: 500px !important;
        padding-bottom: 50px !important;
    }
    .ch-hero-content .hero-title, .db-hero-content .hero-title, .contact-hero-content .hero-title, .ow-hero-content .hero-title, .about-hero-content .hero-title {
        font-size: 2.8rem !important;
        word-break: break-word !important;
        hyphens: auto !important;
        line-height: 1.1 !important;
    }
}

/* 8. Fix nested <p> color bug in hero descriptions when edited in Elementor */
.ch-hero-text p, .db-hero-text p, .contact-hero-text p, .ow-hero-text p, .about-hero-text p, .hero-text p {
    color: inherit !important;
    font-size: inherit !important;
    font-weight: inherit !important;
    margin: 0 !important;
    line-height: inherit !important;
}