/* ═══════════════════════════════════════════════════════════════════════════
   MotoMagic — Premium Navigation  (css/premium-nav.css)   [Phase 2 + Capsule Redesign]
   Additive only. Enhances existing #nav / .nav-links / .active markup.
   Hooks used: .nav-links a.active, #nav.solid, #mobmenu.open. No JS, no routes.
   Load AFTER app.css.

   Capsule redesign note: the outer #nav row height (68px) and the announcement
   bar height (32px) are intentionally UNCHANGED — many other page stylesheets
   (clubs.css, marketplace.css, pricing-premium.css, tracker.css, etc.) hardcode
   top/padding offsets against that combined 100px header height. Instead, the
   "~46px rounded capsule" look from the reference is achieved by styling the
   .nav-links and .nav-search elements themselves as capsules that sit centered
   inside the existing 68px row (.nav-in already has align-items:center).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header: always the dark reference background, blur added on scroll ────*/
#nav {
  background: #070809;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background .3s var(--ease, cubic-bezier(.22,1,.36,1)),
              border-color .3s, backdrop-filter .3s, box-shadow .3s;
}
#nav.solid {
  background: rgba(7,8,9,.86);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border-bottom: 1px solid rgba(255,255,255,.09);
  box-shadow: 0 10px 34px -14px rgba(0,0,0,.66);
}
/* A touch more air across the bar */
.nav-in { gap: 22px; }

/* ── Announcement bar: unified dark tone with the new header ────────────────*/
.ship-bar {
  background: #070809;
  border-bottom: 1px solid rgba(255,255,255,.06);
  letter-spacing: .3px;
  transition: background .3s var(--ease), color .2s;
}
.ship-bar:hover { background: #0c0d0e; }

/* ── Logo: quiet lift ──────────────────────────────────────────────────────*/
.logo { transition: opacity .2s, transform .2s var(--ease, cubic-bezier(.22,1,.36,1)); }
.logo:hover { transform: translateY(-1px); }
.logo b { color: var(--white, #fff); }
.logo span { color: var(--red, #E30613); }

/* ── Nav links: rounded dark capsule per reference design ───────────────────*/
.nav-links {
  gap: 2px;
  height: 46px;
  padding: 0 6px;
  background: #0c0d0e;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
}
.nav-links a {
  position: relative;
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2px;
  color: var(--gray, #A0A0A0);
  border-radius: 10px;
  transition: color .22s var(--ease, cubic-bezier(.22,1,.36,1)), background .22s var(--ease);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: var(--red, #E30613);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .3s var(--ease, cubic-bezier(.22,1,.36,1));
}
.nav-links a:hover { color: var(--white, #fff); background: rgba(255,255,255,.05); }
.nav-links a:hover::after { transform: scaleX(1); }

/* Active page — persistent underline + white text + soft glow */
.nav-links a.active { color: var(--white, #fff); }
.nav-links a.active::after {
  left: 14px; right: 14px; bottom: 4px;
  transform: scaleX(1);
  box-shadow: 0 0 12px rgba(227,6,19,.45);
}
.nav-links a:focus-visible {
  outline: 2px solid var(--red, #E30613);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ── "More" menu: matches the same link look + reuses .user-dropdown/.ud-it ─
   for the panel, so it feels like the same design system as the account menu. */
.nav-more { position: relative; height: 100%; display: flex; align-items: center; }
.nav-more-btn {
  display: inline-flex; align-items: center; gap: 5px;
  position: relative;
  height: 36px;
  padding: 0 14px;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .2px;
  color: var(--gray, #A0A0A0);
  background: none; border: none; border-radius: 10px;
  cursor: pointer;
  transition: color .22s var(--ease, cubic-bezier(.22,1,.36,1)), background .22s var(--ease);
}
.nav-more-btn:hover { color: var(--white, #fff); background: rgba(255,255,255,.05); }
.nav-more-caret { transform: rotate(90deg); transition: transform .22s var(--ease, ease); flex-shrink: 0; }
.nav-more.open .nav-more-caret { transform: rotate(-90deg); }
.nav-more-btn:focus-visible {
  outline: 2px solid var(--red, #E30613);
  outline-offset: 3px;
  border-radius: 6px;
}
/* Subtle active state when the current route lives inside the More menu */
.nav-more-btn.active { color: var(--white, #fff); }
.nav-more-btn.active::after {
  content: '';
  position: absolute; left: 14px; right: 14px; bottom: 4px;
  height: 2px; border-radius: 2px;
  background: var(--red, #E30613);
  box-shadow: 0 0 12px rgba(227,6,19,.45);
}
.nav-more-drop { left: auto; right: 0; min-width: 190px; }
.nav-more-drop .ud-it { display: block; }
.nav-more-drop .ud-it.active { color: var(--white, #fff); background: rgba(255,255,255,.06); }

/* ── Search capsule: dark rounded pill matching the reference design.
   NOTE: width/flex-basis stays exclusively owned by css/app.css's responsive
   .nav-search rules (190/170/210/230px tiers) — never redeclared here. Only
   height, background, border and radius are restyled for the new capsule look. */
.nav-search input {
  height: 46px;
  background: #0c0d0e;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 24px;
}
.nav-search input::placeholder { color: var(--gray-dim, #7a7a7a); }
.nav-search input:hover {
  border-color: rgba(255,255,255,.2);
  background: rgba(255,255,255,.06);
}
.nav-search input:focus {
  box-shadow: 0 0 0 3px rgba(227,6,19,.12);
}
.nav-search:focus-within svg.nsr-search-ic { opacity: 1; color: var(--red, #E30613); }

/* ── Icon buttons (wishlist / cart / bell): hover pop ──────────────────────*/
.icon-btn { transition: background .18s, color .18s, transform .18s var(--ease); }
.icon-btn:hover {
  transform: translateY(-1px);
  color: var(--white, #fff);
  background: rgba(255,255,255,.06);
}
.icon-btn:active { transform: scale(.94); }
.icon-btn:focus-visible { outline: 2px solid var(--red, #E30613); outline-offset: 2px; }

/* ── Login / account ───────────────────────────────────────────────────────*/
.login-link {
  gap: 7px;
  padding: 9px 14px;
  border-radius: 10px;
  font-weight: 600;
  color: var(--gray, #A0A0A0);
  border: 1px solid transparent;
  transition: color .2s, background .2s, border-color .2s;
}
.login-link svg { transition: transform .2s var(--ease); }
.login-link:hover {
  color: var(--white, #fff);
  background: rgba(255,255,255,.05);
  border-color: var(--line, rgba(255,255,255,.08));
}
.login-link:hover svg { transform: translateY(-1px); }
.login-link:focus-visible { outline: 2px solid var(--red, #E30613); outline-offset: 2px; }

/* Signed-in avatar */
.user-avatar-btn { transition: transform .2s var(--ease), box-shadow .2s; }
.user-avatar-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(227,6,19,.5); }

/* ── Sell Motorcycle: the strongest header element (never over the logo) ───*/
.nav-cta { transition: transform .18s var(--ease), box-shadow .26s, background .2s, border-color .2s; }
.nav-sell-cta {
  padding: 11px 20px;
  border-radius: 12px;
  font-weight: 700;
  letter-spacing: .1px;
  border: 1px solid rgba(255,90,90,.5);
  background: linear-gradient(180deg, #F5121F, var(--red, #E30613));
  box-shadow: 0 8px 24px -8px rgba(227,6,19,.6), inset 0 1px 0 rgba(255,255,255,.2);
}
.nav-sell-cta svg { flex: 0 0 auto; transition: transform .2s var(--ease); }
.nav-sell-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px -10px rgba(255,32,32,.72), inset 0 1px 0 rgba(255,255,255,.24);
}
.nav-sell-cta:hover svg { transform: scale(1.12); }
.nav-sell-cta:active { transform: translateY(0) scale(.98); }
.nav-sell-cta:focus-visible { outline: 3px solid rgba(255,72,72,.7); outline-offset: 3px; }
.nav-sell-cta .nav-sell-short { display: none; }

/* ── Mobile menu: smoother open + comfortable targets ──────────────────────*/
#mobmenu {
  transition: opacity .3s var(--ease, cubic-bezier(.22,1,.36,1)),
              visibility .3s, transform .3s var(--ease);
}
#mobmenu a {
  transition: color .2s, background .2s, padding-left .2s var(--ease);
  border-radius: 10px;
}
#mobmenu a:hover,
#mobmenu a:active {
  color: var(--white, #fff);
  background: rgba(255,255,255,.05);
  padding-left: 18px;
}
#mobmenu a.active {
  color: var(--white, #fff);
  background: rgba(227,6,19,.1);
  box-shadow: inset 3px 0 0 var(--red, #E30613);
}
.mobtoggle, .nav-burger, [aria-label*="menu" i] { transition: transform .18s var(--ease); }
.mobtoggle:active, .nav-burger:active { transform: scale(.92); }

/* ── Reduced motion ────────────────────────────────────────────────────────*/
@media (prefers-reduced-motion: reduce) {
  .nav-links a::after { transition: none; }
  .logo:hover, .icon-btn:hover, .nav-cta:hover,
  .nav-sell-cta:hover, .login-link:hover svg { transform: none; }
  .nav-sell-cta:hover svg { transform: none; }
}

/* ── Responsive: keep the bar comfortable, never cramped ───────────────────*/
@media (max-width: 1200px) {
  .nav-links { gap: 5px; }
  .nav-links a { padding-left: 9px; padding-right: 9px; }
  .nav-links a::after,
  .nav-links a.active::after { left: 9px; right: 9px; }
}
@media (max-width: 980px) {
  /* Bigger comfortable tap targets in the mobile drawer */
  #mobmenu a { padding-top: 13px; padding-bottom: 13px; font-size: 15px; }
  /* Minimum 44×44px touch targets for the header's icon buttons on tablet/mobile */
  .icon-btn { width: 44px; height: 44px; }
  .nav-search input { height: 44px; }
}