/**
 * Layout Styles
 * Containers, wrappers, and structural elements
 */

/* Page wrapper */
#page {
    width: 100%;
    max-width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: visible;
    position: relative;
}

/* Sections */
.submenu-section {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow-x: hidden;
}

.header-section {
    width: 100%;
    display: flex;
    justify-content: center;
    overflow: visible;
    position: relative;
    z-index: 9999;
}

.footer-section {
    margin-top: 80px;
}

/* Universal Container - max 1660px centered */
.container {
    position: relative;
    max-width: 1660px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* Content containers have padding */
.site-main .container,
.submenu-section .container {
    padding: 0 40px;
}

/* Header and Footer have no side padding */
.header-section .container,
.footer-section .container {
    padding: 0;
}

/* Front page container has no padding */
.front-page .container {
    padding: 0;
}

/* Site main - below header */
.site-main {
    position: relative;
    z-index: 1;
}

/* Top Section */
.top-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* Header Hero Wrapper */
.header-hero-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    width: 100%;
    max-width: 100%;
    min-height: 76px;
    border-radius: 25px 25px 0 0;
    overflow: visible;
    position: relative;
    margin: 0 auto;
}

.header-hero-wrapper > * {
    margin: 0 !important;
    width: 100%;
}

/* On front page with hero - all corners rounded */
.front-page .header-hero-wrapper {
    height: 816px;
    border-radius: 25px;
}

/* Container Responsive */
@media (max-width: 1660px) {
    .site-main .container,
    .submenu-section .container {
        padding: 0 40px;
    }
}

@media (max-width: 1440px) {
    .site-main .container,
    .submenu-section .container {
        padding: 0 25px;
    }
}

@media (max-width: 1280px) {
    .site-main .container,
    .submenu-section .container {
        padding: 0 20px;
    }
}

@media (max-width: 1200px) {
    .footer-section {
        margin-top: 70px;
    }
}

@media (max-width: 1024px) {
    .site-main .container,
    .submenu-section .container {
        padding: 0 30px;
    }

    .footer-section {
        margin-top: 60px;
    }
}

@media (max-width: 768px) {
    .site-main .container,
    .submenu-section .container {
        padding: 0 20px;
    }

    .container {
        max-width: 100%;
    }

    .top-section {
        gap: 15px;
    }

    .header-hero-wrapper {
        margin: 0;
        width: 100%;
        max-width: 100%;
    }

    body:not(.front-page) .header-hero-wrapper {
        border-radius: 15px 15px 0 0;
    }

    .front-page .header-hero-wrapper {
        border-radius: 15px;
        height: auto;
        min-height: 500px;
    }

    .footer-section {
        margin-top: 40px;
    }
}

@media (max-width: 480px) {
    .site-main .container,
    .submenu-section .container {
        padding: 0 15px;
    }

    .top-section {
        gap: 10px;
    }

    .footer-section {
        margin-top: 30px;
    }
}