/* ==========================================================
   HEADER
========================================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 999999;

    padding: 0;
    overflow: visible;
    isolation: isolate;

    background: var(--surface-bg);
    color: var(--surface-text);

    box-shadow:
        0 8px 24px rgba(0, 0, 0, .12),
        0 2px 8px rgba(0, 0, 0, .08),
        inset 0 1px 0 rgba(255, 255, 255, .12);

    transition:
        background var(--transition-base),
        color var(--transition-base),
        box-shadow var(--transition-base);
}

body.admin-bar .site-header {
    top: 32px;
}

.wp-site-blocks {
    padding-top: var(--header-height);
}

/* ==========================================================
   HEADER INNER
========================================================== */

.header-inner {
    width: min(100% - 2rem, var(--container-content));
    margin-inline: auto;

    min-height: var(--header-height);

    display: grid !important;
    grid-template-columns: 72px 1fr 72px;
    align-items: center;
    gap: 1rem;

    transition:
        min-height var(--transition-base),
        grid-template-columns var(--transition-base);
}

.site-header.is-scrolled {
    box-shadow:
        0 14px 32px rgba(0, 0, 0, .18),
        0 4px 14px rgba(0, 0, 0, .12),
        inset 0 1px 0 rgba(255, 255, 255, .18);
}

.site-header.is-scrolled .header-inner {
    min-height: 56px;
    grid-template-columns: 72px 1fr;
}

/* ==========================================================
   BRAND
========================================================== */

.header-brand,
.main-navigation {
    display: flex;
    align-items: center;
    min-height: inherit;
}

.site-header .wp-block-site-logo,
.site-header .wp-block-site-logo a {
    line-height: 0;
}

.site-header .wp-block-site-logo a {
    width: 56px;
    height: 56px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    transition:
        transform var(--transition-base),
        box-shadow var(--transition-base);
}

.site-header .wp-block-site-logo img {
    width: 52px;
    height: auto;

    transition:
        width var(--transition-base),
        transform var(--transition-base);
}

.site-header.is-scrolled .wp-block-site-logo a {
    transform: translateY(8px);
}

.site-header.is-scrolled .wp-block-site-logo img {
    width: 52px;
    transform: none;
}

.site-header .wp-block-site-logo a:focus-visible,
.mobile-menu-toggle:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px var(--nav-focus-outline),
        0 0 0 6px color-mix(in srgb,
            var(--nav-focus-outline) 22%,
            transparent);
}

/* ==========================================================
   HEADER NAVIGATION LAYOUT
========================================================== */

.main-navigation {
    grid-column: 2;
    justify-self: center;

    height: 100%;

    transition:
        justify-self var(--transition-base);
}

.site-header .main-navigation {
    margin-block-start: 0 !important;
}

.site-header.is-scrolled .main-navigation {
    justify-self: end;
}

.main-navigation .wp-block-navigation {
    display: flex;
    align-items: center;

    gap: 2.25rem;
    margin: 0;
    min-height: inherit;
}

.site-header .wp-block-navigation-item {
    position: relative;
}

.site-header .wp-block-navigation-item__label {
    color: inherit;
}

/* ==========================================================
   HEADER NAVIGATION ITEMS
========================================================== */

.site-header .wp-block-navigation-item__content {
    position: relative;

    min-height: 44px;

    display: flex;
    align-items: center;

    padding: .45rem .85rem;

    border-radius: 999px;

    background: transparent;
    color: var(--surface-text);

    font-size: 1.15rem;
    font-weight: 800;
    text-transform: lowercase;
    letter-spacing: .01em;

    text-decoration: none;

    transition:
        background var(--transition-base),
        color var(--transition-base),
        box-shadow var(--transition-base),
        outline-color var(--transition-base);
}

.site-header .wp-block-navigation-item__content:hover {
    background: var(--nav-hover-bg);
    color: var(--nav-hover-text) !important;
}

.site-header .current-menu-item>.wp-block-navigation-item__content,
.site-header .current_page_item>.wp-block-navigation-item__content,
.site-header .current-menu-ancestor>.wp-block-navigation-item__content {
    background: var(--nav-active-bg);
    color: var(--nav-active-text) !important;
}

.site-header .current-menu-item>.wp-block-navigation-item__content:hover,
.site-header .current_page_item>.wp-block-navigation-item__content:hover,
.site-header .current-menu-ancestor>.wp-block-navigation-item__content:hover {
    background: var(--nav-active-bg);
    color: var(--nav-active-text) !important;
}

.site-header .wp-block-navigation-item__content:focus-visible {
    background: var(--nav-focus-bg);
    color: var(--nav-focus-text) !important;

    outline: 3px solid var(--nav-focus-outline);
    outline-offset: 4px;

    box-shadow:
        0 0 0 6px color-mix(in srgb,
            var(--nav-focus-outline) 22%,
            transparent);
}

.site-header .current-menu-item>.wp-block-navigation-item__content:focus-visible,
.site-header .current_page_item>.wp-block-navigation-item__content:focus-visible,
.site-header .current-menu-ancestor>.wp-block-navigation-item__content:focus-visible {
    background: var(--nav-focus-bg);
    color: var(--nav-focus-text) !important;
}

/* ==========================================================
   MOBILE INITIAL STATE
========================================================== */

.mobile-menu-toggle,
.mobile-menu-overlay {
    display: none;
}