/*-----------------------------------------------------------------------*/
/*--  MENU NAVIGATION                                                  --*/
/*-----------------------------------------------------------------------*/

#nav-menuitem-logo {
    display: none;
}

header {

    --menu__font-family               : var(--ff-condensed);

	--menu__color                     : var(--site__color-light);          
	--menu__selected-color            : var(--site__color-hilite);          
	--menu__hover-color               : var(--site__color-hilite);             
	--menu__border-color              : transparent;
	--menu__item-background-color     : transparent;
    --menu__case                      : none;
    --menu__font-size                 : 1.4rem;
    --menu__menubar-height            : 90px;

	--menu__menubar-background-color  : transparent;             
	--menu__dropdown-background-color : var(--site__color-accent);

    font                              : 400 var(--menu__font-size) var(--menu__font-family);

    display                           : grid;
    grid-template-rows                : var(--menu__menubar-height);
    align-items                       : center;
    justify-items                     : center;
    background-color                  : var(--menu__menubar-background-color);

    padding                           : 0;

    nav {
        position: absolute;
        text-align: left;
        top: 100%; 
        right: 0; 
        color: var(--menu__color);
        background-color: var(--menu__dropdown-background-color);
        opacity: 1;
        transform: scale(1, 0);
        transform-origin: top;
        transition: transform 200ms ease-in-out;

        menu,
        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            z-index : 99;
        }

        li {
            background-color: var(--menu__item-background-color);
            padding: 0.5rem;
            border: 2px solid transparent;
            border-radius: 9999px;
            text-transform:  var(--menu__case);
        }

        a {
            color: var(--menu__color);
            text-decoration: none;
            opacity: 0;
            transition: opacity 150ms ease-in-out;

            &:hover {
                color: var(--menu__hover-color);
            }
        }

    }

    .nav-checkbox { display: none; }

    .nav-checkbox:checked ~ nav {
        transform: scale(1, 1);

        a {
            opacity: 1;
            transition: opacity 250ms ease-in-out 100ms;
        }
    }

    .nav-hamburger {
        display: flex;
        height: 100%;
        position: absolute;
        top: 0;
        right: 10px;
        margin-left: 1em;
        color: var(--menu__color);
        align-items: center;

        span,
        span::before,
        span::after {
            display: block;
            background: var(--menu__color);
            height: 2px;
            width: 1.6em;
            border-radius: 2px;
            position: relative;
        }

        span::before,
        span::after {
            content: '';
            position: absolute;
        }

        span::before { bottom: 7px; }
        span::after  { top: 7px;    }
    }
    
}

/****************************************/
/****************  WIDE  ****************/
/****************************************/

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

    #nav-menuitem-logo {
        display: block;
    }

    header .nav-hamburger {
        display: none;
    }

    header {
        padding: 1rem;

        nav {

            background-color: var(--menu__menubar-background-color);
            margin: 0 auto;

            text-align      : unset;
            top             : unset;
            left            : unset;
            right           : unset; 
            transform       : unset;
            transform-origin: unset;

            ul {
                display        : flex;
                flex           : 1 1 100%;
                justify-content: center;
                justify-items  : center;
                align-items    : start;
            }

            li {
                margin : 0 0.1rem;
                padding: 0.2rem 0.5rem 0 0.5rem;
            }

            a {
                opacity: 1;
            }
        }
    }
}