/**
 * Light-surface overrides — Synthesia-style readable text on white/lavender pages.
 * Loaded after main.css; relies on tokens.css light variables.
 */

.nav-menu-bar {
  border-top: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.72);
}

.nav-menu-list li + li {
  box-shadow: inset 1px 0 0 var(--glass-border);
}

.nav-menu-list a {
  color: var(--text-secondary);
}

.nav-menu-list a:hover,
.nav-menu-list a:focus-visible {
  color: var(--magenta);
  background: var(--surface-accent);
}

.nav-menu-list a.active {
  color: var(--magenta-dark);
  background: rgba(225, 29, 143, 0.06);
  box-shadow: inset 0 -2px 0 var(--magenta);
}

.nav-menu-sep {
  background: var(--glass-border);
}

.nav-links {
  color: var(--text-primary);
}

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

.brand-tagline {
  border-left-color: var(--glass-border);
  background: linear-gradient(105deg, #0f172a 0%, var(--magenta) 55%, var(--violet) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: none;
  animation: none;
}

.brand-logo {
  filter: drop-shadow(0 2px 8px rgba(15, 23, 42, 0.08));
}

.hero h1 {
  color: var(--text-heading);
}

.center-title,
.section h2,
.section-title {
  color: var(--text-heading);
}

.section-lead,
.testimonial p {
  color: var(--text-secondary);
}

.event-card-v2 .event-card-title,
.event-card-v2 h3 {
  color: var(--text-heading);
}

.event-card-v2 .event-card-meta,
.event-card-v2 .event-card-venue {
  color: var(--text-secondary);
}

.card h3,
.card p {
  color: var(--text-secondary);
}

.card h3 {
  color: var(--text-heading);
}

.footer {
  color: var(--text-secondary);
  border-top: 1px solid var(--glass-border);
  background: rgba(255, 255, 255, 0.65);
}

.footer a:hover {
  color: var(--magenta);
}

.footer-col strong {
  color: var(--text-heading);
}

.search-box {
  background: var(--glass-strong);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.search-box input {
  color: var(--text-primary);
}

.search-box input::placeholder {
  color: var(--text-muted);
}

.search-hint {
  color: var(--text-muted);
}

.nav-toggle-bar {
  background: var(--text-primary);
}

@media (max-width: 900px) {
  .nav-links.is-open {
    background: var(--glass-strong);
    border-color: var(--glass-border);
    box-shadow: var(--glass-shadow);
  }

  .nav-links.is-open a {
    color: var(--text-primary);
    background: var(--surface-muted);
  }

  .nav-links.is-open .nav-btn {
    box-shadow: 0 4px 14px rgba(225, 29, 143, 0.25);
  }
}