/*
|--------------------------------------------------------------------------
| Upgrade 014 Header / Categories / Article Polish
|--------------------------------------------------------------------------
*/

/* Header spacing and centred search */
.docs-navbar {
    min-height: 58px;
}

.docs-navbar .navbar-brand {
    min-width: 205px;
}

.nav-search-centered {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(420px, 34vw);
}

.nav-search input {
    height: 42px;
    border-radius: 999px;
}

.nav-command-btn {
    padding: 9px 13px;
}

.user-pill {
    padding: 9px 14px !important;
}

/* Less bulky action dropdown */
.article-menu-dropdown {
    min-width: 165px;
    padding: 6px;
    border-radius: 14px;
}

.article-menu-dropdown a,
.article-menu-dropdown button {
    padding: 8px 10px;
    font-size: .9rem;
    font-weight: 800;
}

.article-star-button,
.article-menu-trigger {
    width: 34px;
    height: 34px;
}

.article-menu-trigger {
    font-size: 1.15rem;
}

/* Category pages */
.category-hero-compact {
    padding: 30px 26px;
    border-radius: 26px;
    min-height: auto;
    margin-bottom: 24px;
}

.category-hero-compact .back-link {
    margin-bottom: 8px;
}

.category-hero-compact .category-icon.large {
    width: 60px;
    height: 60px;
    border-radius: 20px;
    margin-bottom: 12px;
    font-size: 1.7rem;
}

.emoji-icon {
    font-size: 1.55rem;
}

.category-hero-compact h1 {
    font-size: clamp(2.3rem, 4vw, 3.6rem);
    margin-bottom: 8px;
}

.category-hero-compact p {
    margin-bottom: 0;
}

.article-row-polished {
    padding: 18px 20px;
    border-radius: 18px;
}

.article-row-polished p {
    margin-top: 6px;
}

/* Article TOC main title support */
.toc-title-anchor {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

#toc .toc-title-link {
    color: var(--primary);
    font-weight: 950;
}

/* Cleaner article meta: remove duplicated stable/updated from top if still output by old layers */
.article-modern-header .article-meta {
    color: var(--primary);
    font-weight: 900;
}

/* On smaller screens search returns to normal flow */
@media (max-width: 1100px) {
    .nav-search-centered {
        position: static;
        transform: none;
        width: 100%;
    }

    .docs-navbar .navbar-brand {
        min-width: auto;
    }
}