/* ==========================================================================
   School CMS - Public Site Stylesheet
   Colors/fonts/radius come from CMS Theme Settings via CSS variables (see header.php)
   ========================================================================== */

body {
    font-family: var(--font-body), sans-serif;
    color: #1e293b;
    overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, .font-heading {
    font-family: var(--font-heading), sans-serif;
    font-weight: 700;
}
a { color: var(--primary); text-decoration: none; }
.btn-primary { background: var(--primary); border-color: var(--primary); border-radius: var(--radius); }
.btn-outline-primary { color: var(--primary); border-color: var(--primary); border-radius: var(--radius); }
.btn-outline-primary:hover { background: var(--primary); }
.text-primary-custom { color: var(--primary) !important; }
.bg-primary-custom { background: var(--primary) !important; }
.bg-secondary-custom { background: var(--secondary) !important; }
.bg-accent-custom { background: var(--accent) !important; }

/* ---- Topbar ---- */
.topbar-strip { background: #0f172a; color: #fff; padding: 8px 0; }

/* ---- Header ---- */
.site-header { background: #fff; box-shadow: 0 2px 15px rgba(0,0,0,.05); z-index: 1050; }
.navbar-brand span span.d-block.fw-bold { font-family: var(--font-heading), sans-serif; font-size: 1.1rem; color: #0f172a; }
.nav-link { font-weight: 500; color: #334155 !important; }
.nav-link:hover { color: var(--primary) !important; }

/* ---- Sections ---- */
.section { padding: 80px 0; }
.section-sm { padding: 50px 0; }
.section-title { font-size: 2rem; margin-bottom: 8px; }
.section-subtitle { color: #64748b; max-width: 640px; margin: 0 auto 40px; }
.section-eyebrow { color: var(--primary); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; font-size: .8rem; }

/* ---- Cards ---- */
.card-soft { border: none; border-radius: var(--radius); box-shadow: 0 8px 30px rgba(0,0,0,.06); transition: transform .25s ease, box-shadow .25s ease; }
.card-soft:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.1); }
.rounded-custom { border-radius: var(--radius) !important; }
.img-cover { object-fit: cover; width: 100%; }

/* ---- Hero Slider ---- */
.hero-slide { position: relative; height: 88vh; min-height: 520px; background-size: cover; background-position: center; display: flex; align-items: center; }
.hero-overlay { position: absolute; inset: 0; background: #0f172a; }
.hero-content { position: relative; z-index: 2; color: #fff; }
.hero-content h1 { font-size: 3rem; }
@media (max-width: 767.98px) { .hero-slide { height: 70vh; } .hero-content h1 { font-size: 2rem; } }

/* ---- Stats ---- */
.stat-block { text-align: center; padding: 20px; }
.stat-block .num { font-size: 2.5rem; font-weight: 700; color: var(--primary); }

/* ---- Timeline ---- */
.vtimeline { position: relative; padding-left: 40px; }
.vtimeline::before { content: ''; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; background: #e2e8f0; }
.vtimeline-item { position: relative; padding-bottom: 40px; }
.vtimeline-item::before { content: ''; position: absolute; left: -37px; top: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--primary); border: 3px solid #fff; box-shadow: 0 0 0 3px var(--primary); }

/* ---- Gallery ---- */
.gallery-item { border-radius: var(--radius); overflow: hidden; position: relative; cursor: pointer; aspect-ratio: 1 / 1; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.gallery-item:hover img { transform: scale(1.08); }

/* ---- Video Cards ---- */
.video-card { position: relative; border-radius: var(--radius); overflow: hidden; }
.video-card .play-icon { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: #fff; background: rgba(0,0,0,.3); }

/* ---- Testimonials ---- */
.testimonial-card { background: #fff; border-radius: var(--radius); padding: 28px; box-shadow: 0 8px 30px rgba(0,0,0,.06); }
.testimonial-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }

/* ---- Footer ---- */
.site-footer { background: #0f172a; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: #94a3b8; font-size: .9rem; }
.footer-links a:hover { color: #fff; }
.footer-social { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.08); color: #fff; display: flex; align-items: center; justify-content: center; }
.footer-bottom { background: #0b1220; border-top: 1px solid rgba(255,255,255,.06); }

/* ---- Back to top ---- */
.back-to-top { position: fixed; bottom: 24px; right: 24px; width: 44px; height: 44px; border-radius: 50%; background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: all .3s ease; z-index: 1040; }
.back-to-top.show { opacity: 1; visibility: visible; }

/* ---- Skeleton loading ---- */
.skeleton { background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: var(--radius); }
@keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---- Notice ticker ---- */
.notice-bar { background: #fff7ed; border-left: 4px solid var(--secondary); padding: 12px 20px; border-radius: 0 var(--radius) var(--radius) 0; }

/* ---- Pagination ---- */
.pagination .page-link { border-radius: var(--radius); margin: 0 3px; border: none; color: #334155; }
.pagination .page-item.active .page-link { background: var(--primary); color: #fff; }

img { max-width: 100%; height: auto; }