/* Left Bar */

#dreyMenu {
    background-color            : var(--dark-green) ;
    box-sizing                  : border-box ;
    color                       : white ;
    display                     : flex ;
    flex-direction              : column ;
    height                      : 100vh ;
    min-height                  : 0 ;
    overflow                    : hidden ;
    position                    : relative ;
}

.menuContent {
    flex                        : 1 1 auto ;
    min-height                  : 0 ;
    overflow-y                  : auto ;
    padding-bottom              : 18px ;
    mask-image                  : linear-gradient(
        to bottom,
        black calc(100% - 42px),
        transparent 100%
    ) ;
}

#menuLogo {
    float                       : left ;
    margin-right                : 12px ;
    width                       : 40% ;
}

.menuContent h1,
.menuIntro {
    box-sizing                  : border-box ;
    overflow                    : hidden ;
    margin-right                : 12px ;
}

/* Menu items */

#menuList {
    clear                       : both ;
    padding-left                : 40px ;
}

#menuList li {
    cursor                      : pointer ;
    font-weight                 : bold ;
    list-style-type             : none ;
    margin-top                  : 10px ;
}

#menuList > .menuGroup {
    margin-top                  : 12px ;
}

#menuList > li:not(.menuGroup)::before {
    content                     : "\f0da" ;
    display                     : inline-block ;
    font-family                 : "FontAwesome" ;
    font-size                   : 90% ;
    margin                      : 0 5px 0 -15px ;
    opacity                     : 0.9 ;
    width                       : 0.65em ;
}

/* Collapsible groups */

#menuList .menuGroup {
    cursor                      : default ;
}

#menuList .menuGroup::before {
    display                     : none ;
}

.menuGroupToggle {
    background                  : transparent ;
    border                      : 0 ;
    color                       : white ;
    cursor                      : pointer ;
    font                        : inherit ;
    font-weight                 : bold ;
    padding                     : 0 ;
    text-align                  : left ;
}

.menuGroupIcon {
    display                     : inline-block ;
    margin                      : 0 6px 0 -15px ;
    text-align                  : center ;
    width                       : 1.25em ;
}

/*
 * Parent-group palette.
 * Parent labels remain white; colour is confined
 * to the group icon as a small navigation landmark.
 */

.menuGroupToneDrey .menuGroupIcon {
    color                       : #c9ff72 ;
}

.menuGroupToneShop .menuGroupIcon {
    color                       : #7ee7ff ;
}

.menuGroupToneCore .menuGroupIcon {
    color                       : #8ff0b5 ;
}

.menuGroupToneTools .menuGroupIcon {
    color                       : #ffd36a ;
}

.menuGroupToneTechnical .menuGroupIcon {
    color                       : #ff9f72 ;
}

.menuGroupToneNews .menuGroupIcon {
    color                       : #e49aff ;
}

.menuGroupToneAdmin .menuGroupIcon {
    color                       : #ff8fc7 ;
}

.menuSubmenu {
    display                     : none ;
    margin                      : 0 ;
    padding-left                : 20px ;
}

.menuGroup.open
.menuSubmenu {
    display                     : block ;
}

#menuList
.menuSubmenu li {
    font-size                   : 95% ;
    font-weight                 : normal ;
    margin-left                 : 0 ;
    margin-top                  : 3px ;
}

.menuSubmenu li > a {
    display: block;
    width: 100%;
    box-sizing: border-box;
}

/*
 * Current page marker.
 * Keep identical vertical real estate to ordinary children.
 */

#menuList .menuSubmenu li.menuCurrent {
    background                  : rgba(220, 255, 219, 0.12) ;
    border-radius               : 0 0 3px 0 ;
    border-right                : 3px solid var(--light-green) ;
    font-weight                 : bold ;
    padding                     : 0 ;
}

#menuList .menuSubmenu li.menuCurrent > a {
    background                  : transparent ;
    border-radius               : 0 ;
    box-shadow                  : none ;
    font-weight                 : bold ;
    margin                      : 0 ;
    padding                     : 0 ;
}

#menuList .menuSubmenu li.menuCurrent::before {
    color                       : var(--light-green) ;
}

/*
 * Navigation acknowledgement.
 * Briefly flash a clicked child using the current-page treatment
 * while AJAX navigation is under way.
 */

#menuList .menuSubmenu li.menuNavFlash {
    animation                   : menuNavFlash 0.32s linear 1 ;
    border-radius               : 0 0 3px 0 ;
}

@keyframes menuNavFlash {

    0%,
    50% {
        background              : rgba(220, 255, 219, 0.12) ;
        border-right            : 3px solid var(--light-green) ;
    }

    25%,
    75%,
    100% {
        background              : transparent ;
        border-right            : 3px solid transparent ;
    }
}

/*
 * Keep the Snipcart basket recognisably button-like,
 * but bring it into the Drey visual language.
 */

#menuList .snipcart-checkout {
    background                  : rgba(255, 255, 255, 0.12) ;
    border                      : 1px solid rgba(255, 255, 255, 0.7) ;
    border-radius               : 4px ;
    color                       : inherit ;
    cursor                      : pointer ;
    font                        : inherit ;
    padding                     : 2px 8px ;
}

#menuList .snipcart-checkout:hover,
#menuList .snipcart-checkout:focus-visible {
    background                  : rgba(220, 255, 219, 0.18) ;
    border-color                : var(--light-green) ;
    outline                     : none ;
}

/* Social links */

.menuSocials {
    align-items                 : center ;
    box-sizing                  : border-box ;
    display                     : flex ;
    flex                        : 0 0 auto ;
    gap                         : 1rem ;
    justify-content             : center ;
    margin-top                  : auto ;
    padding                     : 0.6rem 1rem ;
    position                    : static ;
    width                       : 100% ;
}

.menuSocials ul {
    display                     : flex ;
    gap                         : 1rem ;
    margin                      : 0 ;
    padding                     : 0 ;
}

.menuCopyright {
    white-space                 : nowrap ;
}

.menuSocials li {
    align-items                 : center ;
    cursor                      : pointer ;
    display                     : inline-flex ;
    justify-content             : center ;
    opacity                     : 0.72 ;
    transition                  : opacity 0.15s ease ;
}

.menuSocials li:hover,
.menuSocials li:focus {
    opacity                     : 1 ;
    outline                     : none ;
}

.menuSocials li:focus-visible {
    outline                     : 2px solid currentColor ;
    outline-offset              : 4px ;
}

.fa-1_5x {
    font-size                   : 1.5em ;
}

/* Desktop shadow */

#dreyMenu::after {
    background                  :
        linear-gradient(
            to right,
            rgba(0, 0, 0, 0.35),
            rgba(0, 0, 0, 0)
        ) ;
    content                     : "" ;
    height                      : 100% ;
    pointer-events              : none ;
    position                    : absolute ;
    right                       : -10px ;
    top                         : 0 ;
    width                       : 10px ;
}

/* Mobile menu button - hidden by default */

#mobileMenuToggle {
    display                     : none ;
}

.menuIntro {
    display                     : block ;
}

#mobileCollectionSlot {
    display                     : none ;
}

/* Mobile */

@media screen and (max-width: 600px) {
    
    #dreyMenu {
        box-sizing                  : border-box ;
        height                      : auto ;
        min-height                  : 0 ;
        overflow                    : visible ;
        padding                     : 8px 12px ;
        position                    : relative ;
        width                       : 100% ;
    }
    
    #dreyMenu .menuHeader {
        align-items                 : center ;
        display                     : grid ;
        gap                         : 10px ;
        grid-template-columns       : 45px 1fr ;
        min-height                  : 45px ;
    }

    #dreyMenu::after {
        display                     : none ;
    }

    #mobileMenuToggle {
        align-items                 : center ;
        background                  : transparent ;
        border                      : 0 ;
        border-radius               : 9px ;
        cursor                      : pointer ;
        display                     : flex ;
        height                      : 38px ;
        justify-content             : center ;
        padding                     : 0 ;
        position                    : absolute ;
        right                       : 15px ;
        top                         : 18px ;
        width                       : 38px ;
        z-index                     : 100 ;
    }
    
    .mobileMenuDots {
        align-items                 : center ;
        display                     : flex ;
        gap                         : 5px ;
        justify-content             : center ;
    }
    
    .mobileMenuDots span {
        background                  : white ;
        border-radius               : 50% ;
        display                     : block ;
        height                      : 5px ;
        width                       : 5px ;
    }

    #dreyMenu #menuLogo {
        float                       : left ;
        margin-right                : 10px ;
        width                       : 45px ;
    }

    #dreyMenu h1 {
        font-size                   : 1.7rem ;
        line-height                 : 45px ;
        margin                      : 0 ;
    }

    #dreyMenu .menuContent {
        min-height                  : 45px ;
    }


    /*
     * Closed mobile menu
     */

    #dreyMenu .menuIntro,
    #dreyMenu #menuList,
    #dreyMenu .menuSocials {
        max-height                  : 0 ;
        opacity                     : 0 ;
        padding-top                 : 0 ;
        padding-bottom              : 0 ;
        overflow                    : hidden ;
        transition                  :
            max-height 0.3s ease,
            opacity 0.2s ease ;
    }

    /*
     * Open mobile menu
     */

    #dreyMenu.mobileOpen .menuIntro {
        max-height                  : 200px ;
        opacity                     : 1 ;
        padding-top                 : 10px ;
    }
    
    #dreyMenu.mobileOpen #menuList {
        max-height                  : 1000px ;
        opacity                     : 1 ;
        margin-top                  : 12px ;
        padding-left                : 25px ;
        padding-top                 : 8px ;
    }
    
    #dreyMenu.mobileOpen .menuSocials {
        max-height                  : 150px ;
        opacity                     : 1 ;
        margin-top                  : 15px ;
        padding                     : 8px 0 ;
    }
    
    #mobileCollectionSlot {
        display                     : block ;
        margin                      : 8px 55px 0 55px ;
    }

    #mobileCollectionSlot .collectionSelector {
        list-style                  : none ;
        margin                      : 0 ;
    }

    #mobileCollectionSlot .collectionSelector::before {
        display                     : none ;
    }

    #mobileCollectionSlot .collectionSelector br {
        display                     : none ;
    }

    #mobileCollectionSlot .selectWrap {
        width                       : 100% ;
    }

    #mobileCollectionSlot select {
        width                       : 100% ;
    }

}

.currentChannel {
    align-items                  : center ;
    cursor                       : pointer ;
    display                      : flex ;
    gap                          : 8px ;
    margin-top                   : 4px ;
    min-width                    : 0 ;
    width                        : 100% ;
    
}

.currentChannelName {
    align-items                  : center ;
    display                      : flex ;
    gap                          : 8px ;
    min-width                    : 0 ;
    overflow                     : hidden ;
    white-space                  : nowrap ;
}

#currentChannelName {
    display                      : block ;
    min-width                    : 0 ;
    overflow                     : hidden ;
    text-overflow                : ellipsis ;
    white-space                  : nowrap ;
}

.currentChannelName > i {
    flex                         : 0 0 auto ;
}

.currentChannelMore {
    flex                         : 0 0 auto ;
    margin-left                  : auto ;
    margin-right                 : 6px ;
}

.currentChannel:hover .currentChannelName {
    text-decoration              : underline ;
}

#loggedInUser {
    border-radius                : 4px ;
    display                      : flex ;
}

#loggedInUser.userLevelChanged {
    animation: userLevelChangedFlash 3s linear 1;
}

@keyframes userLevelChangedFlash {

    /* First: snap up */
    0% {
        background: var(--light-green);
        color: var(--dark-green);
    }

    /* Fade down over 1.5 seconds */
    49.9% {
        background: transparent;
        color: inherit;
    }

    /* Second: snap straight back up */
    50% {
        background: var(--light-green);
        color: var(--dark-green);
    }

    /* Fade down over another 1.5 seconds */
    100% {
        background: transparent;
        color: inherit;
    }
}

#menuList li a {
    color                       : inherit ;
    display                     : inline-block ;
    text-decoration             : none ;
}

#menuList li a:hover,
#menuList li a:focus,
#menuList li a:visited,
#menuList li a:active {
    color                       : inherit ;
    text-decoration             : none ;
}

#menuList a {
    color                       : inherit ;
    display                     : inline-block ;
    text-decoration             : none ;
}

.leftBarUser {
    align-items                  : center ;
    box-sizing                   : border-box ;
    display                      : flex ;
    gap                          : 8px ;
    margin-top                  : 0.5em ;
    min-width                    : 0 ;
    width                        : 100% ;
}

.leftBarUserIdentity {
    align-items                  : center ;
    display                      : flex ;
    flex                         : 1 1 auto ;
    gap                          : 7px ;
    min-width                    : 0 ;
    overflow                     : hidden ;
}

.leftBarUserName {
    flex                         : 0 1 auto ;
    min-width                    : 0 ;
    overflow                     : hidden ;
    text-overflow                : ellipsis ;
    white-space                  : nowrap ;
}

.leftBarUserLevel {
    flex                         : 0 0 auto ;
    white-space                  : nowrap ;
}

.leftBarUserAction {
    background                   : transparent ;
    border                       : 0 ;
    color                        : inherit ;
    cursor                       : pointer ;
    flex                         : 0 0 auto ;
    font                         : inherit ;
    margin-left                  : auto ;
    margin-right                 : 6px ;
    padding                      : 0 ;
}

.leftBarUserAction:hover,
.leftBarUserLoggedOut:hover {
    opacity                      : 0.8 ;
}

.leftBarUserLoggedOut {
    cursor                       : pointer ;
}

.menuChildIcon {
    display                     : inline-block ;
    margin-right                : 6px ;
    text-align                  : center ;
    width                       : 1.1em ;
}

.leftBarUserIdentityButton {
    background                  : transparent ;
    border                      : 0 ;
    color                       : inherit ;
    cursor                      : pointer ;
    font                        : inherit ;
    margin                      : 0 ;
    padding                     : 0 ;
    text-align                  : left ;
}

.leftBarUserIdentityButton:hover .leftBarUserName {
    text-decoration             : underline ;
}