/* ==========================================================================
   RaceProof — Universal Site Navigation & Footer
   Include on EVERY page: <link rel="stylesheet" href="site-nav.css">
   This file is the single source of truth for nav and footer styling.
   Do NOT duplicate these styles in page-level <style> blocks.

   CANONICAL NAV MARKUP (copy verbatim; only add class="active" on the
   link for the current page):

   <nav class="rp-nav">
     <a href="https://join.raceproof.app" class="rp-nav-logo">Race<span>Proof</span></a>
     <div class="rp-nav-links">
       <a href="/product.html">Product</a>
       <a href="https://torque.raceproof.app/torque.html">Torque</a>
       <a href="/about.html">About</a>
       <a href="https://raceproof.app" class="rp-nav-login">Login</a>
     </div>
   </nav>

   CANONICAL FOOTER MARKUP:

   <footer class="rp-footer">
     <span>&copy; 2026 Half Wheel. All rights reserved.</span>
     <span><a href="/terms.html">Terms</a> &middot; <a href="/privacy.html">Privacy</a> &middot; <a href="mailto:holden@raceproof.app">Contact</a></span>
   </footer>
   ========================================================================== */

/* ---------- Fonts (nav/footer use JetBrains Mono) ---------- */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500&display=swap');

/* ---------- Main site nav (join, product, about, torque hub) ---------- */
.rp-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  height: 52px;
  background: rgba(12, 12, 14, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rp-nav-logo {
  color: #c4f04d;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.rp-nav-logo span {
  opacity: 0.7;
}

.rp-nav-links {
  display: flex;
  gap: 1.8rem;
  align-items: center;
}

.rp-nav-links a {
  color: #9a9890;
  text-decoration: none;
  text-transform: uppercase;
  transition: color 0.2s;
}

.rp-nav-links a:hover {
  color: #e8e6e1;
}

.rp-nav-links a.active {
  color: #c4f04d;
}

.rp-nav-login {
  padding: 4px 12px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.rp-nav-login:hover {
  border-color: rgba(255, 255, 255, 0.25) !important;
}

/* ---------- Dashboard/post header (torque content pages) ---------- */
.rp-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.5rem, 4vw, 3rem);
  height: 52px;
  background: rgba(12, 12, 14, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.rp-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rp-header-logo {
  color: #c4f04d;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.1em;
}

.rp-header-sep {
  color: rgba(255, 255, 255, 0.15);
}

.rp-header-back {
  color: #9a9890;
  text-decoration: none;
  transition: color 0.2s;
}

.rp-header-back:hover {
  color: #e8e6e1;
}

.rp-header-right {
  display: flex;
  gap: 1.5rem;
  align-items: center;
}

.rp-header-right a {
  color: rgba(255, 255, 255, 0.45);
  text-decoration: none;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  transition: color 0.2s;
}

.rp-header-right a:hover {
  color: #e8e6e1;
}

/* ---------- Universal site footer ---------- */
.rp-footer {
  padding: 2rem clamp(1.5rem, 4vw, 3rem);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.5);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  margin-top: 3rem;
}

.rp-footer a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  transition: color 0.2s;
}

.rp-footer a:hover {
  color: #e8e6e1;
}

/* ---------- Responsive ---------- */
@media (max-width: 640px) {
  .rp-nav,
  .rp-header {
    font-size: 0.65rem;
    padding: 0 1rem;
  }

  .rp-nav-links {
    gap: 1rem;
  }

  .rp-header-right {
    gap: 1rem;
  }

  .rp-footer {
    flex-direction: column;
    text-align: center;
    gap: 0.3rem;
  }
}