/* ═══════════════════════════════════════════════════════════
   NSC Ambassador Day 2026 — CSS
   (Tailwind handles layout/spacing; this file covers only:
    state styles, custom select arrows, modal display)
   ═══════════════════════════════════════════════════════════ */

/* ── Navbar scrolled state ─────────────────────────────────── */
#navbar.scrolled {
  background: rgba(30, 27, 75, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* ── Mobile nav open ───────────────────────────────────────── */
#navLinks.open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  background: rgba(30, 27, 75, 0.98);
  backdrop-filter: blur(16px);
  padding: 12px;
  gap: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

#navLinks.open a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  text-align: left;
  color: rgba(255, 255, 255, 0.7);
}

#navLinks.open a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

/* ── Custom select arrow ───────────────────────────────────── */
.custom-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  padding-right: 36px !important;
}

/* ── Field invalid state ───────────────────────────────────── */
.form-input.field-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239,68,68,0.12) !important;
}

/* ── Scroll progress bar ───────────────────────────────────── */
#scrollProgress {
  transform-origin: left center;
}

/* ── Success modal display helper ──────────────────────────── */
.modal-overlay.is-open {
  display: flex !important;
}

/* ── Consent checkbox checked styles ──────────────────────── */
#consent:checked ~ span #consentBox,
.consent-checked {
  background-color: #312e81;
  border-color: #312e81;
}

/* ── Smooth image rendering for QR code ───────────────────── */
#modalQrCode {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ── Screen reader only ────────────────────────────────────── */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ── Prevent layout shift during GSAP setup ───────────────── */
.feature-card,
.info-card,
.form-section {
  will-change: transform, opacity;
}

/* ── Perspective helpers for 3D tilt containers ───────────── */
.feature-grid,
.info-grid-wrap {
  transform-style: preserve-3d;
}