/* Styling for the shared nav partial (templates/_site_nav.html).
 *
 * These rules used to live only in styles.css, which just three pages link
 * (events, city, tonight). Every other page rendered the nav as raw browser
 * links -- default blue and underlined. base.html now links this file, so the
 * nav looks the same everywhere.
 *
 * Every selector here is .site-nav* or .nav-action-*, and those class names
 * appear nowhere except the nav partial, so this file cannot affect anything
 * else on a page.
 *
 * Palette variables carry fallbacks: journal_index, journal_post and
 * venues_index define their own :root without --accent-dark-teal, and the
 * active-tab gradient needs it.
 */

.site-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color, #3a3a3a);
}

.site-nav a {
    color: var(--main-text, #e0e0e0);
    text-decoration: none;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.2s ease;
    letter-spacing: 0.3px;
}

.site-nav a:hover {
    color: var(--accent-teal, #5bc8d7);
    background: rgba(91, 200, 215, 0.1);
}

.site-nav a.active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-teal, #5bc8d7), var(--accent-dark-teal, #3a9ba9));
    font-weight: 600;
}

.nav-action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

.nav-action-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(91, 200, 215, 0.1);
    border: 1px solid rgba(91, 200, 215, 0.3);
    color: var(--accent-teal, #5bc8d7);
    border-radius: 20px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: 'Inter', sans-serif;
    white-space: nowrap;
}

.nav-action-btn:hover {
    background: rgba(91, 200, 215, 0.2);
    border-color: var(--accent-teal, #5bc8d7);
    transform: translateY(-1px);
}

.nav-action-subscribe {
    background: rgba(255, 154, 118, 0.1);
    border-color: rgba(255, 154, 118, 0.3);
    color: var(--accent-warm, #ff9a76);
}

/* Beer pill is an <a>, so double up specificity to beat the generic
   `.site-nav a` link rules (padding, color, hover background). Filled warm
   gradient marks it as the one CTA in the bar. */
.site-nav a.nav-action-beer {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    border-radius: 20px;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-warm, #ff9a76), #d97a52);
    border: 1px solid transparent;
    white-space: nowrap;
}

.site-nav a.nav-action-beer:hover {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-warm, #ff9a76), #d97a52);
    filter: brightness(1.08);
    transform: translateY(-1px);
}

@media (max-width: 768px) {
    .site-nav {
        gap: 4px;
        padding: 6px 8px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        /* Deliberately NOT justify-content: center. Centring a scroll
           container splits the overflow across both ends, and the leading
           half lands at a negative scroll offset that nothing can reach --
           "All Events" rendered as "ents" with no way to scroll back to it.
           The auto-margin spacers below centre the row while it fits and
           collapse to zero once it overflows (auto margins only absorb
           positive free space), so the first link always sits at
           scrollLeft 0. */
        justify-content: flex-start;
        /* Blur is dropped on mobile: it forces per-frame repaints while
           scrolling long lists. Matches the same tradeoff in styles.css. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .site-nav::before,
    .site-nav::after {
        content: '';
        margin: auto;
    }

    .site-nav::-webkit-scrollbar {
        display: none;
    }

    .site-nav a {
        font-size: 0.75rem;
        padding: 5px 8px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Fixed, not `margin-left: auto`: an auto margin here would swallow the
       free space the ::before/::after spacers need to centre the row. */
    .nav-action-buttons {
        margin-left: 8px;
        padding-left: 8px;
        flex-shrink: 0;
    }
}

/* Phones. The full nav -- five links plus the beer pill -- measures ~410px
   against a ~355px bar at 375px wide, so something has to give or the row
   scrolls on every page. Dropping the pill's text label reclaims ~80px, which
   is enough for the whole nav to fit unscrolled, and keeps the CTA visible as
   its orange pill rather than clipped mid-word. The full "Buy Us a Beer"
   wording still appears in the footer and on /support. */
@media (max-width: 480px) {
    /* Every value below is spent buying horizontal room. With the label gone
       and these paddings the row measures ~369px, which fits unscrolled on a
       modern phone (390px+ of viewport). Smaller handsets still overflow and
       scroll -- correctly, from the first link -- so nothing is ever hidden. */
    .site-nav {
        gap: 3px;
    }

    .site-nav a {
        padding: 5px 6px;
    }

    .nav-action-buttons {
        margin-left: 6px;
        padding-left: 6px;
    }

    .site-nav a.nav-action-beer {
        padding: 6px 10px;
    }

    .site-nav a.nav-action-beer .nav-beer-label {
        display: none;
    }

    .site-nav a.nav-action-beer .icon {
        width: 18px;
        height: 18px;
    }
}