/* ===== WonderStemFul Core Theme ===== */
:root{
  --purple-800:#432b86;   /* Deep logo purple */
  --purple-700:#5639c7;
  --purple-600:#6B4DE6;   /* Accent purple */
  --pink-600:#FF4FA7;     /* Accent pink */
  --pink-300:#FFD1EC;     /* Soft pink */
  --baby-pink:#FBE9F3;    /* Page background */
  --card-bg:#FFFFFF;
  --text:#1F2340;
  --muted:#6B6F88;

  --border:#e6e8ef;
  --shadow:0 10px 30px rgba(107,77,230,.15);
  --radius:14px;

  --grad-pp: linear-gradient(135deg, rgb(255,161,208) 0%, rgb(152,127,255) 100%);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;scroll-behavior:smooth;background:var(--baby-pink)}
body{font-family:'Nunito',sans-serif;color:var(--text);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--purple-600);text-decoration:none;transition:.2s}
h1,h2,h3{font-family:'Poppins',sans-serif;font-weight:800;color:var(--purple-800);margin:0 0 8px}
.container{max-width:1200px;margin:0 auto;padding:0 20px}
.section{padding:64px 0}

/* ===== Header (ALWAYS visible tabs) ===== */
.site-header{
  position:sticky; top:0; z-index:9999; width:100%;
  background:#fff; border-bottom:1px solid var(--border);
  box-shadow:0 2px 12px rgba(0,0,0,.05);
}
.header-wrap{
  width:120%; max-width:1200px; margin:0 auto; padding:0 40px;
  display:flex; align-items:center; justify-content:space-between; height:80px;
}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{height:48px;width:auto}
.logo-text{font:800 1.35rem/1 'Poppins',sans-serif;color:var(--purple-800)}

.nav{display:flex !important; height:100%; gap:0} /* force visible */
.nav a{
  display:flex; align-items:center; height:100%;
  padding:0 22px; font-weight:800; color:var(--text);
  text-transform:uppercase; letter-spacing:1px; font-size:.95rem;
  border-bottom:3px solid transparent; transition:background .2s,color .2s;
}
.nav a:hover{background:var(--baby-pink); color:var(--purple-600)}
.nav a.active{color:var(--purple-600); border-bottom-color:var(--purple-600)}

/* Mobile: wrap links instead of hiding the nav */
.menu-toggle{display:none}
@media (max-width:880px){
  .header-wrap{padding:0 20px; height:72px}
  .nav{flex-wrap:wrap; height:auto}
  .nav a{height:48px; padding:0 16px; border-bottom-width:2px}
}

/* Keep decorative layers from blocking header clicks */
.stem-float, .bfly, .flower{pointer-events:none}
.hero-pro, .section, main, .container{position:relative; z-index:0}

/* ===== Buttons & Cards ===== */
.btn{display:inline-block;padding:14px 24px;border-radius:999px;font-weight:800;border:2px solid var(--purple-600);background:#fff;color:var(--purple-600);cursor:pointer}
.btn.primary{background:var(--purple-600);color:#fff;border-color:transparent;box-shadow:0 10px 22px rgba(107,77,230,.25)}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:24px}

/* ===== Intro hero ===== */
.hero-pro{
  background:var(--grad-pp); color:#fff; text-align:center;
  padding:80px 20px; border-radius:0 0 40px 40px;
  box-shadow:0 12px 28px rgba(0,0,0,.1); margin-bottom:32px; position:relative;
}
.hero-pro h1{font-size:clamp(2rem,4.5vw,3rem); color:#fff}
.hero-pro .slogan{font-weight:800;text-transform:uppercase;letter-spacing:.9px;font-size:clamp(1.05rem,2.2vw,1.6rem)}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:18px}

/* Floating STEM bubbles */
.stem-float{
  position:absolute; z-index:1; display:inline-grid; place-items:center;
  width:68px; height:68px; border-radius:50%; background:#fff;
  box-shadow:var(--shadow); font-size:1.6rem; animation:stemFloat 6s ease-in-out infinite;
}
@keyframes stemFloat{
  0%,100%{transform:translateY(0) rotate(0)}
  50%{transform:translateY(-18px) rotate(8deg)}
}

/* ===== Split layout (if used) ===== */
.split-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start;min-height:180vh}
.content-side{padding:80px 0;display:grid;gap:40px}
.visual-side{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center}

/* ===== Flower (right half) ===== */
.flower{ --p:0; --len:800; width:100%; max-width:520px; filter:drop-shadow(0 14px 34px rgba(107,77,230,.2)) }
.flower .stem{
  stroke:#4CAF50; stroke-width:6; fill:none; stroke-linecap:round;
  stroke-dasharray:var(--len); stroke-dashoffset:calc(var(--len)*(1 - var(--p)));
}
.flower .bloom,.flower .petal{
  transform-origin:center; transform:scale(calc(max(0,(var(--p)-.55)*2.2)));
  opacity:calc(max(0,(var(--p)-.55)*2.2)); fill:url(#petalGrad);
}
.flower .center{
  fill:#FFD700; transform-origin:center; transform:scale(calc(max(0,(var(--p)-.82)*6)));
  opacity:calc(max(0,(var(--p)-.82)*6));
}

/* ===== Bigger “Ways to Get Involved” ===== */
.involvement-container{
  display:grid; grid-template-columns:1.2fr .8fr; gap:30px; align-items:center; padding-bottom:80px
}
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:30px;margin-top:34px}
.card-grid .card{padding:50px 30px;border:2px solid transparent;text-align:center;transition:all .3s ease}
.card-grid .card:hover{border-color:var(--pink-600);transform:translateY(-10px);box-shadow:0 20px 40px rgba(255,95,176,.2)}
.card-grid h3{font-size:1.8rem;margin:12px 0 6px}
.emoji-large{font-size:4rem;display:block;margin-bottom:8px}

/* Optional STEM image strip */
.stem-strip{display:grid;gap:14px;grid-template-columns:repeat(3,1fr);margin-top:18px}
.stem-strip img{height:180px;object-fit:cover;border-radius:12px;box-shadow:var(--shadow)}
@media (max-width:800px){.stem-strip{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stem-strip{grid-template-columns:1fr}}

/* ===== Four-wing purple butterflies ===== */
.bfly{ position:fixed; width:58px; height:58px; pointer-events:none; z-index:999 }
.bfly svg{ width:100%; height:100%; overflow:visible }
.bfly .wing{ transform-origin:28px 28px; }
.bfly .fore{ animation:flapFore .22s ease-in-out infinite alternate }
.bfly .hind{ animation:flapHind .22s ease-in-out infinite alternate-reverse }
@keyframes flapFore{ from{ transform:rotateY(0deg) } to{ transform:rotateY(55deg) } }
@keyframes flapHind{ from{ transform:rotateY(0deg) } to{ transform:rotateY(40deg) } }
@media (prefers-reduced-motion:reduce){ .bfly .fore,.bfly .hind{ animation:none } }

/* ===== About: Team Grid (3x2) ===== */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:28px}
.team-card{background:var(--card-bg);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);text-align:center;padding-bottom:16px}
.team-card img{width:100%;aspect-ratio:3/4;object-fit:contain;background:#f7f4ff;border-bottom:3px solid var(--baby-pink)}

/* ===== Tutoring page ===== */
.tutoring-hero{background:var(--grad-pp);color:#fff;text-align:center;padding:80px 20px;border-radius:0 0 48px 48px}
.tutoring-options{display:flex;gap:28px;margin-top:-40px;padding-bottom:60px}
.tutor-card{flex:1;background:var(--card-bg);padding:40px;border-radius:28px;box-shadow:var(--shadow);text-align:center;transition:transform .3s ease}
.tutor-card:hover{transform:translateY(-10px)}

/* ===== Footer ===== */
.site-footer{padding:28px 0;text-align:center;color:var(--muted);border-top:1px solid var(--border);background:#fff}

/* ===== Responsive ===== */
@media (max-width:1000px){
  .split-layout{grid-template-columns:1fr}
  .visual-side{position:relative;height:auto;padding:40px 0}
  .team-grid{grid-template-columns:repeat(2,1fr)}
  .tutoring-options{flex-direction:column;margin-top:20px}
  .involvement-container{grid-template-columns:1fr;text-align:center}
}
@media (max-width:600px){
  .team-grid{grid-template-columns:1fr}
}