/* ── CSS VARIABLES ── */
:root {
  --pastel-red:   #e8a0a8;
  --light-yellow: #ffe8a3;
  --light-orange: #fff5e4;
  --light-turquoise: #cff5e7;
  --light-azure:  #d6eaf8;
  --blue:         #3a6ea5;
  --light-green:  #c7d9c4;
  --dark:         #2c2c2c;
  --brand-pink:   #e8a0a8;
  --c-infant:    #d6eaf8;
  --c-infant-dk: #3a6ea5;
  --c-toddler:   #ffe8a3;
  --c-toddler-dk:#b38f00;
  --c-pre:       #ede0ff;
  --c-pre-dk:    #8a4dff;
  --c-primary:   #fff0e0;
  --c-primary-dk:#ff5c4d;
}

/* ── RESET ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html, body { width:100%; overflow-x:hidden; scroll-behavior:smooth; }
body { font-family:'Poppins',sans-serif; background:#fff; }
.font-chewy   { font-family:'Chewy',cursive; }
.font-fredoka { font-family:'Fredoka',sans-serif; }
.font-hand    { font-family:'Patrick Hand',cursive; }

/* ── HEADER ── */
#main-header { transition:all .4s cubic-bezier(.4,0,.2,1); }
#main-header.scrolled {
  padding-top:.8rem; padding-bottom:.8rem;
  background:rgba(255,255,255,.97); backdrop-filter:blur(12px);
  box-shadow:0 8px 30px rgba(0,0,0,.08);
}
#main-header.scrolled .nav-link,
#main-header.scrolled #menu-toggle { color:var(--dark)!important; }
.logo-wrap  { position:relative; padding:0 1px; display:flex; align-items:center; height:0; overflow:visible; }
.logo-img   { height:70px; width:auto; transition:all .35s ease; }
.logo-black { position:absolute; left:1px; top:50%; transform:translateY(-50%); opacity:0; visibility:hidden; }
.logo-white { opacity:1; visibility:visible; }
#main-header.scrolled .logo-white { opacity:0; visibility:hidden; }
#main-header.scrolled .logo-black { opacity:1; visibility:visible; }
.nav-link { position:relative; transition:.25s; }
.nav-link.active::before {
  content:''; position:absolute; top:-10px; left:50%; transform:translateX(-50%);
  width:6px; height:6px; border-radius:50%; background:var(--pastel-red);
}
#mobile-menu { transition:transform .45s cubic-bezier(.77,.2,.05,1); }
#mobile-menu.open { transform:translateX(0); }

/* ── MEGA MENU ── */
.nav-has-sub { position: relative; }
.nav-has-sub > a { display: flex; align-items: center; gap: 5px; }
.nav-has-sub > a .chevron { font-size: 10px; transition: transform .3s; margin-top: 1px; }
.nav-has-sub:hover > a .chevron,
.nav-has-sub.open > a .chevron { transform: rotate(180deg); }
.mega-menu {
  position: absolute;
  top: calc(100% + 18px);
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  width: 620px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.12);
  border: 1px solid #f0f0f0;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: all .35s cubic-bezier(.175,.885,.32,1.275);
  z-index: 100;
  overflow: hidden;
}
.mega-menu::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 16px; height: 16px;
  background: #fff;
  border-radius: 3px;
  rotate: 45deg;
  border-left: 1px solid #f0f0f0;
  border-top: 1px solid #f0f0f0;
}
.nav-has-sub:hover .mega-menu,
.nav-has-sub.open .mega-menu {
  opacity: 1; visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega-menu-hover-bridge {
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 20px;
}
.mega-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.mega-col {
  padding: 28px 28px;
}
.mega-col-left {
  border-right: 1px solid #f5f0f0;
}
.mega-col-label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #bbb;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mega-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  transition: all .25s;
  margin-bottom: 4px;
}
.mega-link:hover {
  background: #fef5f6;
  transform: translateX(4px);
}
.mega-link-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.mega-link-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 15px;
  color: #2c2c2c;
  line-height: 1.2;
}
.mega-link-sub {
  font-family: 'Fredoka', sans-serif;
  font-weight: 400;
  font-size: 12px;
  color: #aaa;
}
.mega-link-right {
  gap: 12px;
  padding: 9px 14px;
}
.mega-link-right .mega-link-icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  font-size: 15px;
}
.mega-link-right .mega-link-text { font-size: 14px; }
.mega-footer {
  background: #fef9f5;
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid #f5f0f0;
}
.mega-footer a {
  font-family: 'Fredoka', sans-serif;
  font-weight: 700;
  font-size: 13px;
  color: var(--pastel-red);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: gap .3s;
}
.mega-footer a:hover { gap: 10px; }

/* ── MOBILE SUB-MENU ── */
.mob-sub-toggle {
  display: flex; align-items: center; justify-content: space-between;
  cursor: pointer; width: 100%;
}
.mob-sub-toggle .chevron {
  font-size: 12px; transition: transform .3s; color: #aaa;
}
.mob-sub-menu {
  max-height: 0; overflow: hidden;
  transition: max-height .4s ease;
  padding-left: 16px;
}
.mob-sub-menu.open { max-height: 500px; }
.mob-sub-menu a {
  display: flex; align-items: center; gap: 10px;
  font-size: 16px; padding: 8px 0; color: #666;
  transition: color .2s;
}
.mob-sub-menu a:hover { color: var(--pastel-red); }
.mob-sub-divider {
  height: 1px; background: #f0e8e8;
  margin: 8px 0;
}

/* ── SHARED UTILS ── */
.wave-sep { width:100%; display:block; line-height:0; }
.wave-sep img { width:100%; display:block; height:auto; }
.hero-wave { position:absolute; bottom:-2px; left:0; width:100%; z-index:10; line-height:0; pointer-events:none; }
.hero-wave img { width:100%; display:block; height:auto; }

/* ── HERO IMAGE CAROUSEL (alternates with the page's base hero image every 3s) ── */
.hero-carousel { position:relative; }
.hero-carousel::after {
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.3)),
             url('/assets/images/hero_group_01.jpg') center/cover no-repeat;
  opacity:0;
  animation:heroCarousel 6s ease-in-out infinite;
}
@keyframes heroCarousel {
  0%, 42%  { opacity:0; }
  50%, 92% { opacity:1; }
  100%     { opacity:0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-carousel::after { animation:none; opacity:0; }
}

.pill-label {
  display:inline-block;
  background:var(--light-orange); color:var(--pastel-red);
  padding:7px 26px; border-radius:999px;
  font-family:'Fredoka',sans-serif; font-size:13px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; margin-bottom:14px;
}

.breadcrumb-pill {
  background:rgba(255,255,255,.18); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.3); color:#fff;
  padding:6px 20px; border-radius:999px;
  font-family:'Fredoka',sans-serif; font-size:14px; letter-spacing:.12em;
  display:inline-block; margin-bottom:18px;
}

/* ── CTA SECTION ── */
.cta-section {
  background:var(--pastel-red);
  position:relative; width:100%; overflow:hidden; margin-top:-1px;
}
.cta-heading {
  font-family:'Chewy',cursive; font-size:clamp(36px,6vw,64px);
  color:#2c2c2c; line-height:1.1; margin-bottom:20px;
}
.cta-subtext {
  font-family:'Fredoka',sans-serif; font-size:clamp(16px,2vw,20px);
  color:#2c2c2c; opacity:.9; margin-bottom:40px;
}
@keyframes pulse-white {
  0%   { box-shadow:0 0 0 0   rgba(255,255,255,.7); }
  70%  { box-shadow:0 0 0 20px rgba(255,255,255,0); }
  100% { box-shadow:0 0 0 0   rgba(255,255,255,0); }
}
.admission-btn {
  display:inline-flex; align-items:center; gap:12px;
  background:#fff; color:#2c2c2c;
  padding:18px 45px; border-radius:999px;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:18px;
  text-transform:uppercase; letter-spacing:.05em;
  transition:all .3s; animation:pulse-white 2s infinite;
  box-shadow:0 10px 25px rgba(0,0,0,.1); text-decoration:none;
}
.admission-btn:hover { transform:translateY(-5px) scale(1.05); background:#2c2c2c; color:#fff; animation:none; }
.cta-wave { width:100%; display:block; line-height:0; }

/* ── FOOTER ── */
.main-footer { background:#2c2c2c; color:#fff; }
.footer-heading { font-family:'Fredoka',sans-serif; font-size:20px; font-weight:700; color:var(--pastel-red); margin-bottom:25px; position:relative; display:inline-block; }
.footer-heading::after { content:''; position:absolute; bottom:-8px; left:0; width:30px; height:2px; background:var(--pastel-red); }
.footer-link { color:#ccc; transition:all .3s; display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:15px; }
.footer-link:hover { color:var(--pastel-red); transform:translateX(5px); }
.footer-contact-item { display:flex; gap:15px; margin-bottom:20px; color:#ccc; font-size:15px; }
.footer-contact-icon { color:var(--pastel-red); font-size:18px; margin-top:3px; }
.social-circle { width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.05); display:flex; align-items:center; justify-content:center; transition:all .3s; color:#fff; }
.social-circle:hover { background:var(--pastel-red); color:#2c2c2c; transform:translateY(-5px); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.08); padding:30px 0; text-align:center; font-size:14px; color:#888; }

/* ── REVEAL ANIMATION ── */
.reveal { opacity:0; transform:translateY(32px); transition:opacity .65s ease, transform .65s ease; }
.reveal.visible { opacity:1; transform:translateY(0); }

/* ── ADMISSION SIDEBAR BUTTON ── */
.adm-sidebar-btn {
  position:fixed; right:0; top:50%; z-index:999;
  writing-mode:vertical-rl; text-orientation:mixed;
  background:var(--pastel-red,#e8a0a8); color:#fff;
  padding:20px 10px;
  font-family:'Fredoka',sans-serif; font-weight:700; font-size:16px;
  letter-spacing:3px; text-transform:uppercase; text-decoration:none;
  border-radius:12px 0 0 12px;
  box-shadow:-2px 0 16px rgba(232,160,168,.45);
  transition:all .3s ease; transform:translateY(-50%);
}
.adm-sidebar-btn:hover {
  background:#d4848e; padding:20px 14px;
  box-shadow:-4px 0 24px rgba(232,160,168,.6);
}