/* ==========================================================================
   TEMASCHO Website — Custom Stylesheet
   Brand: Forest Green + Gold + White + Light Grey
   Headings: Poppins / Montserrat | Body: Inter / Open Sans
   ========================================================================== */

:root{
  --forest: #0d4a2b;
  --forest-dark: #082f1d;
  --forest-light: #14653a;
  --gold: #c9a227;
  --gold-light: #e8c454;
  --white: #ffffff;
  --grey-light: #f5f5f3;
  --grey-border: #e2e2de;
  --text-dark: #1c2620;
  --text-muted: #5c6660;
  --radius: 14px;
  --shadow-sm: 0 2px 10px rgba(8,47,29,0.06);
  --shadow-md: 0 10px 30px rgba(8,47,29,0.10);
  --shadow-lg: 0 20px 50px rgba(8,47,29,0.16);
  --transition: all .3s ease;
}

/* ---------- Base ---------- */
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  font-family: 'Inter', 'Open Sans', sans-serif;
  color: var(--text-dark);
  background: var(--white);
  line-height: 1.65;
  overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family: 'Poppins', 'Montserrat', sans-serif;
  font-weight: 700;
  color: var(--forest-dark);
  line-height: 1.25;
}
a{ text-decoration: none; color: inherit; transition: var(--transition); }
img{ max-width: 100%; height: auto; display:block; }
section{ padding: 5.5rem 0; }
.section-grey{ background: var(--grey-light); }
.section-forest{ background: var(--forest); color: var(--white); }
.section-forest h2, .section-forest h3, .section-forest p{ color: var(--white); }

.skip-link{
  position:absolute; left:-999px; top:0; background:var(--gold); color:var(--forest-dark);
  padding: 10px 16px; z-index: 2000; font-weight:600;
}
.skip-link:focus{ left: 10px; top: 10px; }

/* Section heading pattern */
.section-eyebrow{
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 700;
  font-size: .8rem;
  margin-bottom: .5rem;
  display:inline-block;
}
.section-title{
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  margin-bottom: .75rem;
  position:relative;
}
.section-title.with-underline::after{
  content:"";
  display:block;
  width: 70px;
  height: 4px;
  background: var(--gold);
  border-radius: 2px;
  margin-top: 14px;
}
.section-title.center-underline::after{ margin-left:auto; margin-right:auto; }
.section-lead{ color: var(--text-muted); max-width: 700px; }
.text-center .section-lead{ margin-left:auto; margin-right:auto; }

/* ---------- Buttons ---------- */
.btn{ border-radius: 50px; font-weight: 600; padding: .7rem 1.7rem; transition: var(--transition); }
.btn-forest{ background: var(--forest); color: var(--white); border:2px solid var(--forest); }
.btn-forest:hover{ background: var(--forest-dark); border-color: var(--forest-dark); color: var(--white); transform: translateY(-2px); }
.btn-gold{ background: var(--gold); color: var(--forest-dark); border: 2px solid var(--gold); }
.btn-gold:hover{ background: var(--gold-light); border-color: var(--gold-light); color: var(--forest-dark); transform: translateY(-2px); }
.btn-outline-light-custom{ background: transparent; color: var(--white); border: 2px solid var(--white); }
.btn-outline-light-custom:hover{ background: var(--white); color: var(--forest-dark); transform: translateY(-2px); }
.btn-outline-forest{ background: transparent; color: var(--forest); border: 2px solid var(--forest); }
.btn-outline-forest:hover{ background: var(--forest); color: var(--white); }
.btn-lg{ padding: .9rem 2.2rem; font-size: 1.05rem; }

/* ---------- Top Utility Bar ---------- */
.topbar{
  background: var(--forest-dark);
  color: rgba(255,255,255,.85);
  font-size: .82rem;
  padding: 7px 0;
}
.topbar-inner{ display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:6px; }
.topbar a{ color: rgba(255,255,255,.85); }
.topbar a:hover{ color: var(--gold-light); }
.topbar-left{ display:flex; gap: 22px; flex-wrap:wrap; }
.topbar-left i{ color: var(--gold); margin-right:5px; }
.topbar-right{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.topbar-link i{ color: var(--gold); margin-right:4px; }
.topbar-social{ display:flex; gap:10px; border-left: 1px solid rgba(255,255,255,.2); padding-left:14px; }
.topbar-social a{ width:26px; height:26px; border-radius:50%; background:rgba(255,255,255,.08); display:inline-flex; align-items:center; justify-content:center; }
.topbar-social a:hover{ background: var(--gold); color: var(--forest-dark); }

/* ---------- Header / Nav ---------- */
.site-header{ position: sticky; top:0; z-index: 1030; }
.main-nav{ background: var(--white); box-shadow: var(--shadow-sm); padding: .6rem 0; }
.navbar-brand{ display:flex; align-items:center; gap:10px; flex-shrink:0; margin-right: .75rem; }
.brand-logo{ width: 50px; object-fit:contain; flex-shrink:0; }
/* .brand-logo{ width: 46px; height:46px; object-fit:contain; flex-shrink:0; } */
.brand-text{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; }
.brand-text strong{ font-family:'Poppins',sans-serif; color: var(--forest); font-size:1.1rem; letter-spacing:.5px; }
.brand-text small{ color: var(--text-muted); font-size:.68rem; text-transform:uppercase; letter-spacing:.5px; }

/* Desktop (>=992px): full inline nav bar on one row — force nowrap so
   the row never breaks, and the collapse behaves as a normal flex row. */
@media (min-width: 992px){
  .main-nav .container{ flex-wrap: nowrap; }
  .main-nav .navbar-nav{ flex-wrap:nowrap; align-items:center; }
}
@media (min-width: 992px) and (max-width: 1249.98px){
  .brand-text small{ display:none; }
}
@media (max-width: 767.98px){
  .brand-logo{ width:38px; }
  .brand-text small{ display:none; }
  .brand-text strong{ font-size:.92rem; }
}
@media (max-width: 359.98px){
  .brand-text strong{ font-size:.82rem; }
}

/* Mobile (<992px): let the Bootstrap collapse panel wrap to its own row
   below the brand/toggler as normal — DO NOT force nowrap here, or the
   dropdown gets squeezed onto the same row as the logo and overlaps the
   header/hero above it. */
@media (max-width: 991.98px){
  .navbar-collapse{
    border-top: 1px solid var(--grey-border);
    margin-top: .6rem;
    padding-top: .3rem;
  }
  .main-nav .navbar-nav{ text-align:center; }
  .search-item{ margin: .4rem 0 0; justify-content:center; }
}

.main-nav .nav-item{ flex-shrink:0; }
.main-nav .nav-link{
  font-weight:600; color: var(--text-dark); position:relative;
  white-space:nowrap;
  padding: .5rem .7rem !important;
  font-size: .95rem;
}
@media (min-width: 992px) and (max-width: 1249.98px){
  .main-nav .nav-link{ padding: .5rem .5rem !important; font-size:.88rem; }
}
.main-nav .nav-link.active,
.main-nav .nav-link:hover{ color: var(--forest); }
.main-nav .nav-link.active::after{
  content:""; position:absolute; left:.7rem; right:.7rem; bottom:.15rem; height:3px; background:var(--gold); border-radius:2px;
}

/* Search button — deliberately not a Bootstrap .btn to avoid any base
   button padding/line-height rules bleeding in; fully self-contained. */
.search-item{ display:flex; align-items:center; flex-shrink:0; margin-left:.5rem; }
.btn-search{
  -webkit-appearance:none; appearance:none;
  box-sizing:border-box;
  background: var(--forest); color:var(--white); border:none; outline:none;
  width:40px; height:40px; min-width:40px; max-width:40px; min-height:40px; max-height:40px;
  padding:0; margin:0; flex-shrink:0;
  border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:.9rem; line-height:1; cursor:pointer;
  transition: var(--transition);
}
.btn-search i{ display:block; }
.btn-search:hover{ background: var(--gold); color: var(--forest-dark); }
.btn-search:focus{ box-shadow: 0 0 0 .2rem rgba(13,74,43,.2); }

/* Mobile nav toggler — explicitly styled (not left to Bootstrap's
   transparent-border default) so it's always visibly present, and given
   flex-shrink:0 + margin-left:auto so it can never be squeezed off-screen
   by a long brand name on narrow viewports. */
.navbar-toggler{
  -webkit-appearance:none; appearance:none;
  box-sizing:border-box;
  background: var(--forest); color:var(--white); border:none; outline:none;
  width:44px; height:44px; min-width:44px;
  padding:0; margin:0 0 0 auto; flex-shrink:0;
  border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  font-size:1.05rem; line-height:1; cursor:pointer;
  transition: var(--transition);
  box-shadow: none;
}
.navbar-toggler i{ display:block; }
.navbar-toggler:hover{ background: var(--gold); color: var(--forest-dark); }
.navbar-toggler:focus{ box-shadow: 0 0 0 .2rem rgba(13,74,43,.2); }

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height: 92vh;
  display:flex;
  align-items:center;
  background: linear-gradient(180deg, rgb(8 47 29 / 33%), rgb(8 47 29 / 47%)), url(../images/hero-bg.png) center / cover no-repeat;
  color: var(--white);
  overflow: hidden;
}
/* .hero is a flex container, so its direct child (.container) is a flex
   item — flex items default to min-width:auto, which lets them refuse to
   shrink below their content's natural width and overflow the viewport
   instead of wrapping. min-width:0 restores normal text-wrapping. */
.hero > .container{ min-width:0; }
.hero-content{ max-width: 780px; min-width:0; }

.hero-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(232,196,84,.45);
  backdrop-filter: blur(6px);
  color: var(--gold-light);
  font-weight:600; font-size:.85rem; letter-spacing:.5px;
  padding:.45rem 1.1rem; border-radius:50px;
  margin-bottom:1.5rem;
}
.hero-badge-icon{ color: var(--gold); font-size:.9rem; }

.hero-headline{
  font-family:'Poppins',sans-serif;
  font-weight:800;
  font-size: clamp(2.3rem, 5.4vw, 4rem);
  line-height:1.1;
  letter-spacing:-.5px;
  margin-bottom: 1.1rem;
  color: var(--white);
}
.hero-highlight{
  position:relative;
  color: var(--gold-light);
}
.hero-highlight::after{
  content:"";
  position:absolute; left:2px; right:2px; bottom:-.08em; height:.09em;
  background: linear-gradient(90deg, var(--gold) 0%, var(--gold-light) 100%);
  border-radius:2px; opacity:.85;
}

.hero-motto-tag{
  font-family:'Montserrat',sans-serif;
  color: var(--gold-light);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  font-weight:600;
  margin-bottom:1.1rem;
}
.hero-motto-tag em{ font-style: italic; }

.hero-text{ font-size:1.1rem; color: rgba(255,255,255,.9); margin-bottom:2rem; max-width:600px; }
.hero-btns .btn{ margin-right:14px; margin-bottom:10px; }
.hero-scroll{
  position:absolute; bottom:26px; left:50%; transform:translateX(-50%);
  color: var(--white); opacity:.85; text-align:center; font-size:.8rem;
}
.hero-scroll i{ display:block; font-size:1.4rem; animation: bounce 2s infinite; }
@keyframes bounce{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(8px);} }

/* ---------- Quick Access ---------- */
.quick-access{ margin-top:-70px; position:relative; z-index:10; }
.qa-card{
  background: var(--white);
  border-radius: var(--radius);
  padding: 2rem 1.4rem;
  text-align:center;
  box-shadow: var(--shadow-md);
  height:100%;
  transition: var(--transition);
  border-bottom: 4px solid transparent;
}
.qa-card:hover{ transform: translateY(-8px); border-bottom-color: var(--gold); box-shadow: var(--shadow-lg); }
.qa-icon{
  width:64px; height:64px; border-radius:50%;
  background: linear-gradient(135deg, var(--forest-light) 0%, var(--forest-dark) 100%);
  color: var(--gold);
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; margin: 0 auto 1rem;
  box-shadow: 0 8px 18px -6px rgba(8,47,29,.55), 0 0 0 6px rgba(13,74,43,.07);
  transition: var(--transition);
}
.qa-card:hover .qa-icon{
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--forest-dark);
  box-shadow: 0 8px 18px -6px rgba(201,162,39,.55), 0 0 0 6px rgba(201,162,39,.12);
}
.qa-card h5{ font-size:1.05rem; margin-bottom:.4rem; }
.qa-card p{ color: var(--text-muted); font-size:.9rem; margin:0; }

/* ---------- Welcome / Headmaster ---------- */
.welcome-portrait{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-md); position:relative; }
.welcome-portrait::before{
  content:""; position:absolute; inset:-14px auto auto -14px; width:100%; height:100%;
  border: 4px solid var(--gold); border-radius: var(--radius); z-index:-1;
}
.signature-line{ font-family:'Poppins',sans-serif; font-weight:700; color:var(--forest); margin-top:1rem; }

/* ---------- Why Choose (dark section cards) ---------- */
.why-card{
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--radius);
  padding: 2rem 1.5rem;
  height:100%;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.4);
  transition: var(--transition);
}
.why-card:hover{
  background: rgba(255,255,255,.14);
  border-color: rgba(201,162,39,.5);
  transform: translateY(-6px);
  box-shadow: 0 16px 32px -12px rgba(0,0,0,.5);
}
.why-icon{
  width:52px; height:52px; border-radius:14px;
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--forest-dark);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; margin-bottom:1.1rem;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,.35);
}
.why-card h5{ color: var(--white); }
.why-card p{ color: rgba(255,255,255,.75); font-size:.92rem; margin:0; }

/* ---------- Programme Cards ---------- */
.programme-card{
  background: var(--white);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow-sm);
  height:100%;
  transition: var(--transition);
  border: 1px solid var(--grey-border);
}
.programme-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-6px); border-color: var(--gold); }
.programme-icon{
  width:56px; height:56px; border-radius:14px;
  background: linear-gradient(135deg, var(--forest-light) 0%, var(--forest) 100%);
  color: var(--gold-light);
  display:flex; align-items:center; justify-content:center; font-size:1.4rem;
  margin-bottom:1rem;
  box-shadow: 0 8px 18px -8px rgba(8,47,29,.5);
  transition: var(--transition);
}
.programme-card:hover .programme-icon{
  background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold) 100%);
  color: var(--forest-dark);
  box-shadow: 0 8px 18px -8px rgba(201,162,39,.5);
}
.programme-body{ padding: 1.6rem; }

/* ---------- Campus Life ---------- */
.campus-item{ border-radius: var(--radius); overflow:hidden; position:relative; box-shadow: var(--shadow-sm); }
.campus-item img{ transition: transform .5s ease; width:100%; height:100%; object-fit:cover; }
.campus-item:hover img{ transform: scale(1.08); }
.campus-caption{
  position:absolute; left:0; right:0; bottom:0; padding: 1rem 1.2rem;
  background: linear-gradient(0deg, rgba(8,47,29,.85), transparent);
  color: var(--white); font-weight:600;
}

/* ---------- Statistics ---------- */
.stats-section{ background: var(--forest-dark); color: var(--white); }
.stat-item{ text-align:center; padding: 1rem; }
.stat-number{
  font-family:'Poppins',sans-serif; font-weight:800; color: var(--gold);
  font-size: clamp(2.2rem, 4vw, 3rem); line-height:1;
}
.stat-label{ color: rgba(255,255,255,.8); margin-top:.5rem; font-weight:500; }

/* ---------- News Cards ---------- */
.news-card{ background: var(--white); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); height:100%; transition: var(--transition); border:1px solid var(--grey-border);}
.news-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.news-img{ height:210px; overflow:hidden; }
.news-img img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.news-card:hover .news-img img{ transform: scale(1.1); }
.news-date{ color: var(--gold); font-weight:700; font-size:.82rem; text-transform:uppercase; letter-spacing:1px; }
.news-body{ padding: 1.4rem; }
.news-link{ color: var(--forest); font-weight:700; }
.news-link i{ transition: transform .2s ease; }
.news-link:hover i{ transform: translateX(4px); }

/* ---------- Article Detail Page ---------- */
.article-body p{ font-size:1.02rem; line-height:1.85; margin-bottom:1.3rem; }
.article-body p:first-of-type::first-letter{
  font-family:'Poppins',sans-serif; font-weight:700; font-size:2.6rem; color: var(--forest);
  float:left; line-height:1; margin-right:.4rem; margin-top:.15rem;
}

/* ---------- Events Timeline ---------- */
.timeline{ position:relative; padding-left: 2.2rem; }
.timeline::before{ content:""; position:absolute; left:8px; top:0; bottom:0; width:2px; background: var(--grey-border); }
.timeline-item{ position:relative; padding-bottom: 2.2rem; }
.timeline-item::before{
  content:""; position:absolute; left:-2.2rem; top:4px; width:18px; height:18px; border-radius:50%;
  background: var(--gold); border: 3px solid var(--forest);
}
.timeline-date{ color: var(--forest); font-weight:700; font-size:.85rem; text-transform:uppercase; letter-spacing:1px; }
.timeline-item h5{ margin: .3rem 0; }
.timeline-item p{ color: var(--text-muted); margin:0; }

/* ---------- Gallery ---------- */
.gallery-grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}
.gallery-item{
  /* Full reset so a native <button> renders identically to the old <div>
     across browsers — iOS/Android apply their own button chrome and
     sizing quirks unless appearance is explicitly disabled. */
  -webkit-appearance:none; appearance:none;
  -webkit-tap-highlight-color: transparent;
  font: inherit; color: inherit;
  width:100%; margin:0; padding:0; border:none; text-align:left;
  display:block;
  /* Give the button itself a definite square size (not just the <img>
     inside it). Without this, a <button> with no explicit height sizing
     an <img height:100%> against an indeterminate parent height can fail
     to reserve any space in some browsers/preview renderers, making the
     photo appear to "not show" even though it loaded fine. */
  aspect-ratio: 1 / 1;
  border-radius: var(--radius); overflow:hidden; position:relative; box-shadow: var(--shadow-sm);
  background: var(--grey-light);
  min-width: 0; min-height: 0; max-width: 100%;
  cursor: pointer;
}
.gallery-item img{
  transition: transform .5s ease;
  display:block; width:100%; height:100%;
  object-fit:cover;
  pointer-events: none;
}
.gallery-item:hover img{ transform: scale(1.1); }
.gallery-item:focus-visible{ outline: 3px solid var(--gold); outline-offset: 2px; }
.gallery-overlay{
  position:absolute; inset:0; background: rgba(8,47,29,0); display:flex; align-items:center; justify-content:center;
  color: var(--white); opacity:0; transition: var(--transition);
  pointer-events: none;
}
.gallery-item:hover .gallery-overlay{ background: rgba(8,47,29,.45); opacity:1; }
.gallery-caption-bar{
  position:absolute; left:0; right:0; bottom:0;
  background: linear-gradient(0deg, rgba(8,47,29,.85), transparent);
  color: var(--white); font-weight:600; font-size:.78rem;
  padding: 1.6rem .6rem .5rem;
  pointer-events: none;
  text-align: left;
}
.gallery-filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:.5rem; }
.gallery-filters .btn{ margin:0; }
.gallery-filters .btn.active{ background: var(--forest); color:var(--white); }
@media (max-width: 991.98px){
  .gallery-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 575.98px){
  .gallery-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap:.5rem; }
  .gallery-filters{ gap:.4rem; }
  .gallery-filters .btn{ padding:.45rem .9rem; font-size:.8rem; }
  .gallery-caption-bar{ font-size:.7rem; padding:1.2rem .5rem .4rem; }
}

/* ---------- Search modal ---------- */
.search-results{ margin-top: 1rem; max-height: 55vh; overflow-y: auto; }
.search-result-list{ display: flex; flex-direction: column; gap: .5rem; }
.search-result-item{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  padding: .75rem 1rem; border: 1px solid var(--grey-border); border-radius: var(--radius);
  transition: var(--transition);
}
.search-result-item:hover, .search-result-item:focus{
  background: var(--grey-light); border-color: var(--gold); transform: translateX(2px);
}
.search-result-badge{
  background: var(--forest); color: var(--white); font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; padding: .2rem .55rem; border-radius: 50px;
}
.search-result-title{ font-weight: 700; color: var(--forest-dark); flex: 1 1 auto; }
.search-result-desc{ flex-basis: 100%; color: var(--text-muted); font-size: .85rem; }
.search-empty{ padding: .75rem 0; font-size: .9rem; }

/* ---------- Lightbox ---------- */
.lightbox-modal .modal-dialog{ margin: 1rem auto; }
.lightbox-modal .modal-content{ background: transparent; border: none; }
.lightbox-modal .modal-body{ padding: 0; position: relative; }
.lightbox-img-wrap{ display:flex; align-items:center; justify-content:center; min-height: 30vh; }
.lightbox-img-wrap img{ max-width: 100%; max-height: 70vh; border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.lightbox-caption{ color: var(--white); text-align:center; margin-top: 1rem; font-weight:600; padding: 0 3rem; }
.lightbox-close{
  position:absolute; top:-14px; right:-14px; width:42px; height:42px; min-width:42px; border-radius:50%;
  background: var(--gold); color: var(--forest-dark); border:none; padding:0;
  display:flex; align-items:center; justify-content:center; font-size:1.1rem; z-index:5;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
}
.lightbox-nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:46px; height:46px; min-width:46px; border-radius:50%; padding:0;
  background: rgba(255,255,255,.2); color: var(--white); border:none;
  display:flex; align-items:center; justify-content:center; font-size:1.2rem;
  transition: var(--transition); z-index:5;
  -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent;
}
.lightbox-nav:hover{ background: var(--gold); color: var(--forest-dark); }
.lightbox-prev{ left:-14px; }
.lightbox-next{ right:-14px; }
@media (max-width: 767.98px){
  .lightbox-modal .modal-dialog{ margin: .5rem; }
  .lightbox-img-wrap img{ max-height: 55vh; }
  .lightbox-nav{ width:40px; height:40px; min-width:40px; font-size:1rem; }
  .lightbox-prev{ left:2px; }
  .lightbox-next{ right:2px; }
  .lightbox-close{ top:2px; right:2px; width:38px; height:38px; min-width:38px; }
  .lightbox-caption{ font-size:.85rem; padding: 0 2.5rem; margin-top:.6rem; }
}

/* ---------- School Videos ---------- */
.video-card{ display:block; border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-sm); background: var(--white); transition: var(--transition); height:100%; border:1px solid var(--grey-border); }
.video-card:hover{ box-shadow: var(--shadow-lg); transform: translateY(-6px); }
.video-thumb{ position:relative; overflow:hidden; aspect-ratio:16/9; }
.video-thumb img{ width:100%; height:100%; object-fit:cover; transition: transform .5s ease; }
.video-card:hover .video-thumb img{ transform: scale(1.08); }
.video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:56px; height:56px; border-radius:50%; background: rgba(255,255,255,.92);
  color: var(--forest); display:flex; align-items:center; justify-content:center;
  font-size:1.1rem; transition: var(--transition);
}
.video-card:hover .video-play{ background: var(--gold); color: var(--forest-dark); transform:translate(-50%,-50%) scale(1.08); }
.video-body{ padding: 1.2rem 1.4rem; }
.video-body h5{ font-size:1.05rem; margin-bottom:.4rem; color: var(--text-dark); }

/* ---------- Contact ---------- */
.contact-info-card{ background: var(--white); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-md); height:100%; }
.contact-info-item{ display:flex; gap:1rem; margin-bottom:1.4rem; }
.contact-info-icon{ width:46px; height:46px; border-radius:50%; background: var(--grey-light); color: var(--forest); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.map-frame{ border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow-md); height:100%; min-height:320px; }
.map-frame iframe{ width:100%; height:100%; min-height:320px; border:0; }

/* ---------- Modern form fields ---------- */
.form-control, .form-select{
  border-radius: 10px;
  border:1.5px solid var(--grey-border);
  background: var(--grey-light);
  padding: .8rem 1rem;
  font-size:.95rem;
  transition: var(--transition);
}
.form-control:focus, .form-select:focus{
  background: var(--white);
  border-color: var(--forest);
  box-shadow: 0 0 0 .22rem rgba(13,74,43,.14);
}
.form-control::placeholder{ color: var(--text-muted); opacity:.7; }

.field-label{
  display:flex; align-items:center; gap:.5rem;
  font-weight:700; font-size:.8rem; letter-spacing:.4px;
  text-transform:uppercase; color: var(--forest);
  margin-bottom:.5rem;
}
.field-label i{ color: var(--gold); font-size:.85rem; width:16px; text-align:center; }

.field-icon-wrap{ position:relative; }
.field-icon-wrap .field-icon{
  position:absolute; left:1rem; top:1px; bottom:1px;
  display:flex; align-items:center;
  color: var(--text-muted); font-size:.95rem;
  pointer-events:none; transition: var(--transition);
}
.field-icon-wrap.field-icon--top .field-icon{ top:1rem; bottom:auto; align-items:flex-start; }
.field-icon-wrap .form-control,
.field-icon-wrap .form-select{ padding-left: 2.7rem; }
.field-icon-wrap:focus-within .field-icon{ color: var(--forest); }

.form-hint{ font-size:.78rem; color: var(--text-muted); margin-top:.35rem; }

.form-honeypot{ position:absolute !important; left:-9999px !important; width:1px; height:1px; overflow:hidden; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--forest-dark); color: rgba(255,255,255,.8); padding-top: 4.5rem; }
.footer-top{ padding-bottom: 2.5rem; }
.footer-brand{ display:flex; align-items:center; gap:12px; margin-bottom:1rem; }
.footer-brand img{ width:48px; }
.footer-brand strong{ display:block; color: var(--white); font-family:'Poppins',sans-serif; }
.footer-brand small{ color: var(--gold-light); }
.footer-about{ font-size:.9rem; color: rgba(255,255,255,.65); }
.footer-heading{ color: var(--white); text-transform:uppercase; letter-spacing:1px; font-size:.85rem; margin-bottom:1.2rem; }
.footer-links, .footer-contact{ list-style:none; padding:0; margin:0; }
.footer-links li, .footer-contact li{ margin-bottom: .7rem; font-size:.92rem; }
.footer-links a{ color: rgba(255,255,255,.7); }
.footer-links a:hover{ color: var(--gold-light); padding-left:4px; }
.footer-contact i{ color: var(--gold); margin-right:8px; width:16px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{ width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.08); display:flex; align-items:center; justify-content:center; }
.footer-social a:hover{ background: var(--gold); color: var(--forest-dark); }
.footer-divider{ border-color: rgba(255,255,255,.15); margin: 0; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; padding: 1.4rem 0; font-size:.85rem; }

/* ---------- Back to top ---------- */
.back-to-top{
  position:fixed; right:22px; bottom:22px; width:46px; height:46px; border-radius:50%;
  background: var(--forest); color: var(--gold); border:none; box-shadow: var(--shadow-md);
  display:flex; align-items:center; justify-content:center; opacity:0; visibility:hidden; transition: var(--transition); z-index:1040;
}
.back-to-top.show{ opacity:1; visibility:visible; }
.back-to-top:hover{ background: var(--gold); color: var(--forest-dark); }

/* ---------- Generic page banner (interior pages) ---------- */
.page-banner{
  background: linear-gradient(135deg, var(--forest), var(--forest-dark));
  color: var(--white);
  padding: 4.5rem 0 3rem;
  text-align:center;
}
.page-banner h1{ color: var(--white); font-size: clamp(1.8rem, 4vw, 2.8rem); }
.breadcrumb-custom{ color: rgba(255,255,255,.75); font-size:.9rem; }
.breadcrumb-custom a{ color: var(--gold-light); }

.card-simple{ background: var(--white); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-sm); border:1px solid var(--grey-border); }
.icon-badge{ width:56px; height:56px; border-radius:14px; background: var(--grey-light); color:var(--forest); display:flex; align-items:center; justify-content:center; font-size:1.4rem; margin-bottom:1rem; }

.table-waec th{ background: var(--forest); color:var(--white); }
.accordion-button:not(.collapsed){ background: var(--forest); color: var(--white); }
.accordion-button:focus{ box-shadow:none; }

/* ---------- Utilities ---------- */
.text-gold{ color: var(--gold) !important; }
.text-forest{ color: var(--forest) !important; }
.bg-forest{ background: var(--forest) !important; }
.rounded-xl{ border-radius: var(--radius) !important; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px){
  .quick-access{ margin-top: 30px; }
  .topbar-left{ display:none; }
  section{ padding: 3.5rem 0; }
}
@media (max-width: 575.98px){
  .hero{ min-height: 80vh; }
  .hero-btns .btn{ width:100%; margin-right:0; }
}