/* ==========================================================================
   OriginRealm — Site header, mid-width fit (901px – 1279px)
   The desktop header (logo + 7 nav links + search + theme/login) needs about
   1300px. Below the 900px hamburger breakpoint it collapses correctly, but in
   between it overflowed off-screen (search, theme toggle and Login cut off).
   This file only compacts it in that range; the header is permanently dark in
   both themes, so no light-theme override is needed.
   ========================================================================== */

@media (min-width: 901px) and (max-width: 1279px) {
    .site-header .header-container {
        padding: 0 1rem;
        gap: 0.6rem;
    }

    .site-header .logo-section {
        min-width: 0;
    }

    .site-header .nav-links {
        gap: 0.1rem;
    }

    .site-header .header-nav-btn {
        padding: 0.5rem 0.6rem;
        font-size: 0.88rem;
        gap: 0;
        white-space: nowrap;
    }

    /* Icons go first; the labels stay so every destination is still linked and readable */
    .site-header .header-nav-btn svg {
        display: none;
    }

    .site-header .search-bar {
        flex: 1 1 110px;
        min-width: 0;
        max-width: 260px;
    }

    .site-header .search-input {
        min-width: 0;
        padding-left: 1rem;
    }

    .site-header .auth-buttons {
        gap: 0.5rem !important;
    }

    .site-header .auth-buttons .btn {
        padding: 0.55rem 1rem !important;
    }
}

/* Tightest desktop range: the wordmark yields so nothing is pushed off-screen */
@media (min-width: 901px) and (max-width: 1100px) {
    .site-header .logo-text {
        display: none;
    }
}