header {
    --header-top-position: 1.875rem;

    inset-block-start: var(--header-top-position);
    inset-inline-start: 50vw;
    z-index: 1005;

    width: var(--content-width);
    max-width: var(--max-content-width);
    margin-inline: auto;

    transform: translateX(-50%);

    border-radius: calc(var(--header-height) / 2);
    box-shadow: var(--shadow);

    font-weight: 600;
}

.header--fixed ~ main,
.header--sticky ~ main {
    padding-top: unset;
}

.header--container {
    display: flex;
    align-items: center;

    padding-inline: 1.25rem;
}

.header--logo-link {
    margin-inline-end: auto;
}

.header--logo-link img {
    width: auto;
    max-height: calc(var(--header-height));
}

.header--close-nav,
.header--burger {
    width: 2.5rem;
    height: 2.5rem;

    background: none;
    border: none;
}

.header--burger path {
    stroke: var(--text);
    stroke-width: .225rem;
}

.header--buttons {
    display: flex;
    gap: 1.613rem;

    margin-inline-end: 1.613rem;
}

.header--modal {
    top: unset;
    left: unset;
    inset-block-start: calc(var(--header-top-position) * -1);
    inset-inline-start: calc(((100vw - var(--content-width)) / 2 * -1));

    padding-block: 1.875rem;

    transform: translateY(calc((100vh + var(--header-top-position)) * -1));
    overflow-x: clip;
}

.header--mobile-nav-head {
    display: flex;
    justify-content: space-between;
    align-items: center;

    padding-inline: 2rem;
}

.header--nav {
    display: flex;
    flex-direction: column;
    align-items: start;

    padding-inline: 2.375rem;
}

.header--component-wrapper-picture-picture-image__nav {
    height: auto;
    margin-block-start: .063rem;/* to prevent 1px of image to be seen below submenu */
}

.header--nav-links {
    gap: .937rem;

    margin-block-start: 0.937rem;
}

.header .header--accordion-title.rotate-arrow-180:after {
    transform: rotateX(0deg);
}

.header .header--accordion-title:after {
    --dropdown-arrow-background--text: url("data:image/svg+xml,%3Csvg width='7' height='12' viewBox='0 0 7 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 10.75L5.75 5.75L0.75 0.75' stroke='%2314267B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    transform: rotateX(180deg);
}

.header--nav-links li:not(:has(.component-cta)) {
    padding-block: .625rem;
    border-bottom: .063rem solid hsla(230, 72%, 28%, 0.2);
}

header .component-menu-item--link,
header .header--accordion-title {
    font-size: 1rem;
    font-weight: 600;
}

.header--nav-links li:has(.component-cta) + li:has(.component-cta) {
    margin-block-start: -.625rem;
}

.header--nav-subitems {
    display: flex;
    flex-direction: column;
    gap: .937rem;
}

@media screen and (min-width: 48rem) and (max-width: 64rem) {

    .header--close-nav.mobile-only {
        display: block;
    }
}

@media screen and (max-width: 64rem) {

    .header--accordion-content {
        padding-inline: 2.375rem;
    }

    .header--accordion-content:is(#hey, *) {
        --top-offset: calc(var(--header-height) + var(--header-top-position));
    
        position: fixed;
        inset-block-start: var(--top-offset);
        inset-inline-start: 0;

        height: calc(100vh - var(--top-offset));
        width: 100vw;
        max-height: unset !important;

        transform: translateX(100vw);
        background-color: var(--white);

        transition: transform var(--transition-time);
    }

    .header--accordion-content:is(#hey, *):not(.hidden) {
        transform: translateX(0);
    }

    header .close-current-accordion {
        display: block;

        line-height: 2.563rem;
    }
}

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

    header {
        --header-top-position: 0;

        display: flex;

        border-radius: 0 0 1.25rem 1.25rem;
    }

    .header--logo-link img {
        height: auto;
    }

    .header--modal {
        padding-block: 0;

        box-shadow: none;
        background: none;
    }

    .header--inner-container {
        display: flex;
        align-items: center;
    }

    .header--modal:not(.header--modal__desktop-only) .header--nav-links {
        flex-direction: row;
    }

    .header--mobile-nav-head {
        display: none;
    }

    .header--nav {
        padding-inline: 0;
    }

    .header--nav-links {
        margin-block-start: 0;
        margin-inline-start: 3rem;
    }

    .header--nav-links li:not(:has(.component-cta)) {
        border: none;
        text-align: center;
        text-wrap: balance;
    }

    .header--nav-item,
    header .component-menu-item--link,
    header .header--accordion-title {
        font-size: 0.813rem;
        text-align: center;
    }

    .header .header--accordion-title:after {
        --dropdown-arrow-background--text: url("data:image/svg+xml,%3Csvg width='12' height='7' viewBox='0 0 12 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 0.749999L5.75 5.75L10.75 0.75' stroke='%2314267B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");

        min-width: 1.2rem;
    }

    .headerNav--component-menu-item__item:has( > .component-cta) {
        display: flex;
        align-items: center;
    }

    header .component-cta {
        white-space: nowrap;
        font-size: .75rem;
        line-height: 2.5rem;
    }

    header li:has(.component-cta) + li .component-cta {
        --cta-bgcol: var(--orange);
    }

    header li:has(.component-cta) .component-cta:hover {
        color: var(--text);
    }

    header li:has(.component-cta) + li .component-cta:hover {
        color: var(--orange);
    }

    .header--nav-links li:has(.component-cta) + li:has(.component-cta) {
        margin-block-start: 0;
    }

    .header--accordion-content {
        inset-block-start: var(--header-height);
        padding: 0 .5rem;

        transform: translateX(-1.25rem);

        transition: max-height var(--transition-time), padding-top var(--transition-time), padding-block-end var(--transition-time);
    }

    .header--accordion-content:not(.hidden) {
        padding-block-end: .5rem;
    }

    .header--accordion-content:before {
        content: '';

        position: absolute;

        display: block;
        width: calc(100% - 1rem);
        height: .75rem;

        background-color: var(--white);
        box-shadow: none;
        transform: translateY(-.5rem);
    }

    .header--accordion-content-inner {
        background-color: var(--white);
        border-radius: 0 0 .75rem .75rem;
        box-shadow: var(--shadow);
    }

    .header--nav-subitems {
        gap: 0;
    }

    .header--nav-subitems > a {
        display: none;
    }

    .header--nav-subitems > li.component-menu-item {
        padding-inline: .75rem;
        text-align: left;
    }

}