/* 
MOBILE 
*/
header {
    right: 0;
    left: 0;
    transition: background 250ms !important;
    z-index: 200;
}
body:not([data-template="home"]) header {top: 0;}
body[data-template="home"] header {top: 50dvh; transform: translateY(-50%);}

body[data-template="work"] header {background: white;}
header.--tran {background: transparent !important;}

#header_m-logo {
    width: var(--size-xxl);
    z-index: 10;
}
#header_m-logo svg {
    width: 100%;
    height: auto;
}

#header_m-logo.--white path {fill: white;}
#header_m-logo path {transition: fill 1000ms;}

#header_m-active_page {
    top: 50%;
    left: 1rem;
    width: calc(calc(100vw - 196px - calc(4 * 14px)) / 2);
    transform: translateY(-10px);
    background: var(--c-red);
    padding: 2px 2px 0 0;
    z-index: 10;
}

#header_m-button_on {
    top: 50%;
    right: 1rem;
    width: calc(calc(100vw - 196px - calc(4 * 14px)) / 2);
    transform: translateY(-8px);
    z-index: 10;
}


#header_m-menu {
    top: -2rem;
    right: var(--size);
    left: var(--size);
    height: 8rem;
    z-index: 5;
}

.header_m-menu-link {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

#header_m-work {
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

#header_m-info,
#header_m-menu-button_on {
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

#header_m-menu-button_off {
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    background: var(--c-red);
}

#header_m-contact {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

#header_m-rental {
    bottom: -3rem;
    left: 50%;
    transform: translateX(-50%);
}

body[data-template="home"] #header_m-menu-button_on,
body[data-template="home"] #header_m-contact {opacity: 1; visibility: visible;}

#header_m-menu[data-status="show"] #header_m-work,
#header_m-menu[data-status="show"] #header_m-info,
#header_m-menu[data-status="show"] #header_m-menu-button_off,
#header_m-menu[data-status="show"] #header_m-contact,
#header_m-menu[data-status="show"] #header_m-rental {opacity: 1; visibility: visible;}

#header_m-menu[data-status="show"]  #header_m-menu-button_on {opacity: 0; visibility: hidden;}


#header_m-overlay {z-index: 190;}
#header_m-overlay[data-status="hide"] {opacity: 0; visibility: hidden;}




/* 
DESKTOP
*/
@media only screen and (min-width: 768px) {
    body[data-template="about"] header {
        top: 50dvh;
        transform: translateY(-50%);
    }
}

#header-desktop {
    column-gap: 18rem;
    padding: 2rem var(--size);
}

#header-desktop > nav {width: 100%;}

#header_d-logo {
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: fit-content;
    height: 1.75rem;
}

#header_d-logo svg {
    width: auto;
    height: 100%;
    fill: white;
}
body[data-template="work"] #header_d-logo svg {fill: black;}

#header-desktop nav a,
#header-desktop nav button {width: var(--size-l);}

#header-desktop nav a.--active {
    background: var(--c-red);
    color: white !important;
}

@media only screen and (min-width: 768px) {
    #header-desktop>nav {column-gap: var(--size);}
    
    body[data-template="about"] header {top: 50dvh; transform: translateY(-50%);}
}

@media only screen and (min-width: 1096px) {
    #header-desktop {column-gap: 24rem;}

        #header-desktop nav a,
        #header-desktop nav button {
            width: var(--size-xl);
        }
}

@media (hover: hover) {
    #header-desktop nav a:hover,
    #header-desktop nav button:hover {
        background: var(--c-red) !important;
        color: white !important;
    }
}