/* ============================================
   Aloha Surf Camp - Custom Styles
   Complements Tailwind CSS (loaded via CDN)
   ============================================ */

/* ---------- Smooth scrolling & base ---------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ---------- Header / Nav ---------- */
.nav-link {
  position: relative;
  font-weight: 500;
  color: #0c4a6e;
  transition: color .2s ease;
}
.nav-link:hover { color: #ff6b3d; }
.nav-link.active { color: #ff6b3d; }
.nav-link.active::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, #ff8a65, #ff6b3d);
}

/* Header scroll behavior — used on index.html where header starts transparent */
header.is-scrolled {
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
header.is-scrolled .nav-link { color: #0c4a6e; }
header.is-scrolled .nav-link:hover,
header.is-scrolled .nav-link.active { color: #ff6b3d; }

/* Transparent hero header (index.html) — white nav links with shadow for readability */
header[data-scroll-behavior="transparent"]:not(.is-scrolled) .nav-link {
  color: #ffffff;
  text-shadow: 0 1px 4px rgba(0,0,0,0.7);
}
header[data-scroll-behavior="transparent"]:not(.is-scrolled) .nav-link:hover,
header[data-scroll-behavior="transparent"]:not(.is-scrolled) .nav-link.active {
  color: #ffb547;
}

/* ---------- Forms ---------- */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: #075985;
  margin-bottom: 0.375rem;
}
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border: 1px solid #bae0fd;
  background: #ffffff;
  color: #0c4a6e;
  font-size: 1rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  border-color: #ff6b3d;
  box-shadow: 0 0 0 3px rgba(255,107,61,0.15);
}
.form-input::placeholder,
.form-textarea::placeholder { color: #7dd3fc; }
.form-textarea { min-height: 120px; resize: vertical; }
.form-input.error,
.form-select.error,
.form-textarea.error { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,0.12); }

/* ---------- Multi-step form ---------- */
.form-step {
  display: none;
  animation: fadein-up .4s ease both;
}
.form-step.active { display: block; }

.step-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #94a3b8;
  transition: color .25s ease;
}
.step-label.active { color: #ff6b3d; }
.step-label.complete { color: #0ea5e9; }

#progress-bar {
  background: linear-gradient(90deg, #ff8a65, #ff6b3d);
  transition: width .4s cubic-bezier(.4,0,.2,1);
}

/* ---------- Camp + Group radio cards ---------- */
.camp-radio,
.group-radio { position: absolute; opacity: 0; pointer-events: none; }

.camp-radio-card,
.group-radio-card {
  display: block;
  cursor: pointer;
  border: 2px solid #bae0fd;
  border-radius: 1rem;
  padding: 1.25rem;
  background: #ffffff;
  transition: all .2s ease;
  position: relative;
}
.camp-radio-card:hover,
.group-radio-card:hover {
  border-color: #ff8a65;
  transform: translateY(-2px);
  box-shadow: 0 8px 16px rgba(12,74,110,0.08);
}
.camp-radio:checked + .camp-radio-card,
.group-radio:checked + .group-radio-card {
  border-color: #ff6b3d;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
  box-shadow: 0 8px 24px rgba(255,107,61,0.18);
}
.camp-radio:checked + .camp-radio-card::after,
.group-radio:checked + .group-radio-card::after {
  content: "✓";
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  width: 1.75rem;
  height: 1.75rem;
  background: #ff6b3d;
  color: #fff;
  border-radius: 999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}
.camp-radio:focus-visible + .camp-radio-card,
.group-radio:focus-visible + .group-radio-card {
  box-shadow: 0 0 0 3px rgba(255,107,61,0.3);
}

/* ---------- Week selection cards ---------- */
.week-card {
  display: block;
  border: 2px solid #e0f2fe;
  border-radius: 1rem;
  padding: 1.25rem;
  background: #ffffff;
  text-decoration: none;
  color: #0c4a6e;
  transition: all .2s ease;
}
.week-card:hover {
  border-color: #ff8a65;
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(12,74,110,0.1);
}

/* ---------- Week checkboxes (registration multi-week) ---------- */
.week-option {
  user-select: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.week-option.week-selected {
  border-color: #ff6b3d !important;
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%) !important;
}
.week-option input[type="checkbox"] {
  cursor: pointer;
}

/* ---------- Camper blocks ---------- */
.camper-block {
  animation: fadein-up .3s ease both;
}

/* ---------- Gallery ---------- */
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.gallery-item img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .5s ease;
}
.gallery-item:hover { box-shadow: 0 16px 32px rgba(12,74,110,0.18); transform: translateY(-2px); }
.gallery-item:hover img { transform: scale(1.04); }

/* ---------- FAQ accordion ---------- */
.faq-item summary {
  cursor: pointer;
  list-style: none;
  outline: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .25s ease; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: linear-gradient(135deg, #ff8a65 0%, #ff6b3d 100%);
  color: #fff;
  font-weight: 600;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 20px rgba(255,107,61,0.3);
  border: none;
  cursor: pointer;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255,107,61,0.4); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.btn-secondary {
  background: #fff;
  color: #075985;
  font-weight: 600;
  padding: 0.875rem 1.75rem;
  border-radius: 999px;
  border: 2px solid #bae0fd;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all .15s ease;
  cursor: pointer;
}
.btn-secondary:hover { border-color: #0ea5e9; color: #0c4a6e; }

/* ---------- Animations ---------- */
@keyframes fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes fadein-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadein-right {
  from { opacity: 0; transform: translateX(30px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

.animate-fadein { animation: fadein .8s ease both; }
.animate-fadein-up { animation: fadein-up .8s ease both; }
.animate-fadein-right { animation: fadein-right .8s ease both; }
.animate-float { animation: float 4s ease-in-out infinite; }

.animation-delay-200 { animation-delay: 0.2s; }
.animation-delay-400 { animation-delay: 0.4s; }
.animation-delay-600 { animation-delay: 0.6s; }
.animation-delay-800 { animation-delay: 0.8s; }

/* ---------- Status messages ---------- */
.status-success {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #6ee7b7;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
}
.status-error {
  background: #fef2f2;
  color: #991b1b;
  border: 1px solid #fca5a5;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
}
.status-info {
  background: #eff6ff;
  color: #1e40af;
  border: 1px solid #93c5fd;
  padding: 1rem 1.25rem;
  border-radius: 0.75rem;
}

/* ---------- Wave divider ---------- */
.wave-divider {
  width: 100%;
  height: 60px;
  display: block;
}

/* ---------- Lightbox (gallery) ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(7,46,72,0.95);
  z-index: 100;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.lightbox.active { display: flex; animation: fadein .25s ease; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 0.75rem; box-shadow: 0 30px 60px rgba(0,0,0,0.5); }
.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.3); }

/* ---------- Mobile menu ---------- */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
#mobile-menu.open { max-height: 500px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print ---------- */
@media print {
  header, footer, .no-print { display: none !important; }
}