/* Index Page Specific Styles - Full Width Layout */

/* Full width body and container for index page */
body {
    min-height: 100vh;
    padding-top: var(--header-height) !important; /* Space for fixed header */
    margin: 0;
    position: relative;
    z-index: 1;
    display: flex !important;
    flex-direction: column !important;
}

.container-fluid {
    max-width: 100% !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 1;
}

/* Full width page container */
.page-container {
    max-width: 100% !important;
    width: 100vw !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Remove top padding to eliminate gap between header and hero */
.index-page .page-container {
    padding-top: 0 !important;
}

/* Keep body padding-top for index page to prevent header overlap */
body.index-page {
    padding-top: var(--header-height) !important;
}

/* Hero section full width */
.hero-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    /* Pull hero up under the fixed header so its background touches the header */
    margin-top: calc(var(--header-height) * -1) !important;
    padding: calc(100px + var(--header-height)) 0 100px !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.hero-section .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    position: relative;
    z-index: 2;
}

/* About section full width */
.about-section {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    padding: 80px 0 !important;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

.about-section .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    position: relative;
    z-index: 2;
}

/* Products section - contained width */
.products-section {
    margin: 0 !important;
    padding: 80px 0 !important;
}

.products-section .container {
    max-width: 1200px !important;
    margin: 0 auto !important;
    padding: 0 2rem !important;
    position: relative;
    z-index: 2;
}

/* Remove fixed footer styling for index page - use inline footer like other pages */

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .hero-section {
        padding: calc(80px + var(--header-height)) 0 60px !important;
    }

    .about-section {
        padding: 60px 0 !important;
    }

    .products-section {
        padding: 60px 0 !important;
    }

    .hero-section .container,
    .about-section .container,
    .products-section .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1rem !important;
    }
}

/* Ensure content flows properly with header and sticky footer */
main, .main-content, .page-container {
    flex: 1 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}