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

#header-bg {
    background: linear-gradient(0deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
    transition: opacity 500ms ease-in-out;
}
header.--transparent #header-bg {opacity: 0;}


header *:not(#header--bg) {z-index: 5;}

/* LOGO */
#header-logo img {
    width: auto;
    height: 2.25rem;
}


/* 
MENU
*/
#menu {
    min-height: calc(var(--vh) * 100);
    max-height: calc(var(--vh) * 100);
    z-index: 99;
}
#menu[data-status='close'] {transform: translateY(100%);}

#menu-pages {margin-bottom: var(--size-d);}
#menu-pages a:not(:last-of-type) {margin-bottom: .2em;}

#menu-lang a,
#menu-lang > span {opacity: .25;}
#menu-lang a.--active {opacity: 1;}
#menu-lang > span {margin: 0 .2em;}

body:not([data-template='home']) #header-menu a,
body:not([data-template='home']) #menu-pages a {opacity: var(--alpha);}

#header-menu a.--active,
#menu-pages a.--active {opacity: 1 !important;}


@media only screen and (min-width: 768px) {
    #header-menu {
        column-gap: var(--size-ss);
        height: fit-content;
    }
    
    #header-menu * {height: fit-content;}

    #header-langs a,
    #header-langs > span {opacity: var(--alpha);}
    #header-langs a.--active {opacity: 1;}
    #header-langs > span {margin: 0 .15em;}
}

@media (hover: hover) {
    #header-menu > a,
    #header-langs a {transition: 250ms ease-in-out;}

    #header-menu:hover > a,
    #header-langs:hover a {opacity: var(--alpha);}
    
    #header-menu > a:hover,
    #header-langs a:hover {opacity: 1 !important;}
}