/* Theme switcher styles. The default remains the original dark MCBTSI design. */
.theme-toggle {
    align-items: center;
    background: rgba(34, 211, 238, 0.12);
    border: 1px solid rgba(103, 232, 249, 0.45);
    border-radius: 999px;
    color: #ecfeff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-size: 1.2rem;
    height: 48px;
    justify-content: center;
    margin-left: 14px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
    width: 48px;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    background: #22d3ee;
    color: #020617;
    outline: 2px solid #67e8f9;
    outline-offset: 3px;
    transform: translateY(-1px);
}

/* Light mode uses the same cyan accent while making all reading surfaces high contrast. */
html[data-theme="light"] body {
    background: #f8fafc;
    color: #0f172a;
}

html[data-theme="light"] .navbar {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: #cbd5e1;
}

html[data-theme="light"] .nav-links a,
html[data-theme="light"] .contact-item,
html[data-theme="light"] .footer-container,
html[data-theme="light"] .service-card p,
html[data-theme="light"] .team-card p,
html[data-theme="light"] .join-card p,
html[data-theme="light"] .section-header p,
html[data-theme="light"] .about-content p,
html[data-theme="light"] .contact-info p {
    color: #334155;
}

html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .section-label,
html[data-theme="light"] .hero h1 span,
html[data-theme="light"] .stats-card h2,
html[data-theme="light"] .about-stat-card h3 {
    color: #0891b2;
}

html[data-theme="light"] .hero {
    background: linear-gradient(135deg, #effbff 0%, #f8fafc 48%, #e0f7fa 100%);
}

html[data-theme="light"] .hero-overlay {
    background: radial-gradient(circle at top right, rgba(34, 211, 238, .22), transparent 36%), radial-gradient(circle at bottom left, rgba(59, 130, 246, .13), transparent 32%);
}

html[data-theme="light"] .hero p {
    color: #334155;
}

/* Preserve a clear outline and readable label for the hero's secondary action. */
html[data-theme="light"] .btn-secondary {
    color: #0f172a;
    border-color: #64748b;
    background: rgba(255, 255, 255, .62);
}

html[data-theme="light"] .btn-secondary:hover,
html[data-theme="light"] .btn-secondary:focus-visible {
    color: #020617;
    border-color: #0891b2;
    background: #cffafe;
}

html[data-theme="light"] .hero-badge {
    background: #cffafe;
    border-color: #67e8f9;
    color: #0e7490;
}

html[data-theme="light"] .about,
html[data-theme="light"] .services,
html[data-theme="light"] .team,
html[data-theme="light"] .join-us,
html[data-theme="light"] .contact,
html[data-theme="light"] .events-page {
    background: #f8fafc;
}

html[data-theme="light"] .stats-card,
html[data-theme="light"] .about-stat-card,
html[data-theme="light"] .service-card,
html[data-theme="light"] .team-card,
html[data-theme="light"] .join-card,
html[data-theme="light"] .contact-form,
html[data-theme="light"] .event-content,
html[data-theme="light"] .event-content-button,
html[data-theme="light"] .about-box {
    background: #ffffff;
    border-color: #cbd5e1;
    box-shadow: 0 10px 26px rgba(15, 23, 42, .08);
}

html[data-theme="light"] .team-member-name,
html[data-theme="light"] .event-content-button,
html[data-theme="light"] .event-content-button h3,
html[data-theme="light"] .event-content-button p,
html[data-theme="light"] .event-content-button span,
html[data-theme="light"] .event-extra-details,
html[data-theme="light"] .event-extra-content,
html[data-theme="light"] .event-modal-description,
html[data-theme="light"] .empty-gallery {
    color: #0f172a;
}

html[data-theme="light"] .contact-form input,
html[data-theme="light"] .contact-form textarea,
html[data-theme="light"] .apply-form input,
html[data-theme="light"] .apply-form textarea {
    background: #ffffff;
    border-color: #94a3b8;
    color: #0f172a;
}

html[data-theme="light"] .footer {
    background: #ffffff;
    border-top-color: #cbd5e1;
}

html[data-theme="light"] .apply-box,
html[data-theme="light"] .event-modal-content,
html[data-theme="light"] .highlight-image-modal__content,
html[data-theme="light"] .team-image-modal__content {
    background: #ffffff;
    color: #0f172a;
}

html[data-theme="light"] .highlight-image-modal__content h2,
html[data-theme="light"] .team-image-modal__content h2,
html[data-theme="light"] .highlight-image-modal__content .close-modal {
    color: #0f172a;
}

html[data-theme="light"] .event-highlight-card {
    background: #ecfeff;
    border-color: #22d3ee;
    color: #155e75;
}

/* Keep administrator-edited Integrated Systems images responsive and readable. */
.managed-stat-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
    margin-top: 28px;
}

.managed-stat-gallery__card {
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(103, 232, 249, .35);
    border-radius: 16px;
    background: rgba(255, 255, 255, .05);
}

.managed-stat-gallery__card img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: contain;
    background: #ffffff;
}

.managed-stat-gallery__card figcaption {
    padding: 12px;
    color: #e2e8f0;
    font-size: 14px;
    font-weight: 700;
}

html[data-theme="light"] .managed-stat-gallery__card {
    background: #ffffff;
    border-color: #94a3b8;
}

html[data-theme="light"] .managed-stat-gallery__card figcaption {
    color: #0f172a;
}

/* The Coverage & Support popup includes location names inserted by JavaScript. */
html[data-theme="light"] #statsModal #statsContent,
html[data-theme="light"] #statsModal .stats-col p,
html[data-theme="light"] #statsModal .stats-col p2,
html[data-theme="light"] #statsModal .stats-col ul li,
html[data-theme="light"] #statsModal .stats-col strong {
    color: #0f172a !important;
}

html[data-theme="light"] #statsModal .stats-col h3 {
    color: #0e7490;
}

/* Keep the Years Experience timeline descriptions readable on the white modal. */
html[data-theme="light"] #statsModal .history-col p {
    color: #334155;
}

html[data-theme="light"] #statsModal .history-col strong {
    color: #0e7490;
}

html[data-theme="light"] .theme-toggle {
    background: #e0f7fa;
    border-color: #22d3ee;
    color: #0e7490;
}

@media (max-width: 992px) {
    .theme-toggle {
        margin-left: auto;
        margin-right: 14px;
    }

    html[data-theme="light"] .nav-links {
        background: #ffffff;
        border: 1px solid #cbd5e1;
    }
}