/* ===== BZ Kustomz shared navbar (standalone) =====
   Mirrors the navbar rules in styles.css but with literal values, so it can be
   loaded on the homepage (which does not load styles.css) without depending on
   that file's CSS variables. Keep in sync with styles.css lines ~46-206. */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(17,17,17,0.96);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid #2A2A2A;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

nav .nav-logo { display: flex; align-items: center; gap: 12px; cursor: pointer; text-decoration: none; }

nav .nav-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}

nav .nav-links a, nav .nav-links .nav-parent {
  font-family: "Barlow","DM Sans",system-ui,sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1.5px;
  color: #C8C8C8;
  text-decoration: none;
  padding: 8px 14px;
  cursor: pointer;
  transition: color 0.2s;
  position: relative;
  text-transform: none;
}

nav .nav-links a:hover, nav .nav-links .nav-parent:hover { color: #FFFFFF; }
nav .nav-links a.active-link, nav .nav-links .nav-parent.active-link { color: #CC2222; }

nav .dropdown { position: relative; }

nav .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  background: #1C1C1C;
  border: 1px solid #333;
  border-top: 2px solid #CC2222;
  min-width: 220px;
  padding: 8px 0;
}

nav .dropdown.open .dropdown-menu { display: block; }

nav .dropdown-menu a {
  display: block;
  padding: 10px 20px;
  font-size: 12px;
  letter-spacing: 1px;
  color: #C8C8C8;
  text-decoration: none;
  transition: all 0.2s;
}

nav .dropdown-menu a:hover { background: #242424; color: #FFFFFF; padding-left: 26px; }

nav .nav-cta {
  background: #CC2222;
  color: #FFFFFF !important;
  padding: 10px 20px !important;
  font-size: 13px !important;
  letter-spacing: 0px !important;
  transition: background 0.2s !important;
}

nav .nav-cta:hover { background: #A81A1A !important; color: #FFFFFF !important; }

nav .mobile-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; }
nav .mobile-burger span { display: block; width: 26px; height: 2px; background: #FFFFFF; transition: all 0.3s; }

.mobile-menu {
  display: none;
  position: fixed;
  top: 76px;
  left: 0;
  right: 0;
  background: #1C1C1C;
  border-bottom: 2px solid #CC2222;
  padding: 24px 40px;
  z-index: 99;
  flex-direction: column;
  gap: 4px;
}

.mobile-menu.open { display: flex; }

.mobile-menu a {
  font-family: "Barlow","DM Sans",system-ui,sans-serif;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0px;
  color: #C8C8C8;
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid #2A2A2A;
}

.mobile-menu a:last-child { border-bottom: none; }
.mobile-menu a.sub { padding-left: 16px; font-size: 12px; color: #8A8A8A; }

@media (max-width: 768px) {
  nav { padding: 0 20px; }
  nav .nav-links { display: none; }
  nav .mobile-burger { display: flex; }
  /* Keep the plate wordmark on phones too, same as desktop. */
  nav .nav-logo img { height: 44px !important; }
  .nav-logo-plate { display: block !important; }
  .nav-logo-badge { display: none !important; }
}