/*Note: .offset-navbar-height is set by navigation.js SetMarginTop()*/
:root {
    --backgroundColor: #000000;
    --goGreen: #bad532;
    --primaryGray: #98989A;
    --secondaryGray: #dddddd;
    --primaryWhite: #ffffff;
    --blue: #336d91;
    --zIndex: 10001;
    --zIndex-3: 9998;
}

/*Top Navbar*/
nav.goengineer-navbar {
    box-sizing: border-box;
    padding: 1rem 0rem;
    background-color: var(--backgroundColor);
    z-index: var(--zIndex);
}

    nav.goengineer-navbar li {
        list-style: none;
    }

nav .ge-nav-item-image {
    /*Styling for all images in the navbar with the "Menu Image Width" class selected in the tinymce editor*/
    width: 10rem;
}

/*LEVEL 0*/
.navigation-level-0 {
    margin: 0.2rem 1rem;
    padding-left: 0rem;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 1.5rem;
    max-width: 100%;
}

li#language-selector-container.navigation-item-level-0 {
    flex-shrink: 0;
}

img.navigation-goengineer-logo {
    width: 8rem;
}

nav .navigation-menu-closer {
    display: none;
}

#navbar-core-items-container {
    margin-right: auto;
    margin-left: auto;
}

/*LEVEL 1 - Underline*/
#navigation-level-1-underline {
    display: block;
    border-bottom: 2px solid;
    color: var(--backgroundColor);
}

    #navigation-level-1-underline.show {
        color: var(--goGreen);
    }

/*LEVEL 1*/
ul.navigation-level-1 {
    padding-left: 0;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    column-gap: 1rem;
}

a.navigation-link-level-1, a.nav-icon-link {
    color: var(--primaryGray);
}

a.navigation-link-level-1 {
    /* disabled until font transition
    font-family: "open sans", sans-serif;
    font-size: 14px;
    font-weight: 600; */
    font-size: 16px;
}

    a.navigation-link-level-1:hover, a.nav-icon-link:hover,
    li.navigation-item-level-1.selected a.navigation-link-level-1,
    li.navigation-item-level-1.selected a.nav-icon-link /*Search*/ {
        color: var(--goGreen);
    }

/*LEVEL 2 & 3*/
ul.navigation-level-2, ul.navigation-level-3 {
    display: none;
}

    ul.navigation-level-2.show, ul.navigation-level-3.show {
        display: block;
    }

    /*LEVEL 2*/
    ul.navigation-level-2.nav-icon-menu-level-2.show {
        left: auto;
        background-color: var(--primaryWhite);
        border: 1px solid var(--secondaryGray);
        height: auto;
        right: 5vw;
        width: fit-content;
        padding: 10px 1vw;
    }

    ul.navigation-level-2.show {
        position: fixed;
        left: 1.5vw;
        top: 4.4rem;
        background-color: var(--primaryWhite);
        z-index: var(--zIndex);
        padding: 0px;
        width: 16rem;
        min-height: 18rem;
        border-left: 1px solid var(--secondaryGray);
        border-bottom: 1px solid var(--secondaryGray);
    }

li.navigation-item-level-2 i.fas.fa-chevron-right.navigation-arrrow {
    display: none;
}

li.navigation-item-level-2.selected {
    border-left: 2px solid #bad532;
}

li.navigation-item-level-2.selected .navigation-link-level-2:has(i.fas.fa-chevron-right.navigation-arrrow) {
    display: flex;
    align-items: center;
}

li.navigation-item-level-2.selected i.fas.fa-chevron-right.navigation-arrrow {
    display: block;
    margin-left: auto;
}

li.navigation-item-level-2.selected:hover, li.navigation-item-level-2.selected:not(:hover) {
    background-color: #fff;
    /*box-shadow: inset -5px 4px 10px 0 rgba(0, 0, 0, .24); */
    border-bottom: 1px solid var(--secondaryGray);
    border-top: 1px solid var(--secondaryGray);
}

li.navigation-item-level-2:hover {
    background-color: var(--primaryWhite);
}

li.navigation-item-level-2.nav-icon-menu-item-level-2 {
    margin: 10px 0;
    padding: 0px 10px;
}

    li.navigation-item-level-2.nav-icon-menu-item-level-2:hover {
        background-color: inherit;
    }

.navigation-item-level-2.selected a.navigation-link-level-2 {
    font-weight: bold;
    color: black;
}

span.navigation-category-level-2 {
    font-size: 14px;
    font-weight: bold;
}

a.navigation-link-level-2 {
    font-size: 14px;
    display: block;
    color: #555555;
    font-weight: 400;
    padding: 10px;
}

    a.navigation-link-level-2:hover {
        color: var(--goGreen);
        font-weight: 400;
    }

/*LEVEL 3*/
ul.nav-icon-menu-level-3.navigation-level-3 {
    display: block;
    position: static;
    width: auto;
    height: auto;
    padding-left: 10px;
}

ul.navigation-level-3.show {
    display: flex;
    position: absolute;
    left: 100%;
    top: 0%;
    width: calc(95vw - 16rem);
    min-height: 18rem;
    overflow-y: auto;
    background-color: var(--primaryWhite);
    padding-left: 0px;
    border-bottom: 1px solid var(--secondaryGray);
    border-right: 1px solid var(--secondaryGray);
    border-left: 1px solid var(--secondaryGray);
}

/*LEVEL 3: DISPLAY OPTION "BRAND FUNCTION" CONTAINER*/
.display-toggle-container {
    border-right: 1px solid var(--secondaryGray);
    display: flex;
    flex-direction: column;
    background-color: var(--primaryWhite);
    row-gap: 1rem;
    padding: 10px 1.5rem;
}

    .display-toggle-container a {
        /*padding: 0px 5px;*/
        font-weight: 400;
        color: #555555;
        font-size: 14px;
    }

        .display-toggle-container a.selected-option {
            font-weight: 700;
            color: #000000;
        }

            .display-toggle-container a.selected-option:hover {
                color: #000000;
            }

        .display-toggle-container a:hover {
            color: var(--goGreen);
        }

/*LEVEL 3:CORE ITEMS CONTAINER*/
nav .core-items-container {
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    max-height: 80vh;
    overflow-y: auto;
}

    nav .core-items-container ul {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    nav .core-items-container > ul {
        column-gap: 3rem;
        row-gap: 1.5rem;
    }

/*LEVEL 3:CORE-ITEMS*/
li.navigation-item-level-3.hide {
    display: none;
}

li.navigation-item-level-3.nav-icon-menu-item-level-3:hover {
    text-decoration: underline;
}

li.navigation-item-level-3 {
    flex: 0 0 225px;
}

    li.navigation-item-level-3:has(p.navigation-description-level-3:not(:empty)) {
        flex: 0 0 450px;
    }

.li.navigation-item-level-3:has(p.navigation-description-level-3) span.navigation-link-text-level-3 {
    font-size: 13px;
}

p.navigation-description-level-3 {
    font-size: 11px;
    font-weight: normal;
    margin-bottom: 0rem;
    color: #000000;
}

/*LEVEL 3&4 ANCHORS*/
span.navigation-link-text-level-3 {
    margin-top: 8px;
    display: inline-block;
}

a:has(> p.navigation-description-level-3:empty).navigation-link-level-3 span.navigation-link-text-level-3 {
    font-size: 14px;
    cursor: auto;
}

a:has(> p.navigation-description-level-3).navigation-link-level-3, .nav-icon-menu-item-level-3 .navigation-link-level-3 {
    font-size: 14px;
    font-weight: bold;
}

/*If href is empty (#)*/
a.navigation-link-level-3[href="#"],
a.navigation-link-level-4[href="#"] {
    color: var(--backgroundColor);
}

    a.navigation-link-level-3[href="#"]:hover,
    a.navigation-link-level-4[href="#"]:hover,
    a.navigation-link-level-3[href="#"] .navigation-image-level-3:hover,
    a.navigation-link-level-4[href="#"] .navigation-image-level-4:hover {
        color: var(--backgroundColor);
        cursor: default;
        text-decoration: none;
    }

/*If href has value - active link*/
a.navigation-link-level-3[href]:not([href="#"]):hover .navigation-link-text-level-3,
a.navigation-link-level-4[href]:not([href="#"]):hover,
a.navigation-link-level-4[href]:not([href="#"]):hover .navigation-link-text-level-4 {
    text-decoration: underline;
    cursor: pointer;
}

a.navigation-link-level-3 p.navigation-description-level-3 span:hover {
    text-decoration: underline;
}

/*Level 4*/
ul.navigation-level-4 {
    padding-left: 0px;
    font-size: 14px;
}

li.navigation-item-level-4 {
    margin: 5px 0;
    width: 100%;
}

p.navigation-description-level-4:empty {
    display: none;
}

/*Other styling*/
.navigation-image-level-1, .navigation-image-level-2,
.navigation-image-level-3, .navigation-image-level-4 {
    width: 10rem;
    /*cursor: auto;*/
}

i.fas.fa-shopping-cart.nav-submenu-icon {
    font-weight: 300;
    font-size: 1.2em;
}

nav .navigation-menu-opener {
    color: var(--primaryGray);
}

    nav .navigation-menu-opener i:hover {
        color: var(--primaryGray);
    }

    nav .navigation-menu-opener i:active {
        color: var(--primaryGray);
    }

nav .navigation-menu-closer {
    color: var(--primaryGray);
}

    nav .navigation-menu-closer i:hover {
        color: var(--primaryGray);
    }

    nav .navigation-menu-closer i:active {
        color: var(--primaryGray);
    }

/*SEARCH & QUICKLINKS*/
.navigation-item-level-2.selected .navigation-level-3.show {
    height: auto;
}

.navigation-search-container span {
    display: none;
    font-size: 14px;
    color: var(--primaryGray);
    border-bottom: 1px solid var(--primaryGray);
}

form.navigation-search-form {
    display: none;
    padding-left: .5em;
}

    form.navigation-search-form input.navigation-search-input {
        background-color: transparent;
        border-bottom: 1px solid var(--primaryGray);
        border-top: 0px;
        border-left: 0px;
        border-right: 0px;
        border-radius: 0px;
        color: var(--primaryGray);
        height: 2rem;
        font-size: 14px;
        width: 20rem;
    }

input.navigation-search-input.form-control {
    color: #555555 !important;
}

form.navigation-search-form input.navigation-search-input::placeholder,
.navigation-search-input-placeholder::placeholder {
    color: var(--primaryGray);
}

form.navigation-search-form input.navigation-search-input::-webkit-search-cancel-button,
.navigation-search-input-placeholder::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.navigation-search-dropdown-container {
    background-color: #ffffff;
    display: none;
    position: fixed;
    left: 0;
    width: 100%;
    justify-items: center;
}

.navigation-search-dropdown-header {
    background-color: var(--primaryWhite);
    align-items: center;
    justify-content: center;
    display: flex;
    width: 100%;
    height: 110px !important;
}

.navigation-search-dropdown-body {
    background-color: #fff;
    border-radius: 0px 0px 20px 20px;
    padding: 1.5rem 2.5rem 3rem 2.5rem;
    width: 60%;
    margin: 0px auto;
}

h2.navigation-quick-links-title {
    font-size: 1.3rem;
}

.navigation-quick-links-item {
    padding: .3rem 3.5rem;
    display: block;
    color: #333;
    margin: .2rem -2rem;
}

    .navigation-quick-links-item:hover {
        text-decoration: none !important;
        background-color: #4d4d4d15 !important;
        color: #4d4d4d !important;
    }

/*NAV CURTAIN / MODAL BACKGROUND*/
.nav-curtain {
    display: none;
    position: fixed;
    background: rgba(0,0,0,0.48);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--zIndex-3);
}

/*MODAL*/
.nav-modal-container {
    display: none;
}

/*MEDIA*/

/* DESKTOP NAV (>=1027px) */
@media screen and (min-width: 1027px) {
    .navigation-menu-opener {
        display: none;
    }

    /* DESKTOP (>=1027px) - LEVEL 1 */
    a.navigation-link-level-1 {
        font-family: "Bebas Neue", sans-serif;
        letter-spacing: 0.1rem;
        font-weight: 400;
    }

    /* DESKTOP (>=1027px) - LEVEL 2 */
    ul.navigation-level-2.show {
        border-right: 0px solid var(--secondaryGray);
        border-bottom: 1px solid var(--secondaryGray);
        min-height: fit-content;
        left: 0;
        width: 27vw;
        padding-left: 15vw; /*Adjust padding to control whitespace */
        padding-top: 1.5vw;
        padding-bottom: 1.5vw;
    }

    li.navigation-item-level-2.selected:hover, li.navigation-item-level-2.selected:not(:hover) {
        border-bottom: 0px solid var(--secondaryGray);
        border-top: 0px solid var(--secondaryGray);
    }

    li.navigation-item-level-2.selected i.fas.fa-chevron-right.navigation-arrrow {
        display: none;
    }

    /* DESKTOP (>=1027px) - LEVEL 3 */
    ul .navigation-level-3.show {
        width: calc(100vw - 27vw); /*Subtract width of ul.navigation-level-2.show*/
        border-left: 0px solid var(--secondaryGray);
        border-right: 0px solid var(--secondaryGray);
        padding-top: 1.5vw;
        padding-bottom: 1.5vw;
    }

    nav .display-toggle-container {
        border-left: 1px solid var(--secondaryGray);
        border-right: 0px solid var(--secondaryGray);
    }

    nav .core-items-container {
        border-left: 1px solid var(--secondaryGray);
    }

    /*
    nav .core-items-container > ul {
    padding-right: 27vw; Adjust padding to control whitespace 
    }
    */
}

/* MOBILE / HAMBURGER NAV (<=1026px) */
@media screen and (max-width: 1026px) {

    #navbar-core-items-container {
        margin-left: 0%;
        width: 12px;
    }

    /* MOBILE (<=1026px) - LEVEL 1 */
    .navigation-level-1-underline {
        display: none !important;
    }

    #navbar-core-items-container .navigation-level-1 {
        display: none;
    }

        #navbar-core-items-container .navigation-level-1.show {
            display: flex;
            flex-direction: column;
            position: fixed;
            max-height: 70vh;
            width: 100vw; /*Controls width of entire dropdown*/
            overflow-y: auto;
            left: 0;
            top: 4.4rem;
            background-color: var(--primaryWhite);
            z-index: var(--zIndex);
            /*border: 1px solid var(--secondaryGray);*/
        }

    #navbar-core-items-container .navigation-item-level-1 {
        font-size: 1.6rem;
        width: 100%;
    }

    #navbar-core-items-container a.navigation-link-level-1 {
        color: var(--backgroundColor);
    }

    #navbar-core-items-container a.navigation-link-level-1 {
        font-family: "open sans", sans-serif;
        font-size: 14px;
        font-weight: 400;
        /*color: #555555;*/
    }

    #navbar-core-items-container span.navigation-link-text-level-1 {
        transition: border-left .3s ease-in-out;
    }

    #navbar-core-items-container a.navigation-link-level-1:hover {
        color: var(--backgroundColor);
    }

    #navbar-core-items-container li.navigation-item-level-1.selected a.navigation-link-level-1 {
        /*color: var(--blue);*/
        font-weight: 700;
        color: #000000;
    }

        #navbar-core-items-container li.navigation-item-level-1.selected a.navigation-link-level-1 span.navigation-link-text-level-1 {
            border-left: 5px solid var(--goGreen);
        }

    #navbar-core-items-container span.navigation-link-text-level-1 {
        display: block;
        padding: 10px;
    }

    /* MOBILE (<=1026px) - LEVEL 2 */
    #navbar-core-items-container .navigation-level-2.show {
        width: 100%;
        position: static;
        height: fit-content !important;
        min-height: unset;
        padding-bottom: 1rem;
    }

    #navbar-core-items-container .navigation-item-level-2 {
        font-size: 1.4rem;
        margin: 0px;
        padding: 0px;
    }

    li.navigation-item-level-2.selected i.fas.fa-chevron-right.navigation-arrrow {
        display: none;
    }

    /* Add padding to the next .navigation-item-level-2 element when .selected is applied */
    #navbar-core-items-container .navigation-item-level-2.selected + .navigation-item-level-2 {
        padding-top: 1rem;
    }

    #navbar-core-items-container .navigation-item-level-2:hover {
        background-color: var(--primaryWhite);
    }

    #navbar-core-items-container .navigation-link-level-2 {
        color: #000000;
        background-color: var(--primaryWhite);
        font-size: 14px;
        padding: 5px 15px 5px 25px;
    }

    /* MOBILE (<=1026px) - LEVEL 3 */
    #navbar-core-items-container ul.navigation-level-3.show {
        position: static;
        width: 100%;
        height: fit-content !important;
        overflow-y: visible;
        border-left: none;
        padding-left: 15px;
        padding-right: 15px;
        border-right: none;
        border-bottom: none;
        /*flex-direction: column;*/ /*Uncomment to show display options ABOVE core items*/
    }

    #navbar-core-items-container .display-toggle-container {
        /*flex: 1 0 calc(100% - 3rem);*/
        position: relative;
        /*margin-left: 3rem;*/
    }

    #navbar-core-items-container ul.navigation-level-3.show li.navigation-item-level-3 {
        padding-left: 10px;
    }

    #navbar-core-items-container li:has(p.navigation-description-level-3).navigation-item-level-3 {
        flex: 1 1 450px;
    }
}

@media screen and (min-width: 1300px) {
}

@media screen and (min-width: 1301px) and (max-width: 1599px) {
    a.navigation-link-level-1 {
        font-size: 18px;
        font-weight: 400;
    }

    .core-items-level-1-wrapper ul.navigation-level-1 {
        column-gap: 1.67rem;
    }
}

@media screen and (min-width: 1600px) {
    a.navigation-link-level-1 {
        font-size: 20px;
        font-weight: 400;
    }

    .core-items-level-1-wrapper ul.navigation-level-1 {
        column-gap: 2rem;
    }
}

/* NAV TIGHTENING (>=1027px and <=1300px) */
@media screen and (max-width: 1300px) and (min-width: 1027px) {
    .navigation-level-0 {
        column-gap: 1rem;
    }

    img.navigation-goengineer-logo {
        width: 6rem;
    }

    a.navigation-link-level-1 {
        font-size: 16px;
        font-weight: 400;
    }

    input.navigation-search-input {
        font-size: 12px;
        width: 11.5rem;
    }

    .core-items-level-1-wrapper ul.navigation-level-1 {
        column-gap: 1.33rem;
    }
}

@media screen and (max-width: 576px) {
    /*576-LEVEL 0*/
    .navigation-level-0 {
        flex-wrap: wrap;
        column-gap: 0.5rem;
    }

    #navbar-goengineer-logo-container {
        order: 1;
    }

    #navbar-core-items-container {
        order: 0; /*Move "hamburger" to before the logo*/
        margin-right: 0.5rem;
    }

    #navbar-search-top-container {
        order: 2;
        margin-right: 5px;
        margin-left: auto;
    }

    #navbar-icons-container {
        margin-left: 5px;
        order: 3;
    }

    /*576-LEVEL 3*/
    #navbar-core-items-container ul.navigation-level-3.show {
        flex-direction: column; /*Show display options above core items*/
    }

    /*576-SEARCH*/
    form.navigation-search-form {
        width: 90%;
    }

        form.navigation-search-form input.navigation-search-input {
            width: 100%;
        }

    .navigation-search-dropdown-body {
        width: 70%;
    }

    .navigation-search-dropdown-container {
        top: 52.7812px;
    }
}