.site-header {
    container: site-header / inline-size;

    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    margin-inline: auto;
    width: 100%;
    transition-property: background-color, box-shadow, color;
    transition-duration: var(--transition--duration);
    transition-timing-function: var(--transition--timing-function);

    .logo {
        color: var(--wp--preset--color--contrast);
        font-family: var(--wp--preset--font-family--title);
        letter-spacing: 0.3rem;
        text-transform: uppercase;

        svg {
            width: 50px;

            path {
                transition-property: fill;
                transition-duration: var(--transition--duration);
                transition-timing-function: var(--transition--timing-function);
            }
        }
    }

    .wp-block-navigation-item__content {
        line-height: 2.8125rem;
    }

    .wp-element-button {
        padding: 10px 40px !important;
    }

    > .wp-block-group {
        padding-block: var(--wp--preset--spacing--20);
    }

    .wp-block-navigation-item__content {
        transition-property: background-color, box-shadow, color;
        transition-duration: var(--transition--duration);
        transition-timing-function: var(--transition--timing-function);

        .current-menu-item &,
        &:hover {
            color: var(--wp--preset--color--accent-1) !important;
        }
    }

    > .wp-block-group {
        max-width: var(--wp--style--global--wide-size);
        margin-inline: auto;
        transition-property: padding;
        transition-duration: 200ms;
        transition-timing-function: linear;
    }
}


/*:not(:has(.page-hero)) .site-header {*/
/*    /*transition-delay: var(--transition--duration);*/*/
/*    background-color: var(--wp--preset--color--background);*/
/*}*/

body:not(.scrolling) {
    :has(.page-hero) .site-header {
        .wp-element-button {
            color: var(--wp--preset--color--accent-2);
            background-color: var(--wp--preset--color--accent-6);

            &:hover {
                color: var(--wp--preset--color--accent-6);
                background-color: var(--wp--preset--color--accent-2);
            }
        }

        .logo .title {
            color: var(--wp--preset--color--accent-4);
        }

        .cart-icon svg :where(path, rect) {
            fill: var(--wp--preset--color--accent-6) !important;
        }

        .wp-block-navigation__responsive-container-open svg rect {
            fill: var(--wp--preset--color--accent-6);
        }
    }
}

.scrolling .site-header {
    box-shadow: var(--box-shadow-bottom);
    background-color: var(--wp--preset--color--sage-green-2);

    .logo {
        color: var(--wp--preset--color--deep-forest-green);
    }

    .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content {
        color: var(--wp--preset--color--deep-forest-green);
    }

    svg {
        path {
            fill: var(--wp--preset--color--deep-forest-green) !important;
        }
    }

    > .wp-block-group { padding-block: 10px }
}

.wp-block-navigation__responsive-container-open svg {
    width: 33px;
    height: 18px;
}

.wp-block-navigation__responsive-container-close svg {
    width: 24px;
    height: 24px;
}

@media (max-width: 768px) {
    .site-header {
        padding-inline: var(--wp--preset--spacing--20);

        .wp-block-navigation + .wp-block-group {
            display: none;
        }

        .wp-block-navigation {
            gap: 5px !important;
        }
    }

    .has-modal-open .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content {
        --navigation-layout-justification-setting: left;
        --navigation-layout-justify: left;
        text-align: left;
    }

    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        .wp-block-navigation-item,
        .wp-block-navigation__container,
        .wp-block-page-list {
            --navigation-layout-justification-setting: left;
            --navigation-layout-justify: left;
            text-align: left;
        }
    }
}

@media (min-width: 769px){
    .site-header { padding-inline: var(--wp--preset--spacing--60) }

    body:not(.scrolling) .site-header > .wp-block-group { padding-block: var(--wp--preset--spacing--50) var(--wp--preset--spacing--30) }
}

@media (min-width: 769px) and (max-width: 1280px) {
    .site-header {
        .has-modal-open .wp-block-navigation__responsive-close .wp-block-navigation__responsive-container-content {
            --navigation-layout-justification-setting: center;
            --navigation-layout-justify: center;
            text-align: center;
        }

        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
            .wp-block-navigation-item,
            .wp-block-navigation__container,
            .wp-block-page-list {
                --navigation-layout-justification-setting: center;
                --navigation-layout-justify: center;
                text-align: center;
            }
        }
    }
}

@media (max-width: 1280px) {
    .site-header {
        .wp-block-navigation {
            order: 3;

            &:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
                background-color: var(--wp--preset--color--accent-1);
            }
        }

        .wp-block-navigation__responsive-container-open:not(.always-shown) {
            display: flex;
        }

        .wp-block-navigation__responsive-container {
            display: flex;
            visibility: hidden;
            opacity: 0;
            pointer-events: none;

            &:not(.is-menu-open) {
                bottom: 0;
                left: 0;
                position: fixed;
                right: 0;
                top: 0;
            }

            &:not(.hidden-by-default):not(.is-menu-open) {
                display: flex;
            }

            .wp-block-navigation__responsive-container-close,
            .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
                opacity: 0;
                translate: 0 100px;
                transition-property: opacity, translate;
                transition-timing-function: var(--timing-function--ease-out-quint);
            }

            &.is-menu-open {
                opacity: 1;
                visibility: visible;
                pointer-events: all;
                animation: none;
                transition-property: opacity;
                transition-duration: var(--transition--duration);
                transition-timing-function: var(--transition--timing-function);

                .wp-block-navigation__responsive-container-close,
                .wp-block-navigation__responsive-container-content .wp-block-navigation-item {
                    opacity: 1;
                    translate: 0 0;
                    transition-duration: 1200ms;
                }

                .wp-block-navigation-item {
                    &:nth-child(0) { transition-delay: 300ms }
                    &:nth-child(1) { transition-delay: 400ms }
                    &:nth-child(2) { transition-delay: 500ms }
                    &:nth-child(3) { transition-delay: 600ms }
                    &:nth-child(4) { transition-delay: 700ms }
                    &:nth-child(5) { transition-delay: 800ms }
                    &:nth-child(6) { transition-delay: 900ms }
                    &:nth-child(7) { transition-delay: 1000ms }
                    &:nth-child(8) { transition-delay: 1100ms }
                }
            }
        }

        .wp-block-navigation__container {
            align-items: start;
        }

        .has-modal-open .wp-block-navigation__responsive-close {
            background-color: #ffffff;
            border-radius: var(--wp--custom--border-radius--block);
            padding: 40px;
            height: 100%;

            .wp-block-navigation-item__content {
                font-size: 30px;
                line-height: 45px;
                font-weight: 700;
                text-align: left;
            }
        }
    }
}

@media (min-width: 1281px) {
    .site-header {
        gap: min(3.7cqi, var(--wp--preset--spacing--60)) !important;

        > .wp-block-group {
            gap: inherit !important;
        }

        .wp-block-navigation {
            gap: inherit !important;
        }

        .wp-block-navigation + .wp-block-group {
            gap: min(3.9cqi, var(--wp--preset--spacing--30)) !important;
        }
    }

    body:not(.scrolling) {
        :has(.page-hero) .site-header {
            .wp-block-navigation-item__content {
                color: var(--wp--preset--color--accent-6);
            }
        }
    }
}