/* Mobile overflow fix - Targeted solution to prevent horizontal scrolling without breaking layout */

/* Apply overflow hidden to body and html to prevent any horizontal scrolling */
body {
    overflow-x: hidden !important;
}

/* Targeted pseudo-element fixes - contain decorative elements without affecting layout */
.hero-section::before,
.hero-section::after,
.hero-background::before,
.hero-background::after {
    /* Use clip-path to contain elements within viewport */
    clip-path: inset(0 0 0 0);
    /* Ensure they don't extend beyond their container */
    max-width: 400px !important;
    max-height: 400px !important;
}

/* Adjust positioning to prevent overflow while maintaining visual effect */
.hero-section::before,
.hero-background::before {
    /* Keep decorative element visible but contained */
    right: -100px !important;
    top: -50px !important;
}

.hero-section::after,
.hero-background::after {
    /* Keep decorative element visible but contained */
    left: -100px !important;
    bottom: -50px !important;
}

/* Ultra-small screen protection - for screens under 320px */
@media (max-width: 320px) {
    /* Target specific elements that cause overflow - NOT Bootstrap grid elements */
    img,
    figure,
    .wp-block-image,
    .wp-block-media-text,
    .wp-block-cover,
    .wp-block-group:not(.full-width-background),
    .hero-content,
    .hero-card {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Aggressive container containment - exclude full-width elements */
    .container,
    .container-fluid {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    
    /* Hide problematic decorative elements only */
    #homepage-hero::before,
    #homepage-hero::after,
    .testimonial-wrapper-full.homepage-testimonial-1::after,
    .homepage-features::after,
    .newsletter-background-left::before,
    .newsletter-background-right::before,
    .pattern-trial-left-background::before,
    .pattern-trial-right-background::before,
    .who-we-serve-background::before {
        display: none !important;
    }
    
    /* Ensure text doesn't overflow */
    h1, h2, h3, h4, h5, h6, p, div:not(.row):not(.col):not(.col-*), span {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        max-width: 100% !important;
    }
}

/* Fix for specific mobile width where white bar appears (414px and similar) */
@media (max-width: 480px) {
    /* Ensure no element can cause horizontal overflow - exclude full-width elements */
    img,
    figure,
    .wp-block-image,
    .wp-block-media-text,
    .wp-block-cover {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    
    /* Force specific containers to stay within viewport */
    .container,
    .container-fluid,
    .wp-block-group:not(.full-width-background),
    .hero-content,
    .hero-card {
        max-width: 100vw !important;
        overflow-x: hidden !important;
        margin-left: auto !important;
        margin-right: auto !important;

    }
    
    /* Hide specific custom pseudo-elements that cause overflow */
    #homepage-hero::before,
    #homepage-hero::after,
    .testimonial-wrapper-full.homepage-testimonial-1::after,
    .homepage-features::after,
    .newsletter-background-left::before,
    .newsletter-background-right::before,
    .pattern-trial-left-background::before,
    .pattern-trial-right-background::before,
    .who-we-serve-background::before {
        display: none !important;
    }
}

/* Mobile-specific fixes - hide decorative elements that cause overflow on small screens */
@media (max-width: 767px) {
    /* Hide all decorative pseudo-elements on mobile to prevent any overflow */
    .trial-banner-background::before,
    .pattern-trial-right-background::before,
    #homepage-hero::after,
    #homepage-hero::before,
    .testimonial-wrapper-full.homepage-testimonial-1::after,
    .newsletter-background-right::before,
    .newsletter-background-left::before,
    .hero-section::before,
    .hero-section::after,
    .hero-background::before,
    .hero-background::after,
    .homepage-features::after,
    .who-we-serve-background::before,
    .pattern-trial-left-background::before {
        display: none !important;
    }
}

/* Preserve full-width functionality */
.full-width-background,
.flexible-cards-wrapper-full {
    /* Allow these elements to extend beyond normal container bounds */
    max-width: none !important;
}

.full-width-background::before {
    /* Ensure full-width background pseudo-elements work properly */
    max-width: none !important;
    width: 100vw !important;
}

/* Accessibility enhancement - respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
    *::before,
    *::after {
        animation: none !important;
        transform: none !important;
        transition: none !important;
    }
}