/* ========================================
   ZERO HORIZONTAL SCROLL POLICY
   Mobile-First Responsive CSS
   ======================================== */

/* 1. GLOBAL OVERFLOW PREVENTION - MOBILE ONLY */
@media (max-width: 991px) {

    html,
    body {
        overflow-x: clip;
        /* Modern browsers */
        overflow-x: hidden;
        /* Fallback */
    }
}

/* 2. MEDIA ELEMENTS - RESPONSIVE BY DEFAULT */
img,
svg,
video,
canvas,
iframe {
    max-width: 100%;
    height: auto;
}

/* Prevent images from breaking layout */
img {
    max-width: 100%;
}

/* 3. TEXT OVERFLOW HANDLING - MOBILE ONLY */
@media (max-width: 991px) {
    * {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* Code blocks - wrap long lines */
pre,
code {
    white-space: pre-wrap;
    word-break: break-word;
    overflow-wrap: anywhere;
}

/* 4. BOOTSTRAP GRID FIXES - MOBILE ONLY */
@media (max-width: 991px) {
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .container,
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }

    /* Ensure rows don't overflow containers */
    .container>.row,
    .container-fluid>.row {
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* 5. TABLE RESPONSIVENESS */
table {
    max-width: 100%;
    table-layout: auto;
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* 6. FORM ELEMENTS */
input,
textarea,
select {
    max-width: 100%;
}

/* 7. EMBEDDED CONTENT */
iframe {
    max-width: 100%;
}

/* Responsive embed wrapper */
.ratio {
    max-width: 100%;
}

/* 8. PREVENT SPECIFIC BOOTSTRAP OVERFLOWS - MOBILE ONLY */
@media (max-width: 991px) {
    .navbar-collapse {
        max-width: 100%;
    }

    .dropdown-menu {
        max-width: calc(100vw - 30px);
    }
}

/* 9. CARD COMPONENTS */
.card {
    max-width: 100%;
}

.card-img,
.card-img-top,
.card-img-bottom {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* 10. CAROUSEL/SLIDER FIXES */
.carousel,
.carousel-inner,
.carousel-item {
    max-width: 100%;
}

.carousel-item img {
    width: 100%;
    max-width: 100%;
    height: auto;
    object-fit: cover;
}

/* 11. UTILITY CLASSES */
.w-100 {
    width: 100% !important;
    max-width: 100% !important;
}

.mw-100 {
    max-width: 100% !important;
}

/* 12. MOBILE-SPECIFIC FIXES */
@media (max-width: 576px) {

    /* Reduce padding on small screens */
    .container {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Ensure full-width sections don't overflow */
    section {
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Adjust row gutters */
    .row {
        --bs-gutter-x: 1rem;
    }

    /* Prevent text from causing overflow */
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* Ensure buttons don't overflow */
    .btn {
        max-width: 100%;
        white-space: normal;
    }

    /* Fix modal width */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
}

/* 13. PREVENT SPECIFIC OVERFLOW CULPRITS - MOBILE ONLY */
@media (max-width: 991px) {
    .overflow-x-hidden {
        overflow-x: hidden !important;
    }
}

/* Ensure no element can force horizontal scroll */
* {
    box-sizing: border-box;
}

/* 14. FIX BOOTSTRAP 5 GUTTER ISSUES */
.row.g-0 {
    margin-left: 0;
    margin-right: 0;
}

.row.g-0>* {
    padding-left: 0;
    padding-right: 0;
}

/* 15. SAFE VIEWPORT UNITS - MOBILE ONLY */
@media (max-width: 991px) {
    .vw-100 {
        width: 100vw;
        max-width: 100%;
    }
}

/* 16. DEBUGGING (DEV ONLY) */
.debug-overflow * {
    outline: 1px solid red !important;
}

.debug-overflow *:hover {
    outline: 2px solid blue !important;
    background: rgba(255, 0, 0, 0.1);
}