/********** Template CSS - CCSNI Branding (Purple removed from topbar contact icons) **********/
:root {
    --bs-tertiary: #797E88;

    /* CCSNI Logo Exact Colors */
    --ccsni-purple: #823794;          /* Ribbon - main accent for buttons/titles/borders */
    --ccsni-teal: #009688;            /* Gradient start */
    --ccsni-blue: #1976D2;            /* Gradient mid */
    --ccsni-green: #4CAF50;           /* Gradient end / arrow */
    --ccsni-navy: #0D47A1;            /* Dark text, navbar, topbar bg */

    /* Bootstrap color overrides */
    --bs-primary: var(--ccsni-purple);
    --bs-primary-rgb: 130, 55, 148;
    --bs-secondary: var(--ccsni-navy);
    --bs-secondary-rgb: 13, 71, 161;
    --bs-success: var(--ccsni-green);
    --bs-info: var(--ccsni-teal);
    --bs-warning: var(--ccsni-purple); /* No yellow */
    --bs-danger: #dc3545;
    --bs-light: #f8f9fa;
    --bs-dark: var(--ccsni-navy);
    --bs-dark-rgb: 13, 71, 161;

    /* Gradient for headers/carousels */
    --ccsni-gradient: linear-gradient(135deg, var(--ccsni-teal), var(--ccsni-blue), var(--ccsni-green));
}

/* Force remove any yellow/warning colors */
.bg-warning, .text-warning, .alert-warning, .btn-warning {
    background-color: var(--ccsni-purple) !important;
    border-color: var(--ccsni-purple) !important;
    color: white !important;
}

/* Topbar contact icons - COMPLETE REMOVAL OF BACKGROUND, BORDER, SHADOW, BOX */
.top-bar .btn-square {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin-right: 8px !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Icons: white, larger, no shadow */
.top-bar .btn-square i {
    font-size: 1.8rem !important;     /* Slightly larger for visibility */
    color: white !important;
}

/* Topbar text: white and aligned */
.top-bar h6,
.top-bar span {
    color: white !important;
    font-weight: 500;
}

/* Topbar background */
.top-bar {
    background: var(--ccsni-navy) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}

/* Back to Top */
.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99;
    background: var(--ccsni-purple);
    color: white;
    border: none;
}
.back-to-top:hover {
    background: var(--ccsni-blue);
}

/* Font weights */
.fw-bold { font-weight: 700 !important; }
.fw-medium { font-weight: 600 !important; }
.fw-normal { font-weight: 400 !important; }

/* Spinner */
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}
#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}

/* Buttons */
.btn {
    transition: .5s;
}
.btn-primary {
    background: var(--ccsni-purple);
    border-color: var(--ccsni-purple);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: var(--ccsni-blue) !important;
    border-color: var(--ccsni-blue) !important;
}
.btn-square, .btn-sm-square, .btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Top Bar */
.top-bar {
    height: 90px;
    padding: 0 90px;
}
.top-bar h6 {
    letter-spacing: 1px;
}

/* Nav Bar */
.nav-bar {
    padding: 0 90px;
    transition: .5s;
    background: var(--ccsni-navy) !important;
}
.navbar {
    background: var(--ccsni-navy) !important;
}
.navbar .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 20px 0;
    color: white;
    font-size: 18px;
}
.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--ccsni-purple) !important;
}
.navbar .dropdown-toggle::after {
    color: var(--ccsni-purple);
}
.navbar .dropdown-menu {
    background: white;
    border: 1px solid rgba(130,55,148,0.2);
}
.dropdown-item:hover, .dropdown-item:focus {
    background: rgba(130,55,148,0.1);
    color: var(--ccsni-purple);
}

/* Header Carousel & Page Header */
.header-carousel,
.page-header {
    background: var(--ccsni-gradient) center center no-repeat !important;
    background-size: cover !important;
}
.page-header .breadcrumb-item,
.page-header .breadcrumb-item a {
    color: white;
}
.page-header .breadcrumb-item.active {
    color: var(--ccsni-purple);
}

.top-bar h1 {
    color: white !important;
}


/* Video Play Button */
.btn-play {
    background: var(--ccsni-navy);
}
.btn-play:before, .btn-play:after {
    background: var(--ccsni-navy);
}
.btn-play span {
    border-left-color: white;
}

/* Section Title */
.section-title {
    color: var(--ccsni-purple);
}
.section-title::before {
    border-top: 2px solid var(--ccsni-purple);
}
.section-title::after {
    border-bottom: 2px solid var(--ccsni-purple);
}

/* Other purple accents kept */
a:hover, .text-primary, .btn-link:hover {
    color: var(--ccsni-purple) !important;
}
.bg-primary {
    background: var(--ccsni-purple) !important;
}
.bg-secondary {
    background: var(--ccsni-navy) !important;
}

/* Footer */
.footer {
    background: var(--ccsni-navy);
    color: rgba(255,255,255,0.8);
}
.footer .btn.btn-link {
    color: rgba(255,255,255,0.8);
}
.footer .btn.btn-link:hover {
    color: var(--ccsni-purple);
}
.footer .copyright {
    border-top: 1px solid rgba(255,255,255,0.1);
}

/* Hover effects */
.service-item:hover,
.team-item:hover,
.donation-item:hover,
.event-item:hover,
.committee-card:hover {
    box-shadow: 0 0 30px rgba(130,55,148,0.2) !important;
}

.header-carousel .carousel-text h1 {
    color: white !important;
}

.header-carousel .carousel-text p {
    color: white !important;  /* Also makes paragraphs white for better contrast */
}