/*
 * styles-nav-footer.css
 * FortitudeFX™ Redesign — Shared Nav & Footer
 *
 * NAV THEMES:
 *   .nav-light   — index.html (light #FAF8F5 background)
 *   .nav-dark    — all standard site pages (dark #0d0d14 background)
 *   .nav-funnel  — stripped funnel pages: waitlist.html, joinfree.html
 *
 * FOOTERS:
 *   footer (.footer-inner/.footer-bottom)  — full site footer (dark #1A1510)
 *   .footer-funnel                         — stripped funnel footer (one line)
 *
 * HOW TO USE (site pages):
 *   1. Add <link rel="stylesheet" href="styles-nav-footer.css"> in <head>
 *   2. Add class="nav-light" or class="nav-dark" to <nav id="mainNav">
 *   3. Remove all nav and footer CSS from the page's own <style> block
 *   4. Keep the nav HTML and footer HTML exactly as shown in index.html
 *
 * HOW TO USE (funnel pages — waitlist, joinfree):
 *   1. Add <link rel="stylesheet" href="styles-nav-footer.css"> in <head>
 *   2. Use <nav class="nav-funnel"> … </nav>  and  <footer class="footer-funnel"> … </footer>
 *   3. Remove all nav and footer CSS from the page's own <style> block
 *
 * ALL nav + footer styling for every page now lives in THIS file.
 * Change it once → it propagates everywhere.
 */

/* ═══════════════════════════════════════
   SHARED UTILITY — trademark superscript
   Wrap visible ™ as <sup class="tm">™</sup>
═══════════════════════════════════════ */
.tm { font-size: 0.6em; vertical-align: super; line-height: 0; font-style: normal; }

/* ═══════════════════════════════════════
   SHARED NAV STRUCTURE
   (applies to both themes)
═══════════════════════════════════════ */
nav#mainNav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 0 48px;
  height: 68px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: box-shadow 0.3s, background 0.3s;
}

.nav-brand {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
}

.nav-links a {
  font-size: 13px;
  font-weight: 400;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}

.nav-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

.nav-btn-ghost {
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 100px;
  transition: all 0.2s;
}

.nav-btn-primary {
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 9px 22px;
  border-radius: 100px;
  transition: all 0.2s;
  letter-spacing: 0.02em;
}

/* Hamburger */
.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  transition: all 0.3s;
}

/* Mobile nav */
.nav-mobile {
  display: none;
  position: fixed;
  top: 68px; left: 0; right: 0;
  padding: 24px 24px 28px;
  flex-direction: column;
  gap: 18px;
  z-index: 99;
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s;
}
.nav-mobile-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
}

/* ═══════════════════════════════════════
   LIGHT NAV THEME — index.html only
   Add class="nav-light" to <nav id="mainNav">
═══════════════════════════════════════ */
nav#mainNav.nav-light {
  background: rgba(250,248,245,0.92);
  border-bottom: 1px solid rgba(26,21,16,0.07);
}
nav#mainNav.nav-light .nav-brand { color: #1A1510; }
nav#mainNav.nav-light .nav-links a { color: rgba(26,21,16,0.6); }
nav#mainNav.nav-light .nav-links a:hover,
nav#mainNav.nav-light .nav-links a.active { color: #1A1510; }
nav#mainNav.nav-light .nav-btn-ghost {
  color: #1A1510;
  border: 1px solid rgba(26,21,16,0.2);
}
nav#mainNav.nav-light .nav-btn-ghost:hover { border-color: #1A1510; }
nav#mainNav.nav-light .nav-btn-primary {
  color: #FAF8F5;
  background: #1A1510;
}
nav#mainNav.nav-light .nav-btn-primary:hover { background: #C9A84C; color: #1A1510; }
nav#mainNav.nav-light .nav-hamburger span { background: #1A1510; }

/* Light mobile nav */
.nav-light-mobile {
  background: #FAF8F5;
  border-bottom: 1px solid rgba(26,21,16,0.1);
}
.nav-light-mobile a { color: rgba(26,21,16,0.6); }
.nav-light-mobile a:hover { color: #1A1510; }

/* ═══════════════════════════════════════
   DARK NAV THEME — all pages except index
   Add class="nav-dark" to <nav id="mainNav">
═══════════════════════════════════════ */
nav#mainNav.nav-dark {
  background: rgba(13,13,20,0.94);
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
nav#mainNav.nav-dark.scrolled { box-shadow: 0 1px 32px rgba(0,0,0,0.4); }
nav#mainNav.nav-dark .nav-brand { color: #e8e4de; }
nav#mainNav.nav-dark .nav-links a { color: rgba(232,228,222,0.45); }
nav#mainNav.nav-dark .nav-links a:hover,
nav#mainNav.nav-dark .nav-links a.active { color: #e8e4de; }
nav#mainNav.nav-dark .nav-btn-ghost {
  color: #e8e4de;
  border: 1px solid rgba(232,228,222,0.18);
}
nav#mainNav.nav-dark .nav-btn-ghost:hover { border-color: rgba(232,228,222,0.45); }
nav#mainNav.nav-dark .nav-btn-primary {
  color: #0d0d14;
  background: #C9A84C;
}
nav#mainNav.nav-dark .nav-btn-primary:hover { background: #E06B1A; }
nav#mainNav.nav-dark .nav-hamburger span { background: #e8e4de; }

/* Dark mobile nav */
.nav-dark-mobile {
  background: #0d0d14;
  border-bottom: 1px solid rgba(201,168,76,0.1);
}
.nav-dark-mobile a { color: rgba(232,228,222,0.6); }
.nav-dark-mobile a:hover { color: #e8e4de; }

/* ═══════════════════════════════════════
   FUNNEL NAV — waitlist.html, joinfree.html
   Stripped: brand (left) + Back (right). In-flow, not fixed.
   Add class="nav-funnel" to <nav>.
═══════════════════════════════════════ */
nav.nav-funnel {
  position: relative;
  z-index: 10;
  height: 68px;
  padding: 0 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0d0d14;
  border-bottom: 1px solid rgba(201,168,76,0.08);
  flex-shrink: 0;
}
.nav-funnel-brand {
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e8e4de;
  text-decoration: none;
}
.nav-funnel-back {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 400;
  color: rgba(232,228,222,0.5);
  text-decoration: none;
  transition: color 0.2s;
}
.nav-funnel-back:hover { color: #e8e4de; }
.nav-funnel-back svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ═══════════════════════════════════════
   FOOTER — full site footer (all standard pages)
   Copied exactly from index.html
═══════════════════════════════════════ */
footer {
  background: #1A1510;
  padding: 56px 48px 40px;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.07);
  margin-bottom: 32px;
}
.footer-brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}
.footer-brand strong {
  display: block;
  font-family: 'Playfair Display', serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #FAF8F5;
  margin-bottom: 6px;
  text-transform: none;
}
.footer-links {
  display: flex;
  gap: 32px;
  list-style: none;
  flex-wrap: wrap;
}
.footer-links a {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-links a:hover { color: #C9A84C; }
.footer-socials {
  display: flex;
  gap: 8px;
  align-items: center;
}
.footer-social-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,0.35);
  text-decoration: none;
  transition: all 0.2s;
}
.footer-social-icon:hover {
  background: rgba(201,168,76,0.1);
  border-color: rgba(201,168,76,0.4);
  color: #C9A84C;
}
.footer-bottom {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-copy {
  font-size: 11px;
  color: rgba(255,255,255,0.2);
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.footer-tm {
  font-size: 11px;
  color: rgba(201,168,76,0.4);
  letter-spacing: 0.08em;
}

/* ═══════════════════════════════════════
   FUNNEL FOOTER — waitlist.html, joinfree.html
   Stripped: one slim line — copyright (left) + Privacy (right).
   Add class="footer-funnel" to <footer>.
═══════════════════════════════════════ */
footer.footer-funnel {
  background: #0d0d14;
  border-top: 1px solid rgba(201,168,76,0.08);
  padding: 22px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.footer-funnel-copy {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(232,228,222,0.25);
}
.footer-funnel-links {
  display: flex;
  gap: 22px;
  align-items: center;
}
.footer-funnel-links a {
  font-size: 12px;
  font-weight: 400;
  color: rgba(232,228,222,0.3);
  text-decoration: none;
  transition: color 0.2s;
}
.footer-funnel-links a:hover { color: #C9A84C; }

/* ═══════════════════════════════════════
   RESPONSIVE — shared across all pages
═══════════════════════════════════════ */
@media (max-width: 900px) {
  nav#mainNav { padding: 0 24px; }
  .nav-links, .nav-actions { display: none; }
  .nav-hamburger { display: flex; }
  footer { padding: 48px 24px 32px; }
  .footer-inner { flex-direction: column; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 600px) {
  nav.nav-funnel { padding: 0 24px; }
  footer.footer-funnel {
    padding: 18px 24px;
    flex-direction: column;
    gap: 10px;
    text-align: center;
    justify-content: center;
  }
}
