/* ============================================================
   CMS SEKOLAH — BLUE TEMPLATE COLOUR OVERRIDES
   Loaded AFTER frontend.css to override all green accents.
   ============================================================ */

/* ─── 1. CSS Variables ─────────────────────────────────────── */
:root {
    --primary:       #1d4ed8;   /* blue-700  */
    --primary-dark:  #1e3a8a;   /* blue-900  */
    --primary-light: #60a5fa;   /* blue-400  */
    --primary-50:    #eff6ff;   /* blue-50   */
    --primary-100:   #dbeafe;   /* blue-100  */
    --accent:        #8b5cf6;   /* violet accent */
}

/* ─── 2. Hero slide fallback (no image) ────────────────────── */
.hero-slide-fallback {
    background: linear-gradient(135deg, #1e3a8a 0%, #0f172a 100%);
}

/* ─── 3. Hero dark overlay ──────────────────────────────────── */
.hero-overlay {
    background:
        linear-gradient(105deg,
            rgba(10,22,40,.96)   0%,
            rgba(30,58,138,.82) 28%,
            rgba(30,58,138,.48) 58%,
            rgba(10,22,40,.2)  100%);
}

/* ─── 4. Hero right-side spotlight glow ─────────────────────── */
.hero-spotlight {
    background: radial-gradient(ellipse 52% 68% at 76% 50%,
        rgba(29,78,216,.22) 0%, transparent 65%);
}

/* Hero eyebrow chip — biru (ganti hijau hardcode) */
.hero-eyebrow {
    background: rgba(29, 78, 216, .22);
    border-color: rgba(96, 165, 250, .35);
    color: var(--primary-light);
}

/* ─── 5. Hero prev / next button hover shadow ───────────────── */
.hero-prev:hover,
.hero-next:hover {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: 0 4px 18px rgba(29,78,216,.5);
}

/* ─── 6. Feature / "Keunggulan" card hover shadow ───────────── */
.feature-card:hover {
    box-shadow: 0 16px 48px rgba(29,78,216,.15);
    border-color: var(--primary-100);
}

/* ─── 7. "Sambutan" section background ──────────────────────── */
.sambutan-section {
    background: linear-gradient(150deg, #eff6ff 0%, #dbeafe 40%, #eff6ff 100%);
}

/* ─── 8. Sambutan decorative circle border ───────────────────── */
.sambutan-section::after {
    border-color: rgba(29,78,216,.07);
}

/* ─── 9. Sambutan principal photo shadow ─────────────────────── */
.sambutan-photo {
    box-shadow: 0 12px 40px rgba(29,78,216,.2), 0 0 0 10px var(--primary-100);
}

/* ─── 10. Gallery section dark background ───────────────────── */
.gallery-section {
    background: linear-gradient(160deg, var(--dark) 0%, #1e3a8a 100%);
}

/* ─── 11. Featured category section 2 background ────────────── */
.fcs-v2 {
    background: linear-gradient(160deg, #eff6ff 0%, #f8fafc 60%, #eff6ff 100%);
}

/* ─── 12. Featured category v2 dot-grid colour ──────────────── */
.fcs-stripe-grid {
    background-image: radial-gradient(circle, #bfdbfe 1.5px, transparent 1.5px);
}

/* ─── 13. Page / detail / berita hero banner ────────────────── */
.page-hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 55%, #2563eb 100%);
}

/* ─── 14. Stats section gradient ────────────────────────────── */
.stats-section {
    background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
}

/* ─── 15. Navbar daftar button hover shadow ─────────────────── */
.btn-nav-daftar:hover {
    box-shadow: 0 4px 16px rgba(29,78,216,.4);
}

/* ─── 16. Filter button active / hover shadow ───────────────── */
.filter-btn:hover,
.filter-btn.active {
    box-shadow: 0 2px 8px rgba(29,78,216,.25);
}

/* ─── 17. Primary button shadow ──────────────────────────────── */
.btn-primary {
    box-shadow: 0 2px 10px rgba(29,78,216,.3);
}

/* ─── 18. Scroll progress bar ────────────────────────────────── */
#scroll-progress {
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

/* ─── 19. Active nav item ────────────────────────────────────── */
.nav-link-item.nav-active {
    background: #2563eb;
    box-shadow: 0 2px 10px rgba(37,99,235,.35);
}
.nav-link-item.nav-active:hover { background: #1d4ed8 !important; }
.site-nav.scrolled .nav-link-item.nav-active { background: #2563eb; }
.nav-mobile-link.nav-active { background: #2563eb; }

/* ─── 20. Hero CTA primary button ───────────────────────────── */
.btn-hero-primary {
    background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
    box-shadow: 0 6px 28px rgba(29,78,216,.45);
}
.btn-hero-primary:hover {
    box-shadow: 0 10px 36px rgba(29,78,216,.55);
}

/* ─── 21. Hero progress bar colour ──────────────────────────── */
#heroProgressFill {
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

/* ─── 22. Scroll-hint dot animation colour ───────────────────── */
.hero-scroll-dot {
    background: var(--primary-light);
}