header {
    top: 0;
    right: 0;
    left: 0;
    height: 3.5rem;
    z-index: 150;
}
body:not([data-template="landing"]) header {background: white;}

@media only screen and (min-width: 768px) {
    header {
        height: 3.4rem !important;
        padding: .7rem !important;
    }
}

@media only screen and (min-width: 1096px) {
    header {
        height: 4rem !important;
        padding: 1rem !important;
    }
}


#header-menu-button,
#header-contact {z-index: 5;}

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

#header-logo svg {
    width: auto;
    height: 1.5rem;
}
#header-logo path {fill: var(--c-black);}
body[data-template="landing"] #header-logo path {fill: white;}

@media only screen and (min-width: 768px) {
    #header-logo {
        grid-column: 1/2;
        transform: translate(0);
    }

    #header-logo svg {height: var(--size-m);}
}




/* PAGES AND CONTACT */
body[data-template="landing"] .header-link {color: white !important;}

@media only screen and (min-width: 768px) {
    /* PAGES */
    #header-pages {
        grid-column: 2/-2;
        column-gap: var(--size-l);
        z-index: 5;
    }

    #header-contact {
        grid-column: -2/-1;
        margin-left: auto;
    }
}

@media only screen and (min-width: 1096px) {
    #header-pages {
        grid-column: 5/-5;
        column-gap: var(--size-m);
    }
}

#header-contact {z-index: 5;}




/* 
MENU
*/
#menu {z-index: 200;}
#menu[data-status="close"] {transform: translateX(-100vw);}

#menu-close {right: var(--size);}

#menu-pages {
    margin-top: var(--size-m);
    row-gap: var(--size);
    z-index: 5;
}

#menu-pages li,
#menu-pages a {width: fit-content;}

#menu-footer {
    right: var(--size);
    bottom: var(--size);
    left: var(--size);
}






/* 
CONTACT
*/
#contact-section {z-index: 200;}
#contact-section[data-status="close"] {transform: translateX(100%);}

#contact_s-close {
    top: var(--size);
    right: var(--size);
}

#contact_s-container {row-gap: var(--size-m);}

.contact_s-group dt,
.contact_s-group dd {
    margin-bottom: var(--size-xs);
}

.contact_s-group a {width: fit-content;}

#contact_s-emails dd:not(:last-of-type),
#contact_s-offices dd:not(:last-of-type) {
    margin-bottom: var(--size-m);
}

@media only screen and (min-width: 768px) {
    #contact_s-container {
        margin: auto 0;
        row-gap: var(--size-l);
    }

    #contact_s-emails {grid-column: 1/4;}
    #contact_s-social {grid-column: 4/-1;}
    #contact_s-offices,
    #contact_s-offices dt {grid-column: 1/-1;}
    #contact_s-offices dd {grid-column: span 3;}
}

@media only screen and (min-width: 1096px) {
    #contact_s-emails {grid-column: 4/7;}
    #contact_s-social {grid-column: 7/-4;}
    #contact_s-offices {grid-column: 4/-4;}
    #contact_s-offices dd {grid-column: span 6;}
}

@media (hover: hover) {
    #header-pages a,
    #header-contact {transition: opacity 500ms}

    #header-pages:hover a,
    #header-contact:hover {opacity: .25;}
    
    #header-pages a:hover {opacity: 1;}
}