/* ============================================================
   UNIFIED STICKY NAVIGATION (TABS + JUMP BAR)
   ============================================================ */

.gig-nav {
    position: sticky;
    top: 0;
    z-index: 1000;

    background: #222;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    box-shadow: 0 2px 4px rgba(0,0,0,0.25);
}

/* Remove Bootstrap's bottom margin on tabs */
.gig-nav .nav-tabs {
    margin-bottom: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

/* ============================================================
   JUMP BAR — NOW A SIBLING OF THE TABS
   Styled to match the tab bar motif
   ============================================================ */

#jump-bar {
    width: 100%;
    padding: 6px 8px;

    background: #222;
    border-bottom: 1px solid rgba(255,255,255,0.12);

    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 4px;

    min-height: 36px; /* ensures stable layout even when empty */
}

/* Jump items styled like tab siblings */
#jump-bar .jump-item {
    text-align: center;
    padding: 4px 0;
    font-size: 0.78rem;

    color: #d4a44a;
    cursor: pointer;
    user-select: none;

    border-radius: 4px;
    transition: background 0.15s ease, color 0.15s ease;
}

#jump-bar .jump-item:hover,
#jump-bar .jump-item.active {
    background: #d4a44a;
    color: #222;
}

/* ============================================================
   GIG CONTENT AREA
   ============================================================ */

.gigs-content {
    padding-top: 8px;
}

/* Group headers inside content — NOT sticky anymore */
.gig-group-header {
    background: #333;
    padding: 6px 10px;
    font-weight: bold;
    border-bottom: 1px solid rgba(255,255,255,0.15);
}

/* ============================================================
   MOBILE — TIGHTER SPACING
   ============================================================ */

@media (max-width: 700px) {

    #jump-bar {
        padding: 4px 6px;
        gap: 3px;
        min-height: 32px;
    }

    #jump-bar .jump-item {
        font-size: 0.72rem;
        padding: 3px 0;
    }

    .gig-group-header {
        padding: 5px 8px;
    }
}
