/* Global Overflow Prevention for Mobile Devices */

/* Prevent horizontal scrolling on all devices */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100%;
}

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

/* Ensure all containers respect viewport width */
* {
    box-sizing: border-box;
}

/* Mobile-specific constraints */
@media (max-width: 1023px) {

    html,
    body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100vw !important;
    }

    /* Prevent any element from exceeding viewport width - EXCEPT mobile menu */
    *:not(.mobile-menu):not(.mobile-menu-content):not(.mobile-menu-overlay):not(.mobile-nav):not(.mobile-nav-link):not(.mobile-menu-header):not(.mobile-menu-close):not(.mobile-dropdown-menu):not(.mobile-dropdown-item):not(.mobile-nav-dropdown):not(.mobile-dropdown-toggle) {
        max-width: 100% !important;
    }

    /* Make images responsive */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Fix containers, sections, divs */
    div,
    section,
    main,
    article,
    aside,
    nav,
    header,
    footer {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Ensure max-width classes don't exceed viewport */
    .max-w-7xl,
    .max-w-6xl,
    .max-w-5xl,
    .max-w-4xl,
    .max-w-3xl,
    .max-w-2xl,
    .max-w-xl {
        max-width: 100% !important;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    /* Fix any fixed-width elements */
    [style*="width"] {
        max-width: 100% !important;
    }

    /* Prevent pre/code blocks from causing overflow */
    pre,
    code {
        max-width: 100% !important;
        overflow-x: auto !important;
        word-wrap: break-word !important;
    }

    /* Fix tables */
    table {
        max-width: 100% !important;
        overflow-x: auto !important;
        display: block !important;
    }
}

/* Extra small devices (phones, less than 640px) */
@media (max-width: 639px) {

    /* Reduce padding on containers */
    .container,
    .mx-auto {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }

    /* Ensure grid layouts don't overflow */
    .grid {
        grid-template-columns: 1fr !important;
    }

    /* Make flex containers responsive */
    .flex {
        flex-wrap: wrap;
    }
}

/* Debugging helper - shows elements causing overflow (remove in production) */
/* Uncomment to debug horizontal scrolling issues */
/*
@media (max-width: 1023px) {
    * {
        outline: 1px solid rgba(255, 0, 0, 0.1);
    }
    
    *:hover {
        outline: 2px solid rgba(255, 0, 0, 0.5);
    }
}
*/