@layer components {
    @scope (.site-header) {
        :scope {
            container-type: inline-size;
            inline-size: 100%;
            inset-block-start: 0;
            z-index: 999;
            display: flex;
            align-items: center;
            justify-content: space-between;
            block-size: clamp(4.9375rem, 4.12rem + 3.27cqi, 7.0625rem);
            padding-inline: clamp(1.5rem, 1.115rem + 1.538cqi, 2.5rem);
            background-color: var(--wp--custom--header--bg-color);
            box-shadow: 0 0.25rem 0.625rem rgba(34, 34, 34, 0.1);
        }

        .site-logo {
            display: flex;
            align-items: center;
            gap: 1rem;
        }

        .site-logo a {
            display: block;
        }

        .site-logo > a > img {
            display: block;
            inline-size: clamp(10.063rem, 8.456rem + 6.85vw, 14.625rem);
            block-size: auto;
        }

        .site-logo__ihoku {
            display: block;
            inline-size: clamp(9rem, 7.261rem + 7.42vw, 13.938rem);
            block-size: auto;
        }

        .header-cta {
            display: none;
        }

        @container (inline-size >= 1124px) {

            .header-cta {
                display: flex;
                align-items: center;
                gap: 1rem;
            }

            .header-cta__btn {
                display: inline-flex;
                align-items: center;
                justify-content: center;
                gap: 0.5rem;
                inline-size: 13.125rem;
                block-size: 3.375rem;
                border-radius: 100vmax;
                font-size: 1rem;
                font-weight: 700;
                text-decoration: none;
                line-height: 1;
                white-space: nowrap;
            }

            .header-cta__btn--phone {
                background-color: var(--wp--preset--color--base);
                color: var(--wp--custom--header--cta-phone-color);
                border: 1px solid var(--wp--custom--header--cta-phone-color);
            }

            .header-cta__btn--line {
                background-color: var(--wp--custom--header--cta-line-color);
                color: var(--wp--preset--color--base);
            }

            .header-cta__btn--map {
                background-color: var(--wp--custom--header--cta-map-color);
                color: var(--wp--preset--color--base);
            }

            .header-cta__btn svg,
            .header-cta__icon {
                flex-shrink: 0;
            }

            .header-cta__icon {
                inline-size: 1.5625rem;
                block-size: 1.375rem;
            }
        }
    }

    /* ======================================================
    //  MARK: PC Header (container-level changes)
    //  Container queries cannot style the container itself,
    //  so @media is used for the header's own position/bg.
    // ====================================================== */

    @media (max-width: 1023.98px) {
        .site-header {
            position: fixed;
        }
    }

    @media (min-width: 1024px) {
        .site-header {
            position: sticky;
            inset-block-start: 0;
            inset-inline: 0;
            background-color: var(--wp--preset--color--base);
            box-shadow: 0 0.125rem 0.625rem rgba(34, 34, 34, 0.05);
        }

        .admin-bar .site-header {
            inset-block-start: var(--wp--custom--header--admin-bar-block-size);
        }
    }

    /* ======================================================
    //  MARK: WordPress admin bar
    // ====================================================== */

    @media (min-width: 601px) {
        .admin-bar .site-header {
            inset-block-start: var(--wp--custom--header--admin-bar-block-size-mobile);
        }
    }

    @media (min-width: 783px) {
        .admin-bar .site-header {
            inset-block-start: var(--wp--custom--header--admin-bar-block-size);
        }
    }
}

/* ======================================================
//  MARK: WP global styles override (unlayered)
//  WordPress outputs unlayered inline styles for links:
//    a:where(:not(.wp-element-button)) { text-decoration: underline; }
//  Layered styles cannot override unlayered styles,
//  so these overrides must remain outside @layer.
// ====================================================== */

.site-header .header-cta__btn {
    text-decoration: none;
}

.site-header .header-cta__btn--phone {
    color: var(--wp--custom--header--cta-phone-color);
}

.site-header .header-cta__btn--line,
.site-header .header-cta__btn--map {
    color: var(--wp--preset--color--base);
}