/* Program Page Scoped Styles */
/* Scope all styles under #program-page to avoid collisions */

#program-page {
  position: relative;
}

/* Animated background shapes (scoped) */
#program-page .prog-shape {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  filter: blur(42px);
  opacity: 0.12;
  pointer-events: none;
  will-change: transform;
  z-index: 0;
  animation: prog-drift 18s ease-in-out infinite alternate;
}
#program-page .prog-shape.prog-small { width: 200px; height: 200px; }
#program-page .prog-shape.prog-large { width: 360px; height: 360px; }
#program-page .prog-top-left { top: -60px; left: -60px; }
#program-page .prog-top-right { top: -60px; right: -60px; }
#program-page .prog-bottom-left { bottom: -60px; left: -60px; }
#program-page .prog-bottom-right { bottom: -60px; right: -60px; }
#program-page .prog-center { top: 50%; left: 50%; transform: translate(-50%, -50%); }

#program-page .prog-soft { background: radial-gradient(closest-side, var(--primary-soft-color), transparent 72%); }
#program-page .prog-teal { background: radial-gradient(closest-side, rgba(17,153,142,0.8), transparent 75%); }

@keyframes prog-drift {
  0% { transform: translate(0, 0) rotate(0deg) scale(1); }
  50% { transform: translate(6px, -4px) rotate(1.2deg) scale(1.01); }
  100% { transform: translate(-4px, 6px) rotate(-1.2deg) scale(1); }
}

/* FAQ smooth animation for Program page */
#program-page .prog-faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: max-height 300ms ease, opacity 300ms ease, transform 300ms ease;
  will-change: max-height, opacity, transform;
}
#program-page details[open] .prog-faq-answer {
  max-height: 600px;
  opacity: 1;
  transform: translateY(0);
}

/* Program Accordion Styles (replicate FAQ look & feel, scoped) */
#program-page details.group {
  border: 1px solid #e5e7eb; /* gray-200 */
  border-radius: 1rem; /* rounded-2xl */
  background-color: #ffffff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
#program-page details.group:hover {
  background-color: #f9fafb; /* gray-50 */
}
#program-page details.group[open] {
  border-color: #d1fae5; /* teal-100-ish */
  box-shadow: 0 6px 20px rgba(17,153,142,0.12);
}

#program-page details.group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem; /* p-5 */
  cursor: pointer;
  font-weight: 600;
  color: #111827; /* text-gray-900 */
  list-style: none;
}
#program-page details.group summary::-webkit-details-marker { display: none; }
#program-page details.group summary::marker { content: ''; }

#program-page details.group summary > span:last-child {
  transition: transform 300ms ease;
}
#program-page details.group[open] summary > span:last-child {
  transform: rotate(180deg);
}

#program-page .prog-faq-answer {
  padding: 0 1.25rem 1rem; /* horizontal same as summary */
}