:where(.site-header) {
    --logo-color: var(--color-brand-corporate-blue);
    --arrow-dropdown: url('/wp-content/themes/inland-2025-theme/images/tip-open-arrow-blue.svg');

    padding-inline: var(--size-small);
    position: relative;
    z-index: 3;
    width: 100%;

    &.dark-blue {
        background: var(--color-brand-corporate-blue);
    }

    &.blue-gradient {
        background-image: var(--background-image-blue-gradient);
        background-size: cover;
        background-repeat: no-repeat;
    }

    &:where(.home) {
        padding-bottom: 4rem;
        --logo-color: var(--color-primary-white);
        --arrow-dropdown: url('/wp-content/themes/inland-2025-theme/images/tip-open-arrow.svg');
        z-index: 3;
    }


    :where(.header-wrapper) {
        width: 100%;
        display: grid;
        justify-content: space-between;
        grid-template-columns: auto 1fr;
        padding-block: 1rem 0;
        align-items: center;
        column-gap: 2rem;
    }

    :where(.nav-and-features) {
        display: grid;
        grid-template-areas: "utility-nav features" "main-nav main-nav";
        grid-template-columns: 1fr max-content;
        column-gap: 2rem;
        justify-items: end;
        align-items: center;
        height: 100%;
    }

    :where(.nav-and-features > .utility-nav-wrap) {
        grid-area: utility-nav;
    }

    :where(.nav-and-features > .features-wrap) {
        grid-area: features;
        display: grid;
        grid-auto-flow: column;
    }

    :where(.nav-and-features > .main-nav-wrap) {
        grid-area: main-nav;
    }
}

@media screen and (width <= 68em) {
    :where(.site-header) {
        padding-inline: var(--size-medium);
    }
}

@media screen and (width <= 1080px) {
    /* This is intentionally at 0,1,0 because a different file is also affecting this at this time */
    .site-header {
        :where(.utility-nav, .component-primary-navigation, .search-container) {
            display: none;
        }

        :where(.logo) {
            padding-top: 2rem;

        }

        .nav-and-features {
            display: flex;
            flex-flow: row;
            justify-content: flex-end;
        }
    }
}