/* ==========================================================================
   St. Joseph's Public School — Site Stylesheet
   Built on Bootstrap 5 utilities. Replaces the old ~6,500-line theme CSS.
   ========================================================================== */

:root{
  --navy:      #12294f;
  --navy-dark: #0b1c3a;
  --navy-mid:  #1a3a6b;
  --gold:      #f0b429;
  --gold-dark: #c9960c;
  --text:      #384258;
  --muted:     #6b7488;
  --bg-soft:   #f6f8fc;
  --radius:    10px;
  --shadow:    0 6px 24px rgba(18,41,79,.08);
  --shadow-lg: 0 12px 40px rgba(18,41,79,.14);
}

body{
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  color: var(--text);
  font-size: 15px;
  line-height: 1.7;
}
h1,h2,h3,h4,h5,h6{ color: var(--navy); font-weight: 700; }
a{ text-decoration: none; transition: .2s; }
img{ max-width: 100%; }
.section{ padding: 90px 0; }
.section-sm{ padding: 60px 0; }
@media (max-width: 767px){ .section{ padding: 55px 0; } }

/* ---------- Buttons ---------- */
.btn-brand{
  background: linear-gradient(120deg, var(--navy), var(--navy-mid));
  color: #fff; border: none; border-radius: 50px;
  padding: 13px 28px; font-weight: 600; font-size: 14px;
  letter-spacing: .3px; display: inline-flex; align-items: center; gap: 8px;
  white-space: nowrap; box-shadow: var(--shadow);
}
.btn-brand:hover{ background: linear-gradient(120deg, var(--navy-dark), var(--navy)); color: #fff; transform: translateY(-2px); }
.btn-brand-outline{
  background: #fff; color: var(--navy); border: 2px solid var(--navy);
  border-radius: 50px; padding: 11px 26px; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.btn-brand-outline:hover{ background: var(--navy); color: #fff; }
.btn-gold{
  background: var(--gold); color: var(--navy); border: none; border-radius: 50px;
  padding: 13px 28px; font-weight: 700; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.btn-gold:hover{ background: var(--gold-dark); color: var(--navy); }
.btn-whatsapp{
  background: #25D366; color: #fff; border: none; border-radius: 50px;
  padding: 11px 24px; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(37,211,102,.3);
}
.btn-whatsapp i{ font-size: 17px; }
.btn-whatsapp:hover{ background: #1ebe5b; color: #fff; transform: translateY(-2px); }
.hero-btn-outline{
  background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.75);
  border-radius: 50px; padding: 11px 26px; font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
}
.hero-btn-outline:hover{ background: #fff; color: var(--navy); border-color: #fff; }

/* ---------- Section heading ---------- */
.eyebrow{
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold-dark); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 1px; margin-bottom: 10px;
}
.section-title{ font-size: clamp(24px, 4vw, 34px); margin-bottom: 12px; }
.section-title span{ color: var(--gold-dark); }
.section-desc{ color: var(--muted); max-width: 640px; }

/* ---------- Top bar ---------- */
.topbar{
  background: linear-gradient(90deg,#0e2144,#173a70 65%,var(--navy));
  color: rgba(255,255,255,.9); font-size: 13px; padding: 9px 0;
}
.topbar a{ color: rgba(255,255,255,.85); }
.topbar a:hover{ color: var(--gold); }
.topbar .ticker-wrap{ display:block; overflow:hidden; white-space:nowrap; }
.topbar .ticker-track{ display:inline-block; padding-left:100%; animation: ticker 24s linear infinite; }
.topbar .ticker-wrap:hover .ticker-track{ animation-play-state: paused; }
@keyframes ticker{ from{ transform:translateX(0);} to{ transform:translateX(-100%);} }
.topbar-links a{ margin-left: 18px; white-space: nowrap; }
.topbar-links a:first-child{ margin-left: 0; }

/* ---------- Navbar ---------- */
.site-navbar{ background:#fff; box-shadow: var(--shadow); padding: 6px 0; }
.site-navbar.is-sticky{ position: sticky; top: 0; z-index: 1030; animation: slideDown .35s ease; }
@keyframes slideDown{ from{ transform: translateY(-100%);} to{ transform: translateY(0);} }
.site-navbar .navbar-brand img{ height: 56px; width: auto; }
.site-navbar .nav-link{
  color: var(--navy) !important; font-weight: 600; font-size: 15px;
  padding: 22px 14px !important; position: relative;
}
.site-navbar .nav-link.active,
.site-navbar .nav-item:hover > .nav-link{ color: var(--navy-mid) !important; }
@media (min-width: 992px){
  .site-navbar .nav-link.active::after,
  .site-navbar .nav-item:hover > .nav-link::after{
    content:''; position:absolute; left:14px; right:14px; bottom:14px;
    height: 2.5px; background: var(--gold); border-radius: 2px;
  }
}
.site-navbar .dropdown-menu{
  border: none; box-shadow: var(--shadow-lg); border-radius: 10px; padding: 8px;
}
.site-navbar .dropdown-item{
  color: var(--text); font-weight: 500; border-radius: 6px; padding: 9px 14px; font-size: 14px;
}
.site-navbar .dropdown-item:hover{ background: var(--bg-soft); color: var(--navy); padding-left: 18px; }

/* ---------- Hero ---------- */
.hero{ position: relative; }
.hero .carousel-item{
  min-height: 560px; display:flex; align-items:center;
  background-size: cover; background-position: center;
}
.hero .carousel-item::before{
  content:''; position:absolute; inset:0;
  background: linear-gradient(90deg, rgba(11,28,58,.82) 20%, rgba(11,28,58,.35) 70%, rgba(11,28,58,.1));
}
.hero .carousel-caption-custom{ position: relative; z-index: 2; max-width: 620px; text-align: left; color: #fff; padding: 0 15px; }
.hero .hero-eyebrow{ color: var(--gold); font-weight: 700; text-transform: uppercase; letter-spacing: 1px; font-size: 13px; margin-bottom: 14px; }
.hero .hero-title{ color:#fff; font-size: clamp(28px, 5vw, 48px); margin-bottom: 16px; line-height: 1.25; }
.hero .hero-title span{ color: var(--gold); }
.hero .hero-sub{ color: rgba(255,255,255,.85); font-size: 16px; margin-bottom: 28px; }
.hero .carousel-indicators [data-bs-target]{
  background: var(--gold);
  width: 10px; height: 10px; border-radius: 50%;
  border: none !important;
  opacity: .5; margin: 0 5px;
  transition: opacity .2s, transform .2s;
}
.hero .carousel-indicators .active{ opacity: 1; transform: scale(1.15); }

/* ---------- Feature cards ---------- */
.feature-card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 30px 24px; height: 100%; transition: .25s;
}
.feature-card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feature-card .icon{
  width: 58px; height: 58px; border-radius: 14px;
  background: linear-gradient(135deg, var(--navy), var(--navy-mid));
  display:flex; align-items:center; justify-content:center; margin-bottom: 18px;
}
.feature-card .icon img{ width: 28px; height: 28px; filter: brightness(0) invert(1); }
.feature-card h4{ font-size: 18px; margin-bottom: 8px; }
.feature-card p{ color: var(--muted); font-size: 14px; margin: 0; }

/* ---------- About section ---------- */
.about-photos{ position: relative; }
.about-photos img{ border-radius: var(--radius); box-shadow: var(--shadow); }
.about-badge{
  position:absolute; bottom:-24px; left: -18px; background: var(--navy); color:#fff;
  border-radius: var(--radius); padding: 18px 22px; box-shadow: var(--shadow-lg);
  display:flex; align-items:center; gap: 14px;
}
.about-badge img{ width:36px; height:36px; filter: brightness(0) invert(1); box-shadow:none; border-radius:0; }
.about-badge b{ font-size: 15px; line-height:1.3; display:block; color:#fff; }
.quote-box{
  background: var(--bg-soft); border-left: 4px solid var(--gold);
  border-radius: 0 var(--radius) var(--radius) 0; padding: 20px 22px; font-style: italic; color: var(--navy);
}

/* ---------- Counters ---------- */
.counter-strip{ background: linear-gradient(120deg, var(--navy), var(--navy-mid)); color:#fff; }
.counter-item{ text-align:center; }
.counter-item .num{ font-size: 38px; font-weight: 800; color: var(--gold); }
.counter-item .lbl{ color: rgba(255,255,255,.85); font-weight: 500; margin-top: 4px; }

/* ---------- Testimonials ---------- */
.testi-card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 28px; height: 100%;
}
.testi-card .stars{ color: var(--gold); font-size: 13px; margin-bottom: 12px; }
.testi-card p{ color: var(--text); font-size: 14px; }
.testi-card .author{ display:flex; align-items:center; gap: 12px; margin-top: 18px; }
.testi-card .author img{ width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.testi-card .author span{ font-size: 13px; color: var(--muted); }

/* ---------- Breadcrumb ---------- */
.page-breadcrumb{
  background: linear-gradient(rgba(11,28,58,.82), rgba(11,28,58,.82)), center/cover no-repeat;
  padding: 70px 0; color:#fff;
}
.page-breadcrumb h1{ color:#fff; font-size: clamp(26px, 4vw, 38px); margin-bottom: 8px; }
.page-breadcrumb .crumbs a{ color: rgba(255,255,255,.75); }
.page-breadcrumb .crumbs .active{ color: var(--gold); }

/* ---------- Generic content card (used by stub pages) ---------- */
.content-card{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 44px 36px;
}

/* ---------- Forms ---------- */
.form-control, .form-select{
  border-radius: 8px; border: 1px solid #dfe3ec; padding: 11px 14px; font-size: 14px;
}
.form-control:focus, .form-select:focus{ border-color: var(--navy-mid); box-shadow: 0 0 0 .2rem rgba(26,58,107,.12); }
.form-label{ font-weight: 600; color: var(--navy); font-size: 13.5px; }

/* ---------- Footer ---------- */
.site-footer{ background: linear-gradient(160deg,var(--navy-dark) 0%, var(--navy) 55%, var(--navy-mid) 100%); color: rgba(255,255,255,.82); }
.site-footer h5{ color:#fff; font-weight:700; margin-bottom: 18px; position: relative; padding-bottom: 12px; }
.site-footer h5::after{ content:''; position:absolute; left:0; bottom:0; width:38px; height:3px; background: var(--gold); border-radius:2px; }
.site-footer p{ font-size: 14px; }
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom: 10px; }
.footer-links a{ color: rgba(255,255,255,.75); font-size: 14px; display:flex; align-items:center; gap:8px; }
.footer-links a i{ color: var(--gold); font-size: 11px; }
.footer-links a:hover{ color: var(--gold); padding-left: 4px; }
.footer-contact-list{ list-style:none; padding:0; margin:0; }
.footer-contact-list li{ display:flex; align-items:flex-start; gap:12px; margin-bottom: 16px; font-size: 14px; }
.footer-contact-list .ic{
  width:34px; height:34px; border-radius:8px; background: var(--gold); color: var(--navy);
  display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size: 13px;
}
.footer-contact-list a{ color: rgba(255,255,255,.82); }
.footer-contact-list a:hover{ color: var(--gold); }
.footer-hours{ list-style:none; padding:0; margin:0; border-top:1px solid rgba(255,255,255,.12); padding-top:14px; }
.footer-hours li{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:8px; }
.footer-hours span{ color: rgba(255,255,255,.55); }
.footer-hours b{ color:#fff; font-weight:600; }
.footer-social{ list-style:none; padding:0; margin:0; display:flex; gap:10px; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.14); color: var(--gold);
}
.footer-social a:hover{ background: var(--gold); color: var(--navy); border-color: var(--gold); }
.footer-bottom{ background: rgba(0,0,0,.2); padding: 16px 0; font-size: 13px; }
.footer-bottom a{ color: var(--gold); font-weight: 700; }

/* ---------- Notice box (home page, auto-scroll) ---------- */
.notice-box{
  background:#fff; border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; height: 380px; position: relative;
}
.notice-box::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:36px;
  background: linear-gradient(transparent, #fff); pointer-events:none;
}
.notice-scroll{
  animation: notice-scroll-up 22s linear infinite;
}
.notice-box:hover .notice-scroll{ animation-play-state: paused; }
@keyframes notice-scroll-up{
  0%{ transform: translateY(0); }
  100%{ transform: translateY(-50%); }
}
.notice-row{
  display:flex; align-items:center; gap:16px; padding: 16px 22px;
  border-bottom:1px solid #eef1f6; color: var(--text);
}
.notice-row:hover{ background: var(--bg-soft); }
.notice-date{
  flex-shrink:0; width:50px; height:50px; border-radius:10px;
  background: var(--bg-soft); color: var(--navy); font-weight:800; font-size:18px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.1;
}
.notice-date small{ font-size:9px; font-weight:700; color: var(--muted); text-transform:uppercase; }
.notice-text{ flex:1; font-size:14px; font-weight:600; color: var(--navy); }
.notice-urgent{
  display:inline-block; background:#dc3545; color:#fff; font-size:9px; font-weight:800;
  padding:2px 7px; border-radius:10px; margin-right:8px; vertical-align:middle;
}
.notice-att{ color: var(--gold-dark); flex-shrink:0; }

/* ---------- Scroll to top ---------- */
#scroll-top{
  position: fixed; right: 22px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%;
  background: var(--navy); color:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow: var(--shadow-lg); opacity:0; visibility:hidden; transform: translateY(10px);
  transition:.25s; z-index: 999;
}
#scroll-top.active{ opacity:1; visibility:visible; transform: translateY(0); }
#scroll-top:hover{ background: var(--gold); color: var(--navy); }

/* ---------- Reveal-on-scroll (lightweight, no plugin) ---------- */
.reveal{ opacity:0; transform: translateY(24px); transition: .6s ease; }
.reveal.in{ opacity:1; transform: translateY(0); }