header {
    top: 0;
    right: 0;
    left: 0;
    z-index: 200;
}


/* 
MOBILE
*/
#header_m-top {
    padding: var(--size) 1.5rem;
    height: var(--header_m-height);
    z-index: 20;
}

/* Button */
#header_m-button {
    width: 2.5rem;
    height: 1.25rem;
}

#header_m-button div {
    position: absolute;
    right: 0;
    left: 0;
    height: 2px;
    background: black;
    transition-duration: 1000ms;
}

#header_m-button div:nth-child(1) {top: 0;}
#header_m-button div:nth-child(2) {top: calc(.625rem - 1px);}
#header_m-button div:nth-child(3) {top: calc(1.25rem - 2px);}

header[data-status="open"] #header_m-button div:nth-child(1) {rotate: 45deg; translate: -4px 7px;}
header[data-status="open"] #header_m-button div:nth-child(2) {right: 100%;}
header[data-status="open"] #header_m-button div:nth-child(3) {rotate: -45deg; translate: -4px -6px;}




/* 
DESKTOP
*/
#header_d-top {
    height: var(--header_m-height);
    z-index: 20;
}

#header_d-pages {column-gap: var(--size);}

@media only screen and (min-width: 1096px) {
    #header_d-top {
        padding: 1.5rem 2.5rem;
        height: var(--header_d-height);
    }

    #header_d-pages {
        margin-top: 1px;
        column-gap: 2.25rem;
    }

    #header-download {padding: .75rem 3rem;}
}




/* 
LOGO
*/
#header-logo {
    top: var(--size);
    left: 50%;
    transform: translateX(-50%);
}

#header-logo img {height: var(--header_m-logo-height); width: auto;}

@media only screen and (min-width: 1096px) {
    #header-logo {top: 1.45rem;}
    #header-logo img {
        height: var(--header_d-logo-height);
    }
}




/* 
MENU
*/
#menu {
    padding-top: calc(var(--header_m-height) + var(--size));
    row-gap: var(--size-m);
    z-index: 10;
}
header[data-status="close"] #menu {transform: translateY(-100%);}

.menu-link {transition-duration: 250ms;}
.menu-link.--active {color: var(--c-red) !important;}

#menu-blog--entries[data-status="close"] {height: 0;}
#menu-blog--entries li:last-of-type a {margin-bottom: 1em;}

.menu-group li:last-of-type {margin-bottom: var(--size);}
.menu-group[data-status="hide"] {display: none !important;}

@media only screen and (min-width: 1096px) {
    #menu {
        top: 0;
        right: 0;
        left: 0;
        padding: calc(var(--header_d-height)) 2.5rem 0;
    }

    header[data-status="close"] #menu {transform: translateY(0);}
    
    .menu-group li:last-of-type {margin-bottom: 1.5rem;}
}

@media (hover: hover) {    
    .menu-link:hover {color: var(--c-red) !important;}
}