/*  MOBILE  > */
.custom-nav-mobile{
    position:fixed;
    top:58px; /* bottom of header */
    bottom:0;
    right:auto;
    width:100vw;
    left:-100vw;
    list-style-type: none;
    margin:0;
    padding:0;
    background-color:var(--wp--preset--color--primary);
    border-top:solid 1px var(--wp--preset--color--white);
    margin-block-start: 0!important;
    transition:left .3s ease-in;
    box-shadow: 2px 0px 0px 0px rgba(0,0,0,0.75);
    overflow-x:hidden;
    overflow-y:auto;
}
.custom-nav-mobile.visible{
    left:0;
}
#mobileLevel1{
    z-index:1;
}
#mobileLevel2{
    z-index:2;
}
#mobileLevel3{
    z-index:3;
}
.custom-nav-mobile-ul li{
    border-bottom: solid 1px #4c6a87;
}
.custom-nav-mobile-ul a{
    display:block;
    color: var(--wp--preset--color--white);
    padding:.75rem 1rem;
    margin: 0 .5rem;
    border-bottom:none;
    &:hover{
        color: var(--wp--preset--color--white);
    }
}
/* page with sub-pages */
.custom-nav-mobile-sub-pages{
    display:flex;
    width:calc(100vw - 1rem);
    align-items: center;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA5LjY4IDguNTMiPgogIDxnIGlkPSJhcnJvd190aGljayIgZGF0YS1uYW1lPSJhcnJvdyB0aGljayI+CiAgICA8cG9seWdvbiBwb2ludHM9IjUuMDkgMCAzLjgyIDEuMzcgNS44NSAzLjI2IDAgMy4yNiAwIDUuMjYgNS44NiA1LjI2IDMuODIgNy4xNiA1LjA5IDguNTMgOS42OCA0LjI2IDUuMDkgMCIgZmlsbD0iI2ZmZiIvPgogIDwvZz4KPC9zdmc+");
    background-position: calc(100vw - 2.5rem) center;
    background-repeat: no-repeat;
    background-size: 18px 18px;
    padding:.75rem 1rem;
    margin:0 .5rem;
    background-color: transparent;
    color:var(--wp--preset--color--white);
    border:none;
}


/* back button */
.custom-navigation-back-button{
    display:block;
    padding:.75rem 1rem;
    background-color: transparent;
    color:var(--wp--preset--color--white);
    font-size: var(--wp--preset--font-size--x-small);
    border:none;
    line-height:1.25rem;
    width:calc(100vw - 1rem);
    text-align:left;
    margin:0 .5rem;
}
/* < MOBILE */

/* DESKTOP > */
.custom-nav-container-secondary{
    display:none;
}
.custom-nav-nav{
    flex-grow:1;
    display:flex;
    margin-block-start:0!important;
    justify-content: flex-end;
}
.custom-nav-container{
    list-style-type: none;
    display:flex;
    gap:1rem;
    flex-grow:1;
    justify-content: flex-end;
    margin-block-start:0!important;
    margin-block-end: 0!important;
    align-items: center;
}

.wp-block-search{
    margin-block-start:0!important;
}

/* nav link */
.custom-nav-container li a{
    color:#fff;
    text-decoration:none;
    font-size:1rem;
    letter-spacing: .25px;
    padding:.5rem;
    border-bottom: none;
    transition: background-color .25s ease-in;
}

.custom-nav-container li a:hover{
    background-color:#071d40;
    box-shadow:none!important;
}


.custom-nav-container li a.active{
    border-bottom:solid 1px var(--wp--preset--color--white);
}

/* nav link with sub menu */
.custom-nav-button{
    border:none;
    padding:.5rem;
    background-color: transparent;
    display: inline-flex;
    align-items: center;
    color: var(--wp--preset--color--white);
    font-size:1rem;
    letter-spacing: .25px;
    transition: background-color .25s ease-in;
}
.custom-nav-button:hover{
    background-color:#071d40;
    box-shadow:none!important;
}

.custom-nav-button.active{
    border-bottom:solid 1px var(--wp--preset--color--white);
}

.custom-nav-button:focus-visible{
    outline:solid 2px var(--wp--preset--color--white);
    outline-offset: 4px!important;
}


.custom-nav-button:after{
    content: ' ';
    display: inline-block;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    height: .35rem;
    width: .35rem;
    transform: rotate(45deg);
    margin-left:.5rem;
    position:relative;
    bottom:.15rem;
}

/* < DESKTOP */


@media (min-width:1150px){
    .custom-nav-container-secondary{
       display:block;
    }
    .custom-nav-mobile{
        display:none;
    }
}