.site-header {
    position: sticky;
    top: 0;
    height: var(--header-height);
    margin-bottom: calc(var(--header-height) * -1);
    border-bottom: 1px solid transparent;
    z-index: 90;
}

.site-header.scrolled-down {
    background-color: var(--wp--preset--color--cream);
    border-bottom: 1px solid var(--wp--preset--color--black);
    color: var(--wp--preset--color--black);
}

.site-header .site-logo {
    filter: brightness(0) invert(1);
    transition: filter 0.3s ease, transform 0.6s ease;
}

.site-header.scrolled-down .site-logo {
    filter: brightness(0) invert(0);
    transform: scale(0.75);
    transform-origin: center center;
}

/* Transparent header: white logo, links, and text on all pages. */
.site-header:not(.scrolled-down) {
    color: var(--wp--preset--color--white);
}

.site-header:not(.scrolled-down) :is(.wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container-open,
    .site-header--mobile-button,
    .wp-block-paragraph.has-white-color,
    .wp-block-paragraph.has-white-color a) {
    color: var(--wp--preset--color--white);
    text-decoration: none;
}

/* Raises specificity so these beat theme.css button rules. */
.site-header:not(.scrolled-down) .wp-block-button.is-style-outline--1 .wp-block-button__link,
.site-header:not(.scrolled-down) .wp-block-button.is-style-outline>.wp-block-button__link {
    color: var(--wp--preset--color--white);
    background-color: transparent;
    border-color: var(--wp--preset--color--white);
}

.site-header:not(.scrolled-down) .wp-block-button:not(.is-style-outline--1):not(.is-style-outline) .wp-block-button__link {
    color: var(--wp--preset--color--black);
    background-color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--white);
}

.site-header.scrolled-down :is(.wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container-open,
    .site-header--mobile-button,
    .wp-block-paragraph.has-white-color,
    .wp-block-paragraph.has-white-color a) {
    color: var(--wp--preset--color--black);
    text-decoration: none;
}

/* Mobile nav overlay keeps white text when open, even if header is scrolled. */
.site-header.scrolled-down .wp-block-navigation__responsive-container.is-menu-open {
    color: var(--wp--preset--color--white);
}

.site-header.scrolled-down .wp-block-navigation__responsive-container.is-menu-open :is(.wp-block-navigation-item__content,
    .wp-block-navigation-item a,
    .wp-block-navigation__responsive-container-close,
    .wp-block-paragraph.has-white-color,
    .wp-block-paragraph.has-white-color a) {
    color: var(--wp--preset--color--white);
    text-decoration: none;
}

.site-header.scrolled-down .wp-block-navigation__responsive-container.is-menu-open .mobile-overlay-logo {
    filter: brightness(0) invert(1);
}

.site-header.scrolled-down .wp-block-navigation__responsive-container.is-menu-open .wp-block-button.is-style-outline--1 .wp-block-button__link,
.site-header.scrolled-down .wp-block-navigation__responsive-container.is-menu-open .wp-block-button.is-style-outline>.wp-block-button__link {
    color: var(--wp--preset--color--white);
    background-color: transparent;
    border-color: var(--wp--preset--color--white);
}

.site-header.scrolled-down .wp-block-navigation__responsive-container.is-menu-open .wp-block-button:not(.is-style-outline--1):not(.is-style-outline) .wp-block-button__link {
    color: var(--wp--preset--color--black);
    background-color: var(--wp--preset--color--white);
    border-color: var(--wp--preset--color--white);
}

.site-header .wp-block-paragraph.has-white-color a:hover,
.site-header .wp-block-paragraph.has-white-color a:focus {
    text-decoration: none;
}

/* Core navigation defaults to a 600px responsive breakpoint; align with theme (782px). */
@media screen and (max-width: 781px) {
    .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: flex;
    }

    .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: none;
    }
}

@media screen and (min-width: 782px) {
    .site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
        display: none;
    }

    .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
        display: block;
        width: 100%;
        position: relative;
        z-index: auto;
        background-color: inherit;
    }

    .site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) .wp-block-navigation__responsive-container-close {
        display: none;
    }
}

@media screen and (max-width: 780px) {
    .site-header .site-header--call-buttons {
        display: none;
    }

    .site-header .site-logo img {
        height: 30px;
        width: auto;
    }

    .mobile-overlay-logo img {
        height: 30px;
        width: auto;
    }

    .site-header.scrolled-down .site-logo {
        transform-origin: left center;
        transform: scale(1);
    }
}

@media screen and (max-width: 480px) {
    .site-header {
        --header-height: 68px;
    }

    .site-header .site-header--call-buttons {
        display: none;
    }

    .site-header .site-logo img {
        height: 25px;
        width: auto;
    }

    .mobile-overlay-logo img {
        height: 25px;
        width: auto;
    }


    .site-header.scrolled-down .site-logo {
        transform-origin: left center;
        transform: scale(1);
        display: flex;
    }
}