// Include the variables. @import “../../../partials/utility/variables/*”;

/*  ****  various Logged in and out Menu Styling       ****  */
/*  Note: adjustement for misspelling of visitor             */
#block-menu-menu-vistor-menu h2,
#block-menu-menu-visitor-menu h2   {
        visibility:     hidden;   
        display:       none;
}

#block-menu-menu-vistor-menu,
#block-menu-menu-visitor-menu,
#block-system-main-menu  {
//      background-color:               #f2f2f2;
        padding:                                0;
        margin:                                 0;
}

/* ** ***** Main Site Navigation Menu ***** **

*
* Menu is Flexbox as apposed to prior Divs

*/

#block-system-user-menu,
#block-system-main-menu {
        max-width:                          85%;                    // for 4 or 5 menu items
        margin:                             0 auto;                 //center

        h2 {
                display:                    none;
        }

        ul.menu  {
                display:    -webkit-flex;
                display:        -ms-flexbox;
                display:            flex;

                -webkit-flex-direction:     row;
                    -ms-flex-direction:     row;
                        flex-direction:     row;
                -webkit-flex-wrap:          nowrap;
                    -ms-flex-wrap:          nowrap;
                        flex-wrap:          nowrap;
                -webkit-justify-content:    space-around;
                    -ms-flex-pack:          justify;
                        justify-content:    space-around;
                margin:                                             0.3em 0 0 0;
                padding:                                    0
        }
        ul li     {
                -webkit-flex:              1 1 0;
                    -ms-flex:              1 1 0;
                        flex:              1 1 0;

                -webkit-order:             1;
                    -ms-flex-order:        1;
                        order:             1;

                background-color:                   none;
                    border:                                         none;
                    color:                                          $color-menu-text;
                    font-family:                            $font-main-menu;
                    font-weight:                            400;
                    font-size:                              1.1em; 
                    margin:                                 0 0 .5ex;
                    text-transform:                         none;
                    text-align:                             center;
                    height:                                         30px;
                    line-height:                            30px;
                    list-style:                             none;
                    position:                                       relative;  //  needed for pseudo after to center

        }
        ul li.active-trail:after    {       //  caret indicator for active menu
                    content:                                        "";
                    border-color:                           transparent transparent $color-body-bg  transparent;
                    border-style:                           solid;
                    border-width:                           7px;
                    width:                                          auto;
                    height:                                         7px;
                    position:                                       absolute;
                    bottom:                                         -8px;
                    margin:                                         0 0 0 -5px;
                    left:                                           50%;
            }
            ul li a {
               color:                               inherit;
            }
            .l-region--navigation nav    ul li:hover a   {
               color:                                       darken($color-menu-text,20%);
            }

}

#block-system-user-menu {
        position:                                           absolute; 
            top:                                                    0;
            left:                                              -6%;

            ul li ul {
                    visibility:                             hidden;
            }

            &:hover {
                    ul li ul {
                            visibility:                     visible;
                    }
            }
}

/*
    .l-region--navigation nav    ul     {
       font-weight:                 100;
       display:                     inline-block;
       height:                              30px;
       font-size:                   1em;
       background-color:    none;
       border:                              none; 
       color:                       $color-menu-text;
       text-transform:              none;
       line-height:                 30px;
       margin:                              0;
    }
    .l-region--navigation nav   ul li {
       background-color:    none;
            display:                        inline-block;
            margin:                         .5ex 15px .5ex 15px;
            padding:                        2px 1.1em 0;
            font-family:            $font-body-text;
            font-weight:            normal;
       -webkit-border-radius: 6px;
       -moz-border-radius:  6px;
       -ms-border-radius:   6px;
       -o-border-radius:    6px;
       border-radius:               6px;   
    }

    .l-region--navigation nav   ul li:first-child {
            margin:                         .4ex 15px .4ex 4px;
    }
    .l-region--navigation nav   ul li:last-child {
            margin:                         .4ex 0 .4ex 10px;
    }
    .l-region--navigation nav    ul li:hover    {
       background-color:    none;
       color:                       $color-menu-text;
    }
    .l-region--navigation nav    ul li.active-trail:after    {
            content:"";
            border-color:   transparent transparent #f1f1f1  transparent;
            border-style:   solid;
            border-width:   5px;
            width:                  auto;
            height:                 5px;
            position:               absolute;
            bottom:            -5px;
            left:                   4.5em;
    }

    .l-region--navigation nav    ul li:nth-child(2).active-trail:after    {
            left:                   12.9em;
    }

    .l-region--navigation nav    ul li:nth-child(3).active-trail:after    {
            left:                   calc((100% / 1.2));
    }

    .l-region--navigation nav   ul li a {
       text-decoration:     none;
       color:               inherit;
    }
    */