/* *************************************************************************** */
/*   MENU NAVIGATION                                                           */
/* *************************************************************************** */
/*                                                                             */
header {
    --menu__color          : var(--site__color-light);
    --menu__color-back     : var(--site__color-page);

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

    --menu__font           : var(--fw-regular) 1.4rem/1.2 var(--ff-regular);

    --menu__border-color   : transparent;             
    --menu__item-bg-color  : transparent;
    --menu__case           : uppercase;
    --menu__menubar-height : 56px;

    display                : flex;
    justify-content        : center;

    height                 : var(--menu__menubar-height);
    background-color       : var(--menu__color-back);

    font                   : var(--menu__font);

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

    nav {
        color                  : var(--menu__color);
        background-color       : var(--menu__color-back);
        font                   : var(--menu__font);

        position               : absolute;
        text-align             : left;
        top                    : 100%; 
        right                  : 0; 
        opacity                : 1;
        transform              : scale(1, 0);
        transform-origin       : top;
        transition             : transform 200ms ease-in-out;

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

        li {
            color              : var(--menu__color);
            background-color   : var(--menu__item-bg-color);
            text-transform     : var(--menu__case);

            border             : 2px solid transparent;
            border-radius      : 9999px;
        }

        a {
            color              : inherit;
            opacity            : 0;
            transition         : opacity 150ms ease-in-out;
            padding            : 0.1rem;

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

header .nav-checkbox {
    display                : none;
}

    header .nav-checkbox:checked ~ nav {
        transform          : scale(1, 1);
        padding            : 1rem;
    }

        header .nav-checkbox:checked ~ nav 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;
}

    header .nav-hamburger span,
    header .nav-hamburger span::before,
    header .nav-hamburger span::after {
        background         : var(--menu__color);

        display            : block;
        height             : 2px;
        width              : 1.6em;
        border-radius      : 2px;
        position           : relative;
    }

        header .nav-hamburger span::before,
        header .nav-hamburger span::after {
            content        : '';
            position       : absolute;
        }

        header .nav-hamburger span::before {
            bottom         : 7px;
        }

        header .nav-hamburger span::after {
            top            : 7px;
        }

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

@media screen and (width > 768px) {

    header .nav-hamburger {
        display            : none;
    }

    header nav {
        position: unset;

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

        display            : flex;
        justify-content    : center;
        align-self         : center;

        ul {
            display        : flex;
        }

        li {
            margin-inline  : 1em;
        }

        a {
            opacity        : 1;
            padding        : 0;
        }

        li:not(:last-child)::after {
            content            : "";
            background-color   : var(--menu__color);
            position           : absolute;
            top                : 0.8em;
            width              : 1px;
            height             : 2em;
            margin-inline      : 1em 0;
        }
    }

}