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

:root {
    --menu__color                     : var(--site__color-light);
    --menu__selected-color            : var(--site__color-accent);
    --menu__hover-color               : var(--site__color-hilite);
    --menu__dropdown-background-color : var(--site__color-back);
    --menu__background-color          : transparent;
    --menu__border-color              : transparent;
    --menu__item-background-color     : transparent;
    --menu__case                      : none;
    --menu__font                      : 600 1.2rem/1.2 var(--ff-regular);
    --menu__menubar-height            : 56px;
}

header 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;

    margin-inline        : auto;

    menu {
        margin           : 0;
        padding          : 0;
        list-style       : none;
    }

    li {
        position         : relative;
        background-color : var(--menu__item-background-color);
        text-transform   : var(--menu__case);
        font             : var(--menu__font);
        margin           : 1em;

        border           : 2px solid transparent;
    }

    a {
        color            : inherit;
        text-decoration  : none;
        opacity          : 0;
        transition       : opacity 150ms ease-in-out;
        padding          : 0.5em;

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


header .nav-checkbox {
    display: none;

    &:checked ~ nav {
        transform: scale(1, 1);

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

header .nav-hamburger {
    color             : var(--menu__color);

    display           : flex;
    height            : calc(var(--menu__menubar-height) - 4px);
    position          : absolute;
    top               : 0;
    right             : 10px;
    margin-left       : 1em;
    height            : 100%;
    align-items       : center;
    justify-content   : end;
    cursor            : pointer;

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

    span::before,
    span::after {
        content       : '';
        position      : absolute;
        width         : 2.1em;
        left          : -0.3em;
    }

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

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

@media screen and (width > 768px) {

    header {
        justify-content        : center;
        justify-items          : center;

        --menu__selected-color : var(--site__color-accent);
        --menu__hover-color    : var(--site__color-hilite);
    }

    header .nav-hamburger {
        display                : none;
    }

    header nav {
        text-align             : unset;
        top                    : unset;
        left                   : unset;
        right                  : unset;

        transform              : unset;
        transform-origin       : unset;

        background-color       : var(--menu__color-background);

        menu {
            display            : flex;
            justify-content    : center;
            align-items        : center;

            li {
                margin         : 0;
                padding        : 0;

                a {
                    opacity    : 1;
                }
            }
        }
    }
}

/*
    header nav li:not(:last-child)::after {
        position: absolute;
        top: 0.05em;
        content: "";
        width: 2px;
        height: 1em;
        background-color: var(--menu__color); 
    }
*/