/*
 Both the menu and the button are hidden in desktop layout. The visibility is all
 controlled at the 767 breakpoint at the end of this file. Technically everything
 could be wrapped in that breakpoint, but I'm keeping it separated just in case
 someone wants to use an additional breakpoint. - cjh - 2020-03-18
 */

.section-nav-mobile-menu {
    display: none;
}

.section-nav-mobile-menu-container {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
    color: rgba(0, 0, 0, 0.87);
    left: 32px;
    max-height: calc(100% - 96px);
    max-width: 65%;
    min-height: 16px;
    min-width: 16px;
    opacity: 0;
    outline: 0;
    overflow-x: hidden;
    position: fixed;
    text-overflow: ellipsis;
    top: 152px;
    transform-origin: 0 121px;
    transform: none;
    transition: opacity 341ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, transform 227ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
    visibility: hidden;
    z-index: var(--z-index-section-nav-menu);
}

@media (prefers-reduced-motion: reduce) {
    .section-nav-mobile-menu-container {
        transition-duration: 0s;
    }
}

.section-nav-mobile-menu-container ul {
    padding: 0 0 var(--margin-xs) 0;
    position: relative;
    list-style: none;
}

.section-nav-mobile-menu-container ul li {
    line-height: 0;
    letter-spacing: normal;
    color: #282728;
}

/* Each of the root LIs should have a top margin */
.section-nav-mobile-menu-container > ul > li {
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    margin: 16px 0 0 0;
}

.section-nav-mobile-menu-container > ul > li:last-child {
    border-bottom: none;
}

.section-nav-mobile-menu-container ul .header {
    display: block;
    font-size: 18px;
    font-weight: bold;
    padding: var(--margin-s) 16px;
}

.section-nav-mobile-menu-container ul li li.selected,
.section-nav-mobile-menu-container ul li li:hover {
    background-color: rgba(0, 0, 0, 0.04);
}

.section-nav-mobile-menu-container ul a {
    box-sizing: border-box;
    color: #282728;
    display: block;
    font-family: 'Red Hat Display', sans-serif;
    font-size: 15px;
    line-height: 1.25;
    margin-top: var(--margin-xs);
    min-height: auto;
    overflow: hidden;
    padding: 4px 16px;
    white-space: normal;
    -webkit-font-smoothing: antialiased;
    width: auto;
}

.section-nav-mobile-menu-container ul a svg {
    color: #adadad;
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentcolor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    margin-left: calc(var(--margin-xs) / 2);
    margin-top: -2px;
}

.section-nav-mobile-menu-container ul a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 767px) {
    .section-nav-mobile-menu.visible {
        align-items: center;
        background: white;
        border-color: black;
        border-image: initial;
        border-style: solid;
        border-width: 1px;
        color: #282728;
        display: grid;
        flex-wrap: nowrap;
        font-size: 15px;
        font-stretch: normal;
        font-style: normal;
        font-weight: bold;
        grid-template-columns: auto 50px;
        justify-content: space-between;
        letter-spacing: normal;
        line-height: 1;
        margin: 32px;
        padding: 16px;
        text-transform: uppercase;
        z-index: var(--z-index-section-nav-button);
    }

    .section-nav-mobile-menu.visible > :nth-child(2) {
        justify-self: end;
    }

    .section-nav-mobile-menu-container.visible {
        opacity: 1;
        visibility: visible;
    }
}