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

header {
    --menu__color                     : var(--site__color-light);
    --menu__hover-color               : var(--site__color-page);

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

    background-color                  : var(--site__color-page);

    position                          : relative;
    top                               : 0;
    width                             : 100%;
    margin-inline                     : auto;

    z-index                           : 10;
    display                           : grid;
    grid-template-columns             : auto 1fr;
    grid-template-rows                : 100px;
    align-items                       : center;
    justify-content                   : start;
}

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

header nav {
    z-index                           : 10;
    color                             : var(--menu__color);
    background-color                  : var(--site__color-accent);

    position                          : absolute;
    text-align                        : right;
    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(--max-width);

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

        li {
            position                  : relative;
            color                     : var(--menu__color);
            background-color          : transparent;
            font                      : var(--fw-regular) 1.4rem/1.2 var(--ff-regular);
            margin                    : 0.5rem 0 0.5rem 3em;

            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(--site__color-accent);
    display                           : flex;
    position                          : absolute;
    top                               : 0;
    right                             : 1.5rem;
    height                            : 50%;
    align-items                       : center;
    cursor                            : pointer;

    span,
    span::before,
    span::after {
        display                       : block;
        background                    : var(--site__color-accent);
        height                        : 6px;
        width                         : 3rem;
        border-radius                 : 3px;
        position                      : relative;   
    }

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

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