/* ═══════════════════════════════════════════════
   TickTrack — Shared Site Header
   Dark top banner used by the landing pages and the
   blog. Import AFTER tokens.css (uses its variables).
═══════════════════════════════════════════════ */

/* ── Brand mark ── */
.hero-brand {
  display: flex;
  align-items: center;
  gap: var(--s-12);
  text-decoration: none;
  justify-content: center;
}

.hero-brand-name {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--coral);
  line-height: 1;
  letter-spacing: 0.04em;
  -webkit-text-stroke: 3px var(--brand-outline);
  text-stroke: 3px var(--brand-outline);
  paint-order: stroke fill;
}

/* ── Top banner ── */
.top-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-16);
  padding: var(--s-12) clamp(16px, 4vw, 32px);
  background: var(--brand-outline);
}

.top-banner .hero-brand-name { font-size: 2.8rem; }
@media (min-width: 960px) {
  .top-banner .hero-brand-name { font-size: 2.2rem; }
}

/* ── Site nav (right side of banner) ── */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--s-20);
}

.site-nav a {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--brand-outline-text);
  text-decoration: none;
  opacity: 0.72;
}

.site-nav a:hover,
.site-nav a.active {
  color: var(--coral);
  opacity: 1;
}

.site-nav .nav-cta {
  background: var(--coral);
  color: #fff;
  border-radius: var(--r-round);
  padding: var(--s-8) var(--s-16);
  font-weight: 800;
  opacity: 1;
  white-space: nowrap;
}
.site-nav .nav-cta:hover { color: #fff; }

/* Small screens: hide secondary nav links, keep brand + CTA */
@media (max-width: 500px) {
  .site-nav a:not(.nav-cta) { display: none; }
  .top-banner .hero-brand-name { font-size: 1.7rem; }
}