/* Header */

header.wp-block-template-part {
    position: sticky;
    left: 0;
    top: calc(0px + var(--wp-admin--admin-bar--height, 0px));
    width: 100%;
    z-index: 101;
}

header.wp-block-template-part:has(.header-wrapper--transparent) {
    position: fixed;
}

.header-wrapper > .header-contents {
    background-color: var(--wp--preset--color--base);
    border-radius: 5px;
    transition: background-color 0.3s ease-out, color 0.3s ease;
}

/* Header logo */

.header-logo {
    transform: translateX( calc( var(--wp--preset--spacing--40) * -1 ) );
    transition: transform 0.25s ease-out;
}

[data-has-scrolled=true] .header-logo,
header.wp-block-template-part:has(.menu-item > a:focus) .header-logo,
header.wp-block-template-part:has(.wp-block-menu[data-location=header]:hover) .header-logo {
    transform: translateX(0);
}

/* Header scroll */

body:not([data-has-scrolled="true"]) .header-wrapper--transparent:not(:has(.wp-block-menu[data-location="header"]:hover, .wp-block-menu[data-location="header"]:focus-within)) > .header-contents {
    background-color: transparent;
}

body:not([data-has-scrolled="true"]) .header-content--light:not(:has(.wp-block-menu[data-location="header"]:hover, .wp-block-menu[data-location="header"]:focus-within)) > .header-contents {
    color: var(--wp--preset--color--base);
}

body:not([data-has-scrolled="true"]) .header-content--light:not(:has(.wp-block-menu[data-location="header"]:hover, .wp-block-menu[data-location="header"]:focus-within)) .header-logo img {
    filter: brightness(0) invert(1);
}

body:not([data-has-scrolled="true"]) .header-content--light:not(:has(.wp-block-menu[data-location="header"]:hover, .wp-block-menu[data-location="header"]:focus-within)) .wp-block-button__link {
    background-color: var(--wp--preset--color--base);
    color: var(--wp--preset--color--primary);
}

body:not([data-has-scrolled="true"]) .header-content--light:not(:has(.wp-block-menu[data-location="header"]:hover, .wp-block-menu[data-location="header"]:focus-within)) .wp-block-button__link:hover {
    color: var(--wp--preset--color--base) !important;
    background-color: transparent;
}

body:not([data-has-scrolled="true"]) .header-content--light:not(:has(.wp-block-menu[data-location="header"]:hover, .wp-block-menu[data-location="header"]:focus-within)) .wp-block-button__link:active {
    color: var(--wp--preset--color--primary) !important;
}

body:not([data-has-scrolled="true"]) .header-content--light:not(:has(.wp-block-menu[data-location="header"]:hover, .wp-block-menu[data-location="header"]:focus-within)) {
    & .wp-block-menu[data-location="header"] > .menu > .current-menu-item > a,
    & .wp-block-menu[data-location="header"] > .menu > .current-menu-ancestor > a {
        color: var(--wp--preset--color--primary-light);
    }
}

/* header search bar styles */

.header-wrapper .wp-block-search .wp-block-search__inside-wrapper {
    border-color: var(--wp--preset--color--neutral-light);
    background-color: transparent;
    border-radius: 5px;
}

.header-wrapper .wp-block-search .wp-block-search__inside-wrapper:has(.wp-block-search__input:focus) {
    outline: auto;
    outline-width: 2px;
}

.header-wrapper .wp-block-search .wp-block-search__input {
    background-color: transparent;
    color: inherit;
    order: 2;
}

.header-wrapper .wp-block-search .wp-block-search__input::placeholder {
    color: inherit;
    opacity: 0.6;
}

.header-wrapper .wp-block-search .wp-block-search__input::-webkit-search-cancel-button {
    filter: brightness(0);
}

.header-wrapper .wp-block-search .wp-block-search__button {
    padding: 0;
    background-color: transparent;
    order: 1;
    margin: 0;
    color: inherit;
}

.header-wrapper .wp-block-search .wp-block-search__button:hover,
.header-wrapper .wp-block-search .wp-block-search__button:focus {
    color: var(--wp--preset--color--primary);
}
.header-wrapper .wp-block-search .wp-block-search__button:active {
    background-color: var(--wp--preset--color--primary-light);
    color: var(--wp--preset--color--contrast) !important;
}

body:not([data-has-scrolled="true"]) .header-content--light .wp-block-search .wp-block-search__input::-webkit-search-cancel-button {
    filter: brightness(0) invert(1);
}

body:not([data-has-scrolled="true"]) .header-content--light .wp-block-search .wp-block-search__button:hover,
body:not([data-has-scrolled="true"]) .header-content--light .wp-block-search .wp-block-search__button:focus {
    color: var(--wp--preset--color--primary-light);
}