/* =========================================================
   StatCPR – Classes Page (Bootstrap + Custom Styling)
   Applies to: jump menu + 3 course sections + FAQs
   ========================================================= */

/* Smooth anchor scrolling */
html {
  scroll-behavior: smooth;
}

/* Anchor offset if you have sticky nav */
.course-section {
  scroll-margin-top: 90px;
}

/* ---------------------------------------------------------
   Layout: Sections + separators
--------------------------------------------------------- */
.course-section {
  padding: 1.25rem 0;
}

.course-section + .course-section {
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

/* ---------------------------------------------------------
   Mobile jump menu
--------------------------------------------------------- */
.classes-jump {
  position: sticky;
  top: 0.75rem;
  z-index: 10;
}

.classes-jump .btn {
  border-radius: 999px;
}

/* ---------------------------------------------------------
   Cards: Course + FAQ
--------------------------------------------------------- */
.course-card,
.faq-card {
  border-radius: 18px;
}

/* Slightly tighter padding on very small screens */
@media (max-width: 575.98px) {
  .course-card .card-body,
  .faq-card .card-body {
    padding: 1.25rem !important;
  }
}

/* ---------------------------------------------------------
   Typography tweaks
--------------------------------------------------------- */
.course-card h2,
.course-card .h4 {
  letter-spacing: -0.01em;
}

/* ---------------------------------------------------------
   BLS “clean info block”
--------------------------------------------------------- */
.course-info {
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.course-info-item + .course-info-item {
  margin-top: 1rem;
}

.course-info-title {
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(0, 0, 0, 0.55);
  margin-bottom: 0.25rem;
}

.course-info p {
  margin-bottom: 0;
  line-height: 1.45;
  color: rgba(0, 0, 0, 0.78);
}

/* ---------------------------------------------------------
   Heartsaver + Pediatric “meta block” styling
--------------------------------------------------------- */
.course-meta {
  margin-top: 1.25rem;
  padding: 1rem;
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.03);
}

.meta-row + .meta-row {
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.meta-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.6);
  margin-bottom: 0.25rem;
}

.meta-value {
  color: rgba(0, 0, 0, 0.78);
  line-height: 1.45;
}

/* ---------------------------------------------------------
   Buttons
--------------------------------------------------------- */
.course-card .btn-lg {
  border-radius: 12px;
}

.btn-outline-secondary {
  border-radius: 12px;
}

/* ---------------------------------------------------------
   Accordion tweaks
--------------------------------------------------------- */
.accordion-button {
  font-weight: 600;
  line-height: 1.25;
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}

.accordion-item {
  border-left: 0;
  border-right: 0;
}

.accordion-body {
  color: rgba(0, 0, 0, 0.78);
  line-height: 1.45;
}

/* ---------------------------------------------------------
   Optional: sticky FAQ on desktop
   If you don't want sticky, delete this block.
--------------------------------------------------------- */
@media (min-width: 992px) {
  .faq-card {
    position: sticky;
    top: 1rem;
  }
}


/* ---------------------------------------------------------
   Strong Section Break (unambiguous, text-free)
--------------------------------------------------------- */
.section-break {
  height: 3.5rem;
  margin: 2.5rem 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.02),
    rgba(0, 0, 0, 0.06),
    rgba(0, 0, 0, 0.02)
  );
  border-radius: 12px;
}