/*
1. JCPS Theme Color Definitions
============================================ */
:root {
    --jcps-blue: #00539B;
    --jcps-gold: #FFC107;

    /* Override Bootstrap's default theme colors */
    --bs-primary: var(--jcps-blue);
    --bs-primary-rgb: 0, 83, 155;
    --bs-link-color: var(--jcps-blue);
    --bs-link-hover-color: #003a6d;
}

[data-bs-theme="dark"] {
    --bs-link-color: #69b4ff;
    --bs-link-hover-color: #8bc7ff;
}

/*
2. Full-Screen Background Image & Overlay
============================================ */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('/images/school1.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    opacity: 0.1; /* Opacity for light mode */
    z-index: -1;
    transition: opacity 0.3s ease-in-out;
}

[data-bs-theme="dark"] body::before {
    opacity: 0.08; /* Slightly less opacity for dark mode */
    /* Add a dark overlay to make text more readable */
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.4);
}

/*
3. Frosted Glass Effect for Cards
============================================ */
.card {
    /* Light mode: semi-transparent white */
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

[data-bs-theme="dark"] .card {
    /* Dark mode: semi-transparent dark gray */
    background-color: rgba(33, 37, 41, 0.85);
}

/*
4. Theme Switcher Icon Visibility
============================================ */
#theme-switcher .bi { display: none; }
#theme-switcher .theme-icon-active { display: block; }