/* Modern School Theme - Sunhill Public School */
:root {
  --bg: #0f172a;
  --card:#0b1220;
  --muted:#9ca3af;
  --glass: rgba(255,255,255,0.04);
  --primary-from: #06b6d4;
  --primary-to: #6366f1;
  --accent: #f97316;
  --white: #ffffff;
}

/* Light theme overrides */
[data-theme="light"] {
  --bg: #f8fafc;
  --card: #ffffff;
  --muted: #4b5563;
  --glass: rgba(0,0,0,0.03);
  --primary-from: #06b6d4;
  --primary-to: #6366f1;
  --accent: #f97316;
  --white: #061023;
}

/* base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:"Poppins",system-ui,-apple-system,'Segoe UI',Roboto;
  background: linear-gradient(180deg,#071022 0%, #071a2a 60%);
  color:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
[data-theme="light"] body{
  background: linear-gradient(180deg,#f8fafc,#eef2ff);
}

/* layout */
.container{max-width:1100px; margin:0 auto; padding:10px;}
.header{backdrop-filter: blur(6px); background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01)); padding:14px 0; position:sticky; top:0; z-index:50;}
.header-inner{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.brand img{height:56px; border-radius:10px; box-shadow:0 8px 30px rgba(3,7,18,0.6);}
.nav{display:flex; gap:10px; align-items:center;}
.nav a{color:var(--white); text-decoration:none; padding:10px 12px; border-radius:8px; font-weight:600; transition:all .25s ease;}
.nav a:hover{transform:translateY(-3px); background:linear-gradient(90deg,var(--primary-from),var(--primary-to)); box-shadow:0 8px 24px rgba(99,102,241,0.12)}

#menu-btn{display:none; align-items:center; gap:8px;}

/* hero */
.hero{display:flex; gap:10px; align-items:center; margin-top:10px; padding:28px; border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); box-shadow:0 12px 40px rgba(2,6,23,0.6); overflow:hidden;}
.hero-left{flex:1}
.hero-right{flex:1; text-align:center}
.h-title{font-size:34px; margin:6px 0; line-height:1.05; letter-spacing:-0.5px;}
.h-sub{color:var(--muted); margin-bottom:16px; font-weight:500;}
.cta{display:flex; gap:10px; align-items:center;}
.btn{border:none; padding:12px 18px; border-radius:12px; cursor:pointer; font-weight:700; transition:all .22s ease;}
.btn-primary{background:linear-gradient(90deg,var(--primary-from),var(--primary-to)); color:#061023; box-shadow:0 10px 30px rgba(6,182,212,0.12);}
.btn-secondary{background:transparent; color:var(--white); border:1px solid rgba(255,255,255,0.06)}

/* cards */
.grid{display:grid; gap:18px;}
.cols-3{grid-template-columns:repeat(3,1fr)}
.cols-2{grid-template-columns:repeat(2,1fr)}
.card{background:linear-gradient(180deg,var(--card), rgba(255,255,255,0.02)); padding:18px; border-radius:14px; box-shadow:0 8px 30px rgba(2,6,23,0.6); transition:transform .18s ease, box-shadow .18s ease;}
.card:hover{transform:translateY(-6px); box-shadow:0 18px 50px rgba(2,6,23,0.8)}

/* teachers hover */
.teacher{display:flex; gap:12px; align-items:center;}
.teacher img{width:74px; height:74px; border-radius:12px; object-fit:cover; transition:transform .25s ease;}
.teacher:hover img{transform:scale(1.06)}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.gallery img{width:100%; border-radius:10px; cursor:pointer; transition:transform .18s ease; box-shadow:0 6px 20px rgba(2,6,23,0.4);}
.gallery img:hover{transform:translateY(-6px)}

/* footer */
.footer{margin-top:28px; padding:20px; text-align:center; color:var(--muted)}
.kicker{display:inline-block; padding:6px 10px; border-radius:999px; background:linear-gradient(90deg,var(--primary-from),var(--primary-to)); color:#061023; font-weight:800;}

/* responsive */
@media (max-width:900px){
  .hero{flex-direction:column}
  .nav{display:none}
  .cols-3{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  #menu-btn{display:inline-flex;}
  .nav.open{
    display:flex !important;
    flex-direction:column;
    position:absolute;
    right:12px;
    top:72px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    padding:10px;
    border-radius:10px;
    gap:8px;
    box-shadow:0 12px 40px rgba(2,6,23,0.6);
    z-index:60;
    min-width:180px;
  }
  .nav.open a{padding:10px; display:block;}
}

@media (max-width:520px){
  .gallery{grid-template-columns:1fr}
}