/* /css/style.css */

:root {
    --primary-red: #cc0000;
    --dark-charcoal: #1a1a1a;
    --light-gray: #f4f4f4;
}

body { overflow-x: hidden; color: #333; }

/* Sticky Nav */
.navbar { box-shadow: 0 4px 12px rgba(0,0,0,0.15); border-bottom: 3px solid var(--primary-red); }
.nav-link { font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 0.8rem 1.2rem !important; }
.nav-link.active { color: var(--primary-red) !important; border-bottom: 2px solid var(--primary-red); }

/* Hero Sections */
.page-hero {
    height: 500px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    color: white;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8);
    position: relative;
}
.page-hero::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
}
.page-hero .container { position: relative; z-index: 2; }

/* Cards & Icons */
.card { border: none; transition: 0.3s; background: #fff; box-shadow: 0 5px 15px rgba(0,0,0,0.05); border-radius: 10px; }
.card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.bi { vertical-align: middle; }

/* Footer */
footer { background-color: var(--dark-charcoal); color: #bbb; border-top: 5px solid var(--primary-red); }
footer h5 { color: white; margin-bottom: 1.5rem; font-weight: 700; text-transform: uppercase; }

/* --- DARK MODE LOGIC (Sections Only) --- */

body.dark-theme {
    background-color: #222;
}

/* Target the section background and text */
body.dark-theme section {
    background-color: #121212 !important;
    color: #e0e0e0 !important;
}

/* Ensure cards inside sections turn dark too */
body.dark-theme section .card, body.dark-theme section .alert-dark {
    background-color: #1e1e1e !important;
    color: #ffffff !important;
    border: 1px solid #333 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
}

/* Fix muted text and secondary text inside dark sections */
body.dark-theme section .text-muted, 
body.dark-theme section .small,
body.dark-theme section p.lead {
    color: #b0b0b0 !important;
}

/* Keep headings white/bright in dark sections */
body.dark-theme section h1, 
body.dark-theme section h2, 
body.dark-theme section h3, 
body.dark-theme section h4, 
body.dark-theme section h5, 
body.dark-theme section h6 {
    color: #ffffff !important;
}

/* Ensure background utility classes (like bg-light/bg-white) are overridden */
body.dark-theme section.bg-light, 
body.dark-theme section.bg-white {
    background-color: #121212 !important;
}

/* Adjust horizontal rules in dark sections */
body.dark-theme section hr {
    border-color: #444 !important;
}

body.dark-theme .btn-outline-dark {
    color: #fff;
    border-color: #fff;
} 

.border-red {
    border-color: #cc0000 !important;
}

@media only screen and (max-width: 1399px) {
    .navbar-container {
        margin-left: 10px;
        margin-right: 10px;
    }
}

/* END FILE */