/* Site topbar (templates/_site_header.html): one compact band, wordmark left,
 * nav right. Replaces the earlier two-band masthead-above-nav layout — chosen
 * because the centered wordmark left large empty space either side and cost
 * ~46px of extra height on every page.
 *
 * The nav's own bar styling (site-nav.css) is neutralised inside the topbar
 * via the higher-specificity .topbar .site-nav rules below, so site-nav.css
 * keeps working standalone if the nav is ever rendered outside the topbar.
 */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Wraps the nav onto its own line once it no longer fits beside the
       wordmark. Without this the bar stays one line and the nav, being
       justify-content: flex-end, spills its overflow leftwards straight over
       the wordmark -- visible between roughly 770px and 1010px, i.e. any
       part-width desktop window. Wrapping is content-driven, so it keeps
       working if nav items are added or renamed. */
    flex-wrap: wrap;
    gap: 4px 24px;
    padding: 9px 22px;
    background: rgba(18, 18, 18, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color, #3a3a3a);
}

.topbar-logo-link,
.topbar-logo-link:hover,
.topbar-logo-link:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: inherit;
    flex-shrink: 0;
}

/* alt="" — the wordmark beside it already names the site, so announcing the
   mark again would just be noise for screen readers. */
.topbar-mark {
    width: auto;
    height: 30px;
    display: block;
    flex-shrink: 0;
}

.masthead-logo {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    font-size: clamp(1.1rem, 2.2vw, 1.4rem);
    letter-spacing: 1.5px;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--accent-teal), var(--accent-warm));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.topbar .site-nav {
    background: transparent;
    backdrop-filter: none;
    border-bottom: none;
    margin: 0;
    padding: 0;
    justify-content: flex-end;
    /* No min-width: 0 here. That let the nav shrink below its content, which
       is what produced the overflow instead of a wrap. Leaving min-width at
       its auto (min-content) default is what lets .topbar wrap it. */
    flex: 1 1 auto;
}

/* ---------------------------------------------------------------------------
   Shared page heading.

   Page h1s had drifted to five different sizes -- 1.15rem on the event pages
   and up to 2.6rem on journal_post -- so the same heading role looked
   different on every page. This is the single scale; per-page h1 font-size
   overrides were removed so they all inherit it.

   `h1` and `.page-h1` are both styled: pages with a natural page title use a
   bare <h1>, while the event pages (home, city, tonight, bar hop) add the
   class to an h1 that sits above dense content.
   --------------------------------------------------------------------------- */
h1,
.page-h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.35rem, 2.6vw, 1.8rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: 0.2px;
    margin: 0 0 10px;
    color: var(--main-text, #e0e0e0);
}

/* Standard intro paragraph under a page heading. */
.lead {
    font-size: 1rem;
    line-height: 1.6;
    color: #bbb;
    margin: 0 0 22px;
    max-width: 760px;
}

@media (max-width: 768px) {
    .topbar {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 8px 10px 6px;
        /* Blur forces per-frame repaints while scrolling; same tradeoff as
           the nav and styles.css make on mobile. */
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .topbar-logo-link {
        text-align: center;
    }

    /* flex-start, not center: this selector outranks the mobile `.site-nav`
       rule in site-nav.css, and centring a horizontal scroll container parks
       the first link at a negative scroll offset that cannot be reached. The
       ::before/::after spacers in site-nav.css centre the row while it fits.
       See the comment there before changing this back. */
    .topbar .site-nav {
        justify-content: flex-start;
        flex: initial;
    }

    /* Page headings step down on phones. The clamp alone bottoms out at its
       floor here, which left long headings -- especially the home page
       tagline -- wrapping to three lines and dominating the screen. */
    h1,
    .page-h1 {
        font-size: 1.2rem;
        line-height: 1.3;
        margin-bottom: 8px;
    }

    /* .page-h1 is the descriptive line above dense content on the event
       pages, not a page title, so it goes smaller still. */
    .page-h1 {
        font-size: 1rem;
        letter-spacing: 0.3px;
    }

    .lead {
        font-size: 0.94rem;
        margin-bottom: 18px;
    }

    /* Page subtitles -- the one-line description under an h1 on about,
       support, privacy, feedback and journal posts. Each template sets its
       own size (0.9rem to 1.1rem) with no mobile step-down, so on a phone
       every one of them wrapped to two or three lines and read as body copy
       rather than as a caption under the heading.

       `p.subtitle` rather than `.subtitle`: page <style> blocks render after
       this file (see base.html), so a bare class selector would lose to them
       on source order alone. Every use of the class is on a <p>. */
    p.subtitle {
        font-size: 0.85rem;
        line-height: 1.4;
    }
}