/* color definitions found at the top of atf.core.css */

.cms-nav {
    /* menu arrows */
    --menu-top-arrow-color: black;
    --menu-top-arrow-background: transparent;

    --menu-side-arrow-color: var(--brand-b-color);
    --menu-side-arrow-background: transparent;

    --menu-child-arrow-color: var(--brand-b-color);
    --menu-child-arrow-background: transparent;

    --menu-background: var(--brand-b-bg);
    --menu-color: var(--brand-b-color);
    --menu-background-highlight: var(--brand-b-hover);
    --menu-color-highlight: var(--brand-b-hover-color);

    --menu-side-heading-background: var(--brand-a);
    --menu-side-heading-color: var(--brand-a-color);
    z-index: 1;
}

.menu-state {
    /* used by js during resize to know if we are seeing the hamburger(0) or fullwidth(1) version. Set as 0 here and 1 in the media query later */
    /* this approach allows us to work of mediaquery values without js needing to know what widths are set here for the mediaqueries */
    min-width: 0px;
    /* false: not fullwidth */
}

a {
    text-decoration: none;
    color: var(--brand-a-color);
}

/* DEFINE nav wrapper and hamburger */
/* nav wrapper */
#top-nav-wrap {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#top-nav-wrap.hamburger-open {
    position: absolute;
    top: 0;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    right: 0;
    align-items: start;
    flex-direction: row-reverse;
    padding-left: 1rem;
}

#top-nav {
    display: none;
}

/* Conceal sidebar navigation at mobile widths */
#side-nav {
    display: none;
}

@media only screen and (min-width: 900px) {

    /* ;sidebar-cutoff;  using 900px */
    #side-nav {
        display: unset;
    }
}

/* hamburger */
#hamburger-wrap {
    background: transparent;
    cursor: pointer;
    margin: 0;
}

.hamburger-open #top-nav {
    flex-basis: 100%;
    display: unset;
    max-height: calc(100vh - 1rem);
    /*  OLD mobile menu height */
    max-height: calc(100vh - 150px);
    /*  mobile menu height with NO ALERT bar */
    max-height: calc(100vh - 185px);
    /*  mobile menu height with ALERT bar */
    overflow-y: auto;

    border: 1px solid #aaa;
}

.hamburger {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 20px;
    cursor: pointer;
    overflow: hidden;
}

.hamburger-line {
    width: 100%;
    height: 4px;
    background: black;
    transition: transform 0.2s ease-in-out;
}

.hamburger .hamburger-line::before,
.hamburger .hamburger-line::after {
    content: "";
    position: absolute;
    width: 26px;
    height: 4px;
    left: 0;
    background: black;
    transition: transform 0.2s ease-in-out;
}

.hamburger .hamburger-line::before {
    transform: translateY(-8px);
}

.hamburger .hamburger-line::after {
    transform: translateY(8px);
}

/*  ANIMATION for Hamburger Menu  */
.hamburger-open .hamburger .hamburger-line {
    transform: translateX(-50px);
    background: transparent;
}

.hamburger-open .hamburger .hamburger-line::before {
    transform: rotate(45deg) translate(35px, -35px);
}

.hamburger-open .hamburger .hamburger-line::after {
    transform: rotate(-45deg) translate(35px, 35px);
}

/* end hamburger */
.cms-nav ul {
    list-style: none;
    padding: 0;
}

.cms-nav > ul {
    display: flex; /* makes the top row menu a flex row */
    flex-wrap: wrap; /* allows the menu items to wrap to the next line if necessary */
    justify-content: left; /* evenly spaces the menu items */
}

ul.menu-parent-row {
    background: var(--menu-background);
    color: var(--menu-color);
}

.cms-nav > ul > li {
    display: flex; /* makes the top row menu items flex containers */
    padding: .5rem 1rem; /* adds space around the menu items */
    flex-direction: column;
    font-size: 1.2rem;
}

.cms-nav > ul > li.with-arrow div {
    display: flex;
    align-items: center;
    justify-content: left;
    margin-bottom: .7rem;
}

.cms-nav>ul>li.with-arrow {
    position: relative;
}

.cms-nav > ul > li.with-arrow > ul.menu-children {
    position: absolute;
    top: 100%;
    right: 0;
    width: max-content;
    color: var(--menu-color);
    padding: 0 6px;
}

/* manage child menu lists by level for better specificity */
li.level-0 ul.menu-children {
    background: var(--menu-background);
}

li.level-1 ul.menu-children {
    background: #666;
    color: #fff;
    padding: 0 6px;
}

/* Hide all child menus initially */
.cms-nav > ul > li.with-arrow > ul.menu-children {
    display: none;
}

/* Show the child menu when the parent li has the arrow-clicked class */
.cms-nav > ul > li.with-arrow.arrow-clicked > ul.menu-children {
    display: flex;
}

/* Hide the grandchild menus initially */
.cms-nav > ul > li.with-arrow > ul.menu-children > li.with-arrow > ul.menu-children {
    display: none;
}

/* Show the grandchild menu when the parent li has the arrow-clicked class */
.cms-nav > ul > li.with-arrow > ul.menu-children > li.with-arrow.arrow-clicked > ul.menu-children {
    display: flex;
}

.cms-nav ul ul, .cms-nav ul ul ul {
    display: flex; /* makes the child and grandchild menus flex containers */
    flex-direction: column; /* stacks the menu items vertically */
}

.cms-nav > ul > li.with-arrow span.menu-button {
    cursor: pointer; /* changes the cursor to a pointer when hovering over the menu-button */
    padding: 0; /* removes padding from the menu-button */
    background: var(--menu-top-arrow-background);
    color: var(--menu-top-arrow-color);
}

.cms-nav > ul > li.with-arrow a.menu-label {
    margin-right: .35rem; /* adds space between the menu-button and menu-label */
}

li.this-is-the-page > div > .menu-label {
    font-weight: 600;
    text-decoration: underline;
}

.cms-nav > ul > li.with-arrow span.menu-button::after {
    /* add a plus sign to the menu-button */
    content: "\002B";
    font-size: 1.2rem;
    font-weight: 600;
}

li.with-arrow.arrow-clicked > div > span.menu-button::after {
    /* change the plus sign to a minus sign when the child menu is open */
    content: "\2212";
}

.cms-nav ul.menu-child-row li{
    margin-bottom: .35rem;
}

nav.cms-nav span[href] {
    cursor: pointer;
}