/* =====================================================================
   THE JOLLITY EVENTS — "Colorful Refresh" add-on
   Paste this at the very END of css/style.css  (it overrides via cascade)
   or link it after style.css in header.php.
   Inspired by beeparty + goldencarers — playful, bright, senior-friendly.
   Safe & reversible: delete this block to go back to the old look.
   ===================================================================== */

:root {
  /* --- fun secondary palette (added, brand blue+yellow kept) --- */
  --c-coral:   #ff6b6b;   --c-coral-soft:   #ffe4e1;
  --c-teal:    #12b3a6;   --c-teal-soft:    #d7f5f0;
  --c-purple:  #8b5cf6;   --c-purple-soft:  #ece7ff;
  --c-pink:    #ec5da8;   --c-pink-soft:    #ffe1f0;
  --c-sky:     #2fb6f2;   --c-sky-soft:     #dcf1fd;
  --c-lime:    #37c86b;   --c-lime-soft:    #ddf7e6;

  /* softer, warmer page background so colours pop */
  --bg: #fbf7ff;
}

/* ---- BIGGER, MORE READABLE TYPE (doc‑note: fonts bigger, fill space) ---- */
body { font-size: 18.5px; line-height: 1.72; }
.section         { padding: 88px 0; }
.section-tight   { padding: 56px 0; }
.section-head    { margin-bottom: 54px; }
.section-head h2 { font-size: clamp(30px, 4vw, 46px); }
.section-head p  { font-size: 18.5px; }
.btn             { font-size: 17px; padding: 15px 34px; }
.btn-sm          { font-size: 15px; padding: 10px 22px; }

/* colourful little underline swash under every section heading */
.section-head h2 { position: relative; display: inline-block; }
.section-head h2::after {
  content: "";
  display: block;
  width: 74px; height: 7px;
  margin: 14px auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--c-coral), var(--accent), var(--c-teal));
}

/* rainbow eyebrow pills */
.section-eyebrow {
  color: #fff;
  background: linear-gradient(135deg, var(--c-purple), var(--c-pink));
  letter-spacing: 0.14em;
}

/* =====================================================================
   HERO — brighter, happier gradient + livelier chips
   ===================================================================== */
.hero-panel {
  background:
    radial-gradient(120% 90% at 12% 8%, rgba(255,255,255,0.18), transparent 55%),
    linear-gradient(150deg, var(--primary) 0%, #4f7cf0 48%, var(--c-purple) 100%);
}
.hero h1 .hl { color: #ffe07a; }

/* the 3 tagline chips — bouncier + brighter (doc-note: add effects) */
.hero-chip { font-size: 15px; border-width: 2px; }
.hero-chip.chip-1 { background: linear-gradient(135deg, var(--c-sky),   #1f7fe0); }
.hero-chip.chip-2 { background: linear-gradient(135deg, var(--c-teal),  #0f8f86); }
.hero-chip.chip-3 { background: linear-gradient(135deg, var(--c-pink),  #d63f8c); }

/* =====================================================================
   "OUR PROGRAMS FOCUS ON" — 6 colourful cards
   ===================================================================== */
.focus-card {
  border: 2px solid transparent;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.focus-card img {
  padding: 6px;
  background: #fff;
  box-shadow: 0 6px 16px rgba(35,46,99,.10);
}
.focus-card h3 { font-size: 21px; }

.focus-card:nth-child(6n+1){ background: var(--c-coral-soft);  border-color: var(--c-coral);  }
.focus-card:nth-child(6n+2){ background: var(--c-teal-soft);   border-color: var(--c-teal);   }
.focus-card:nth-child(6n+3){ background: var(--c-purple-soft); border-color: var(--c-purple); }
.focus-card:nth-child(6n+4){ background: var(--c-sky-soft);    border-color: var(--c-sky);    }
.focus-card:nth-child(6n+5){ background: var(--cream);         border-color: var(--accent);   }
.focus-card:nth-child(6n+6){ background: var(--c-pink-soft);   border-color: var(--c-pink);   }
.focus-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: var(--shadow-lg); }

/* =====================================================================
   PROGRAM CATEGORY CIRCLES — bright rotating ring colours + pills
   ===================================================================== */
.cat-card .ring { border-width: 6px; }
.cat-card:nth-child(8n+1) .ring{ border-color: var(--c-coral);  }
.cat-card:nth-child(8n+2) .ring{ border-color: var(--c-teal);   }
.cat-card:nth-child(8n+3) .ring{ border-color: var(--c-purple); }
.cat-card:nth-child(8n+4) .ring{ border-color: var(--accent);   }
.cat-card:nth-child(8n+5) .ring{ border-color: var(--c-pink);   }
.cat-card:nth-child(8n+6) .ring{ border-color: var(--c-sky);    }
.cat-card:nth-child(8n+7) .ring{ border-color: var(--c-lime);   }
.cat-card:nth-child(8n+8) .ring{ border-color: var(--c-purple); }
.cat-card h3 { font-size: 20px; }

.cat-card .pill-count { color:#fff; }
.cat-card:nth-child(8n+1) .pill-count{ background: var(--c-coral);  }
.cat-card:nth-child(8n+2) .pill-count{ background: var(--c-teal);   }
.cat-card:nth-child(8n+3) .pill-count{ background: var(--c-purple); }
.cat-card:nth-child(8n+4) .pill-count{ background: var(--accent-dark); }
.cat-card:nth-child(8n+5) .pill-count{ background: var(--c-pink);   }
.cat-card:nth-child(8n+6) .pill-count{ background: var(--c-sky);    }
.cat-card:nth-child(8n+7) .pill-count{ background: var(--c-lime);   }
.cat-card:nth-child(8n+8) .pill-count{ background: var(--c-purple); }

/* =====================================================================
   FUN CONFETTI BACKGROUND on plain sections (very soft)
   ===================================================================== */
.section {
  position: relative;
  background-image:
    radial-gradient(circle, rgba(236,93,168,.18) 0 6px, transparent 7px),
    radial-gradient(circle, rgba(47,182,242,.18) 0 5px, transparent 6px),
    radial-gradient(circle, rgba(255,173,13,.20) 0 5px, transparent 6px);
  background-size: 340px 340px, 480px 480px, 600px 600px;
  background-position: 4% 12%, 92% 30%, 20% 88%;
  background-repeat: no-repeat;
}

/* =====================================================================
   CARDS everywhere get a touch bigger + rounder
   ===================================================================== */
.team-card h3, .testi-top h3 { font-size: 20px; }
.cta-band h2 { font-size: clamp(28px, 3.6vw, 44px); }
.cta-band {
  background:
    radial-gradient(90% 120% at 90% 10%, rgba(255,255,255,.14), transparent 60%),
    linear-gradient(140deg, var(--c-purple), var(--primary));
}

/* =====================================================================
   RESPONSIVE — keep the bigger type comfy on phones
   ===================================================================== */
@media (max-width: 640px){
  body { font-size: 17px; }
  .section { padding: 60px 0; background-size: 240px 240px, 320px 320px, 400px 400px; }
  .section-head h2::after { height: 6px; width: 60px; }
}

/* =====================================================================
   SECTION UPGRADES — Golden Years (colour), Programs grid, About extras
   ===================================================================== */

/* ---- Golden Years : colourful overrides on top of style.css layout ---- */
.golden-eyebrow{
  color:#fff;
  background:linear-gradient(135deg,#8b5cf6,#ec5da8);
  padding:7px 18px; border-radius:999px;
}
.golden-title .hl{
  background:linear-gradient(90deg,#f09600,#ec5da8);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.golden-ticks li:nth-child(1)::before{ background:#ff6b6b; }
.golden-ticks li:nth-child(2)::before{ background:#12b3a6; }
.golden-ticks li:nth-child(3)::before{ background:#8b5cf6; }
.golden-ticks li:nth-child(4)::before{ background:#ffad0d; }
.golden-stats{ background:linear-gradient(135deg,#fff6e0,#fdf0ff); border-color:#f0e2c8; }
.gstat:nth-child(1) .gnum{ color:#ff6b6b; }
.gstat:nth-child(2) .gnum{ color:#12b3a6; }
.gstat:nth-child(3) .gnum{ color:#8b5cf6; }
.gstat:nth-child(4) .gnum{ color:#f09600; }

/* ---- Programs : bright card grid (new layout) ---- */
.pf-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; }
.pf-card{ display:flex; flex-direction:column; background:#fff; border-radius:26px; overflow:hidden;
  box-shadow:var(--shadow-sm); border:2px solid var(--border);
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease; }
.pf-card:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); }
.pf-img{ aspect-ratio:4/3; overflow:hidden; position:relative; }
.pf-img img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.pf-card:hover .pf-img img{ transform:scale(1.08); }
.pf-img::after{ content:""; position:absolute; inset:0; opacity:.16; background:var(--v); }
.pf-body{ padding:18px 20px 22px; text-align:left; }
.pf-pill{ display:inline-block; font-family:var(--font-display); font-weight:800; font-size:12.5px;
  color:#fff; border-radius:999px; padding:4px 13px; margin-bottom:10px; background:var(--v); }
.pf-body h3{ font-size:20px; margin-bottom:8px; }
.pf-go{ font-family:var(--font-display); font-weight:800; font-size:14px; color:var(--text-light); transition:color .25s ease; }
.pf-card:hover .pf-go, .pf-card:hover h3{ color:var(--v); }
.pf-card.v-coral{ --v:#ff6b6b; } .pf-card.v-teal{ --v:#12b3a6; } .pf-card.v-purple{ --v:#8b5cf6; }
.pf-card.v-pink{ --v:#ec5da8; } .pf-card.v-sky{ --v:#2fb6f2; } .pf-card.v-lime{ --v:#37c86b; }
.pf-card.v-orange{ --v:#f09600; }
.pf-card:hover{ border-color:var(--v); }
@media (max-width:1020px){ .pf-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){  .pf-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:460px){  .pf-grid{ grid-template-columns:1fr; } }

/* ---- About page extras ---- */
.about-img{ rotate:-1.5deg; }
.about-img img{ width:100%; height:100%; object-fit:cover; }
.about-quote{ position:relative; text-align:center; max-width:900px; margin:0 auto;
  background:linear-gradient(135deg,#fff6e0,#ffe1f0); border-radius:var(--radius-lg);
  padding:46px 40px; box-shadow:var(--shadow-sm); }
.about-quote .aq-mark{ position:absolute; top:6px; left:26px; font-family:Georgia,serif; font-size:90px; line-height:1; color:rgba(240,150,0,.28); }
.about-quote p{ font-family:var(--font-display); font-weight:800; font-size:clamp(22px,3vw,34px); color:var(--navy); margin:0; }
.about-quote .hl{ color:#f09600; }

.founder-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:48px; align-items:center; }
.founder-photo{ position:relative; }
.founder-photo img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--radius-lg);
  border:8px solid #fff; box-shadow:var(--shadow-lg); }
.founder-badge{ position:absolute; left:18px; bottom:-18px; background:#fff; border-radius:16px;
  padding:12px 20px; box-shadow:var(--shadow-md); border-left:5px solid #ec5da8; }
.founder-badge strong{ display:block; font-family:var(--font-display); font-size:18px; color:var(--navy); }
.founder-badge span{ font-size:13px; color:var(--text-light); font-weight:700; }
.founder-copy p{ margin-bottom:16px; }
.founder-links{ display:flex; flex-wrap:wrap; gap:14px; margin-top:22px; }
.founder-links a{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-display);
  font-weight:700; font-size:15px; padding:11px 20px; border-radius:999px; background:var(--primary-tint); color:var(--primary-dark);
  transition:transform .25s ease, background .25s ease; }
.founder-links a:hover{ transform:translateY(-3px); background:#dfe7ff; }
@media (max-width:900px){ .founder-split{ grid-template-columns:1fr; gap:44px; } .founder-photo{ max-width:420px; margin:0 auto; } }