/* Header "Gigs" highlight — shared by every public page's header (desktop `nav-link` and
   mobile-menu `mobile-nav-link`). Navy = the "Vyasu" lettering in the logo (#021444).
   The "New" badge copies the .hero2-tab-badge on the index.html hero search tabs: a small
   pill pinned to the top-right corner of the label. vs-chrome.css and site-chrome.css carry
   a copy of these rules, since those pages get their header from JS, not from this file. */

a.nav-link.nav-gigs-link {
    position: relative;
    color: #021444;
    font-weight: 700;
    background: rgba(2, 20, 68, 0.07);
    border-radius: 999px;
    padding: 6px 14px;
    transition: background 0.2s ease, color 0.2s ease;
}

a.nav-link.nav-gigs-link:hover {
    color: #021444;
    background: rgba(2, 20, 68, 0.13);
}

/* The normal hover underline would draw a flat bar across the bottom of the pill. */
a.nav-link.nav-gigs-link::after {
    display: none;
}

.nav-gigs-badge {
    position: absolute;
    top: -8px;
    right: -7px;
    background: #021444;
    color: #fff;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 1px 5px;
    border-radius: 999px;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    animation: nav-gigs-ring 2.4s ease-out infinite;
}

@keyframes nav-gigs-ring {
    0%   { box-shadow: 0 0 0 0 rgba(2, 20, 68, 0.45); }
    70%  { box-shadow: 0 0 0 7px rgba(2, 20, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(2, 20, 68, 0); }
}

/* Mobile menu: full-width rows, so keep the badge in the text flow instead of the corner
   (no pill background there — the row keeps the menu's own padding/layout). */
a.mobile-nav-link.nav-gigs-link {
    color: #021444;
    font-weight: 700;
}

a.mobile-nav-link.nav-gigs-link .nav-gigs-badge {
    position: static;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    font-size: 0.6rem;
    padding: 2px 7px;
}

@media (prefers-reduced-motion: reduce) {
    .nav-gigs-badge { animation: none; }
}