/* Overrides / reset
************************************/

body.sunbelt-template-v1 .dropdown-menu {
    float: unset;
    color: unset;
    border: unset;
    border-radius: unset;
    position: unset;
}

body.sunbelt-template-v1 .header__nav .nav-main {
    opacity: 0;
    transition: opacity ease-in .15s;
}

/* Common/base styles
************************************/
.nav-main, .nav-main * {
    box-sizing: border-box;
}

.nav-main {
    --hover-bg: #f1ffe9;
    display: flex;
    gap: 2rem;
    align-items: stretch;
    position: relative;
}

    .nav-main, .nav-main ul {
        list-style-type: none;
        padding: 0;
        margin: 0;
    }

        .nav-main a {
            text-decoration: none;
            color: var(--sbr-text-color) !important;
            font-size: var(--sbr-body-text-size);
            font-family: Roboto, sans-serif;
            font-weight: inherit;
        }

        /* ?? */
        .nav-main > li {
            display: flex;
            align-items: center;
        }

            .nav-main > li:hover {
                color: var(--sbrgreen-500) !important;
            }

            .nav-main > li li {
                font-weight: 400;
            }

                .nav-main > li li:hover,
                .nav-main > li li:has(a[data-active]) {
                    background: var(--hover-bg);
                    font-weight: 500;
                }

        .nav-main a[class="1"] {
            position: relative;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: .5rem;
            height: 4rem;
            color: inherit;
            text-decoration: none;
        }

            .nav-main a[class="1"]:hover {
                color: var(--sbrgreen-500) !important;
                text-decoration: none;
            }

        /* styled underline for active primary nav elements */
        .nav-main > li:hover a[class="1"]:before {
            background: var(--sbrgreen-500);
            border: none;
            border-radius: 10px;
            bottom: 6px;
            color: var(--sbrgreen-500);
            content: "";
            height: 3px;
            left: 0;
            position: absolute;
            right: 0;
        }

        .nav-main a[class="1"]:has(+ .sbr-nav):after {
            content: ""; /* chevron-down-bold */
            font-size: 24px;
            font-family: sunbelticons;
            font-style: normal;
        }

        .nav-main a[class="1"][data-active]:has(+ .sbr-nav):after {
            content: ""; /* chevron-up-bold */
        }

        /* Common active dropdown styles */
        .nav-main a[class="1"][data-active] + .sbr-nav {
            position: absolute;
            top: 100%;
            left: 0;
            width: 100%;
            background: #fff;
            border: 1px solid var(--sbr-neutral-gray-250);
            box-shadow: 0 3px 10px rgba(0, 0, 0, .05), 0 3px 15px rgba(0, 0, 0, .05);
            border-radius: 0 0 8px 8px;
            z-index: 9;
            display: flex;
            gap: 1px;
            padding: 0;
            overflow: hidden;
        }

        /* Common link styles in sub menus */
        .nav-main a[class="1"] + .sbr-nav a {
            background: none;
            border: none;
            color: var(--sbr-text-color);
            cursor: pointer;
            font-size: var(--sbr-body-text-size);
            font-weight: inherit;
            text-align: left;
            text-decoration: none;
            display: flex;
            align-items: center;
            font-family: Roboto, sans-serif;
            width: 100%;
            padding: .5rem 1rem;
            height: 3rem;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            max-width: 400px;
        }

        .nav-main .sub-menu {
            display: flex;
            flex-direction: column;
            overflow: auto;
        }

        .nav-main .sbr-nav {
            display: none;
            max-height: 75vh;
        }

        /* Static drop downs
        ************************************/

        .nav-main .sbr-nav--static > .sub-menu {
            width: 100%;
        }

        .nav-main a[class="1"][data-active] + .sbr-nav--static-single-col {
            position: absolute;
            width: auto;
            min-width: 250px;
            max-width: 30vw;
            left: -1rem;
        }


        .nav-main a[class="1"][data-active] + .sbr-nav--static-multi-col ul {
            display: block;
            columns: 3;
            column-rule: .5px solid var(--sbr-neutral-gray-250);
        }

            .nav-main a[class="1"][data-active] + .sbr-nav--static-multi-col ul > li {
                padding: .5rem 1rem;
                break-inside: avoid;
            }

        /* Dynamic drop downs
        ************************************/

        .nav-main .sbr-nav a[data-menu]:after {
            content: ""; /* chevron-right-bold */
            font-size: 24px;
            font-family: sunbelticons;
            font-style: normal;
            margin-left: auto;
        }

        .nav-main .sbr-nav ul:not(.level-1) {
            display: none;
        }

        .nav-main .sbr-nav--dynamic::before,
        .nav-main .sbr-nav--dynamic-multi-col::after {
            content: ' ';
            background: var(--sbr-neutral-gray-250);
            width: 1px;
            position: absolute;
            left: calc(100% / 3);
            height: 100%;
            top: 0;
        }

        .nav-main .sbr-nav--dynamic-multi-col::after {
            left: calc(100% / 3 * 2);
        }

        .nav-main .sbr-nav--dynamic-dual-col .sub-menu.level-1 {
            width: calc(100% / 3);
        }

        .nav-main .sbr-nav--dynamic-dual-col .sub-menu.level-2 {
            width: calc((100% / 3 * 2));
        }

        .nav-main a[class="1"][data-active] .sbr-nav--dynamic {
            display: flex;
        }

        .nav-main .sbr-nav ul[data-active] {
            display: flex;
        }

        .nav-main .sbr-nav--dynamic-multi-col .sub-menu:is(.level-1,.level-2,.level-3) {
            width: calc(100% / 3);
        }


/* Desktop
************************************/

.nav-main--desktop li:has(.sbr-nav--static-single-col) {
    position: relative;
}

.nav-main--desktop li:first-child:has(> .sbr-nav__back) {
    display: none;
}

/* Mobile
************************************/

.nav-main--mobile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
    height: 100%;
    padding: 1rem !important;
}

    .nav-main--mobile a[class="1"] {
        justify-content: space-between;
        height: unset;
        padding: .5rem 0 !important;
        min-height: 2rem;
        line-height: var(--sbr-body-text-size);
        width: 100%;
    }

        .nav-main--mobile a[class="1"][data-active] + .sbr-nav {
            top: 0;
            width: 100%;
            min-width: auto;
            max-width: unset;
            left: 0;
            border: none;
            box-shadow: none;
        }

        .nav-main--mobile a[class="1"]:has(+ .sbr-nav)::after {
            content: ""; /* chevron-right-bold */
        }

    /* no underline on hover */
    .nav-main--mobile > li:hover a[class="1"]:before {
        background: transparent;
    }

    .nav-main--mobile .sbr-nav,
    .nav-main--mobile .sub-menu {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: #fff !important;
        border: none !important;
        z-index: 1;
    }

        .nav-main--mobile .sbr-nav:before,
        .nav-main--mobile .sbr-nav:after {
            display: none;
        }

        .nav-main--mobile .sbr-nav .sub-menu.level-1 {
            z-index: 100;
        }

        .nav-main--mobile .sbr-nav .sub-menu.level-2 {
            z-index: 200;
        }

        .nav-main--mobile .sbr-nav .sub-menu.level-3 {
            z-index: 300;
        }

    .nav-main--mobile li:first-child:has(> .sbr-nav__back) {
        background-color: var(--hover-bg) !important;
    }

    .nav-main--mobile .sbr-nav__back {
        border: none;
        background: none;
        font-weight: 600;
        cursor: pointer;
        padding: .5rem 1rem;
        height: 3rem;
        display: flex;
        align-items: center;
        gap: .5rem;
        font-size: 1rem;
        font-family: Roboto, sans-serif;
    }

        .nav-main--mobile .sbr-nav__back:before {
            content: ""; /* chevron-left-bold */
            font-size: 24px;
            font-family: sunbelticons;
            font-style: normal;
            margin-left: auto;
        }

/* Utility
************************************/

.nav-main .sub-menu li.see-all > a {
    font-size: 1.25rem;
    font-weight: 500;
}

/* Content Builder editor fixes
************************************/

#builderContent .nav-main .sub-menu {
    display: none;
}