/* ==========================================================
   Global Header / Feature Art
   ========================================================== */

.header-wrapper {
    position: relative;
    width: 100%;
    max-width: 1920px;
    margin: 0 auto;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 3;
    display: flex;
    align-items: stretch;
    container-type: inline-size;
}

.header-wrapper .block-left-margin {
    width: 50px;
    min-width: 50px;
    max-width: 50px;
    flex: 0 0 50px;
}

.header-wrapper .block-right-margin {
    width: calc(50px - var(--scrollbar-width, 0px));
    min-width: calc(50px - var(--scrollbar-width, 0px));
    max-width: calc(50px - var(--scrollbar-width, 0px));
    flex: 0 0 calc(50px - var(--scrollbar-width, 0px));
}

@container (min-width: 1920px) {
    .header-wrapper .block-right-margin {
        width: 50px;
        min-width: 50px;
        max-width: 50px;
        flex: 0 0 50px;
    }
}

.header-inner {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    align-items: stretch;
    position: relative;
    padding: 0;
    min-width: 0;
}

.header-spacer-blue {
    flex: 1 1 182px;
    max-width: 182px;
    min-width: 182px;
}

.header-group {
    display: flex;
    width: 728px;
    min-width: 728px;
    max-width: 728px;
    flex: 0 0 728px;
    position: relative;
}

.header-content {
    --header-py: max(80px, 4rem);
    width: 546px;
    min-width: 546px;
    max-width: 546px;
    flex: 0 0 546px;
    position: relative;
    padding-top: calc(var(--header-py) + 40px);
    padding-bottom: var(--header-py);
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 2;
    box-sizing: border-box;
}

.header-top-eyebrow {
    font-family: SubHeaderFont, sans-serif;
    font-size: calc(var(--main-font-size) * 1.5 * var(--main-lh));
    line-height: var(--main-lh);
    color: #ffffff;
    margin: 0;
    display: block;
}

.header-top-eyebrow-large {
    font-family: SubHeaderFont, sans-serif;
    font-size: var(--header-font-size);
    line-height: var(--main-lh);
    color: #ffffff;
    margin: 0;
    display: block;
}

.header-main-title {
    font-family: HeaderFont, sans-serif;
    font-size: var(--header-font-size);
    line-height: 0.9;
    color: #ffffff;
    margin: 0 0 1.25rem 0;
    font-weight: normal;
    display: block;
}

.header-subhead {
    font-family: SubHeaderFont, sans-serif;
    font-size: calc(var(--main-font-size) * 0.75);
    letter-spacing: 0.05em;
    color: #b6c4c0;
    margin: 0;
}

.header-whitespace {
    width: 182px;
    min-width: 182px;
    max-width: 182px;
    flex: 0 0 182px;
}

/* Container Breakpoints */
@container (max-width: 1374px) {
    .header-spacer-blue {
        display: none;
    }
    .header-group {
        width: 100%;
        min-width: 0;
        max-width: 546px;
    }
    .header-whitespace {
        display: none;
    }
}

@container (max-width: 646px) {
    .header-content {
        width: 100%;
        min-width: 0;
        max-width: none;
        padding-left: 0;
        padding-right: 0;
    }
}

@media screen and (max-width: 576px) {
    .header-wrapper .block-left-margin {
        width: clamp(20px, calc(11.72vw - 17.5px), 50px);
        min-width: clamp(20px, calc(11.72vw - 17.5px), 50px);
        max-width: clamp(20px, calc(11.72vw - 17.5px), 50px);
        flex: 0 0 clamp(20px, calc(11.72vw - 17.5px), 50px);
    }

    .header-wrapper .block-right-margin {
        width: calc(clamp(20px, calc(11.72vw - 17.5px), 50px) - (100vw - 100cqw));
        min-width: calc(clamp(20px, calc(11.72vw - 17.5px), 50px) - (100vw - 100cqw));
        max-width: calc(clamp(20px, calc(11.72vw - 17.5px), 50px) - (100vw - 100cqw));
        flex: 0 0 calc(clamp(20px, calc(11.72vw - 17.5px), 50px) - (100vw - 100cqw));
    }

    /* Reduces vertical padding on small screens */
    .header-content {
        --header-py: max(50px, 2.5rem);
    }
}