/**
 * @file
 * Visual styles for menu.
 */
#main-menu {
    /*z-index: 1;
    width: 100%;
    position: absolute;
    height: 100vh;
    background-color: var(--bg-color);
    top: 0;
    left: 0;
    padding: 2rem;*/
    display : none;
}

#main-menu.expanded {
    display          : block;
    z-index          : 2;
    width            : 100%;
    position         : absolute;
    height           : 100vh;
    background-color : var(--bg-color);
    /*top              : -92px;*/
    top              : 0px;
    left             : 0;
    padding          : 2rem;
}

ul.menu {
    list-style     : none inside;
    margin         : 0;
    padding        : 0;
    font-size      : 16px;
    display        : flex;
    flex-direction : column;
    gap            : 2rem 0;
    margin-top     : 4rem;
}
ul.menu li{
    white-space: nowrap;
}

[dir="rtl"] ul.menu {
    /*margin-right: 1em;
    margin-left: 0;
    text-align: right;*/
}

.menu-item--expanded {
    /*list-style-type: circle;*/
    list-style-image : url(../../images/icons/menu-expanded.png);
}

.menu-item--collapsed {
    /*list-style-type: disc;*/
    list-style-image : url(../../images/icons/menu-collapsed.png); /* LTR */
}

[dir="rtl"] .menu-item--collapsed {
    list-style-image : url(../../images/icons/menu-collapsed-rtl.png);
}

.menu-item {
    /*line-height: 20px;
    margin: 0;
    padding-top: 0.2em;*/
}

/*div:not(#toolbar-item-administration-tray) .menu-item a{*/
/*nav:not(#gin-toolbar-bar) .menu-item a{*/
nav.block-menu .menu-item a {
    color           : #707070;
    line-height     : 20px;
    text-decoration : none;
    font-size       : 16px;
    text-transform  : uppercase;
    padding-left    : 30px;
}

ul.menu a:hover {
    color : var(--red);
}

ul.menu a.is-active {
    color        : var(--red);
    border-left  : 4px solid var(--red);
    padding-left : 26px;
    font-weight  : bold;
}

@media only screen and (min-width : 1280px) {
    .menu--main{
        width: 100%;
        height: 103px;
        display: flex;
        justify-content: flex-end;
    }
    #main-menu {
        display : flex;
        align-items: flex-end;
    }
    #main-menu .close{
        display : none;
    }
    #main-menu  ul.menu {
        margin-top: 0;
        flex-direction: row;
    }
    #main-menu  ul.menu a {
        border-left: 1px solid #707070;
        padding: 0 2rem;
    }
    #main-menu  ul.menu li:first-child a {
        border-left: none;
    }
}