/* Wave 51e — shared top nav styles, extracted from inline CSS in
 * client/public/index.html so non-home pages can use the same nav
 * (previously only the home page had the styled topnav; everywhere
 * else the logo was missing).
 */

.topnav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1.25rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(8, 10, 13, 0.0);
  transition: background 400ms ease, backdrop-filter 400ms ease,
              border-color 400ms ease;
  border-bottom: 1px solid transparent;
}

.topnav.is-scrolled,
/* On non-home pages we don't have a dark hero — keep the bar visible
 * from the first paint so the logo doesn't disappear against light
 * page backgrounds. */
body:not(.has-hero) .topnav {
  background: rgba(8, 10, 13, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom-color: var(--border, rgba(255,255,255,0.08));
}

.wordmark {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  text-decoration: none;
}
.wordmark img {
  /* The PNG includes both the T-monogram AND the 'Baroque Travel'
   * lettering. Show the whole logo once — no separate text span. */
  height: 70px;
  width: auto;
  display: block;
  filter: invert(94%) sepia(18%) saturate(420%) hue-rotate(2deg) brightness(96%) contrast(88%);
  opacity: 0.98;
}

.topnav nav {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.topnav nav a {
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #F6EFE0;
  text-decoration: none;
  transition: color 200ms ease;
}

.topnav nav a:hover { color: var(--gold, #B8921A); }

.topnav .nav-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  background: var(--gold, #B8921A);
  color: var(--navy, #0C0906);
  font-family: 'Jost', system-ui, sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--gold, #B8921A);
  border-radius: 2px;
  transition: background 0.2s ease;
}

.topnav .nav-cta:hover { background: var(--gold-light, #D4AF37); }

/* When body has the .has-topnav-shim class, leave room for the fixed bar
 * so the page content doesn't slide under the logo. */
body.has-topnav-shim { padding-top: 92px; }

/* Wave 53a — initials chip for authenticated members. Identical token
 * to the inline version on index.html so the surface stays consistent. */
.bt-initials-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(196,160,82,0.65);
  background: transparent;
  color: #C4A052;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.bt-initials-chip:hover {
  background: #C4A052;
  border-color: #C4A052;
  color: #1A2B4A;
}

/* bt-public-only / bt-members-only visibility — duplicated here so
 * non-home pages that pull in topnav.css also respect auth state. */
body[data-auth-state="public"] .bt-members-only,
body[data-auth-state="public"] .bt-noir-only { display: none !important; }
body[data-auth-state="member"] .bt-public-only,
body[data-auth-state="member"] .bt-noir-only { display: none !important; }
body[data-auth-state="noir"] .bt-public-only { display: none !important; }