/* ────────────────────────────────────────────────────────────────────
   MadCatChat Unified Navigation
   Loaded on every page to make the top nav identical site-wide.
   Uses .mcc-* prefix so it can't accidentally collide with page CSS.
   ─────────────────────────────────────────────────────────────────── */

.mcc-nav, .mcc-nav-strip {
  /* Fallback CSS variables so the nav works even on pages that don't
     define them. Pages that DO define :root vars will inherit those
     instead and tint the nav with the active theme automatically. */
  --mcc-bg:      var(--bg,      #080910);
  --mcc-bg1:     var(--bg1,     #0d0f1a);
  --mcc-bg3:     var(--bg3,     #181c2a);
  --mcc-border:  var(--border,  #232640);
  --mcc-text:    var(--text,    #eceeff);
  --mcc-text2:   var(--text2,   #8890c4);
  --mcc-text3:   var(--text3,   #454d7a);
  --mcc-accent:  var(--accent,  #ff6b6b);
  --mcc-gold:    var(--gold,    #f5c842);
}

.mcc-nav {
  position: sticky;
  top: 0;
  z-index: 200;
  background: rgba(8, 9, 16, .96);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--mcc-border);
  padding: 0 16px;
  height: 56px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', system-ui, sans-serif;
  box-sizing: border-box;
}

.mcc-nav-logo {
  font-family: 'Syne', 'DM Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  flex-shrink: 0;
  color: var(--mcc-text);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1;
}
.mcc-nav-logo:hover { text-decoration: none; }
.mcc-nav-logo span { color: var(--mcc-accent); }

.mcc-nav-spacer { flex: 1; }

/* Optional right-side slot — pages can drop their page-specific buttons
   inside .mcc-nav-r and they'll align to the right of the logo. */
.mcc-nav-r {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex-shrink: 0;
  align-items: center;
}

/* Tab strip — full-width scrollable on mobile. Sticks below the brand bar. */
.mcc-nav-strip {
  position: sticky;
  top: 56px;
  z-index: 199;
  display: flex;
  gap: 2px;
  padding: 4px 8px;
  background: var(--mcc-bg1);
  border-bottom: 1px solid var(--mcc-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  font-family: 'DM Sans', system-ui, sans-serif;
  box-sizing: border-box;
}
.mcc-nav-strip::-webkit-scrollbar { display: none; }

.mcc-nav-tab {
  padding: 7px 16px;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--mcc-text3);
  white-space: nowrap;
  cursor: pointer;
  transition: all .15s;
  border: none;
  background: none;
  flex-shrink: 0;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  line-height: 1;
}
.mcc-nav-tab:hover {
  color: var(--mcc-text2);
  background: var(--mcc-bg3);
  text-decoration: none;
}
.mcc-nav-tab.active {
  color: var(--mcc-text);
  background: var(--mcc-bg3);
}

/* Shop tab has a gold tint to stand out */
.mcc-nav-shop {
  background: linear-gradient(135deg, rgba(245, 200, 66, .15), rgba(255, 107, 107, .12));
  color: var(--mcc-gold);
  border: 1px solid rgba(245, 200, 66, .3);
  font-weight: 700;
}
.mcc-nav-shop:hover {
  background: linear-gradient(135deg, rgba(245, 200, 66, .25), rgba(255, 107, 107, .2));
  color: #ffd966;
}
.mcc-nav-shop.active {
  background: linear-gradient(135deg, rgba(245, 200, 66, .3), rgba(255, 107, 107, .25));
  color: #ffd966;
}