/* ════════════════════════════════════════════════════════════════
   Drumbeat — Navigation (redesign)   ·   STANDALONE / SELF-CONTAINED
   ----------------------------------------------------------------
   Home  = split-capsule glass over the hero (fixed overlay)
   Subs  = full-width black bar (sticky, hovers on scroll)
   Menu  = editorial index 01–05 (absolute overlay, toggled by .is-open)
   Open  = one smooth 0.32s morph (no staged delays); hamburger
           colour-pulse fires on click.

   Tokens below are the Drumbeat brand values, redeclared here so this
   file works on its own. In the real codebase, map them to the
   existing design-system tokens instead of redeclaring.
   ════════════════════════════════════════════════════════════════ */

:root {
  --screen-black: #292A2A;
  --newsprint:    #EFE8E3;
  --sky-blue:     #46BBFF;
  --display: "eurostile", "Helvetica Neue", Helvetica, Arial, sans-serif; /* brand: Styrene A / Eurostile (Typekit-loaded eurostile takes priority) */
  --ease: cubic-bezier(.2,.8,.25,1);
}

.dbnav {
  z-index: 500;
  font-family: var(--display);
}
.dbnav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.dbnav a { text-decoration: none; }
.dbnav__left  { display: flex; align-items: center; gap: 14px; }
.dbnav__right { display: flex; align-items: center; gap: 6px; }

/* Hamburger — 54×46 hit target, wide airy icon (28×16 svg) */
.dbnav__ham {
  width: 54px; height: 46px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; border: 1px solid transparent;
  background: transparent; color: var(--newsprint);
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
.dbnav__ham:hover,
.dbnav.is-open .dbnav__ham {
  background: rgba(239,232,227,0.14);
  border-color: rgba(239,232,227,0.20);
}
.dbnav__ham svg { display: block; }

/* Wordmark + dish (subpages always; home only while open) */
/* Mark wraps only the per-letter stage now (no text content), so it just needs to be
   a block sized to its content. The previous inline-flex + font-size: 26/line-height: 1
   left it with a line-box taller than the stage, which dropped the stage ~2px via
   align-items: center and broke vertical alignment with the big-logo morph target. */
.dbnav__mark {
  display: block;
  color: var(--newsprint);
}

/* Used by the home-page JS to snapshot the open-state layout (mark position, dimensions)
   without triggering a visible morph — temporarily disables every transition/animation
   on the nav so getBoundingClientRect returns the final values rather than interpolating. */
.dbnav--no-transition,
.dbnav--no-transition *,
.dbnav--no-transition *::before,
.dbnav--no-transition *::after {
  transition: none !important;
  animation: none !important;
}

/* When the big hero logo is offscreen at the moment of opening, we skip the
   big-to-small morph entirely. The small mark then needs to snap in immediately
   instead of waiting the 290ms "morph finished" delay (which only makes sense
   when there's an actual morph). */
.dbnav.dbnav--immediate.dbnav--home.is-open .dbnav__mark {
  transition: opacity 0s linear;
}

/* Mark uses the per-letter wordmark assembly (same letter SVGs as the big hero
   logo), with positioning percentages mirrored here so kerning is identical to
   the big logo — the menu-open big↔small morph then reads as pure scale+translate.
   Rules are scoped to .dbnav__mark so they don't collide with the home-page
   inline rules that drive the big logo. */
.dbnav__mark .hero-logo-stage {
  position: relative;
  display: block;
  height: clamp(30px, 4vw, 46px);
  width: auto;
  aspect-ratio: 1396 / 187;
}
.dbnav__mark .hero-logo-char {
  position: absolute;
  bottom: 0;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.dbnav__mark .hero-logo-char img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  display: block;
  pointer-events: none;
}
/* Slot positions (cumulative / 1396) — mirror of the big-logo positioning in index.html */
.dbnav__mark .hero-logo-char--d    { left:  0%;        width: 10.315186%; }
.dbnav__mark .hero-logo-char--r    { left: 11.174785%; width:  5.802292%; }
.dbnav__mark .hero-logo-char--u    { left: 17.836676%; width:  9.670487%; }
.dbnav__mark .hero-logo-char--m    { left: 28.366762%; width: 15.329513%; }
.dbnav__mark .hero-logo-char--b    { left: 44.555874%; width: 10.028653%; }
.dbnav__mark .hero-logo-char--e    { left: 55.444126%; width:  9.598854%; }
.dbnav__mark .hero-logo-char--a    { left: 65.902579%; width:  9.74212%; }
.dbnav__mark .hero-logo-char--t    { left: 76.504298%; width:  6.948424%; }
.dbnav__mark .hero-logo-char--icon { left: 86.604586%; width: 13.395415%; z-index: 2; }

/* Login link + Book a Demo button — refined 9px radius (not pills) */
.dbnav__login {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  color: var(--newsprint);
  padding: 12px 14px; border-radius: 9px;
  white-space: nowrap;
  transition: opacity .15s ease;
}
.dbnav__login svg { width: 0.95em; height: 0.95em; flex-shrink: 0; }
.dbnav__login:hover { opacity: 0.62; }
.dbnav__demo {
  font-weight: 600; font-size: 15px; letter-spacing: -0.01em;
  padding: 12px 19px; border-radius: 9px;
  background: var(--sky-blue); color: var(--screen-black);
  border: 1px solid transparent; white-space: nowrap;
  transition: transform .15s var(--ease), filter .15s ease;
}
.dbnav__demo:hover { transform: translateY(-1px); filter: brightness(1.04); }

/* ── MODE: subpage — full-width black bar, sticky ── */
.dbnav--sub { position: sticky; top: 0; }
.dbnav--sub .dbnav__inner {
  background: var(--screen-black); color: var(--newsprint);
  padding: 24px 24px 24px 14px;
  box-shadow: 0 14px 34px rgba(41,42,42,0.22);
}

/* ── MODE: home — glass capsules, fixed overlay on the hero ── */
.dbnav--home {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 18px 40px;
  transition: background .32s var(--ease), padding .32s var(--ease);
}
/* While morphing open/close, also animate `top` so the bar slides between
   its scroll-driven position (below the brand) and the viewport top (menu takeover).
   The class is added by the home-page inline JS for ~340ms either side of a toggle. */
.dbnav--home.dbnav--morphing {
  transition: background .32s var(--ease), padding .32s var(--ease), top .32s var(--ease);
}
/* Home: small mark stays in the layout (display: inline-flex) but is invisible.
   Snap to hidden on close (0s) and snap to visible on open after a 320ms delay
   (in the .is-open rule below) so it appears exactly when the big hero logo's
   scale+translate morph has finished — no cross-fade. */
.dbnav--home .dbnav__mark {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s linear;
}
.dbnav--home .dbnav__left  { padding: 0; color: var(--newsprint); }

/* Right cluster = glass capsule */
.dbnav--home .dbnav__right {
  padding: 9px; border-radius: 16px;
  background: rgba(22,23,30,0.30);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(239,232,227,0.20);
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
  color: var(--newsprint);
}
/* The HAMBURGER ITSELF is the left glass capsule — so the wordmark
   (a sibling) is never wrapped/encapsulated by it during the morph. */
.dbnav--home .dbnav__ham {
  background: rgba(22,23,30,0.30);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid rgba(239,232,227,0.20);
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
  transition: background .32s var(--ease), border-color .32s var(--ease),
              box-shadow .32s var(--ease), -webkit-backdrop-filter .32s var(--ease),
              backdrop-filter .32s var(--ease), width .32s var(--ease),
              height .32s var(--ease), border-radius .32s var(--ease);
}
.dbnav--home:not(.is-open) .dbnav__ham {       /* closed: large capsule, hover fills the whole thing */
  width: 72px; height: 64px; border-radius: 16px;
}
.dbnav--home:not(.is-open) .dbnav__ham:hover {
  background: rgba(239,232,227,0.18);
  border-color: rgba(239,232,227,0.28);
}
.dbnav--home.is-open .dbnav__ham {             /* open: dissolves into the black bar */
  background: rgba(239,232,227,0.12);
  border-color: transparent; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.dbnav--home .dbnav__inner { transition: padding .32s var(--ease); }
.dbnav--home.is-open .dbnav__inner { padding: 24px 24px 24px 14px; }

/* The smooth one-hop OPEN: bar background + capsule dissolve + logo
   fade-in all run on the same 0.32s ease, no staggered delays. */
.dbnav--home.is-open { background: var(--screen-black); padding: 0; }
.dbnav--home .dbnav__left,
.dbnav--home .dbnav__right {
  transition: background .32s var(--ease), border-color .32s var(--ease),
              box-shadow .32s var(--ease), -webkit-backdrop-filter .32s var(--ease),
              backdrop-filter .32s var(--ease), padding .32s var(--ease);
}
.dbnav--home.is-open .dbnav__left,
.dbnav--home.is-open .dbnav__right {
  background: transparent; border-color: transparent;
  box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none;
  padding: 0;
}
.dbnav--home.is-open .dbnav__mark {
  opacity: 1;
  pointer-events: auto;
  /* Snap on (0s) but delay slightly less than the big-logo morph (290ms vs 320ms)
     so the small logo appears just *before* the big logo snaps out — no gap. */
  transition: opacity 0s linear .29s;
}

/* Push the hero clear of the fixed home nav (added by JS: body.dbnav-home) */
body.dbnav-home .hero { padding-top: clamp(96px, 9vw, 128px); }

/* ── Editorial index menu (absolute overlay) ── */
.dbnav__menu {
  display: none;
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--screen-black);
  border-top: 1px solid rgba(239,232,227,0.10);
  padding: 8px 0 18px;
}
.dbnav.is-open .dbnav__menu { display: block; }
.dbnav--home .dbnav__menu {            /* full-bleed top takeover on home too */
  left: 0; right: 0; top: 100%;
  border-radius: 0; border: none;
  border-top: 1px solid rgba(239,232,227,0.10);
  box-shadow: none;
}
.dbnav__row {
  display: flex; align-items: baseline; gap: 22px;
  padding: 16px 24px;
  border-bottom: 1px solid rgba(239,232,227,0.08);
  color: var(--newsprint);
  transition: background .15s ease, padding-left .15s ease;
}
.dbnav__row:last-child { border-bottom: none; }
.dbnav__num {
  width: 28px; flex-shrink: 0;
  font-weight: 700; font-size: 13px; letter-spacing: 0.12em;
  color: rgba(239,232,227,0.45);
}
.dbnav__label {
  flex: 1;
  font-weight: 800; font-size: clamp(24px, 3vw, 32px);
  letter-spacing: -0.03em;
}
.dbnav__icon { display: inline-block; margin-right: 14px; vertical-align: -0.12em; line-height: 0; }
.dbnav__icon svg { width: 0.7em; height: 0.7em; display: block; }
.dbnav__arrow { font-size: 20px; color: rgba(239,232,227,0.35); }
.dbnav__row:hover { background: rgba(239,232,227,0.05); padding-left: 32px; }
.dbnav__row[aria-current="page"] { background: rgba(70,187,255,0.10); }
.dbnav__row[aria-current="page"] .dbnav__label,
.dbnav__row[aria-current="page"] .dbnav__num,
.dbnav__row[aria-current="page"] .dbnav__arrow { color: var(--sky-blue); }

/* ── Entrance keyframes ── */
@keyframes db-ham-pulse { 0%, 100% { color: var(--newsprint); } 30% { color: #fff; } } /* colour-only */
@keyframes db-menu-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes db-row-in    { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes db-fade      { from { opacity: 0; } to { opacity: 1; } }

/* Hamburger colour-pulse fires immediately on open (click feedback) */
.dbnav.is-open .dbnav__ham { animation: db-ham-pulse .26s var(--ease); }

/* Subpages: bar already solid — menu drops promptly, rows stagger */
.dbnav--sub.is-open .dbnav__menu { animation: db-menu-fade .18s ease both; }
.dbnav--sub.is-open .dbnav__row  { animation: db-row-in .32s var(--ease) both; }
.dbnav--sub.is-open .dbnav__row:nth-child(1) { animation-delay: .04s; }
.dbnav--sub.is-open .dbnav__row:nth-child(2) { animation-delay: .08s; }
.dbnav--sub.is-open .dbnav__row:nth-child(3) { animation-delay: .12s; }
.dbnav--sub.is-open .dbnav__row:nth-child(4) { animation-delay: .16s; }
.dbnav--sub.is-open .dbnav__row:nth-child(5) { animation-delay: .20s; }

/* Home: menu fades in together with the bar morph; rows lightly stagger */
.dbnav--home.is-open .dbnav__menu { animation: db-menu-fade .32s var(--ease) both; }
.dbnav--home.is-open .dbnav__row  { animation: db-row-in .34s var(--ease) both; }
.dbnav--home.is-open .dbnav__row:nth-child(1) { animation-delay: .10s; }
.dbnav--home.is-open .dbnav__row:nth-child(2) { animation-delay: .15s; }
.dbnav--home.is-open .dbnav__row:nth-child(3) { animation-delay: .20s; }
.dbnav--home.is-open .dbnav__row:nth-child(4) { animation-delay: .25s; }
.dbnav--home.is-open .dbnav__row:nth-child(5) { animation-delay: .30s; }

/* ── Responsive ── */
@media (max-width: 880px) {
  .dbnav--sub .dbnav__inner { padding: 18px 16px; }
  .dbnav--home { padding: 14px 16px; }
  .dbnav--home.is-open .dbnav__inner { padding: 11px 16px; }
  .dbnav__login { display: none; }        /* Login lives in the menu on mobile */
  .dbnav__mark { font-size: 22px; }
  .dbnav__label { font-size: 26px; }
}

/* ── Accessibility: motion-off shows final states, no animation ── */
@media (prefers-reduced-motion: reduce) {
  .dbnav__demo, .dbnav__row, .dbnav__ham,
  .dbnav--home, .dbnav--home .dbnav__inner,
  .dbnav--home .dbnav__left, .dbnav--home .dbnav__right { transition: none; }
  .dbnav.is-open .dbnav__ham,
  .dbnav.is-open .dbnav__menu,
  .dbnav.is-open .dbnav__row,
  .dbnav--home.is-open .dbnav__mark { animation: none; }
}