/* ===================================================================
 * Overflow Fix - Prevent Horizontal Scroll
 * Ensures all elements stay within viewport bounds
 * ================================================================ */

/* Prevent horizontal overflow on body and html */
html {
    overflow-x: hidden;
    max-width: 100%;
}

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

/* Ensure all sections stay within bounds */
section {
    overflow: visible; /* Allow natural scrolling - no sub-scrollers */
    max-width: 100%;
}

/* Allow process section to show overlapping number badges */
#how-it-works {
    overflow: visible !important;
}

#how-it-works .container {
    overflow: visible !important;
}

/* Container should not exceed viewport */
.container {
    max-width: 100%;
    overflow: visible; /* Allow natural scrolling */
}

/* Fix process step elements that might overflow */
#how-it-works .process-step {
    max-width: 100%;
    overflow: visible !important; /* Allow number badges to overlap */
}

#how-it-works .process-card {
    max-width: 100%;
    overflow: visible; /* Allow natural scrolling */
}

/* Ensure grid doesn't cause overflow but allows vertical overlap */
#how-it-works .process-grid {
    max-width: 100%;
    overflow: visible !important; /* Allow natural scrolling and number badges */
    padding-top: 2rem; /* Add space for overlapping badges */
}

/* Fix any absolute positioned elements */
#how-it-works .process-step::after,
#how-it-works .process-step::before,
#how-it-works .process-step .connection-particle-1,
#how-it-works .process-step .connection-particle-2 {
    /* Ensure particles and lines don't cause overflow */
    max-width: 100vw;
}

/* Mobile specific overflow fixes */
@media (max-width: 768px) {
    /* Ensure connection lines on right don't cause scroll */
    #how-it-works .process-step {
        overflow: visible;
        position: relative;
    }
    
    /* Lines are now positioned inside cards, no override needed */
}

/* Ensure all text content wraps properly */
h1, h2, h3, h4, h5, h6, p {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Fix any wide images or media */
img, video, iframe {
    max-width: 100%;
    height: auto;
}

/* Ensure grid items don't overflow */
.grid-2, .grid-3, .grid-4 {
    max-width: 100%;
    overflow: visible; /* Allow natural scrolling */
}