/* ============================================================
   Rokin — the top navigation bar
   THE single source of truth for the nav. Every page carries the
   same bar: same links, same order, same CTA, same avatar.

   Before this file existed, the nav was defined inline on each
   page and had drifted into four different versions — the content
   pages dropped "My Listings"/"Inbox" and the avatar, register.html
   had a different link set entirely, and the CTA was font-weight
   600 on some pages and 500 on others.

   Load order (README "Architecture rules" §1):
     tokens.css  →  brand.css  →  nav.css  →  [doc.css]  →  page <style>  →  mobile.css

   THE ONE EXCEPTION — index.html.
   The homepage nav is transparent and sits over the hero photograph
   with the LIGHT lockup, so the hero image runs full-bleed behind
   it. That is a deliberate hero treatment, not drift: the links,
   CTA and avatar are identical to every other page. index.html
   keeps its own `nav` positioning rules in its inline <style> and
   does not link this file.

   Responsive rules live in mobile.css (<=840 / <=520), which is
   linked last so it wins without !important.
   ============================================================ */

nav {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 68px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

/* `align-items: stretch` + full height is what lets the active
   underline sit flush on the bottom border of the bar. */
.nav-links {
  display: flex;
  align-items: stretch;
  gap: 2rem;
  list-style: none;
  height: 100%;
  margin: 0;
  padding: 0;
}

.nav-links li {
  position: relative;
  display: flex;
  align-items: center;
}

.nav-links a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t-hover);
}

.nav-links a:hover { color: var(--navy); }

.nav-links li.active a { color: var(--navy); font-weight: 700; }

.nav-links li.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--accent);
}

.nav-actions { display: flex; align-items: center; gap: 1rem; }

/* The nav CTA. `.btn-primary`, not `.btn-gold` — the two were
   identical apart from font-weight (500 vs 600), which is why the
   button looked subtly heavier on the homepage and content pages. */
.btn-primary {
  background: var(--accent);
  border: none;
  border-radius: 0;
  padding: 9px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  color: var(--white);
  transition: all var(--t-hover);
  font-family: 'Archivo', sans-serif;
}

.btn-primary:hover { background: var(--accent-light); }

/* ── Account avatar + menu ─────────────────────────────────── */
.avatar-wrap { position: relative; }

.nav-avatar-btn {
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent);
  border: none; cursor: pointer; display: flex; align-items: center; justify-content: center;
  font-family: 'Archivo', sans-serif; font-size: 15px; font-weight: 700; color: var(--white);
  transition: opacity 0.15s; text-decoration: none;
}

.nav-avatar-btn:hover { opacity: 0.85; }

.avatar-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--white); border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(33,34,70,0.12);
  min-width: 200px; z-index: 1000; display: none;
}

.avatar-menu.open { display: block; animation: menu-in 0.15s ease; }

@keyframes menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.avatar-menu-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  text-decoration: none; font-size: 14px; font-weight: 500;
  color: var(--navy); transition: background 0.15s; border-radius: 0;
}

.avatar-menu-item:hover { background: var(--cream); color: var(--navy); }
.avatar-menu-divider { height: 1px; background: var(--border); margin: 4px 0; }
.avatar-menu-signout { color: var(--danger); }
.avatar-menu-signout:hover { background: rgba(220,38,38,0.05); color: var(--danger); }