/* =============================================
   GlobalPathwayInstitute — Custom CSS
   ============================================= */

/* ── Base ── */
html { scroll-behavior: smooth; }

/* ── Fade-in on scroll ── */
.fade-in {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero gradient text ── */
.gradient-text {
  background: linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Course card hover lift ── */
.course-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.course-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(29, 78, 216, 0.13);
}

/* ── Testimonial card border glow ── */
.testimonial-card {
  transition: border-color 0.25s ease;
}
.testimonial-card:hover { border-color: #60a5fa; }

/* ── Accordion chevron rotation ── */
.chevron { transition: transform 0.25s ease; }
.accordion-btn[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* ── Mobile menu slide-down ── */
#mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
#mobile-menu.open { max-height: 480px; }

/* ── Toast notification ── */
#toast {
  transition: opacity 0.4s ease, transform 0.4s ease;
}
#toast.show {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Star color ── */
.star { color: #f59e0b; }

/* ── Pricing popular ring ── */
.pricing-popular { box-shadow: 0 0 0 3px #1d4ed8; }

/* ── Scroll-to-top button ── */
#scroll-top {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
#scroll-top.visible {
  opacity: 1;
  pointer-events: all;
}

/* ── Focus ring ── */
button:focus-visible,
a:focus-visible {
  outline: 3px solid #60a5fa;
  outline-offset: 2px;
}

/* ── Step card arrow (how it works) ── */
.step-arrow {
  position: absolute;
  top: 50%;
  right: -18px;
  transform: translateY(-50%);
  color: #bfdbfe;
  font-size: 1.5rem;
  z-index: 10;
}