/**
 * Legacy Header visual contract. Markup derives from the OJS 3.5.0.5
 * frontend Header and retains its navigation, authentication and URL APIs.
 */

.pkp_structure_head {
    position: sticky;
    inset-block-start: 0;
    z-index: 1000;
    background: var(--sukan-color-surface);
    border-block-end: 1px solid var(--sukan-color-border-subtle);
    box-shadow: 0 1px 3px rgba(44, 62, 80, 0.04);
}

.pkp_head_wrapper,
.sukan_header_inner {
    position: relative;
}

.sukan_header_inner {
    display: flex;
    align-items: center;
    min-block-size: 5rem;
    gap: 1.5rem;
}

.pkp_site_name_wrapper {
    position: static;
    flex: 0 0 auto;
    inline-size: auto;
    height: auto;
    margin: 0;
    padding: 0;
}

.pkp_site_name {
    position: static;
    margin: 0;
    padding: 0;
    overflow: visible;
    white-space: nowrap;
}

.pkp_site_name .is_text {
    display: inline-flex;
    align-items: baseline;
    gap: 0.625rem;
    padding: 0;
    color: var(--sukan-color-brand-surface);
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
}

.pkp_site_name .is_text:hover,
.pkp_site_name .is_text:focus {
    color: var(--sukan-color-brand-surface);
    text-decoration: none;
}

.sukan_brand_badge {
    color: var(--sukan-color-interactive);
    font-size: 1em;
}

.sukan_header_actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.75rem;
}

.pkp_site_nav_menu .sukan_header_submission {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 2.75rem;
    padding-inline: 1.5rem;
    color: #fff;
    background: var(--sukan-color-interactive);
    border: 1px solid var(--sukan-color-interactive);
    border-radius: var(--sukan-radius-small);
    font-size: 0.9375rem;
    font-weight: 500;
    text-decoration: none;
}

.pkp_site_nav_menu .sukan_header_submission:hover,
.pkp_site_nav_menu .sukan_header_submission:focus {
    color: #fff;
    background: var(--sukan-color-interactive-hover);
    border-color: var(--sukan-color-interactive-hover);
    text-decoration: none;
}

@media (min-width: 62.0625rem) {
    .sukan_header_inner {
        padding-inline: 2rem;
    }
}

@media (max-width: 62rem) {
    .sukan_header_inner {
        min-block-size: 4rem;
        padding-inline-end: 3.5rem;
    }

    .pkp_site_name .is_text {
        gap: 0.5rem;
        font-size: 1.125rem;
    }

    .sukan_brand_badge {
        font-size: 0.9375rem;
    }
}

@media (max-width: 24rem) {
    .sukan_brand_badge {
        display: none;
    }
}