/* =========================================
   Variables
========================================= */
:root{
  --blue:#0D5392; --green:#1f9c74; --orange:#F69020;
  --ink:#0e2a40; --muted:#5a7a92; --bg:#f3f8ff; --card:#ffffff;
  --rb-grad: linear-gradient(90deg,#0D5392 0%,#1f9c74 25%,#ffd166 50%,#F69020 75%,#ff6b6b 100%);
}

/* =========================================
   Base
========================================= */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto;
  background: radial-gradient(1200px 800px at 80% -10%, #ffe6b5 0%, var(--bg) 40%), var(--bg);
  color:var(--ink); overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
.wrap{min-height:100%; display:grid; grid-template-rows:auto 1fr auto}

/* =========================================
   Top Bar
========================================= */
.top-bar{
  width:100%;
  background:#fff;
  border-bottom:1px solid rgba(13,83,146,.12);
  position:sticky; top:0;
  z-index:60; /* keeps top-bar above normal page content */
}
.top-bar::after{content:""; display:block; height:3px; background:var(--rb-grad)}
.top-bar-inner{max-width:1200px; margin:0 auto; padding:6px 12px; text-align:center}
.school-title{margin:0; font-weight:700; text-transform:uppercase; letter-spacing:.3px; font-size:clamp(14px,2vw,18px); color:var(--blue)}

/* Multi-word colorful title */
.top-bar .school-title.multi{
  margin:6px 0 2px; line-height:1.1; letter-spacing:.5px;
  font-size:clamp(18px, 2.8vw, 36px); text-transform:uppercase; text-align:center;
  white-space:nowrap; color:inherit;
}
.top-bar .school-title.multi .w{
  display:inline-block; padding:0 .18em; font-weight:800;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  text-shadow:0 2px 0 #fff, 0 6px 18px rgba(0,0,0,.12);
}
.top-bar .school-title.multi .baloo   { font-family:'Baloo 2',system-ui,sans-serif;      background:linear-gradient(180deg,#ff6a6a,#ff4d4f); }
.top-bar .school-title.multi .fredoka { font-family:'Fredoka',system-ui,sans-serif;      background:linear-gradient(180deg,#f7b500,#ffdd55); }
.top-bar .school-title.multi .chewy   { font-family:'Chewy',system-ui,sans-serif;        background:linear-gradient(180deg,#27c57a,#0a8a5d); }
.top-bar .school-title.multi .paytone { font-family:'Paytone One',system-ui,sans-serif;  background:linear-gradient(180deg,#2f7bdc,#175a9e); }
.top-bar .school-title.multi .baloo2  { font-family:'Baloo Bhai 2',system-ui,sans-serif; background:linear-gradient(180deg,#b37feb,#7a3fe0); }
.top-bar .school-title.multi .luckiest{ font-family:'Luckiest Guy',system-ui,sans-serif; background:linear-gradient(180deg,#ff4d8d,#e91e63); }

/* =========================================
   Header
========================================= */
.site-header{
  position: relative; /* keep it in normal flow and allow stacking context */
  top: 0;
  z-index: 55;
  background: linear-gradient(135deg,#ffffff 0%,#f3f8ff 40%,#e8f4ff 100%);
  border-bottom:1px solid rgba(13,83,146,.15);
  backdrop-filter: saturate(160%) blur(8px);
}

/* Ensure the visible hamburger/menu button stays clickable even if some hidden overlay exists */
.menu-toggle{ position: relative; z-index:1010; }

.header-inner{display:flex; align-items:center; justify-content:space-between; padding:14px clamp(12px,4vw,40px); gap:12px}

/* Branding */
.brand{display:flex; flex-direction:column; align-items:center; gap:6px; text-decoration:none; color:inherit}
.logo{width:104px; height:104px; border-radius:12px; object-fit:contain; background:#fff; padding:6px; box-shadow:0 4px 18px rgba(13,83,146,.2)}
.brand-text{display:flex; flex-direction:column; align-items:center; line-height:1.1}
.sub-title{margin-top:4px; font-style:normal; font-weight:600; color:var(--blue); font-size:12px; text-align:center}

/* Navigation */
.menu-toggle{display:none; border:1px solid rgba(13,83,146,.2); background:#fff; border-radius:10px; padding:8px 12px; font-size:20px}
.nav{display:flex; gap:14px; flex-wrap:wrap}
.nav a{padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--ink); border:1px solid transparent; position:relative; transition:.25s ease}
.nav a:hover{background:#fff; border-color:#e6eef5}
.nav a::after{content:""; position:absolute; left:12px; right:12px; bottom:6px; height:3px; background:var(--rb-grad); opacity:0; transform:translateY(4px); border-radius:3px; transition:.25s ease}
.nav a:hover::after,.nav a.active::after{opacity:1; transform:translateY(0)}
.btn{background:var(--blue); color:#fff; padding:12px 16px; border-radius:12px; text-decoration:none; display:inline-block; border:0}
.btn.small{padding:10px 12px; font-weight:700}

/* =========================================
   Hero
========================================= */
.hero{padding: clamp(24px,6vw,80px) clamp(16px,5vw,40px); text-align:center}
.hero .headline{font-size: clamp(34px,7vw,64px); line-height:1.05; margin:0 0 14px}
.hero .sub{font-size: clamp(16px,3vw,22px); color:var(--muted); margin:0 0 22px}
.hero .cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.hero .cta-row .btn.alt{background:var(--green)}

/* =========================================
   Sections & Cards
========================================= */
section{padding: clamp(20px,4vw,40px)}
.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.card{background:var(--card); border:1px solid #e6eef5; border-radius:18px; padding:18px; box-shadow:0 18px 36px rgba(13,83,146,.06); transition:transform .2s ease, box-shadow .2s ease}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 26px rgba(13,83,146,.12)}
.card h3{margin:0 0 6px}

/* Solid colors for INDEX cards only */
section:nth-of-type(2) .grid .card:nth-child(1){ background:#e8f1fb; border-color:#0D539233 }
section:nth-of-type(2) .grid .card:nth-child(2){ background:#e8f7f2; border-color:#1f9c7433 }
section:nth-of-type(2) .grid .card:nth-child(3){ background:#fff4cc; border-color:#ffd16666 }
section:nth-of-type(2) .grid .card:nth-child(4){ background:#ffe7d1; border-color:#F6902066 }
section:nth-of-type(3) .grid .card{ background:#eaf6ff; border-color:#0D539233 }

/* =========================================
   Footer
========================================= */
.site-footer{padding:32px clamp(16px,5vw,40px); background:#fff; border-top:4px solid transparent; border-image: var(--rb-grad) 1}
.site-footer h4{margin:0 0 10px; font-weight:800; background:var(--rb-grad); -webkit-background-clip:text; background-clip:text; color:transparent}
.footer-grid{display:grid; gap:24px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.footer-grid .links a{display:inline-block; margin:0 8px 8px 0}
.copyright{text-align:center; color:var(--muted)}
.dark-footer{background:#0b1c2e; color:#dce7f3}

/* =========================================
   Mobile Nav (site-wide)
========================================= */
@media (max-width: 960px){
  .menu-toggle{display:block}
  #site-nav{
    position:fixed; right:12px; top:72px;
    background:#fff; border:1px solid #e6eef5; border-radius:16px;
    padding:12px; box-shadow:0 20px 40px rgba(13,83,146,.18);
    display:none; flex-direction:column; min-width:220px; z-index:80;
  }
  #site-nav.open{ display:flex; }
  #site-nav a{ display:block; padding:12px 14px; margin:2px 0; }
}
@media (max-width:640px){ .logo{width:72px; height:72px; padding:5px} }

/* =========================================
   Ambient Scene (Clouds)
========================================= */
.scene{position:fixed; inset:0; pointer-events:none; overflow:hidden; z-index:-10}
.sun{position:absolute; top:-80px; right:-80px; width:200px; height:200px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #ffd36e, #ffb200 55%, var(--orange) 100%); box-shadow:0 0 120px #ffb20055}
.cloud{position:absolute; width:180px; height:80px; background:#fff; border-radius:60px; filter: drop-shadow(0 8px 14px rgba(18,48,74,.05)); opacity:.45; top:22%}
.cloud:before,.cloud:after{content:""; position:absolute; background:#fff; border-radius:50%}
.cloud:before{width:120px; height:120px; left:20px; top:-40px}
.cloud:after{width:160px; height:160px; right:20px; top:-70px}
.cloud.c1{left:-240px; animation: drift 42s linear infinite}
.cloud.c2{left:-260px; top:36%; transform:scale(.9); animation: drift 55s linear infinite 4s}
.cloud.c3{left:-240px; top:68%; transform:scale(.7); animation: drift 60s linear infinite 10s}
@keyframes drift{to{transform:translateX(140vw)}}

/* =========================================
   Hero Fade Slider — Full-width, cover
========================================= */
.hero-slider{
  position: relative;
  z-index:5;                  /* below sticky headers */
  width:100vw;                /* edge-to-edge */
  left:50%; right:50%;
  margin-left:-50vw; margin-right:-50vw;
  height: clamp(260px, 100vh, 860px);
  overflow: hidden;
  background:#eef6ff;
  border-bottom:1px solid rgba(13,83,146,.10);
}
.hero-slider .slides{ position:absolute; inset:0; }
.hero-slider .slide{ position:absolute; inset:0; opacity:0; transition:opacity .7s ease; }
.hero-slider .slide.active{ opacity:1; }
.hero-slider .slide img{ width:100%; height:100%; object-fit:cover; object-position:center top; display:block; }

/* Arrows */
.hero-arrow{
  position:absolute; z-index:6; top:50%; transform:translateY(-50%);
  width:42px; height:42px; border-radius:50%;
  border:1px solid rgba(13,83,146,.25); background:#fff; color:#0D5392;
  font-size:26px; display:grid; place-items:center; cursor:pointer;
  box-shadow:0 8px 24px rgba(13,83,146,.12);
}
.hero-arrow.prev{ left:14px } .hero-arrow.next{ right:14px }
.hero-arrow:hover{ background:#f7fbff }
@media (max-width:640px){ .hero-arrow{ width:34px; height:34px; font-size:22px } }

/* Dots */
.hero-dots{
  position:absolute; z-index:6; left:50%; bottom:12px; transform:translateX(-50%);
  display:flex; gap:8px;
}
.hero-dots button{ width:10px; height:10px; border-radius:50%; border:0; cursor:pointer; background:#c7d8ea; }
.hero-dots button.active{ background:#0D5392 }

/* =========================================
   Home Gallery Section (cleaned & responsive)
   - prevents narrow vertical strips on small screens
   - uses aspect-ratio and max-height to keep consistent thumbnails
========================================= */
.home-gallery {
  padding: clamp(20px, 4vw, 60px);
  text-align: center;
}
.home-gallery h2 {
  font-size: clamp(22px, 4vw, 32px);
  color: var(--blue);
  margin-bottom: 20px;
  font-weight: 700;
}

/* --- Updated responsive gallery: allows multiple columns on narrow screens --- */
/* Use a smaller min width so multiple columns fit on phones; will expand when space allows */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 14px;
  max-width: 1200px;
  margin: 0 auto;
}

/* Thumbnail card */
.gallery-grid figure {
  margin: 0;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 16px rgba(13,83,146,.12);
  transition: transform .3s ease, box-shadow .3s ease;
}
.gallery-grid figure:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(13,83,146,.20);
}

/* Portrait-friendly thumbnails (prevents tall skinny strips) */
.gallery-grid img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;    /* portrait-friendly */
  max-height: 220px;
  height: auto;
  object-fit: cover;
}

/* Force exactly 3 columns on common small phones for denser layout */
@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
  }
  .gallery-grid img {
    max-height: 170px;
    aspect-ratio: 3 / 4;
  }
}

/* slightly shorter thumbnails on small tablets */
@media (max-width:640px){
  .gallery-grid img{ max-height:180px; aspect-ratio: 3 / 4; }
}

/* =========================================
   Lightbox modal (non-blocking when hidden)
   - pointer-events:none while hidden prevents it from intercepting clicks
   - when open, pointer-events:auto and display:flex
========================================= */
.gallery-modal{
  position:fixed; inset:0; display:none;
  align-items:center; justify-content:center;
  background:rgba(0,0,0,.85);
  z-index:9999;
  pointer-events:none;        /* IMPORTANT: don't capture clicks when hidden */
}
.gallery-modal.open{
  display:flex;
  pointer-events:auto;
}
.gallery-modal img{
  max-width:95%; max-height:85%; box-shadow:0 10px 40px rgba(0,0,0,.6); border-radius:6px;
}
.gallery-modal .close{position:absolute;top:18px;right:18px;font-size:28px;color:#fff;cursor:pointer}
.gallery-modal .nav{position:absolute;top:50%;transform:translateY(-50%);font-size:40px;color:#fff;cursor:pointer;user-select:none}
.gallery-modal .prev{left:18px}
.gallery-modal .next{right:18px}

/* Ensure header/hamburger remain clickable in unusual stacking cases (safe override) */
.site-header, .top-bar, .menu-toggle { position: relative; z-index:10001; }

/* ===== MOBILE WRAP FIX FOR TITLE ===== */
@media (max-width: 600px) {
  .top-bar .school-title.multi {
    white-space: normal !important;   /* allow wrapping */
    font-size: clamp(18px, 5vw, 28px);
    line-height: 1.15;
    text-align: center;
  }

  .top-bar .school-title .w {
    display: inline-block;
    margin: 2px 2px;  /* spacing between words */
  }

  .top-bar {
    padding: 10px 6px !important;
  }
}

/* Typewriter styles (minimal) */
.headline { font-weight:800; font-size:4rem; text-align:center; letter-spacing:0.02em; }
#typewriter { display:inline-block; white-space:nowrap; border-right: .18em solid rgba(0,0,0,0.15); padding-right:6px; }
@media (max-width:768px){ .headline{font-size:2.2rem} }


/* ===== Ensure modal doesn't capture clicks when closed ===== */
.gallery-modal {
  display: none;             /* hidden by default */
  pointer-events: none;      /* don't capture clicks when hidden */
  z-index: 9999;             /* ensure it's above header when open */
}

/* when open, allow interactions and show it above header */
.gallery-modal.open {
  display: flex;
  pointer-events: auto;
}

/* Ensure header and hamburger are clickable when modal hidden */
.site-header,
.top-bar{
  position: relative;
  z-index: 1000;
}
/* hamburger/menu button higher than normal page content but below modal */
.menu-toggle{
  position: relative;
  z-index: 1010;
}
/* Force nav to appear above most content but still below modal */
#site-nav {
  z-index: 80;
}

/* Small-screen hard override to ensure multiple columns only if needed */
@media (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
  }
}