/* ============================================
   OVERFLOW FIX - Prevent Horizontal Scroll
   ============================================ */

/* Global overflow prevention - Applied to both html and body */
html {
    overflow-x: hidden !important;
    max-width: 100vw !important;
    width: 100% !important;
    box-sizing: border-box;
}

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

/* Prevent all containers from causing overflow */
* {
    max-width: 100%;
    box-sizing: border-box;
}

/* Container fixes - Preserve original max-width from styles.css */
.container {
    max-width: 1280px !important;
    width: 100%;
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Nav container - Preserve original max-width */
.nav-container {
    max-width: 1200px !important;
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Fix for sections that might overflow */
.section {
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-y: visible !important;
    width: 100%;
    position: relative;
}

/* Fix for grids that might overflow */
.hero-grid,
.ecosystem-grid,
.skills-grid,
.community-grid,
.contact-grid,
.footer-main,
.projects-grid {
    max-width: 100%;
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Fix for carousel containers */
.articles-carousel-container,
.testimonial-carousel {
    max-width: 100%;
    overflow-x: visible; /* Ubah ke visible untuk infinite carousel */
}

/* Allow infinite carousel to scroll */
.articles-grid.infinite-carousel-mode {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Fix for images */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

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

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

/* Fix for long text */
p, h1, h2, h3, h4, h5, h6, span, a {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Fix for navigation */
.nav {
    max-width: 100vw;
    width: 100%;
}

.nav-container {
    max-width: 100%;
    padding-left: clamp(1rem, 4vw, 2rem);
    padding-right: clamp(1rem, 4vw, 2rem);
}

/* Fix for modals */
.modal,
.modal-overlay,
#chat-modal,
#policy-modal {
    max-width: 100vw;
    width: 100%;
}

/* Fix for fixed elements */
.floating-theme-toggle,
#fab-chat {
    max-width: calc(100vw - 2rem);
}

/* Responsive fixes */
@media (max-width: 768px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    .nav-container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
    
    /* Ensure no element exceeds viewport */
    * {
        max-width: 100vw;
    }
}

/* Fix for elements with absolute positioning */
[style*="position: absolute"],
[style*="position:fixed"] {
    max-width: 100vw;
}

/* Fix for elements with transform that might cause overflow */
[style*="transform"] {
    max-width: 100%;
}