/* === Header Layout === */

/* Center the menu contents against the full accent bar height. */
header .has-accent-background-color {
    display: flex;
    align-items: center;
}

header .has-accent-background-color > .wp-block-group {
    width: 100%;
    margin-block: 0 !important;
}

header .has-accent-background-color > .wp-block-group.is-layout-flex,
header .has-accent-background-color .wp-block-navigation {
    align-items: center;
}

.cta__button a.wp-block-button__link {
    margin-top: 0;
}

@media screen and (min-width: 600px) {
    header > .wp-block-group > .wp-block-group > .wp-block-columns {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1fr);
        align-items: center;
        column-gap: clamp(24px, 4vw, 64px);
    }

    header > .wp-block-group > .wp-block-group > .wp-block-columns > .wp-block-column {
        width: auto !important;
        flex-basis: auto !important;
    }

    header > .wp-block-group > .wp-block-group > .wp-block-columns > .wp-block-column:nth-child(2) {
        display: flex;
        justify-content: center;
    }

    header > .wp-block-group > .wp-block-group > .wp-block-columns .wp-block-search {
        width: min(100%, 520px);
    }

    header > .wp-block-group > .wp-block-group > .wp-block-columns > .wp-block-column:last-child {
        display: flex;
        justify-content: flex-end;
    }
}

@media screen and (max-width: 599px) {
    header .has-accent-background-color {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    header .has-accent-background-color > .wp-block-group {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    header .has-accent-background-color > .wp-block-group.alignwide {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* Give the search field clear separation from the logo. */
    header > .wp-block-group > .wp-block-group > .wp-block-columns {
        flex-direction: column;
        align-items: stretch;
        row-gap: 14px;
    }

    header > .wp-block-group > .wp-block-group > .wp-block-columns > .wp-block-column {
        flex-basis: auto !important;
        width: 100%;
    }

    header > .wp-block-group > .wp-block-group > .wp-block-columns > .wp-block-column:first-child {
        display: flex;
        justify-content: center;
    }

    header > .wp-block-group > .wp-block-group > .wp-block-columns .wp-block-search {
        width: 100%;
    }

    /* Make the mobile CTA a centered, comfortable action target. */
    header .has-accent-background-color > .wp-block-group.is-layout-flex {
        justify-content: space-between;
        position: relative;
    }

    header .has-accent-background-color > .wp-block-group.is-layout-flex > .wp-block-template-part {
        width: 180px;
        margin: 0 !important;
    }

    header .has-accent-background-color > .wp-block-group.is-layout-flex .cta__button {
        width: 180px;
        padding: 0 !important;
        margin: 0 !important;
    }

    header .has-accent-background-color > .wp-block-group.is-layout-flex .wp-block-button {
        width: 100%;
    }

    header .has-accent-background-color > .wp-block-group.is-layout-flex .wp-block-button__link {
        width: 180px;
        min-height: 48px;
        margin: 0 !important;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    header .has-accent-background-color > .wp-block-group.is-layout-flex .wp-block-navigation {
        position: absolute;
        right: 0;
    }
}