/* ═══════════════════════════════════════════════════════════
   NSC Young Adults Camp 2026 — Light Mode CSS
   (Tailwind handles layout/spacing; this file covers only:
    specific state styles, custom select arrows, modal display)
   ═══════════════════════════════════════════════════════════ */

/* ── Navbar scrolled state ─────────────────────────────────── */
#navbar.scrolled {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 4px 32px rgba(15, 23, 42, 0.08);
  border-bottom: 1px solid rgba(15, 23, 42, 0.05);
}

/* ── Mobile nav open ───────────────────────────────────────── */
#navLinks.open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 64px;
  left: 0; right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  padding: 12px;;
  gap: 4px;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
}

#navLinks.open a {
  display: block;
  padding: 12px 16px;
  border-radius: 10px;
  text-align: left;
}

#navLinks.open .bg-gold-500 {
  text-align: center;
  margin-top: 6px;
}

/* ── 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: #0f172a; /* brand-900 */
  border-color: #0f172a;
}

/* ── 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;
}