/* Shared droptimize site nav. ONE definition: the bar is the <nav id="dz-nav"> mount that
   every page ships (already sized here so injection causes NO layout shift), and assets/nav.js
   fills in its inner content. Self-contained on purpose, its own dz-* class namespace and
   hardcoded DARK-BAND brand colours (gold #C9A84C, ink #17150F, light #F3F0E8, muted #A9A292,
   hairline #3A352A), and the BAR is targeted by #id so it wins over any page's own nav{}/.nav-*
   rules. Change the nav in one place; it updates site-wide. Phase 2 adds Login/Dashboard here. */

#dz-nav {
  position: sticky;
  top: 36px;                 /* sits directly under the 36px OYE network bar */
  z-index: 100;
  background: #17150F;
  border-bottom: 1px solid #3A352A;
  height: 64px;
  padding: 0 24px;
  display: flex;
  align-items: center;
}
.dz-nav-inner {
  max-width: 1100px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
}

.dz-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.dz-logo { height: 32px; width: auto; }
.dz-name { font-family: "Playfair Display", serif; font-size: 18px; font-weight: 700; color: #F3F0E8; transition: color 150ms; }
.dz-name span { color: #C9A84C; transition: color 150ms; }
.dz-brand:hover .dz-name { color: #C9A84C; }
.dz-brand:hover .dz-name span { color: #F3F0E8; }

/* The drop lifts and lands on hover, same motion the homepage nav used. */
@media (prefers-reduced-motion: no-preference) {
  .dz-logo { transform-box: fill-box; transform-origin: 50% 100%; }
  @keyframes dz-drop-embed {
    0%   { transform: translateY(0) scaleY(1); animation-timing-function: cubic-bezier(0.33,0,0.4,1); }
    32%  { transform: translateY(-5px) scaleY(1.05); animation-timing-function: cubic-bezier(0.6,0,0.95,0.4); }
    50%  { transform: translateY(3px) scaleY(0.82); animation-timing-function: cubic-bezier(0.2,1.6,0.5,1); }
    60%  { transform: translateY(1px) scaleY(1.05); animation-timing-function: ease-out; }
    72%  { transform: translateY(0) scaleY(1); }
    100% { transform: translateY(0) scaleY(1); }
  }
  .dz-brand:hover .dz-logo { animation: dz-drop-embed 2.4s ease-in-out infinite; }
}

.dz-links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.dz-links a {
  font-family: "DM Mono", monospace; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: #A9A292; text-decoration: none; transition: color 150ms;
}
.dz-links a:hover, .dz-links a.active { color: #C9A84C; }

.dz-cta {
  font-family: "DM Mono", monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #17150F; background: #C9A84C; padding: 9px 18px;
  text-decoration: none; transition: opacity 0.15s; white-space: nowrap;
}
.dz-cta:hover { opacity: 0.85; color: #17150F; }
/* Free Audit inside the mobile dropdown; hidden on desktop (the standalone .dz-cta shows there). */
.dz-cta-mobile { display: none; }

.dz-burger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: none; border: none; cursor: pointer; min-width: 44px; min-height: 44px;
  padding: 14px 11px; margin: -14px -11px;
}
.dz-burger-line { width: 22px; height: 2px; background: #A9A292; transition: background 150ms; display: block; }
.dz-burger:hover .dz-burger-line { background: #C9A84C; }

@media (max-width: 860px) {
  .dz-burger { display: flex; }
  .dz-nav-inner > .dz-cta { display: none; }   /* standalone CTA hidden; it moves into the dropdown */
  .dz-links {
    display: none; position: fixed; top: 100px; left: 0; right: 0;
    background: #17150F; flex-direction: column; padding: 24px 28px; gap: 24px;
    border-bottom: 1px solid #3A352A; z-index: 99;
  }
  .dz-links.open { display: flex; }
  .dz-links a { font-size: 15px; letter-spacing: 0.1em; min-height: 44px; display: flex; align-items: center; }
  .dz-links .dz-cta-mobile { display: flex; color: #C9A84C; }
}