/* =========================
   ENROL PAGE — page-specific styles
   (uses global tokens from styles.css)
   • Static “lava lamp” background (like Classes & Staff)
   • Rainbow multi-stripe underline on the H1
   • No header/logo overrides
========================= */

/* ---------- Page-wide static lava-lamp background ---------- */
main::before{
  content:"";
  position:fixed;
  inset:-25vmax;                 /* bleed beyond edges so it fills on scroll */
  z-index:-1;
  background:
    radial-gradient(35vmax 35vmax at 20% 30%, var(--green) 0 38%, transparent 60%),
    radial-gradient(32vmax 32vmax at 80% 22%, var(--red)   0 38%, transparent 60%),
    radial-gradient(40vmax 40vmax at 52% 77%, var(--yellow)0 38%, transparent 60%),
    radial-gradient(30vmax 30vmax at 14% 74%, var(--purple)0 38%, transparent 60%),
    radial-gradient(36vmax 36vmax at 86% 70%, var(--blue)  0 38%, transparent 60%);
  filter: blur(28px) saturate(115%);
  opacity:.28;
  background-color:#fff;         /* fallback base */
  pointer-events:none;
}

/* ---------- HERO (lighter, no animated bg) ---------- */
.page-hero{
  position:relative; overflow:hidden;
  /* keep comfy space under your fixed navbar (uses global --nav-h) */
  padding: calc(var(--nav-h, 96px) + clamp(18px, 4.5vh, 48px)) 0 clamp(18px, 4vh, 40px);
  background: transparent;       /* bg now handled by main::before */
}
.page-hero .container{ position:relative; text-align:center; }

/* --- Remove old heavy hero blobs/dots if they existed --- */
.page-hero::before,
.page-hero::after,
.page-hero .container::before{ content:none !important; }

/* ---------- Heading + rainbow underline (matches Classes & Staff) ---------- */
.page-hero .title{
  font-weight:900; letter-spacing:.2px; text-align:center;
  text-shadow:0 6px 18px rgba(0,0,0,.08);
  position:relative; padding-bottom:14px; /* space for underline */
}
.page-hero .title::after{
  content:"";
  position:absolute; left:50%; bottom:0;
  width:160px; height:6px; border-radius:999px;
  transform: translateX(-50%) scaleX(0);
  transform-origin: center;
  background:
    linear-gradient(90deg,
      var(--green) 0 20%,
      var(--red)   20% 40%,
      var(--yellow)40% 60%,
      var(--purple)60% 80%,
      var(--blue)  80% 100%);
  box-shadow:0 8px 22px rgba(0,0,0,.12);
  animation: underlineGrow .7s cubic-bezier(.2,.65,.2,1) .20s forwards;
}
.page-hero .sub{
  color:#4b5563; max-width:760px; margin:.35rem auto 0;
  opacity:0; transform:translateY(8px);
  animation: fadeUpIn .6s ease .18s forwards;
}

/* CTAs */
.hero-ctas{
  display:flex; gap:.75rem; justify-content:center; margin-top:1rem; flex-wrap:wrap;
}
.hero-ctas .btn-primary{ background:var(--green); border-color:var(--green); }
.hero-ctas .btn-primary:hover{ background:#079d55; border-color:#079d55; }
.btn-outline-primary{ border-color:var(--green); color:var(--green); }
.btn-outline-primary:hover{ background:var(--green); color:#fff; }

/* ---------- FULL-WIDTH PROCESS CARD ---------- */
.enrol-process{ padding: 1.75rem 0 0.75rem; }
.card-edge{
  background:#fff; border:0; border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  padding:1.25rem 1.25rem;
}
.enrol-process .btn-primary{ background:var(--green); border-color:var(--green); }
.enrol-process .btn-primary:hover{ background:#079d55; border-color:#079d55; }

/* ---------- TWO-COLUMN STRIP UNDERNEATH ---------- */
.enrol-grid{ padding: 0.5rem 0 3rem; }
.info-card{
  background:#fff; border:0; border-radius:16px;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  padding:1.25rem 1.25rem;
}
.info-card ul{ margin-left:1rem; }
.btn-outline-secondary{ border-color:#94a3b8; color:#475569; }
.btn-outline-secondary:hover{ background:#94a3b8; color:#fff; }

/* ---------- Animations ---------- */
@keyframes underlineGrow{ to{ transform: translateX(-50%) scaleX(1); } }
@keyframes fadeUpIn{ to{ opacity:1; transform: translateY(0); } }

/* Motion safety */
@media (prefers-reduced-motion:reduce){
  .page-hero .title::after,
  .page-hero .sub{ animation:none!important; transform:none!important; opacity:1!important; }
}

/* Responsive */
@media (max-width: 991.98px){
  .hero-ctas{ flex-direction:column; }
}