/* ============================================================
   navbar.css — navbar surface + branded wordmark
   ============================================================
   Owns navbar styling end-to-end:
     - Bootstrap .navbar customization (token-driven background +
       text color, so the navbar follows light/dark theme).
     - The standalone .navbar-brand rule (font-mono + font-size-brand
       from the original Brand section). NOTE: this rule is overridden
       by the Transmission .navbar-brand block at the bottom of this
       file in cascade order.
     - The Transmission-era wordmark: terminal-prompt ">", the
       blinking mint cursor block, and the prefers-reduced-motion
       guard that disables the animation.

   Two .navbar-brand rules coexist here (original Brand section +
   Transmission rollout). Preserved as-is during the css-refactor
   for zero functional change; a future cleanup PR could merge them.

   Reference: markdown/design/DESIGN_DECISIONS_CSS_REFACTOR.md
   ============================================================ */

/* Navbar — token-driven instead of Bootstrap's bg-white +
   navbar-light combo, so it follows light/dark theme. */
.navbar {
    /* app1 (round 7) — was --color-bg-surface; switched to the navbar-
       specific token so the navbar can stay green in dark mode while
       all other cards/modals went to neutral charcoal. */
    background-color: var(--color-bg-navbar);
    color: var(--color-text);
    /* v4.0.1 hotfix — base.html declares viewport-fit=cover so iOS
       renders edge-to-edge. Without this padding the navbar drifts
       under the iPhone status bar / Dynamic Island. --safe-area-top
       falls back to 0px so non-PWA / non-iOS contexts stay flush. */
    padding-top: var(--safe-area-top);
}

.navbar .nav-link {
    color: var(--color-text-muted);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus {
    color: var(--color-text);
}

.navbar .navbar-brand {
    color: var(--color-text);
}

.navbar a.text-secondary {
    color: var(--color-text-muted) !important;
}

.navbar a.text-secondary:hover {
    color: var(--color-text) !important;
}

/* ============================================================
   Brand — navbar logo / wordmark
   ============================================================ */

.navbar-brand {
    font-family: var(--font-mono);
    font-size: var(--font-size-brand);
}

/* ============================================================
   app1 — Transmission brand rollout (v3.6)
   ============================================================
   Navbar wordmark adopts the terminal aesthetic from the
   markdown/design/transmission_assets/wordmark-*.svg masters:
     ">" prompt rendered in the muted-text color (so it reads
       as ambient terminal chrome, not a brand element)
     "FriendZone" stays capital F + Z per the brand rule, in
       the terminal display face (VT323)
     blinking cursor block in mint, animated via CSS

   This block lives at the end of style.css for now; folds into
   the surface-grouped directory in step 4's refactor.
   ============================================================ */

.navbar-brand {
    font-family: var(--font-display);
    font-size: 24px;
    letter-spacing: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 2px;
}

.navbar-brand-prompt {
    color: var(--color-text-muted);
    margin-right: 6px;
}

.navbar-brand-cursor {
    display: inline-block;
    width: 8px;
    height: 18px;
    background: var(--color-accent);
    margin-left: 4px;
    vertical-align: -3px;
    animation: navbar-brand-blink 1.06s steps(2, end) infinite;
}

@keyframes navbar-brand-blink {
    50% { opacity: 0; }
}

/* Respect users with reduced motion preference — the cursor stays
   solid mint instead of pulsing. Same identity, no animation. */
@media (prefers-reduced-motion: reduce) {
    .navbar-brand-cursor {
        animation: none;
    }
}


/* ============================================================
   Folded in from style.css during css-refactor commit 8.
   Navbar expandable icon row — was buried below the Halos
   section in the original style.css, missed in commit 3's
   navbar extraction.
   ============================================================ */

/* ============================================================
   Navbar — expandable icon row
   ============================================================
   The avatar button toggles a row of icons (users, message,
   drafts, new-post) that slides out to its right. Two trigger
   conditions:
     1. Hover anywhere on .nav-center (mouse users get instant
        reveal without clicking).
     2. .is-expanded class on .nav-center (set by JS on avatar
        click — needed for touch devices and keyboard users).
   The collapsed state uses max-width + opacity rather than
   display:none so the transition has something to animate.
   ============================================================ */

/* Full-width navbar container — anchored to the page edges. */
.nav-container {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0 var(--space-4);
    gap: var(--space-4);
    /* No justify-content: the wordmark + .nav-center hug the
       left, .nav-end is pushed to the right with margin-left:auto. */
}

/* Wordmark stays anchored at the very left. */
.nav-container .navbar-brand {
    flex-shrink: 0;
}

/* Center cluster — flexible middle. Grows to fill the space between
   the wordmark and .nav-end. When the expanded icon row exceeds the
   available width (narrow viewports + expanded row), this scrolls
   horizontally inside its allocated space so .nav-end stays pinned
   to the right edge of the viewport.

   min-width: 0 is required for the flex item to actually shrink below
   its content size — without it, flex items bottom out at content
   width and overflow-x: auto never kicks in.

   Note: setting overflow-x: auto here triggers the CSS quirk where
   overflow-y: visible resolves to auto, which would clip any absolute-
   positioned descendants vertically. Currently there are no absolute-
   positioned dropdowns here — the people-dropdown was replaced with a
   modal (bugfix/nav-followup-people-dropdown-modal). Future feature
   adding one back should portal it (modal, body-level element) rather
   than rely on Popper inside this clipping context. */
.nav-center {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex: 1 1 0;
    min-width: 0;
    /* ux-bugfix — was overflow-x: auto, which painted a visible
       horizontal scrollbar on mobile when the expanded row spilled
       past the viewport. Switched to overflow-x: scroll plus the
       cross-browser scrollbar-hide recipe below so the scroll
       behavior is preserved but the chrome is invisible.
       Plus three mobile-touch tweaks:
         * -webkit-overflow-scrolling: touch — iOS momentum, makes
           the drag feel like a native scroll rather than stiff.
         * overscroll-behavior-x: contain — keeps the scroll from
           leaking out and triggering a page-level horizontal scroll
           (or, on iOS, an elastic bounce that the doc-level
           click-outside collapse handler can misread as a tap).
         * touch-action: pan-x — tells the browser this surface only
           pans horizontally, so vertical touches propagate to the
           page rather than getting eaten here. */
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    touch-action: pan-x;
    scrollbar-width: none;       /* Firefox */
    -ms-overflow-style: none;    /* legacy Edge / IE */
}

/* WebKit / Blink scrollbar hide. */
.nav-center::-webkit-scrollbar {
    display: none;
}

/* Right-anchored zone (gear + search). flex-shrink: 0 means this
   cluster never shrinks — combined with .nav-center's flex-grow above,
   .nav-end is always visible at the right edge of the viewport
   regardless of how wide the icon row gets. */
.nav-end {
    flex-shrink: 0;
}

/* Nav avatar button — wraps the .avatar element from the macro
   and adds button-specific hover/focus behavior. The .avatar
   inside provides sizing. */
.nav-avatar-btn {
    position: relative;
    padding: 0;
    border: 0;
    background: transparent;
    flex-shrink: 0;
    border-radius: 50%;
    transition: transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.nav-avatar-btn:hover {
    transform: scale(1.05);
}

.nav-avatar-btn:focus-visible {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 40%, transparent);
    outline: none;
}

/* The expandable row — collapsed by default. */
.nav-expandable {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    /* max-width animates from 0 to a generous upper bound.
       opacity fades the icons during the slide. */
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    /* iOS-feeling cubic-bezier — gentler deceleration than
       Material's standard. Duration tuned down from the slow
       (350ms) token to medium (150ms) for a snappier feel. */
    transition: max-width 280ms cubic-bezier(0.32, 0.72, 0, 1),
        opacity 200ms ease,
        margin 280ms cubic-bezier(0.32, 0.72, 0, 1);
}

/* Reveal: hover on the center cluster (mouse) OR explicit
   .is-expanded class (set by JS for click/touch/keyboard). */
.nav-center:hover .nav-expandable,
.nav-center.is-expanded .nav-expandable {
    /* Bumped from 220px (pr8's 4-icon scope) to fit the 6 icons
       currently in the row: profile, users, message, drafts,
       new-post, bell. Without this the icons spill past the cap
       (overflow: visible) and overlap .nav-end at normal widths. */
    max-width: 360px;
    opacity: 1;
    pointer-events: auto;
    overflow: visible;
}

/* Per-icon stagger — much shorter delays, much shorter slide
   distance. The whole reveal completes in ~330ms instead of
   ~550ms. */
.nav-expandable>* {
    transform: translateX(-4px);
    transition: transform 180ms cubic-bezier(0.32, 0.72, 0, 1);
}

.nav-center:hover .nav-expandable>*,
.nav-center.is-expanded .nav-expandable>* {
    transform: translateX(0);
}

.nav-expandable>*:nth-child(1) {
    transition-delay: 30ms;
}

.nav-expandable>*:nth-child(2) {
    transition-delay: 60ms;
}

.nav-expandable>*:nth-child(3) {
    transition-delay: 90ms;
}

.nav-expandable>*:nth-child(4) {
    transition-delay: 120ms;
}

.nav-expandable>*:nth-child(5) {
    transition-delay: 150ms;
}

.nav-expandable>*:nth-child(6) {
    transition-delay: 180ms;
}

/* On collapse, kill the stagger so they retract together. */
.nav-expandable:not(.is-expanded):not(:hover)>* {
    transition-delay: 0ms;
}

/* Subtle hover/focus state on every nav icon button. */
.nav-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    border-radius: var(--radius-sm);
    padding: var(--space-1);
    transition: color var(--transition-fast),
        background-color var(--transition-fast),
        transform var(--transition-fast);
}

.nav-icon-btn:hover {
    color: var(--color-text);
    background-color: var(--color-bg-subtle);
}

/* Focus ring for keyboard users — visible only on keyboard
   focus, not mouse click. :focus-visible is the modern selector
   that respects this distinction. */
.nav-icon-btn:focus-visible {
    color: var(--color-text);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 40%, transparent);
}

/* Reduced-motion respect. */
@media (prefers-reduced-motion: reduce) {

    .nav-expandable,
    .nav-expandable>*,
    .nav-avatar-btn,
    .nav-icon-btn {
        transition: none;
    }

    .nav-expandable>* {
        transform: none;
    }
}