/* nav.css */

/* ===========================
   Color Theme Variables
   =========================== */
:root {
  /* Warm, ranch-style palette instead of pure black/grey */
  --nav-bg: rgba(26, 18, 12, 0.94);           /* main navbar background */
  --nav-bg-solid-mobile: #1b130e;             /* solid base on small screens */
  --nav-border: rgba(255, 244, 224, 0.16);    /* subtle warm border */
  --nav-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);

  --nav-link-color: #f7efe4;                  /* soft off-white text */
  --nav-link-muted: #d1c2ae;
  --nav-link-hover: #ffb74d;                  /* warm amber */
  --nav-link-underline: #ffcc80;

  --nav-cta-border: rgba(255, 243, 224, 0.3);
  --nav-cta-glow: rgba(255, 183, 77, 0.45);
}

/* ===========================
   Navbar Container
   =========================== */
nav.navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nav-border);
  box-shadow: var(--nav-shadow);
  padding: 0.6rem 1.5rem;
}

/* Inner width constraint so it lines up with page content */
nav.navbar .nav-inner {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

/* ===========================
   Brand (logo + text block)
   =========================== */
nav.navbar .brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--nav-link-color);
  white-space: nowrap;
}

nav.navbar .brand-logo-img {
  height: 40px;
  width: auto;
  display: block;
}

nav.navbar .brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

nav.navbar .brand-title {
  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

nav.navbar .brand-subtitle {
  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.8;
}

/* ===========================
   Navbar List & Items
   =========================== */
nav.navbar .nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  margin-left: auto; /* push links to the right on desktop */
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

nav.navbar .nav-links li {
  display: flex;
}

/* ===========================
   Navbar Links
   =========================== */
nav.navbar .nav-link {
  position: relative;
  font-family: "Source Sans 3", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 0.9rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nav-link-color);
  text-decoration: none;
  padding: 0.55rem 0.75rem;
  border-radius: 999px;
  border: 1px solid transparent;
  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.12s ease;
  background: radial-gradient(circle at top, rgba(255, 255, 255, 0.02), transparent 55%);
}

/* Underline animation */
nav.navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 0;
  height: 2px;
  border-radius: 999px;
  background: var(--nav-link-underline);
  transition: width 0.25s ease, left 0.25s ease, opacity 0.25s ease;
  opacity: 0;
}

/* Default hover */
nav.navbar .nav-link:hover {
  color: var(--nav-link-hover);
  border-color: rgba(255, 243, 224, 0.18);
  background-color: rgba(45, 32, 23, 0.85);
}

/* Active state underline */
nav.navbar .nav-link:hover::after,
nav.navbar .nav-link.active::after {
  width: 60%;
  left: 20%;
  opacity: 1;
}

/* ===========================
   CTA-style links (Members)
   =========================== */
nav.navbar .nav-cta {
  border-color: var(--nav-cta-border);
  background:
    radial-gradient(circle at top left, rgba(255, 204, 128, 0.16), transparent 55%),
    linear-gradient(135deg, rgba(68, 45, 30, 0.9), rgba(38, 25, 17, 0.96));
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4);
}

nav.navbar .nav-cta:hover,
nav.navbar .nav-cta.active {
  background: linear-gradient(135deg, #f57c00, #e65100);
  color: #ffffff;
  border-color: rgba(0, 0, 0, 0.5);
  box-shadow: 0 6px 16px var(--nav-cta-glow);
  transform: translateY(-1px);
}

nav.navbar .nav-cta::after {
  /* Remove underline for pill buttons; they already stand out */
  display: none;
}

/* Optional: a more muted style for Logout */
nav.navbar .nav-link-plain {
  opacity: 0.8;
  color: var(--nav-link-muted);
}

nav.navbar .nav-link-plain:hover {
  opacity: 1;
  color: var(--nav-link-color);
}

/* ===========================
   Base hamburger elements
   (kept but hidden so nothing weird shows)
   =========================== */
.nav-toggle-label {
  display: none;
}

.nav-toggle {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* ===========================
   MOBILE LAYOUT
   =========================== */

@media (max-width: 768px) {
  /* Keep it compact on mobile, but not hard black */
  nav.navbar {
    padding: 0.5rem 0.75rem;
    background:
      linear-gradient(to bottom, rgba(27, 19, 14, 0.98), rgba(18, 12, 9, 0.96));
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  }

  nav.navbar .nav-inner {
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
  }

  nav.navbar .brand-logo {
    justify-content: center;
  }

  nav.navbar .brand-title {
    font-size: 0.95rem;
  }

  nav.navbar .brand-subtitle {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }

  nav.navbar .nav-links {
    margin-left: 0;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    gap: 0.25rem;
  }

  nav.navbar .nav-links li {
    margin: 0;
  }

  nav.navbar .nav-link {
    padding: 0.4rem 0.6rem;
    font-size: 0.8rem;
    background: rgba(41, 30, 23, 0.9);
    border-color: rgba(255, 243, 224, 0.08);
  }

  nav.navbar .nav-link:hover {
    background: rgba(51, 37, 28, 0.98);
  }
}

/* Slightly wider phones / small tablets */
@media (max-width: 480px) {
  nav.navbar .nav-link {
    letter-spacing: 0.09em;
  }
}