/* Dark theme with banner only on home */
:root{
  --bg:#0b0f14;
  --elev:#111827;
  --panel:#0f1620;
  --text:#e5e7eb;
  --muted:#9ca3af;
  --gold:#c59a2a;
  --link:#93c5fd;
  --border:#1f2937;
  --shadow:0 8px 24px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text)}
a{color:var(--link);text-decoration:none}
.container{width:min(1140px,92%);margin-inline:auto}

.topnav{border-bottom:1px solid var(--border);background:rgba(11,15,20,.92);backdrop-filter:saturate(160%) blur(10px);position:sticky;top:0;z-index:50}
.topnav .container{display:flex;gap:18px;flex-wrap:wrap;padding:10px 0}
.topnav a{color:var(--text);font-weight:600;padding:8px 10px;border-radius:10px}
.topnav a:hover{background:var(--elev)}
.gold-bar{background:var(--gold);height:3px}
.kids-top-img{display:block;width:100%;height:auto;object-fit:cover;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
.gold-divider{background:var(--gold);height:10px;width:100%}

.content{padding:18px 0}

/* ESSA intro */
.blocks .about{display:grid;grid-template-columns:280px 1fr;gap:24px;align-items:center;margin:26px 0;background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:18px}
.essa-img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--border);box-shadow:var(--shadow)}
.right-text h2{margin:0 0 8px}

/* Buttons */
.cta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:22px 0}
.cta{display:block;padding:18px;border-radius:12px;color:#fff;text-align:center;font-weight:700;box-shadow:var(--shadow);border:1px solid var(--border)}
.cta.red{background:#e11d48}
.cta.green{background:#059669}
.cta.yellow{background:#eab308;color:#1b1b1b}
.cta.orange{background:#f97316;color:#1b1b1b}

/* Excellence */
.excellence{margin:30px 0}
.excellence-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:stretch;background:var(--panel);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border)}
.excellence .text{padding:22px}
.photo-wrap{display:flex;align-items:center;justify-content:center}
.excellence-img{display:block;width:72%;max-width:380px;height:auto;border-radius:18px;border:1px solid var(--border);box-shadow:var(--shadow);margin:0 auto}

/* Buttons */
.btn{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;font-weight:700;border:1px solid var(--border)}
.aboutus{background:var(--gold);color:#1b1b1b}
.viewall{background:#312e81;color:#fff}
.curriculum-btn{background:#312e81;color:#fff}

/* Certificates */
.certificates{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:30px 0}
.cert-left{background:#8f7830;padding:20px;border-radius:16px;box-shadow:var(--shadow);color:#fff;border:1px solid var(--border)}
.cert-right details{background:var(--panel);border:1px solid var(--border);border-radius:10px;margin:10px 0;overflow:hidden;color:var(--text)}
.cert-right summary{padding:12px 14px;cursor:pointer;font-weight:700}
.acc-body{padding:12px 14px;border-top:1px solid var(--border)}

/* Curriculum */
.curriculum{background:#0a0f16;color:#fff;padding:30px 0;margin:40px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.curr-inner{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:center}
.curr-photo{display:flex;align-items:center;justify-content:center}
.curr-img{display:block;width:72%;max-width:380px;height:auto;border-radius:16px;border:1px solid var(--border);box-shadow:var(--shadow);margin:0 auto}

/* Cost page */
.cost{display:block}
.cost-hero{text-align:center;margin:10px 0 16px}
.cost-hero h1{margin:0 0 6px}
.cost-hero .kickoff{font-size:20px;color:var(--muted);margin:4px 0 10px}
.cost-hero .total{display:inline-block;font-size:36px;font-weight:800;padding:10px 18px;border-radius:14px;background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow)}
.cost-hero .total span{display:block;font-size:13px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.6px}
.price-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:18px 0}
.price-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);padding:14px;text-align:center}
.price-card .label{color:var(--muted);font-weight:700;margin-bottom:6px}
.price-card .amount{font-weight:900;font-size:22px}
.notice{margin:16px 0;padding:12px 14px;border-radius:12px;border:1px solid var(--border);background:#0a0f16}
.notice.note{background:rgba(197,154,42,.12)}
.notice.danger{background:rgba(239,68,68,.13);border-color:#ef4444;color:#fff;font-size:18px;text-align:center}
.details.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:16px}
.details.card p{margin:8px 0}
.details.card a{color:var(--link);text-decoration:underline}

/* Pages */
.page{min-height:40vh;background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:20px}

/* Footer */
.site-footer{padding:20px 0;background:#0a0e13;border-top:1px solid var(--border)}
.footnav{display:flex;gap:14px;justify-content:center}
.footnav a{color:var(--link)}
.copy{text-align:center;font-size:12px;margin-top:10px;color:var(--muted)}

@media (max-width:900px){
  .cta-grid{grid-template-columns:1fr 1fr}
  .excellence-inner{grid-template-columns:1fr}
  .certificates{grid-template-columns:1fr}
  .curr-inner{grid-template-columns:1fr}
  .blocks .about{grid-template-columns:1fr}
  .excellence-img,.curr-img{width:100%;max-width:none;margin:0}
}


/* --- TEA Videos page --- */
.videos-hero{margin:6px 0 14px}
.videos-hero h1{margin:0 0 6px}
.videos-toolbar{display:flex;gap:12px;align-items:center;margin:10px 0 16px}
.videos-toolbar #videoSearch{flex:1;min-width:220px;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:10px;padding:10px}
.videos-toolbar .hint{color:var(--muted);font-size:12px}
.videos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.video-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:10px}
.video-frame{aspect-ratio:16/9;background:#0a0f16;border-radius:12px;overflow:hidden;border:1px solid var(--border);display:flex;align-items:center;justify-content:center}
.video-frame iframe{width:100%;height:100%;display:block}
.video-placeholder{padding:16px;text-align:center;color:var(--muted)}
.vp-title{font-weight:800;margin-bottom:6px;color:var(--text)}
.vp-note{font-size:12px}
.video-title{margin:10px 6px 6px;font-size:16px}
.video-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 6px 6px}
.tag{font-size:12px;background:#1f2937;color:#e5e7eb;border:1px solid var(--border);padding:3px 8px;border-radius:999px}

@media(max-width:1100px){ .videos-grid{grid-template-columns:1fr 1fr} }
@media(max-width:700px){ .videos-grid{grid-template-columns:1fr} }

/* Topnav dropdown */
.topnav .dropdown{position:relative;padding-bottom:10px}
.topnav .dropdown .parent{display:inline-block}
.topnav .dropdown .dropdown-menu{
  position:absolute;left:0;top:100%;min-width:200px;
  background:rgba(11,15,20,.98);border:1px solid var(--border);
  border-radius:12px;box-shadow:var(--shadow);padding:8px;margin-top:6px;display:none;z-index:60
}
.topnav .dropdown .dropdown-menu a{display:block;padding:8px 10px;border-radius:8px}
.topnav .dropdown .dropdown-menu a:hover{background:var(--elev)}
.topnav .dropdown:hover .dropdown-menu{display:block}
@media (max-width:700px){
  .topnav .dropdown{width:100%;padding-bottom:10px}
  .topnav .dropdown .dropdown-menu{position:static;display:block;margin-top:6px}
}

/* --- Mental Health (PDF viewer) --- */
.mental-page .muted{color:var(--muted);margin-top:4px}
.doc-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:12px}
.doc-frame{position:relative;width:100%;height:75vh;min-height:520px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#0a0f16}
.doc-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.doc-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:10px}
@media(max-width:900px){.doc-frame{height:72vh}}


/* --- Nav dropdown refinements --- */
.topnav .dropdown{display:inline-block; position:relative; z-index:70;padding-bottom:10px}
.topnav .dropdown .parent{padding-right:4px}
.topnav .dropdown .dropdown-menu{
  position:absolute; left:0; right:auto; top:calc(100% + 6px);
  min-width:220px; white-space:nowrap;
  background:rgba(11,15,20,.98); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow);
  padding:8px; margin:0;
  display:none; z-index:80
}
.topnav .dropdown:hover .dropdown-menu{display:block}
.topnav .dropdown .dropdown-menu a{display:block; padding:8px 10px; border-radius:8px}
.topnav .dropdown .dropdown-menu a:hover{background:var(--elev)}


/* --- Pass Rates --- */
.section-title{margin:4px 0 12px}
.card{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:14px;margin:16px 0}
.card.info{background:#0a0f16}
.table-wrap{overflow:auto}


/* --- Pass Rates charts gallery --- */
.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.chart-card{background:#0b1320;border:1px solid var(--border);border-radius:12px;padding:10px}
.chart-card img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--border)}
.chart-card figcaption{font-size:13px;color:var(--muted);margin-top:6px}
@media(max-width:900px){.charts-grid{grid-template-columns:1fr}}


/* --- Pass Rates Lightbox --- */
.chart-card{position:relative}
.chart-btn{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;gap:10px}
.lightbox.hidden{display:none}
.lightbox .lb-img{max-width:95vw;max-height:80vh;border-radius:8px;border:1px solid var(--border);box-shadow:var(--shadow)}
.lightbox .lb-cap{color:#e5e7eb;font-size:14px}
.lb-close{position:absolute;top:14px;right:16px;background:#111827;color:#e5e7eb;border:1px solid var(--border);border-radius:8px;width:38px;height:38px;font-size:22px;line-height:22px;cursor:pointer}
.lb-close:hover{background:#0f1620}


/* --- About page refresh --- */
.about-hero{margin-bottom:14px}
.about-hero .about-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.pillars-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pillar{background:var(--panel);border:1px solid var(--border);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.pillar .icon{color:#22d3ee;margin-bottom:6px}
.pillar h3{margin:0 0 6px}
.pillar .bullets{margin:8px 0 0 18px}
.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:16px 0}
.stat{background:#0b1320;border:1px solid var(--border);border-radius:14px;text-align:center;padding:12px}
.stat .num{font-size:28px;font-weight:800;letter-spacing:.5px}
.stat .label{color:var(--muted);font-size:13px}
@media(max-width:900px){
  .pillars-grid{grid-template-columns:1fr}
  .stats-grid{grid-template-columns:1fr}
}


/* --- About: Core Values layout --- */
.core-values{margin-top:8px}
.core-title{text-align:center;margin:8px 0 14px;font-size:28px;font-weight:800}
.cv-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;align-items:start}
.cv-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:14px;box-shadow:var(--shadow)}
.cv-icon{font-size:22px;color:#3b82f6;margin-bottom:4px;text-align:center}
.cv-heading{letter-spacing:.25em;text-align:center;margin:0 0 8px}
.cv-card p{margin:0 0 8px}
.cv-list{margin:6px 0 0 18px}
@media(max-width:900px){.cv-grid{grid-template-columns:1fr}}

.cv-card h3{margin-top:4px}
.cv-card .cv-list{margin-left:18px}


/* --- Dropdown hover/click fixes --- */
.topbar, .topnav{position:relative; z-index:1000;overflow:visible}
.topnav .dropdown{display:inline-block; position:relative;padding-bottom:10px}
.topnav .dropdown .parent{padding-right:6px}
.topnav .dropdown .dropdown-menu{
  position:absolute; top:100%; left:0; min-width:220px;
  background:rgba(11,15,20,.98); border:1px solid var(--border);
  border-radius:12px; box-shadow:var(--shadow);
  padding:8px; display:none; z-index:1100; white-space:nowrap
}
.topnav .dropdown:hover .dropdown-menu{display:block}
.topnav .dropdown.open .dropdown-menu{display:block}
.topnav .dropdown .dropdown-menu a{display:block; padding:8px 10px; border-radius:8px}
.topnav .dropdown .dropdown-menu a:hover{background:var(--elev)}

.topnav .dropdown .dropdown-menu:hover{display:block}


/* --- Program & Curriculum --- */
.program-hero{margin:6px 0 14px}
.program-hero .prog-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}
.prog-nav{display:flex;gap:10px;flex-wrap:wrap;background:#0b1320;border:1px solid var(--border);border-radius:12px;padding:8px;margin:10px 0 16px}
.prog-nav a{padding:8px 10px;border-radius:8px;color:var(--link)}
.prog-nav a:hover{background:var(--elev)}
.prog-section{margin:14px 0}
.two-col{display:grid;grid-template-columns:1fr .8fr;gap:16px;align-items:start}
.info-box{background:#0b1320;border:1px solid var(--border);border-radius:12px;padding:12px}
.info-box .title{font-weight:800;margin-bottom:6px}
.pill-grid{display:flex;flex-wrap:wrap;gap:10px}
.pill{background:#111827;border:1px solid var(--border);border-radius:999px;padding:8px 12px;font-size:14px}
.module-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.module{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.checklist{list-style:none;padding-left:0;margin:8px 0}
.checklist li{position:relative;padding-left:22px;margin:4px 0}
.checklist li:before{content:"✓";position:absolute;left:0;top:0;color:#22d3ee}
.bullets{margin:8px 0 0 18px}
@media(max-width:900px){
  .two-col{grid-template-columns:1fr}
  .module-grid{grid-template-columns:1fr}
}


/* --- Program Cycle --- */
.cycle-hero{margin:6px 0 12px}
.steps-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.step{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.step .num{width:34px;height:34px;border-radius:999px;display:inline-grid;place-items:center;
  background:linear-gradient(90deg,#22d3ee,#4f46e5);font-weight:800;margin-bottom:6px}
.timeline{list-style:none;padding-left:0;margin:0;position:relative}
.timeline li{display:grid;grid-template-columns:24px 1fr;gap:10px;padding:8px 0}
.tl-dot{width:14px;height:14px;border-radius:999px;background:#22d3ee;margin-top:6px;border:2px solid #0b1320;box-shadow:0 0 0 3px rgba(34,211,238,.2)}
.tl-content h4{margin:0 0 4px}
@media(max-width:900px){
  .steps-grid{grid-template-columns:1fr}
}




/* --- Certificates (no buttons) --- */
.cert-section{margin:14px 0}
.cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.cert-card{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.cc-top{display:flex;gap:6px;margin-bottom:6px}
.badge{font-size:12px;border:1px solid var(--border);border-radius:999px;padding:3px 8px;background:#0b1320}
.badge.sup{background:#1f2937}
@media(max-width:900px){.cert-grid{grid-template-columns:1fr}}


/* --- Certificates: grouped list --- */
.certs-index{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 12px}
.certs-index a{padding:6px 8px;border-radius:8px}
.certs-index a:hover{background:var(--elev)}
.certs-section{margin:14px 0}
.list-grid{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px 14px}
.cert-item{padding:4px 0;border-bottom:1px dashed var(--border)}
.cert-item .tag{font-size:12px;margin-left:8px;color:#93c5fd}
@media(max-width:900px){.list-grid{grid-template-columns:1fr}}


/* --- Certificates: grouped two-column descriptions --- */
.certs-index{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 12px}
.certs-index a{padding:6px 8px;border-radius:8px}
.certs-index a:hover{background:var(--elev)}
.certs-section{margin:14px 0}
.list-grid.detailed{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px}
.cert-item{padding:6px 0;border-bottom:1px dashed var(--border)}
.ci-title{display:flex;align-items:center;gap:8px}
.ci-desc{font-size:14px;color:var(--muted);margin-top:2px}
.tag{font-size:12px;margin-left:2px;color:#93c5fd}
@media(max-width:900px){.list-grid.detailed{grid-template-columns:1fr}}


/* --- Certificates: larger text + subject grouping --- */
.certs-large h1{font-size:clamp(26px,3vw,34px)}
.certs-large .muted{font-size:clamp(16px,1.8vw,18px)}
.certs-section h2{font-size:clamp(22px,2.2vw,26px); margin-bottom:8px}
.subject-head{font-size:clamp(18px,1.9vw,20px); margin:8px 0 6px; color:#a7c2ff}
.list-grid.detailed.bigtext{grid-template-columns:repeat(2,1fr); gap:12px 22px}
.list-grid.detailed.bigtext .cert-item{padding:8px 0}
.list-grid.detailed.bigtext .ci-title{font-size:clamp(16px,1.8vw,18px)}
.list-grid.detailed.bigtext .ci-desc{font-size:clamp(15px,1.7vw,17px)}
@media(max-width:900px){.list-grid.detailed.bigtext{grid-template-columns:1fr}}


/* --- Certificates: two-block layout --- */
.block-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.block{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.cert-lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.cert-lines li{line-height:1.45;font-size:clamp(15px,1.4vw,17px)}
.cert-lines strong{font-weight:700}
@media(max-width:900px){.block-grid{grid-template-columns:1fr}}


/* --- Requirements --- */
.tabbar{display:flex;gap:8px;margin-bottom:10px}
.tab{border:1px solid var(--border);background:#0b1320;border-radius:999px;padding:8px 12px;cursor:pointer}
.tab.active,.tab:hover{background:var(--elev)}
.tabpanes .pane{display:none}
.tabpanes .pane.show{display:block}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.note{font-size:14px;color:var(--muted);margin-top:6px}
.checklist > li{margin-bottom:6px}
.bullets.tight li{margin:2px 0}
.doc-frame{border:1px solid var(--border);border-radius:12px;overflow:hidden}
.doc-frame iframe{width:100%;height:70vh;border:0}
@media(max-width:900px){.two-col{grid-template-columns:1fr}}


/* --- Technology page --- */
.tech-steps{margin:0 0 8px 18px}
.tech-steps li{margin:6px 0; line-height:1.5}
.tech-video{width:100%; height:auto; border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow)}
.doc-empty{display:grid; place-items:center; min-height:280px; background:rgba(255,255,255,0.02)}


/* --- Technology page: larger text --- */
.tech-page .program-hero h1{font-size:clamp(28px,3.6vw,40px)}
.tech-page .program-hero .muted.small{font-size:clamp(16px,1.8vw,18px)}
.tech-page h2{font-size:clamp(20px,2.2vw,26px);margin-bottom:8px}
.tech-steps li{font-size:clamp(16px,1.8vw,19px);line-height:1.6}
.tech-page .card p,.tech-page .card li{font-size:clamp(16px,1.8vw,18px)}
.tech-page .doc-empty p{font-size:clamp(15px,1.7vw,17px)}

.brand img{height:40px;width:auto;display:block}
