/* nav.css — the shared navbar, linked by all six pages.
 *
 * Before this file, every page stylesheet carried its own copy of these rules.
 * That duplication is precisely how the five navbars drifted apart (different bar
 * heights, link sizes and box models), reconciled only in commit 7d08a29. Adding a
 * sixth copy for the viewer page would have rebuilt the bug, so the duplication is
 * removed instead.
 *
 * PURE REFACTOR: identical rendered output. tests/nav-parity.spec.js holds a
 * measured baseline of 30 values across the five pre-existing pages and six
 * widths; it must stay green. Extracted brace-aware, not by regex, because a
 * regex cleanup in this project once removed a closing brace along with a rule
 * and silently swallowed every rule after it.
 *
 * Load nav.css BEFORE the page stylesheet so a page can still override if it
 * genuinely must.
 */

/* Tokens the navbar owns. Defined here so every page gets them from one place;
   the page stylesheets no longer need their own copy. */
:root {
    --nav-h: 80px;   /* bar height; body padding is derived from this */
    --touch: 44px;   /* WCAG minimum tap target, used for link boxes */

    /* --- Brand tokens this file CONSUMES, defaulted here ---------------------
       These four were previously expected to come from the page's own
       stylesheet. Only style.css (index) and nftviewer.css actually define
       them, so on about.html, distribution.html, blazefaucet.html and
       blazeorsonic.html the navbar rendered with NO background and NO shadow —
       the links floated on the page background and the content scrolled
       visibly underneath the fixed bar.

       An unresolved var() fails silently: no console error, no warning, the
       property just behaves as unset. And nav-parity.spec.js compares height,
       font, gap and overflow — never colour — so nothing caught it.

       nav.css is linked BEFORE the page stylesheet on all six pages, so these
       are genuine defaults: a page that defines its own :root still wins on
       source order. Values copied from style.css, which is the canonical set.
       ---------------------------------------------------------------------- */
    --navbar-bg: rgba(0, 0, 0, 0.95);
    --glow: 0 0 10px rgba(255, 69, 0, 0.7);
    --c-gold: #ffcf48;
    --c-orange: orange;
}

/* nav.css must be SELF-SUFFICIENT. style.css carries a global
   `*, *::before, *::after { box-sizing: border-box }` reset, so its .navbar-link
   never needed an explicit one — but bf.css, headblazed.css, about.css and
   distribution.css have no such reset. Relying on the page to provide it is what
   made the link box measure 60px instead of 44px on four of the six pages the
   moment their local navbar rules were deleted: min-height:44px applied to the
   CONTENT box and the padding was added on top.
   Scoped to navbar elements so this file never changes a page's own box model. */
.navbar,
.navbar-left,
.navbar-links,
.navbar-link,
.navbar-right,
.navbar-logo,
.navbar-logo-right {
    box-sizing: border-box;
}

/* === Navbar === */
.navbar {
    width: 100%;
    box-sizing: border-box;
    background-color: var(--navbar-bg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 16px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    box-shadow: var(--glow);
    height: var(--nav-h);
    /* Fixed, not min-height. The 105/128px marks are intentionally larger than
       the bar and overhang it — that is how bf.css and headblazed.css do it.
       With min-height they stretched index's bar to 149px instead. */
}

.navbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: 0; /* lets the links track shrink + scroll */
    flex: 1;
    position: relative; /* anchors the mobile scroll-hint chevron */
}

.navbar-logo {
    /* 105px to match blazefaucet / blazeorsonic / about / distribution, which
       all use this. index was the only page at 48px. The mark deliberately
       overhangs the 80px bar on those pages; keeping that. */
    height: 105px;
    width: auto;
    flex-shrink: 0;
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;      /* horizontal scroll instead of overflow on small screens */
    scrollbar-width: thin;
}

.navbar-link {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--touch);
    text-decoration: none;
    color: white;
    padding: 0.5rem 0.9rem;
    transition: color 0.3s ease;
    font-size: 18px;
    font-weight: bold;
    white-space: nowrap;
}

.navbar-link:hover {
    color: var(--c-gold);
}

.navbar-link .smoke-container {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    opacity: 0;
    pointer-events: none;
}

.navbar-link:hover .smoke-container {
    opacity: 1;
    animation: floatUp 1.5s ease-in-out infinite;
}

.navbar-right {
    margin-left: auto;
    flex-shrink: 0;
}

.navbar-logo-right {
    height: 128px;      /* matches the other pages */
    width: auto;
    margin-left: 20px;
}

.smoke-dot {
    width: 5px;
    height: 5px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 50%;
    animation: puff 5s ease-in-out infinite;
    filter: blur(1px);
}

@keyframes puff {
    0%   { transform: translateY(0) scale(1); opacity: 0.7; }
    100% { transform: translateY(-10px) scale(1.5); opacity: 0; }
}

@keyframes floatUp {
    0%   { transform: translateX(-50%) translateY(0); }
    50%  { transform: translateX(-50%) translateY(-5px); }
    100% { transform: translateX(-50%) translateY(0); }
}

@media screen and (max-width: 768px) {


    .navbar-right { display: none; }
       /* drop the decorative right logo on phones */
    .navbar-logo { height: 80px; }
        /* other pages' mobile size */
    .navbar-link { font-size: 16px; padding: 0.5rem 0.7rem; }
}

/* Respect reduced-motion: kill decorative looping/burst motion, keep
   meaningful feedback (hover colour, progress fill) intact. */
@media (prefers-reduced-motion: reduce) {

    .smoke-dot,
    .navbar-link:hover .smoke-container {
        animation: none;
        opacity: 0;
    }
}

/* --- Nav overflow affordance, driven by measurement not by a breakpoint.
       The links track scrolls horizontally when it does not fit, and nothing
       said so — 4 of 5 destinations sat off-screen silently. Two previous
       attempts used hardcoded widths (768, then 1200, then 1439) and each one
       went stale the moment the bar's contents changed. wallet.js now toggles
       .nav-scrollable from the real scrollWidth, so it is correct at every
       width and survives the next thing added to the navbar. --- */
.navbar-links.nav-scrollable {
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
    scroll-snap-type: x proximity;
}

.navbar-links.nav-scrollable .navbar-link { scroll-snap-align: start; }

.navbar-left:has(.nav-scrollable)::after {
    content: "\203A";
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    line-height: 1;
    color: var(--c-orange);
    pointer-events: none;
    animation: navHint 1.8s ease-in-out infinite;
}

@keyframes navHint {
    0%, 100% { opacity: .45; transform: translate(0, -50%); }
    50%      { opacity: 1;   transform: translate(3px, -50%); }
}

@media (prefers-reduced-motion: reduce) {
    .navbar-left:has(.nav-scrollable)::after { animation: none; opacity: .85; }
}

/* --- Six links need slightly less air than five --------------------------
   Adding "Blaze Bag" made a sixth link. At full size that overflowed the
   scroll track by 123px at 1600px and 8px at 1280px, where five links fit
   with room to spare - measured across all six pages. The links stayed
   reachable (the track is overflow-x: auto) but a desktop navbar that needs
   scrolling reads as broken.

   Trimming type and padding a little above 1560px is the least visible fix.
   The alternative was shortening "Token Distribution Journal", and changing
   live nav copy to make room for a new page is the wrong trade.
   ---------------------------------------------------------------------- */
@media screen and (min-width: 1500px) {
    /* 16px was too big once "Blaze Bag" became "BLAZE NFT Viewer": measured on
       index (the worst case, since the wallet control costs 142px), 1561px
       overflowed by 64px and 1600px by 25px, while 1560px and 1500px fitted
       comfortably at 15px. Matching the tier below removes the cliff. */
    .navbar-link { font-size: 15px; padding: 0.5rem 0.5rem; }
    .navbar-links { gap: 6px; }
}

/* Measured: 14px fits from 1441 up; below that it does not. */
/* --- Compact nav for laptop widths ---------------------------------------
   Full-size nav needs ~1476px. Below that the last links ("Blaze or Sonic",
   "About") were being clipped by the scroll track at 1440/1366/1280 - all very
   common laptop widths. Scale the row down there instead of hiding links.
   min-width:769px keeps this clear of the mobile block.
   ---------------------------------------------------------------------- */
@media screen and (min-width: 769px) and (max-width: 1560px) {
    .navbar-link { font-size: 15px; padding: 0.45rem 0.5rem; }
    .navbar-links { gap: 6px; }
    .navbar-logo { height: 88px; }
    .navbar-logo-right { height: 96px; margin-left: 10px; }
}

@media screen and (min-width: 769px) and (max-width: 1499px) {
    .navbar-link { font-size: 14px; padding: 0.4rem 0.4rem; }
    .navbar-links { gap: 4px; }
}

@media screen and (min-width: 769px) and (max-width: 1400px) {
    /* Tightest desktop tier. Tap targets stay at 44px via --touch no matter the
       font size, so shrinking type here does not shrink what you can hit. */
    .navbar-link { font-size: 13px; padding: 0.4rem 0.3rem; }
    .navbar-links { gap: 2px; }
    .navbar-logo { height: 76px; }
    .navbar-logo-right { height: 82px; margin-left: 8px; }
}