/* 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. */

/* THE OYE NETWORK BAR was removed estate-wide 2026-08-27 (see the nav-bar removal
   project). #dz-nav now sits at the true top of the page instead of offset for it. */

#dz-nav {
  position: sticky;
  top: 0;
  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; }

/* Open state: the three lines become an X, so the burger reads as the way OUT. Without this
   the panel had no visible close control at all. 7px = one line (2px) + one gap (5px), so the
   outer lines meet in the middle. Transforms do not affect layout, so the gap is unchanged. */
.dz-burger.open .dz-burger-line { background: #C9A84C; }
.dz-burger.open .dz-burger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.dz-burger.open .dz-burger-line:nth-child(2) { opacity: 0; }
.dz-burger.open .dz-burger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (prefers-reduced-motion: no-preference) {
  .dz-burger-line { transition: background 150ms, transform 200ms ease, opacity 150ms; }
}

/* Tap-anywhere-else to dismiss. Sits UNDER the panel (99) and under the bar (100), so the
   burger stays live and the nav is never dimmed. Its top edge is measured in nav.js. */
.dz-scrim {
  position: fixed; top: 100px; left: 0; right: 0; bottom: 0;
  background: rgba(23, 21, 15, 0.55); z-index: 98;
}
.dz-scrim[hidden] { display: none; }

@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; }
}

/* ACCOUNT CONTROL. It used to be the 6th text link among Portfolio / Pricing / About, where it
   read as navigation rather than a way in, and Blake could not find it. It now sits at the far
   right beside the CTA, which is where every other site puts one: an outlined button next to
   the filled primary action, so the two are distinguishable at a glance and by shape, not only
   by colour. */
.dz-account {
  font-family: 'DM Mono', monospace; font-size: 12px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #C9A84C; background: transparent;
  border: 1px solid #C9A84C; padding: 8px 16px; margin-left: 14px;
  text-decoration: none; white-space: nowrap;
  transition: background 150ms, color 150ms;
}
.dz-account:hover { background: #C9A84C; color: #17150F; }
.dz-account-mobile { display: none; }

@media (max-width: 860px) {
  /* On mobile the bar only has room for the burger, so the account control moves INTO the
     panel and is styled as the outlined button there, directly above Free Audit. */
  .dz-nav-inner > .dz-account { display: none; }
  .dz-links .dz-account-mobile {
    display: inline-flex; align-items: center; justify-content: center;
    color: #C9A84C; border: 1px solid #C9A84C; padding: 12px 18px;
    font-weight: 700; letter-spacing: 0.08em; min-height: 48px;
  }
}