/* =====================================================
   Layout & Width Fixes
   Ensures all sections fit properly within viewport
   ===================================================== */

/* Prevent horizontal scroll */
html,
body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;
    position: relative;
}

/* Ensure all sections fit within viewport */
section,
.section,
.hero,
.quick-stats,
.upcoming-section,
footer {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Container constraints */
.container {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

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

.hero-content {
    max-width: 900px;
    width: 100%;
    padding: 2rem;
    box-sizing: border-box;
}

/* Stats grid responsive */
.stats-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Cards and grids */
.card,
.stat-card,
.team-card,
.player-card,
.match-card {
    max-width: 100%;
    box-sizing: border-box;
}

/* Grid layouts */
.team-grid,
.player-grid,
.match-grid,
.gallery-grid {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

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

/* Navbar */
.navbar {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

/* Footer */
footer {
    width: 100%;
    max-width: 100vw;
    box-sizing: border-box;
}

footer .container {
    max-width: 1200px;
}

/* Prevent overflow from animations */
.animate-on-scroll,
.slide-in-left,
.slide-in-right {
    max-width: 100%;
}

/* Custom cursor should not affect layout */
.custom-cursor,
.cursor-follower,
.cursor-trail,
.cursor-sparkle {
    pointer-events: none;
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
    .container {
        max-width: 100%;
        padding: 0 30px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }

    section {
        padding: 3rem 0;
    }

    .hero {
        height: 80vh;
    }

    .hero-content {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .container {
        padding: 0 15px;
    }

    section {
        padding: 2.5rem 0;
    }

    .hero {
        height: 70vh;
    }

    .hero-content {
        padding: 1rem;
    }
}

/* Fix for elements that might cause overflow */
* {
    box-sizing: border-box;
}

*:not(.custom-cursor):not(.cursor-follower):not(.cursor-trail):not(.cursor-sparkle):not(.theme-toggle-fab) {
    max-width: 100%;
}

/* Ensure proper stacking context */
.navbar {
    z-index: 10000;
}

.theme-toggle-fab {
    z-index: 99990 !important;
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    left: auto !important;
    top: auto !important;
}

.custom-cursor {
    z-index: 99980;
}

.cursor-follower {
    z-index: 99970;
}

/* Prevent content from going under fixed elements */
body {
    padding-bottom: 0;
}

/* Make sure footer doesn't cause scroll */
footer {
    clear: both;
}

/* Fix any potential grid overflow */
[class*="grid"] {
    max-width: 100%;
    overflow: hidden;
}

/* Timeline fix */
.timeline {
    max-width: 100%;
    box-sizing: border-box;
}

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

/* Ensure forms fit */
form {
    max-width: 100%;
    box-sizing: border-box;
}

input,
textarea,
select {
    max-width: 100%;
    box-sizing: border-box;
}