/* Overflow Fix for MDUC */

/* Global overflow prevention */
html {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
    position: relative;
    margin: 0;
    padding: 0;
}

/* Main content wrapper */
#main-content {
    overflow-x: hidden;
    max-width: 100vw;
}

/* Fix common overflow causes */
* {
    max-width: 100%;
}

/* Hero section overflow fix */
.hero-section {
    overflow: hidden;
    max-width: 100vw;
}

.hero-content-layer {
    max-width: 100vw;
    overflow: hidden;
}

/* Post holder sections */
.post-holder {
    overflow-x: hidden;
    max-width: calc(100vw - 2rem);
}

/* Fix inline styles with explicit widths */
div[style*="display: flex"] {
    flex-wrap: wrap;
}

/* Images should not exceed container */
img {
    max-width: 100%;
    height: auto;
}

/* Tables overflow handling */
table {
    max-width: 100%;
    overflow-x: auto;
    display: block;
}

/* Pre and code blocks */
pre, code {
    max-width: 100%;
    overflow-x: auto;
    word-wrap: break-word;
}

/* Mobile specific fixes */
@media (max-width: 767px) {
    /* Reset all box model */
    * {
        box-sizing: border-box !important;
    }
    
    /* Remove all horizontal margins and paddings that might cause overflow */
    body > * {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Main content specific */
    #main-content {
        padding: 1rem !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* Ensure proper padding */
    .post-holder {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 1.5rem 0 !important;
        padding: 1rem !important;
        box-sizing: border-box !important;
    }
    
    /* Fix flex items */
    div[style*="flex: 0 0"] {
        flex: 1 1 auto !important;
    }
    
    /* Contact form */
    .contact-form {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Cards and containers */
    .card {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Animated background */
    #animated-background-overlay {
        width: 100vw;
        max-width: 100vw;
        left: 0;
        right: 0;
    }
    
    /* Footer */
    .site-footer {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    /* Welcome message */
    .welcome-message {
        max-width: 100%;
        box-sizing: border-box;
    }
    
    /* Quick links */
    .quick-links {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    /* Section dividers */
    .section-divider {
        width: calc(100% - 2rem) !important;
        max-width: calc(100% - 2rem) !important;
        margin: 2rem auto !important;
    }
    
    /* Hero section */
    .hero-section,
    .hero-background-layer,
    .hero-content-layer {
        width: 100vw !important;
        max-width: 100vw !important;
        overflow: hidden !important;
    }
    
    /* All sections */
    section {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
    
    /* Animated background */
    #animated-background-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        height: 100vh !important;
    }
    
    /* Footer section */
    .footer-mduc-section,
    .site-footer {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* All direct children of body should be contained */
    body > * {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }
}

/* Debug helper - uncomment to find overflow elements */
/* * {
    outline: 1px solid red !important;
} */