/* ============================================================================
   DULLPUNKS — SHARED SITE HEADER
   Single source of truth for the top navigation bar on every page.
   Linked LAST in each page's <head>, after the inline <style>, so these
   rules win over the older per-page header CSS. Edit the header here once
   and every page updates.

   Targets the one top-bar element per page (<nav> on most pages, <header>
   on the studio). No page uses <nav>/<header> for content, so this is safe.
   ========================================================================== */

/* ── Page width ──────────────────────────────────────────────────────────── */
/* Reserve the scrollbar gutter on every page. Short pages (studio connect
   screen) have no scrollbar while long ones (playground) do, so without this
   the window width changes between pages and the centred nav jumps sideways. */
html{overflow-y:scroll}
@supports(scrollbar-gutter:stable){
  html{overflow-y:auto;scrollbar-gutter:stable}
}

/* ── Bar ─────────────────────────────────────────────────────────────────── */
/* 3-column grid: [logo | nav | actions]. The two outer columns are always an
   equal 1fr, so the centre nav stays pinned to the viewport centre no matter
   how wide the right-hand buttons get — they can't push the nav sideways. */
nav, header{
  height:52px!important;
  min-height:52px!important;
  display:grid!important;
  grid-template-columns:1fr auto 1fr!important;
  align-items:center!important;
  padding:0 40px!important;
  background:var(--bg)!important;
  border-bottom:1px solid var(--border)!important;
  position:sticky!important;
  top:0!important;
  z-index:100!important;
}

/* ── Logo (the piece that was changing size between pages) ────────────────── */
nav .nav-logo, header .nav-logo{
  font-family:'Space Mono','Courier New',monospace!important;
  font-size:12px!important;
  font-weight:700!important;
  letter-spacing:0.2em!important;
  line-height:1!important;
  color:var(--text)!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  justify-self:start!important;   /* left column */
  width:auto!important;
}

/* ── Centre nav links ────────────────────────────────────────────────────── */
/* Absolutely centred on the bar itself (the bar is the same width on every
   page now that the scrollbar gutter is reserved), so the links land on the
   identical pixel everywhere. Letting the grid centre them instead leaves a
   1px page-to-page wobble: odd leftover space rounds to one side or the
   other. Out-of-flow is safe because the right-hand items are pinned to
   grid column 3 explicitly below. */
nav .nav-links, header .nav-links{
  display:flex!important;
  align-items:center!important;
  gap:28px!important;
  position:absolute!important;
  left:50%!important; top:50%!important; right:auto!important;
  transform:translate(-50%,-50%)!important;
  margin:0!important;
  white-space:nowrap!important;
}
nav .nav-links a, header .nav-links a{
  font-family:'Space Mono','Courier New',monospace!important;
  font-size:10px!important;
  font-weight:400!important;
  letter-spacing:0.12em!important;
  line-height:1!important;
  color:var(--muted)!important;
  text-decoration:none!important;
  transition:color .15s!important;
}
nav .nav-links a:hover, header .nav-links a:hover,
nav .nav-links a.active, header .nav-links a.active{
  color:var(--text)!important;
}

/* ── MINT NOW call-to-action (outlined button) ───────────────────────────── */
nav .nav-cta, header .nav-cta{
  font-family:'Space Mono','Courier New',monospace!important;
  font-size:10px!important;
  font-weight:700!important;
  letter-spacing:0.08em!important;
  padding:8px 18px!important;
  border:1px solid var(--text)!important;
  background:transparent!important;
  color:var(--text)!important;
  text-decoration:none!important;
  white-space:nowrap!important;
  flex-shrink:0!important;
}
nav .nav-cta:hover, header .nav-cta:hover{
  background:var(--text)!important;
  color:var(--bg)!important;
}
/* Right column: the MINT NOW cta (most pages) or the studio's wallet cluster.
   With .nav-links out of flow these would auto-place into the centre column,
   so pin them to column 3 explicitly, hugging the right edge. */
nav > .nav-cta, header > .nav-cta, header > .header-right{
  grid-column:3!important;
  justify-self:end!important;
}

/* MINT NOW link that only appears inside the mobile burger menu */
nav .nav-links a.nav-mint-mobile, header .nav-links a.nav-mint-mobile{
  display:none!important;
}

/* ── Burger (mobile) ─────────────────────────────────────────────────────── */
.nav-burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:none!important;
  border:none!important;
  cursor:pointer;
  padding:8px!important;
  z-index:200;
}
.nav-burger span{display:block;width:20px;height:2px;background:var(--text)}

/* ── Responsive: collapse nav into the burger below 900px ────────────────── */
@media(max-width:900px){
  /* below the burger breakpoint fall back to flex so it's just: logo | ☰ */
  nav, header{display:flex!important;justify-content:space-between!important;padding:0 20px!important}

  .nav-burger{display:flex!important}

  /* MINT NOW cta drops out of the bar on mobile (reachable via the menu) */
  nav .nav-cta, header .nav-cta{display:none!important}

  /* nav links become a full-width dropdown revealed by the burger */
  nav .nav-links, header .nav-links{
    position:fixed!important;
    left:0!important; right:0!important; top:52px!important;
    transform:none!important;
    margin:0!important;
    display:none!important;
    flex-direction:column!important;
    gap:0!important;
    width:100%!important;
    background:var(--bg)!important;
    border-bottom:1px solid var(--border)!important;
    padding:8px 0!important;
    z-index:199!important;
  }
  .nav-open .nav-links{display:flex!important}

  nav .nav-links a, header .nav-links a{
    height:44px!important;
    display:flex!important;
    align-items:center!important;
    padding:0 24px!important;
    border-bottom:1px solid var(--border)!important;
    font-size:11px!important;
  }
  nav .nav-links a:last-child, header .nav-links a:last-child{
    border-bottom:none!important;
  }

  /* MINT NOW shows in the burger menu, highlighted */
  .nav-open .nav-links a.nav-mint-mobile{
    display:flex!important;
    color:var(--green)!important;
    font-weight:700!important;
  }
}

/* ============================================================================
   MINT NOW HIDDEN — the mint page isn't built yet. Remove this whole block to
   bring the MINT NOW button back (header cta + burger link) everywhere.
   ========================================================================== */
nav .nav-cta, header .nav-cta,
nav .nav-links a.nav-mint-mobile, header .nav-links a.nav-mint-mobile,
.nav-open .nav-links a.nav-mint-mobile{
  display:none!important;
}

/* ============================================================================
   PRE-MINT NAV — feature links hidden until launch: EXPLORE, DECODER,
   LIVE FEED, ANALYTICS, HOLDERS in the header, plus the matching footer
   links. The pages themselves stay reachable by direct URL. Remove this
   whole block at mint to bring every link back everywhere.
   ========================================================================== */
nav .nav-links a[href="rarity.html"],            header .nav-links a[href="rarity.html"],
nav .nav-links a[href="token-uri-decoder.html"], header .nav-links a[href="token-uri-decoder.html"],
nav .nav-links a[href="activity.html"],          header .nav-links a[href="activity.html"],
nav .nav-links a[href="analytics.html"],         header .nav-links a[href="analytics.html"],
nav .nav-links a[href="holders.html"],           header .nav-links a[href="holders.html"],
.footer-col a[href="rarity.html"],
.footer-col a[href="token-uri-decoder.html"],
.footer-col a[href="activity.html"],
.footer-col a[href="analytics.html"],
.footer-col a[href="holders.html"],
.footer-col a[href="dullpunks-editor-onchain.html"]{
  display:none!important;
}
/* the footer EXPLORE column ends up with every link hidden — drop the whole
   column (title included) so it doesn't sit there empty */
.footer-col:has(a[href="rarity.html"]):not(:has(a[href^="http"])){
  display:none!important;
}
