@layer blocks {
    .header-wrapper {
        background-color: var(--header-background-color, var(--color-white));
        border-block-end: 1px solid rgb(from var(--color-black) r g b / 15%);
        position: sticky;
        top: 0;
        z-index: 2;

        & :where(.logo-link, .main-nav, .button-container) {
            transition: visibility var(--transition-time) allow-discrete;
        }

        &:has(.search-show) {
            & :where(.logo-link, .main-nav, .search-open, .button-container) {
                pointer-events: none;
                visibility: hidden;
            }
        }
    }

    .skip-to-content {
        --link-color: var(--color-black);

        display: block;
        block-size: 0;
        opacity: 0;
        overflow: hidden;
        text-align: center;
        transition: block-size var(--transition-time) ease-in-out,
            opacity var(--transition-time) ease-in-out,
            padding var(--transition-time) ease-in-out;

        &:focus-visible {
            box-shadow: 0 0 0 1px var(--color-black),
                inset 0 0 0 2px var(--color-teal),
                inset 0 0 0 4px var(--color-white);
            block-size: auto;
            padding: 15px 30px;
            opacity: 1;
            outline: none;
        }
    }

    .navbar-container {
        & .content-block {
            background-color: var(--color-gray-2);
            padding-block: var(--size-16);
            @media (width <= 48em) {
                padding: var(--size-16) var(--container-gutter, 0.9375rem);
                font-size: var(--size-10);
            }
        }
    }
}