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

header #wordmark {width: 8.3rem; overflow: visible;}
header #wordmark .wordmark_b-fill {
    fill: var(--c-gray);
    transition: fill 500ms;
}
body[data-template="home"] header #wordmark .wordmark_b-fill {fill: var(--c-trans);}



/* 
MOBILE
*/
/* Top */
#header_m-top {
    background: white;
    padding: var(--size);
    z-index: 10;
}
body[data-template="home"] #header_m-top {
    background: transparent;
    transition: background 500ms;
}

header #header_m-wordmark {bottom: calc(var(--size) - 4px);}
#header-mobile[data-status="open"] #header_m-wordmark #wordmark .wordmark_b-fill {fill: var(--c-gray);}

#header_m-menu-button {
    height: fit-content;
    padding-top: var(--size-s);
    margin-left: auto;
    color: var(--c-gray);
    transition: color 500ms;
}
body[data-template="home"] #header_m-menu-button {color: var(--c-trans);}
#header-mobile[data-status="open"] #header_m-menu-button {color: var(--c-gray);}


/* Menu */
#header_m-menu {padding-bottom: var(--size-x);}
#header-mobile[data-status="close"] #header_m-menu {transform: translateY(-100%);}

#header_m-menu-pages {row-gap: .5rem;}
#header_m-menu-pages li {opacity: 0;}

#header_m-menu-langs {
    opacity: 0;
    margin-top: var(--size-x);
    column-gap: .05em;
}



/* 
DESKTOP
*/
#header-desktop {background: white;}
body[data-template="home"] #header-desktop {
    background: transparent;
    transition: background 500ms;
}

header #header_d-wordmark {bottom: calc(var(--size) - 3px);}

#header_d-pages {
    bottom: calc(var(--size) - .05em);
    left: 50%;
    translate: -50%;
    column-gap: .5em;
}
#header_d-pages a {
    color: var(--c-gray);
    transition: color 500ms;
}
body[data-template="home"] #header_d-pages a {color: var(--c-trans);}


#header_d-langs {
    height: fit-content;
    margin-left: auto;
    row-gap: .1em;
}
body[data-template="home"] #header_d-langs a {
    color: var(--c-trans);
    opacity: .5;
}
body[data-template="home"] #header_d-langs a.--active {opacity: 1 !important;}
body:not([data-template="home"]) #header_d-langs a {color: var(--c-light);}
body:not([data-template="home"]) #header_d-langs a.--active {color: var(--c-gray);}

@media only screen and (min-width: 1096px) {
    #header_d-pages {column-gap: .75em;}
}

@media (hover: hover) {
    #header_d-pages a,
    #header_d-langs a {transition: opacity 250ms, color 250ms;}
    body[data-template="home"] #header_d-pages:hover a,
    body[data-template="home"] #header_d-langs:hover a {opacity: .5 !important;}
    body[data-template="home"] #header_d-pages a:hover,
    body[data-template="home"] #header_d-langs a:hover {opacity: 1 !important;}
    body:not([data-template="home"]) #header_d-pages:hover a,
    body:not([data-template="home"]) #header_d-langs:hover a {color: var(--c-light) !important;}
    body:not([data-template="home"]) #header_d-pages a:hover,
    body:not([data-template="home"]) #header_d-langs a:hover {color: var(--c-gray) !important;}
}

body:not([data-template="home"]) #header_m-menu-pages a,
body:not([data-template="home"]) #header_d-pages a {
    color: var(--c-light);
}

body:not([data-template="home"]) #header_m-menu-pages a.--active,
body:not([data-template="home"]) #header_d-pages a.--active {
    color: var(--c-gray) !important;
}