/*
 * The legacy help pages have no shared design tokens. These local properties
 * mirror the current Telescope content-page header without importing its
 * global layout stylesheet.
 */
.site-header {
    --site-header-background: #fff;
    --site-header-border: #eee;
    --site-header-link: #999;
    --site-header-accent: #fea01a;
    --site-header-active: #fff;
    --site-header-block-size: 1.93237rem;
    --site-header-logo-size: 1.12721rem;
    --site-header-link-size: 2.41546rem;
    --site-header-link-height: .77295rem;
    --site-header-radius: 1.20773rem;
    --site-header-gap: .19324rem;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--site-header-gap);
    min-block-size: var(--site-header-block-size);
    padding-block: .24155rem;
    padding-inline: .38647rem;
    background: var(--site-header-background);
    border-block-end: .02415rem solid var(--site-header-border);
}

.site-header__brand {
    display: inline-flex;
    flex: 0 0 auto;
    inline-size: var(--site-header-logo-size);
    block-size: var(--site-header-logo-size);
}

.site-header__brand img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}

.site-header__nav {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--site-header-gap);
    min-inline-size: 0;
}

.site-header__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--site-header-link-size);
    min-block-size: var(--site-header-link-height);
    padding-inline: .28986rem;
    border: .02415rem solid transparent;
    border-radius: var(--site-header-radius);
    color: var(--site-header-link);
    font-size: .33816rem;
    line-height: 1;
    white-space: nowrap;
}

.site-header__link:hover {
    border-color: var(--site-header-accent);
    color: var(--site-header-accent);
}

.site-header__link:focus-visible {
    outline: .04831rem solid var(--site-header-accent);
    outline-offset: .04831rem;
}

.site-header__link[aria-current="page"] {
    border-color: var(--site-header-accent);
    background: var(--site-header-accent);
    color: var(--site-header-active);
    font-weight: 700;
}

@media screen and (max-width: 480px) {
    .site-header {
        --site-header-logo-size: .96618rem;
        --site-header-link-size: auto;
        --site-header-link-height: .72464rem;
        --site-header-gap: .08052rem;

        padding-inline: .19324rem;
    }

    .site-header__link {
        padding-inline: .16908rem;
        font-size: .28986rem;
    }
}