/**
 * Restores the Canton vendor-page design shell when legacy module CSS
 * (events, articles, pages) is loaded after vendors.css.
 */

.main-section {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

body:not(.page-about):not(.page-contact):not(.page-privacy) .banner-section {
    position: relative;
    margin: 15px !important;
    max-width: none !important;
    height: 420px !important;
    background-image: url('../vendors/images/hero-bg.png') !important;
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    border-radius: 30px;
    overflow: visible;
}

body.page-about .banner-section.about-banner {
    background-image: url('../pages/images/about-page-bg.png') !important;
    background-size: cover !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    margin: 15px 15px 100px !important;
    max-width: none !important;
    height: auto !important;
    min-height: 349px !important;
}

body.page-contact .banner-section.contact-banner {
    background-image: url('../pages/images/contact-bg.png') !important;
    background-size: cover !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    height: 460px !important;
    margin: 15px !important;
    max-width: none !important;
    border-radius: 30px;
    overflow: visible;
}

body.page-privacy .banner-section.privacy-bg {
    background-image: url('../pages/images/articles-bg.png') !important;
    background-size: cover !important;
    background-position: left top !important;
    background-repeat: no-repeat !important;
    height: 349px !important;
    margin: 15px !important;
    max-width: none !important;
    border-radius: 30px;
    overflow: visible;
}

body.page-weather .banner-section {
    height: 323px !important;
}

body.page-calendar .banner-section {
    height: 350px !important;
}

.evant-banner-section {
    background-image: url('../vendors/images/hero-bg.png') !important;
    position: relative;
    margin: 10px !important;
    max-width: none !important;
    height: 280px !important;
    background-size: cover;
    background-position: left top;
    background-repeat: no-repeat;
    border-radius: 30px;
    overflow: visible;
}

.desktop-nav {
    padding: 0 clamp(10px, 2vw, 40px) 0 8px !important;
}

.nav-list {
    justify-content: center !important;
    gap: clamp(10px, 1.9vw, 27px) !important;
}

@media (max-width: 999px) {
    html,
    body {
        overflow-x: clip;
        max-width: 100%;
    }

    .main-section {
        overflow-x: clip;
        max-width: 100%;
    }

    body:not(.page-about):not(.page-contact):not(.page-privacy) .banner-section,
    body.page-about .banner-section.about-banner,
    body.page-contact .banner-section.contact-banner,
    body.page-privacy .banner-section.privacy-bg,
    .banner-section,
    .evant-banner-section {
        border-radius: 0 !important;
        margin: 0 !important;
        max-width: none !important;
        width: 100% !important;
    }

    .evant-banner-section.mobile-bg {
        background-image: url('../vendors/images/mobile-bg.png') !important;
        background-position: center top;
    }

    body.page-weather .banner-section,
    body.page-mapping .banner-section,
    body.page-printable .banner-section,
    body.page-calendar .banner-section,
    body.page-contact .banner-section,
    body.page-privacy .banner-section {
        height: 300px !important;
        min-height: 300px !important;
        overflow: hidden !important;
    }
}

@media (max-width: 480px) {
    body.page-weather:not(.page-about):not(.page-contact):not(.page-privacy) .banner-section {
        height: 280px !important;
        min-height: 280px !important;
    }
}

@media (max-width: 1400px) {
    body:not(.page-about):not(.page-contact):not(.page-privacy) .banner-section {
        height: 352px !important;
    }
}

@media (max-width: 599px) {
    body:not(.page-about):not(.page-contact):not(.page-privacy) .banner-section {
        height: 300px !important;
        min-height: unset !important;
    }

    .evant-banner-section {
        height: 200px !important;
    }
}