/* DEFAULT */

:root {
    --header-height: 6.063rem;
}

body {
    margin-top: var(--header-height);
}

header {
    position: fixed;
    top: 0;
    z-index: 50;
    width: 100vw;
    background-color: var(--white);
    box-shadow: var(--shadow);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3.75rem;
    max-height: var(--header-height);
}

header .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 3.75rem;
    flex-grow: 2;
}

.header-logo-link img {
    width: 6.938rem;
    height: auto;
    transform: translateY(1.6rem);
}

header nav {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 100vh;
    padding-left: 2.313rem;
    background-color: var(--blue);
    transform: translateX(-100%);
    transition: transform var(--transition-time);
}

header nav.is-open {
    transform: translateX(0%);
}

.nav:has(nav.is-open):before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;
    width: 100vw;
    height: 100vh;
    background-color: var(--overlay-white);
}

header ul:not(.submenu) {
    width: 18rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: 5rem;
    list-style: none;
    padding-left: 0;
}

header ul.submenu {
    padding-left: 1rem;
}

header a,
header .menu-item {
    color: var(--white);
}

header .accordion-title {
    margin-bottom: .5rem;
}

header ul.submenu li {
    max-width: 11.5rem;
}

header ul.submenu li + li {
    margin-top: 0.313rem;
}

header ul.submenu a.menu-item {
    font-family: 'Montserrat';
    font-size: .813rem;
    line-height: .938rem;
    font-weight: 400;
}

header .menu-item:not(.cta) {
    display: inline-block;
    color: var(--white);
    font-family: "Brygada 1918", serif;
    font-weight: 700;
    font-size: var(--h3-size);
    line-height: var(--h3-line-height);
    width: 8.1rem;
}

header .menu-item.cta {
    font-family: "Montserrat", "Open Sans", sans-serif;
    font-weight: 700;
}

header .menu-item:not(.cta):before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    display: block;
    width: 0.125rem;
    background-color: var(--transparent);
    transition: background-color var(--transition-time);
}

header .menu-item:not(.cta).is-active,
header .menu-item:not(.cta):hover {
    position: relative;
    padding-left: 1rem;
}

header .menu-item:not(.cta).is-active:before,
header .menu-item:not(.cta):hover:before {
    background-color: var(--white);
}

.open-close-menu {
    background: none;
    border: none;
    cursor: pointer;
}

.open-close-menu svg {
    width: 1.875rem;
    height: 1.313rem;
}

.open-close-menu.close-menu {
    position: absolute;
    top: 1.813rem;
    right: 1.875rem;
}

.open-close-menu.close svg {
    width: 1.313rem;
    height: 1.313rem;
}

/* DESKTOP */
@media screen and (min-width: 64rem) {

    :root {
        --header-height: 4.375rem;
    }
    
    body {
        margin-top: var(--header-height);
    }

    .header-container {
        width: var(--header-width);
        max-width: var(--max-content-width);
    }

    .header-logo-link,
    .header-logo-link img {
        position: relative;
        width: 10.5rem;
        height: auto;
        align-self: flex-start;
    }

    .header-logo-link img {
        position: absolute;
        top: 0;
        width: 10.5rem;
        transform: none;
    }

    header nav {
        position: static;
        display: flex;
        height: var(--header-height);
        justify-content: space-between;
        padding-left: 0;
        background-color: transparent;
        flex-grow: 1;
        transform: translateX(0%);
        /* overflow: hidden; */
    }

    header ul {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin: 0;
        width: initial;
        flex: 1;
    }

    header .menu-item.cta {
        font-family: "Proxima nova", "Open Sans", sans-serif;
    }

    header .menu-item:not(.cta):hover {
        padding-left: 0;
    }

    header .menu-item:not(.cta):before {
        width: 0;
    }

    header ul:not(.submenu) {
        margin-top: 0;
        flex-direction: row;
    }

    header .accordion-title:after {
        top: .125rem;
        margin-left: .5rem;
        background-image: var(--dropdown-arrow-background-blue);
    }

    header .accordion-content {
        position: absolute;
        top: var(--header-height);
        margin-left: -4.063rem;
        background-color: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadow);
    }

    header ul.submenu {
        display: grid;
        grid-template-columns: auto auto auto;
        padding: 2.125rem 1.813rem 1.813rem 2.438rem;
        gap: .125rem 1rem;
        align-items: start;
    }

    header ul.submenu li,
    header ul.submenu li + li {
        list-style-type: none;
        margin-top: 0;
    }

    header a,
    header .menu-item {
        color: var(--blue);
    }

    header .menu-item:not(.cta) {
        color: var(--blue);
        display: inline;
        color: var(--blue);
        font-family: 'Proxima nova', 'Open Sans', sans-serif;
        font-weight: 400;
        font-size: var(--p-size);
        line-height: var(--p-line-height);
    }

    header .menu-item:not(.cta).is-active {
        padding-left: 0;
    }
}