/*
Theme Name: Syed Pillar Academy
Theme URI: https://syedpillaracademy.org
Author: Syed Pillar Academy
Description: Custom single-page WordPress theme for Syed Pillar Academy — a Karachi school under Syed Pillar Foundation, built on the National Curriculum of Pakistan 2020. Elementor Pro compatible.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: syed-pillar-academy
*/

/* ==========================================================================
   BRAND FONTS — Awesome Serif (headings), Founders Grotesk (body/subheads),
   FK Screamer (callouts/eyebrows/buttons/nav)
   These are licensed fonts from the Syed Pillar Brand Kit — drop the
   licensed .woff2 files into /assets/fonts/ using the filenames below.
   Until the files are added, the fallback stacks render automatically.
   ========================================================================== */
@font-face{
  font-family:'Awesome Serif';
  src:url('assets/fonts/AwesomeSerif-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Awesome Serif';
  src:url('assets/fonts/AwesomeSerif-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Founders Grotesk';
  src:url('assets/fonts/FoundersGrotesk-Regular.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Founders Grotesk';
  src:url('assets/fonts/FoundersGrotesk-Medium.woff2') format('woff2');
  font-weight:500; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Founders Grotesk';
  src:url('assets/fonts/FoundersGrotesk-Bold.woff2') format('woff2');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'FK Screamer';
  src:url('assets/fonts/FKScreamer-Regular.woff2') format('woff2');
  font-weight:600; font-style:normal; font-display:swap;
}

:root{
  --font-heading:'Awesome Serif', Georgia, 'Times New Roman', serif;
  --font-body:'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-callout:'FK Screamer', 'Founders Grotesk', 'Helvetica Neue', Arial, sans-serif;


  --navy:#0F2747;
  --navy-light:#1B3A63;
  --gold:#D4AF37;
  --gold-light:#E8CD6E;
  --emerald:#1E6B43;
  --white:#FFFFFF;
  --soft-gray:#F5F6FA;
  --ink:#1A2436;
  --muted:#5B6478;
  --radius:14px;
  --shadow:0 10px 30px rgba(15,39,71,0.10);
  --shadow-lg:0 20px 50px rgba(15,39,71,0.16);
  --sp-1:8px; --sp-2:16px; --sp-3:24px; --sp-4:32px; --sp-6:48px; --sp-8:64px; --sp-12:96px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font-body); color:var(--ink); background:var(--white); line-height:1.65; -webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:var(--font-heading); color:var(--navy); line-height:1.2; font-weight:700;}
a{text-decoration:none; color:inherit;}
img,.ph{display:block; width:100%;}
.container{max-width:1180px; margin:0 auto; padding:0 24px;}
.section{padding:var(--sp-12) 0;}
.eyebrow{display:inline-block; font-family:var(--font-callout); font-weight:700; font-size:13px; letter-spacing:2.5px; text-transform:uppercase; color:var(--gold); margin-bottom:14px;}
.section-head{max-width:680px; margin-bottom:var(--sp-8);}
.section-head p{color:var(--muted); font-size:17px; margin-top:14px;}
.section-head.center{margin-left:auto; margin-right:auto; text-align:center;}
h2{font-size:clamp(28px,3.4vw,40px);}

/* Placeholder photo blocks — swap for real school photography */
.ph{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-light) 55%,var(--emerald) 100%); position:relative; overflow:hidden; border-radius:var(--radius); min-height:220px;}
.ph::before{content:'';position:absolute; inset:0; background-image:radial-gradient(circle at 20% 20%, rgba(212,175,55,0.35) 0, transparent 40%), radial-gradient(circle at 80% 70%, rgba(255,255,255,0.10) 0, transparent 45%);}
.ph .cap{position:absolute; left:0; right:0; bottom:0; padding:14px 18px; font-size:12px; letter-spacing:.4px; color:rgba(255,255,255,.85); background:linear-gradient(0deg, rgba(0,0,0,.35), transparent); font-family:var(--font-body);}

/* Buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:var(--font-callout); font-weight:600; font-size:15px; padding:15px 30px; border-radius:999px; cursor:pointer; border:2px solid transparent; transition:.25s ease;}
.btn-gold{background:var(--gold); color:var(--navy);}
.btn-gold:hover{background:var(--gold-light); transform:translateY(-2px);}
.btn-navy{background:var(--navy); color:var(--white);}
.btn-navy:hover{background:var(--navy-light); transform:translateY(-2px);}
.btn-ghost{background:rgba(255,255,255,0.08); color:var(--white); border-color:rgba(255,255,255,0.55); backdrop-filter:blur(4px);}
.btn-ghost:hover{background:rgba(255,255,255,0.18);}
.btn-outline{background:transparent; color:var(--navy); border-color:var(--navy);}
.btn-outline:hover{background:var(--navy); color:var(--white);}

/* Header */
header{position:fixed; top:0; left:0; right:0; z-index:1000; background:rgba(255,255,255,0.0); transition:.3s;}
header.scrolled{background:rgba(255,255,255,0.97); box-shadow:0 4px 24px rgba(15,39,71,0.08); backdrop-filter:blur(8px);}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:18px 24px; max-width:1180px; margin:0 auto;}
.logo{display:flex; align-items:center; gap:10px; font-family:var(--font-callout); font-weight:800; font-size:18px; color:var(--white); transition:.3s;}
.logo-mark{width:38px; height:38px; border-radius:10px; background:var(--gold); color:var(--navy); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:16px; transition:.3s;}
header.scrolled .logo{color:var(--navy);}
header.scrolled .logo-mark{background:var(--navy); color:var(--gold);}
nav ul{list-style:none; display:flex; gap:30px;}
nav a{font-family:var(--font-callout); font-size:14.5px; font-weight:600; color:var(--white); position:relative; padding:4px 0; transition:.3s;}
header.scrolled nav a{color:var(--navy);}
nav a::after{content:'';position:absolute; left:0; bottom:-3px; width:0; height:2px; background:var(--gold); transition:.25s;}
nav a:hover::after, nav a.active::after{width:100%;}
.header-cta{display:flex; align-items:center; gap:18px;}
.hamburger{display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none;}
.hamburger span{width:26px; height:2.5px; background:var(--white); border-radius:2px; transition:.3s;}
header.scrolled .hamburger span{background:var(--navy);}

/* Mobile nav drawer */
.mobile-drawer{position:fixed; top:0; right:-320px; width:300px; height:100%; background:var(--navy); z-index:1100; transition:.35s ease; padding:100px 30px 30px; display:flex; flex-direction:column; gap:26px;}
.mobile-drawer.open{right:0;}
.mobile-drawer a{color:var(--white); font-family:var(--font-callout); font-weight:600; font-size:17px;}
.drawer-close{position:absolute; top:28px; right:28px; color:var(--white); font-size:26px; background:none; border:none; cursor:pointer;}
.scrim{position:fixed; inset:0; background:rgba(15,39,71,0.5); z-index:1050; opacity:0; pointer-events:none; transition:.3s;}
.scrim.show{opacity:1; pointer-events:all;}

/* Hero */
.hero{position:relative; min-height:100vh; display:flex; align-items:center; background:linear-gradient(160deg,var(--navy) 0%, var(--navy-light) 60%, #12563a 100%); overflow:hidden; padding-top:90px;}
.hero::before{content:'';position:absolute; inset:0; background-image:radial-gradient(circle at 85% 20%, rgba(212,175,55,0.25), transparent 45%), radial-gradient(circle at 10% 85%, rgba(30,107,67,0.35), transparent 40%);}
.hero-inner{position:relative; z-index:2; max-width:680px; padding:60px 24px; margin-left:6%;}
.hero .eyebrow{color:var(--gold-light);}
.hero h1{color:var(--white); font-size:clamp(36px,5.2vw,60px); font-weight:800; margin-bottom:20px;}
.hero p{color:rgba(255,255,255,0.85); font-size:18px; max-width:540px; margin-bottom:34px;}
.hero .btn-row{display:flex; gap:16px; flex-wrap:wrap;}
.hero-shape{position:absolute; right:-6%; bottom:-10%; width:48%; aspect-ratio:1/1.15; border-radius:32px; background:linear-gradient(145deg, rgba(212,175,55,0.9), rgba(30,107,67,0.85)); opacity:.9;}

/* Why us */
.grid-cards{display:grid; grid-template-columns:repeat(3,1fr); gap:26px;}
.card{background:var(--soft-gray); border-radius:var(--radius); padding:34px 28px; transition:.25s; border:1px solid transparent;}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow); border-color:rgba(212,175,55,0.4); background:var(--white);}
.card .icon{width:52px; height:52px; border-radius:12px; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; font-size:22px; margin-bottom:18px; font-family:var(--font-callout); font-weight:700;}
.card h3{font-size:18px; margin-bottom:10px;}
.card p{color:var(--muted); font-size:15px;}

/* About */
.split{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
.split.reverse .ph{order:2;}
.split h3{font-size:24px; margin-bottom:14px;}
.split p{color:var(--muted); font-size:16px;}
.pull{background:var(--navy); color:var(--white); border-radius:var(--radius); padding:44px; margin-top:20px;}
.pull p{color:rgba(255,255,255,0.9); font-size:19px; font-family:var(--font-callout); font-weight:500; line-height:1.6;}
.about-block + .about-block{margin-top:80px;}
.future-block{background:var(--soft-gray); border-radius:var(--radius); padding:48px; margin-top:60px; text-align:center;}
.future-block h3{margin-bottom:14px;}
.future-block p{color:var(--muted); max-width:720px; margin:0 auto; font-size:16.5px;}

/* Academics */
.bg-navy{background:var(--navy); color:var(--white);}
.bg-navy h2, .bg-navy h3{color:var(--white);}
.bg-navy .section-head p{color:rgba(255,255,255,0.7);}
.level-cards{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:60px;}
.level-card{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius); padding:32px;}
.level-card h4{color:var(--gold-light); font-family:var(--font-callout); font-size:20px; margin-bottom:12px;}
.level-card ul{padding-left:18px; color:rgba(255,255,255,0.8); font-size:15px;}
.level-card ul li{margin-bottom:6px;}
.subject-chips{display:flex; flex-wrap:wrap; gap:10px; margin:18px 0 30px;}
.chip{background:rgba(255,255,255,0.08); border:1px solid rgba(212,175,55,0.4); color:var(--gold-light); padding:8px 18px; border-radius:999px; font-size:13.5px; font-family:var(--font-callout); font-weight:600;}
.tabs{margin-top:50px;}
.tab-btns{display:flex; gap:14px; margin-bottom:26px; flex-wrap:wrap;}
.tab-btn{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.16); color:var(--white); padding:12px 24px; border-radius:999px; font-family:var(--font-callout); font-weight:600; font-size:14px; cursor:pointer;}
.tab-btn.active{background:var(--gold); color:var(--navy); border-color:var(--gold);}
.tab-panel{display:none; background:rgba(255,255,255,0.05); border-radius:var(--radius); padding:32px; border:1px solid rgba(255,255,255,0.1);}
.tab-panel.active{display:grid; grid-template-columns:1fr 1fr; gap:34px;}
.tab-panel h5{color:var(--gold-light); font-family:var(--font-callout); font-size:15px; margin-bottom:10px; text-transform:uppercase; letter-spacing:1px;}
.tab-panel ul{color:rgba(255,255,255,0.82); padding-left:18px; font-size:14.5px; margin-bottom:18px;}
.tab-panel ul li{margin-bottom:5px;}
.grade-table{width:100%; border-collapse:collapse; margin-top:50px; font-size:15px;}
.grade-table th{background:var(--gold); color:var(--navy); font-family:var(--font-callout); padding:14px 18px; text-align:left;}
.grade-table td{padding:13px 18px; border-bottom:1px solid rgba(255,255,255,0.1); color:rgba(255,255,255,0.85);}
.grade-table tr:last-child td{border-bottom:none;}

/* School life */
.life-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.life-card{background:var(--white); border:1px solid #E7E9F2; border-radius:var(--radius); padding:26px; cursor:pointer; transition:.25s;}
.life-card:hover{box-shadow:var(--shadow); border-color:var(--gold);}
.life-card .tag{font-family:var(--font-callout); font-weight:700; font-size:12.5px; color:var(--emerald); letter-spacing:1px; text-transform:uppercase; margin-bottom:10px; display:block;}
.life-card h4{font-size:16.5px; margin-bottom:10px;}
.life-card ul{font-size:13.5px; color:var(--muted); padding-left:16px; display:none;}
.life-card.open ul{display:block;}
.life-card ul li{margin-bottom:4px;}
.life-more{font-size:12.5px; color:var(--gold); font-family:var(--font-callout); font-weight:700; margin-top:4px; display:inline-block;}

/* Stories */
.story-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.story-card{border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); background:var(--white);}
.story-card .ph{border-radius:0; min-height:190px;}
.story-body{padding:26px;}
.story-body h4{font-size:19px; margin-bottom:10px;}
.story-body p{color:var(--muted); font-size:14.5px; margin-bottom:16px;}
.story-body a{color:var(--emerald); font-weight:700; font-family:var(--font-callout); font-size:13.5px;}

/* Gallery */
.gal-filters{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:30px;}
.gal-filters button{background:var(--soft-gray); border:none; padding:10px 20px; border-radius:999px; font-family:var(--font-callout); font-weight:600; font-size:13.5px; cursor:pointer; color:var(--navy);}
.gal-filters button.active{background:var(--navy); color:var(--gold);}
.gal-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.gal-grid .ph{min-height:150px; cursor:pointer;}
.gal-grid .ph:nth-child(3n+1){min-height:230px;}

/* Stats strip */
.stats-strip{background:linear-gradient(120deg,var(--navy),var(--emerald)); padding:56px 0; text-align:center; color:var(--white);}
.stats-strip .num{font-family:var(--font-callout); font-weight:800; font-size:56px; color:var(--gold);}
.stats-strip .lbl{font-size:15px; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.85); margin-top:6px;}

/* Admissions */
.timeline{display:grid; grid-template-columns:repeat(4,1fr); gap:24px; margin:50px 0 60px;}
.tstep{background:var(--soft-gray); border-radius:var(--radius); padding:26px 22px; position:relative;}
.tstep .n{font-family:var(--font-callout); font-weight:800; font-size:26px; color:var(--gold); margin-bottom:10px;}
.tstep p{font-size:14px; color:var(--ink); font-weight:600;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:50px; margin-bottom:60px;}
.elig-card{border:1px solid #E7E9F2; border-radius:var(--radius); padding:24px; margin-bottom:16px;}
.elig-card h4{font-size:16px; margin-bottom:8px;}
.elig-card p{color:var(--muted); font-size:14.5px;}
.doc-list{list-style:none;}
.doc-list li{display:flex; gap:12px; align-items:flex-start; margin-bottom:14px; font-size:15px; color:var(--ink);}
.doc-list li::before{content:'✓'; color:var(--emerald); font-weight:800; flex-shrink:0;}
.fee-table{width:100%; border-collapse:collapse; margin-bottom:14px;}
.fee-table th{background:var(--navy); color:var(--gold); padding:13px 18px; text-align:left; font-family:var(--font-callout); font-size:14px;}
.fee-table td{padding:12px 18px; border-bottom:1px solid #E7E9F2; font-size:14.5px;}
.fee-note{font-size:12.5px; color:var(--muted); font-style:italic; margin-bottom:40px;}
.schol-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-bottom:60px;}
.schol-card{background:var(--soft-gray); border-radius:var(--radius); padding:28px; border-left:4px solid var(--gold);}
.schol-card h4{font-size:17px; margin-bottom:8px;}
.schol-card p{color:var(--muted); font-size:14.5px;}
.form-wrap{background:var(--soft-gray); border-radius:var(--radius); padding:44px;}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-grid .full{grid-column:1/-1;}
.field label{display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; color:var(--navy); font-family:var(--font-callout);}
.field input, .field select, .field textarea{width:100%; padding:13px 16px; border:1.5px solid #DDE1EC; border-radius:10px; font-family:var(--font-body); font-size:14.5px; background:var(--white);}
.field input:focus, .field select:focus, .field textarea:focus{outline:none; border-color:var(--gold);}
.form-wrap .btn{margin-top:24px; width:100%;}

/* Resources */
.accordion-item{border-bottom:1px solid #E7E9F2;}
.acc-head{display:flex; justify-content:space-between; align-items:center; padding:22px 4px; cursor:pointer; font-family:var(--font-callout); font-weight:600; font-size:16.5px;}
.acc-head .plus{font-size:20px; color:var(--gold); transition:.25s;}
.accordion-item.open .plus{transform:rotate(45deg);}
.acc-body{max-height:0; overflow:hidden; transition:.3s ease; font-size:15px; color:var(--muted);}
.accordion-item.open .acc-body{max-height:600px; padding-bottom:24px;}
.uni-cols{display:grid; grid-template-columns:1fr 1fr 1fr; gap:24px;}
.uni-cols div h5{font-family:var(--font-callout); color:var(--navy); font-size:14px; margin-bottom:8px;}
.pending-tag{display:inline-block; background:#FBEFD0; color:#8A6A0A; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:6px; margin-left:10px; letter-spacing:.4px;}

/* Contact */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:50px;}
.c-item{display:flex; gap:16px; margin-bottom:26px;}
.c-item .ic{width:46px; height:46px; border-radius:12px; background:var(--navy); color:var(--gold); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-weight:700;}
.c-item h4{font-size:15.5px; margin-bottom:4px;}
.c-item p{color:var(--muted); font-size:14.5px;}
.map-ph{border-radius:var(--radius); min-height:340px; background:var(--soft-gray); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; border:1px dashed #C9CEDD;}

/* CTA band */
.cta-band{background:linear-gradient(120deg,var(--emerald),var(--navy)); text-align:center; padding:80px 24px; color:var(--white);}
.cta-band h2{color:var(--white); margin-bottom:16px;}
.cta-band p{color:rgba(255,255,255,0.8); margin-bottom:30px; max-width:560px; margin-left:auto; margin-right:auto;}

/* Footer */
footer{background:var(--navy); color:rgba(255,255,255,0.75); padding:70px 0 0;}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:50px; padding-bottom:50px; border-bottom:1px solid rgba(255,255,255,0.1);}
.foot-grid h5{color:var(--white); font-family:var(--font-callout); font-size:15px; margin-bottom:20px;}
.foot-grid ul{list-style:none;}
.foot-grid ul li{margin-bottom:12px; font-size:14.5px;}
.foot-grid ul li a:hover{color:var(--gold);}
.foot-logo{display:flex; align-items:center; gap:10px; margin-bottom:16px; font-family:var(--font-callout); font-weight:800; font-size:18px; color:var(--white);}
.bottom-bar{text-align:center; padding:24px; font-size:13px; color:rgba(255,255,255,0.55);}

@media(max-width:1024px){
  nav{display:none;}
  .hamburger{display:flex;}
  .grid-cards{grid-template-columns:repeat(2,1fr);}
  .split{grid-template-columns:1fr;}
  .split.reverse .ph{order:0;}
  .level-cards{grid-template-columns:1fr;}
  .tab-panel.active{grid-template-columns:1fr;}
  .life-grid{grid-template-columns:repeat(2,1fr);}
  .story-grid{grid-template-columns:1fr;}
  .gal-grid{grid-template-columns:repeat(3,1fr);}
  .timeline{grid-template-columns:repeat(2,1fr);}
  .two-col{grid-template-columns:1fr;}
  .schol-grid{grid-template-columns:1fr;}
  .form-grid{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .uni-cols{grid-template-columns:1fr;}
  .hero-inner{margin-left:0;}
}
@media(max-width:640px){
  .section{padding:64px 0;}
  .grid-cards{grid-template-columns:1fr;}
  .life-grid{grid-template-columns:1fr;}
  .gal-grid{grid-template-columns:repeat(2,1fr);}
  .timeline{grid-template-columns:1fr;}
  .hero .btn-row{flex-direction:column; align-items:stretch;}
  .hero .btn-row .btn{width:100%;}
  .foot-grid{grid-template-columns:1fr;}
  .grade-table{font-size:13px;}
  .grade-table th, .grade-table td{padding:10px;}
}