:root {
    --header-height: 76px;
    --header-shell-max-width: 1248px;
    --header-shell-gutter-desktop: 32px;
    --header-brand-slot: 188px;
    --header-actions-slot: 372px;
    --header-lang-slot: 156px;
    --header-logo-height: 60px;
    --header-nav-gap: 28px;
    --header-actions-gap: 12px;
    --header-nav-balance-shift: 0px;
}

.site-header-bar {
    width: 100%;
}

@media (min-width: 769px) {
    .site-header--en {
        --header-actions-slot: 372px;
        --header-logo-height: 60px;
        --header-nav-gap: 28px;
        --header-actions-gap: 12px;
    }

    .site-header--zh {
        --header-actions-slot: 296px;
        --header-logo-height: 54px;
        --header-nav-gap: 28px;
        --header-actions-gap: 10px;
    }

    .site-header--zh .site-header-brand-image {
        transform: translateY(-4px);
    }

    .site-header-shell {
        width: min(var(--header-shell-max-width), calc(100% - var(--header-shell-gutter-desktop)));
        min-height: var(--header-height);
        margin: 0 auto;
        display: grid;
        grid-template-columns: var(--header-brand-slot) minmax(0, 1fr) var(--header-actions-slot);
        align-items: center;
        column-gap: 24px;
    }

    .site-header-brand-slot,
    .site-header-actions-slot {
        min-width: 0;
        min-height: var(--header-height);
        display: flex;
        align-items: center;
    }

    .site-header-brand-link {
        display: flex;
        align-items: center;
        width: 100%;
        min-height: var(--header-height);
        text-decoration: none;
    }

    .site-header-brand-image {
        display: block;
        width: auto;
        max-width: 180px;
        height: var(--header-logo-height);
        object-fit: contain;
        object-position: left center;
    }

    .site-header-nav-slot {
        min-width: 0;
        min-height: var(--header-height);
        margin: 0;
        padding: 0;
        list-style: none;
        display: flex;
        align-items: center;
        justify-content: center;
        justify-self: center;
        gap: var(--header-nav-gap);
        width: max-content;
        max-width: 100%;
    }

    .site-header-nav-slot > * {
        margin: 0;
        padding: 0;
    }

    .site-header-nav-slot a {
        line-height: 1;
    }

    .site-header-actions-slot {
        justify-content: flex-end;
        gap: var(--header-actions-gap);
    }

    .site-header-actions-slot > * {
        margin: 0;
    }

    .site-header-actions-slot .lang-dropdown {
        margin: 0;
        flex: 0 0 var(--header-lang-slot);
        width: var(--header-lang-slot);
        align-self: center;
    }

    .site-header-actions-slot .lang-dropdown summary {
        margin: 0;
    }

    .site-header-actions-slot .btn,
    .site-header-actions-slot .btn-primary,
    .site-header-actions-slot .btn-outline {
        min-height: 44px;
        padding: 0 18px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        white-space: nowrap;
        align-self: center;
    }

    .site-header-actions-slot .lang-dropdown-trigger {
        min-height: 44px;
        padding: 0 15px;
        display: inline-flex;
        align-items: center;
        justify-content: space-between;
        line-height: 1;
        white-space: nowrap;
    }
}