/*-----------------------------------------------------------------------*/
/*--  HEADER                                                           --*/
/*-----------------------------------------------------------------------*/

header {
    --menu__color                     : var(--site__light-color);
    --menu__dropdown-background-color : var(--site__dark-color);
    --menu__selected-color            : var(--site__accent-color);
    --menu__hover-color               : var(--site__hilite-color);
    --menu__background-color          : #162A2B; /*  #262626; var(--site__dark-color); */

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

    --menu__border-color              : transparent;
    --menu__item-background-color     : transparent;
    --menu__case                      : uppercase;
    --menu__menubar-height            : 50px;

    position                          : relative;
    top                               : 0;
    width                             : 100%;
    max-width                         : var(--std-width);
    margin-inline                     : auto;

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

    display                           : grid;
    grid-template-rows                : var(--menu__menubar-height);
    align-items                       : center;
    justify-content                   : start;
}

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

header nav {
    z-index                           : 1;
    color                             : var(--menu__color);
    background-color                  : var(--menu__dropdown-background-color);

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

    margin-inline                     : auto;
    max-width                         : var(--mid-width);

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

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

            border                    : 2px solid transparent;
            border-radius             : 100svh;

            & 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);
        padding                       : 1rem;

        & 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;
    cursor                            : pointer;

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

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

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

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

@media screen and (width > 768px) {

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

        --menu__selected-color        : var(--site__accent-color);
        --menu__hover-color           : var(--site__hilite-color);
    }

    header .nav-hamburger {
        display                       : none;
    }

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

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

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

        & menu {
            display                   : flex;
            justify-content           : start;

            & li {
                margin                : 0;
                padding               : 0;

                & a {
                    opacity           : 1;
                }
            }
        }
    }
}       

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

        --width                       : 2px;
        width                         : var(--width);*/
        /* margin-inline                 : calc(1em - var(--width) / 2); */
    /*}*/