/*
  Shared site nav (18/08/2026), one file included on every landing page so
  there is exactly one copy to keep in sync, rather than a hand-built topbar
  per page drifting out of sync with the others (faq.html was found missing
  its topbar entirely earlier this same day, this file exists to stop that
  happening again).

  Class names are prefixed dbnav- and every rule below is self-contained,
  deliberately not reusing each page's own CSS variables (--primary on
  features.html/compare.html versus --primary-500 on index.html/faq.html),
  so this file behaves identically no matter which page it is dropped into.

  Breakpoint: 768px, matching the industry-standard tablet breakpoint (the
  same one Bent Copper's own header uses via Tailwind's md: prefix). Below
  768px, the horizontal links collapse into a hamburger panel.
*/

#debbie-nav {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.dbnav-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(10, 10, 10, 0.9);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #2e2e2e;
}

.dbnav-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.dbnav-logo {
  font-size: 1.15rem;
  font-weight: 800;
  text-decoration: none;
  color: #ffffff;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.dbnav-logo span { color: #f97316; }

/* Desktop row: links + CTA, hidden below 768px */
.dbnav-desktop {
  display: none;
  align-items: center;
  gap: 4px;
}
.dbnav-desktop a {
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
  color: #cbd5e1;
  padding: 9px 12px;
  border-radius: 9px;
  transition: color 0.15s;
}
.dbnav-desktop a:hover { color: #ffffff; }
.dbnav-desktop a.dbnav-login { margin-left: 8px; }
.dbnav-desktop a.dbnav-cta {
  background: #f97316;
  color: #ffffff;
  padding: 9px 16px;
  margin-left: 4px;
}
.dbnav-desktop a.dbnav-cta:hover { background: #ea580c; color: #ffffff; }

/* Mobile hamburger button, hidden at 768px and above */
.dbnav-hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid #2e2e2e;
  border-radius: 10px;
  color: #cbd5e1;
  cursor: pointer;
  padding: 0;
}
.dbnav-hamburger:hover { border-color: #3e3e3e; color: #ffffff; }
.dbnav-hamburger svg { width: 20px; height: 20px; }

/* Mobile panel, collapsed by default via max-height, avoids a layout jump
   on first paint and needs no JavaScript library to animate. */
.dbnav-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.25s ease;
  background: rgba(10, 10, 10, 0.97);
  border-bottom: 1px solid #2e2e2e;
}
.dbnav-panel.dbnav-open { max-height: 480px; }
.dbnav-panel-inner { padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 4px; }
.dbnav-panel-inner a {
  text-decoration: none;
  font-size: 1rem;
  font-weight: 600;
  color: #e2e8f0;
  padding: 12px 4px;
}
.dbnav-panel-inner a.dbnav-cta {
  background: #f97316;
  color: #ffffff;
  text-align: center;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 8px;
}
.dbnav-panel-inner a.dbnav-cta:hover { background: #ea580c; }
.dbnav-panel-inner a.dbnav-login {
  border-top: 1px solid #2e2e2e;
  margin-top: 8px;
  padding-top: 16px;
  color: #94a3b8;
}

@media (min-width: 768px) {
  .dbnav-desktop { display: flex; }
  .dbnav-hamburger { display: none; }
  .dbnav-panel { display: none; }
}