/* =========================================================
   SRGC Custom Theme — teal on deep navy + light variant
   Matches your brand images and adds a premium feel.
   ========================================================= */

:root {
    /* Brand palette */
    --brand-teal: #14d3c4; /* accent */
    --brand-teal-2: #17b3a8; /* hover shade */
    --brand-navy: #0b1f2b; /* base bg */
    --brand-navy-2: #091826; /* deeper bg */
    /* Text */
    --text-strong: #e9f1f5;
    --text-soft: #b6c6cf;
    /* Bootstrap variable bridges */
    --bs-body-bg: var(--brand-navy);
    --bs-body-color: var(--text-strong);
    --bs-primary: var(--brand-teal);
    --bs-link-color: var(--brand-teal);
    --bs-link-hover-color: var(--brand-teal-2);
}

/* ---------- Global background (subtle vignette to match banners) ---------- */
body {
    background: radial-gradient(1200px 800px at 10% -10%, rgba(20, 211, 196, 0.10), transparent 60%), radial-gradient(1000px 700px at 100% 10%, rgba(20, 211, 196, 0.06), transparent 55%), linear-gradient(180deg, var(--brand-navy-2), var(--brand-navy));
    color: var(--text-strong);
}

/* ---------- Navbar ---------- */
.navbar {
    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.15));
    backdrop-filter: saturate(130%) blur(4px);
}

    .navbar .navbar-brand {
        letter-spacing: .5px;
    }

    .navbar .nav-link {
        color: var(--text-soft);
    }

        .navbar .nav-link:hover,
        .navbar .nav-link:focus,
        .navbar .nav-link.active {
            color: var(--text-strong);
        }

/* ---------- Buttons ---------- */
.btn-primary {
    --bs-btn-bg: var(--brand-teal);
    --bs-btn-border-color: var(--brand-teal);
    --bs-btn-hover-bg: var(--brand-teal-2);
    --bs-btn-hover-border-color: var(--brand-teal-2);
    --bs-btn-color: #032026;
}

/* ---------- Cards ---------- */
.card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
}

/* ---------- Hero / Banner (Carousel) ---------- */
.hero-carousel {
    position: relative;
    border-radius: 1.25rem;
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(0,0,0,0.45);
}

    .hero-carousel .carousel-item {
        height: clamp(320px, 60vh, 720px);
        min-height: 320px;
    }

        .hero-carousel .carousel-item > img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

/* Dark gradient overlay for readability */
.hero-overlay::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.55));
    pointer-events: none;
}

/* Caption styling */
.hero-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: clamp(16px, 5vw, 36px);
    color: #f3fbfd;
    text-shadow: 0 2px 16px rgba(0,0,0,.55);
}

    .hero-caption h1, .hero-caption h2 {
        font-weight: 800;
        letter-spacing: .3px;
    }

    .hero-caption p {
        color: #cfe9e7;
        max-width: 56ch;
        margin-bottom: .75rem;
    }

/* Carousel controls & indicators tuned for dark hero */
.hero-carousel .carousel-control-prev,
.hero-carousel .carousel-control-next {
    width: 56px;
}

.hero-carousel .carousel-control-prev-icon,
.hero-carousel .carousel-control-next-icon {
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

.hero-carousel .carousel-indicators [data-bs-target] {
    background-color: rgba(255,255,255,.8);
}

.hero-carousel .carousel-indicators .active {
    background-color: var(--brand-teal);
}

/* ---------- Footer ---------- */
footer {
    color: var(--text-soft);
    border-top-color: rgba(255,255,255,0.06) !important;
}

/* ---------- Light Mode (for white banner) ---------- */
.theme-light {
    --bs-body-bg: #f6fafb;
    --bs-body-color: #0e2a36;
    background: linear-gradient(180deg, #ffffff, #f3f7f9);
}

    .theme-light .navbar {
        background: linear-gradient(180deg, rgba(255,255,255,0.8), rgba(255,255,255,0.6));
    }

    .theme-light .card {
        background: #ffffff;
        border-color: #e9eef2;
    }