/* --- INDEPENDENCE DAY / 4TH OF JULY THEME OVERRIDE --- */

:root {
    /* NEW PALETTE - PATRIOTIC NEONS */
    --j-red: #ff3b30;       /* Vibrant Electric Red */
    --j-white: #f1f5f9;     /* Silver/White */
    --j-blue: #2563eb;      /* Electric Cobalt Blue */
    --j-gold: #eab308;      /* Sparkler Gold */
    --j-navy: #050515;      /* Deep Midnight Blue for background overlay */
}

/* 1. Global Text Class Overrides (Red, White, Blue) */
.title-orange {
    color: var(--j-red) !important;
    --scan-color: var(--j-red) !important;
    filter: drop-shadow(0 0 20px rgba(255, 59, 48, 0.8)) drop-shadow(0 2px 10px #000) !important;
}

.title-white {
    color: var(--j-white) !important;
    --scan-color: var(--j-white) !important;
    filter: drop-shadow(0 0 20px rgba(241, 245, 249, 0.8)) drop-shadow(0 2px 10px #000) !important;
}

.title-cyan {
    color: var(--j-blue) !important;
    --scan-color: var(--j-blue) !important;
    filter: drop-shadow(0 0 20px rgba(37, 99, 235, 0.8)) drop-shadow(0 2px 10px #000) !important;
}

/* 2. CRT Overlay - "Patriotic Sparks" Tint */
body::after {
    /* Horizontal scanlines + Patriotic red/white/blue wash */
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%), 
                linear-gradient(90deg, rgba(255, 59, 48, 0.04), rgba(241, 245, 249, 0.02), rgba(37, 99, 235, 0.04)) !important;
    background-size: 100% 2px, 3px 100% !important;
}

/* 3. A-Move Marker & Arrows (Patriotic Red & White) */
.amove-marker::before {
    border-color: var(--j-red) !important;
    box-shadow: 0 0 12px var(--j-red) !important;
}

.amove-marker::after {
    background: #fff !important;
    box-shadow: 0 0 12px var(--j-white) !important;
}

.arrow {
    border-bottom-color: var(--j-white) !important;
    filter: drop-shadow(0 0 6px var(--j-white)) !important;
}

/* 4. Navigation Styling */
.main-nav {
    border-bottom: 1px solid rgba(37, 99, 235, 0.3) !important;
    background: rgba(5, 5, 21, 0.95) !important;
}

.main-nav a {
    color: var(--j-blue) !important;
    text-shadow: 0 0 6px rgba(37, 99, 235, 0.6) !important;
}

.main-nav a::after {
    background-color: var(--j-red) !important;
    box-shadow: 0 0 10px var(--j-red) !important;
}

.main-nav a:hover {
    color: #fff !important;
    text-shadow: 0 0 12px var(--j-blue) !important;
    border-color: rgba(37, 99, 235, 0.5) !important;
    background: rgba(37, 99, 235, 0.08) !important;
}

/* 5. Ethos / Goals Cards - Red, White, Blue, Gold rotation */
.ethos-card {
    background: rgba(5, 5, 20, 0.8) !important;
    border: 1px solid rgba(241, 245, 249, 0.15) !important;
}

.ethos-card::before {
    border-top-color: var(--j-blue) !important;
    border-left-color: var(--j-blue) !important;
}

.ethos-card::after {
    border-bottom-color: var(--j-red) !important;
    border-right-color: var(--j-red) !important;
}

.ethos-card:hover {
    border-color: rgba(241, 245, 249, 0.4) !important;
    box-shadow: 0 10px 30px rgba(5, 5, 20, 0.8), 0 0 15px rgba(37, 99, 235, 0.25) !important;
}

.ethos-card:hover::before {
    border-color: var(--j-red) !important;
}

.ethos-card:hover::after {
    border-color: var(--j-white) !important;
}

/* Card index-specific titles & icons */
.ethos-card[data-index="01"] .ethos-title { color: var(--j-red) !important; text-shadow: 0 0 12px var(--j-red), 0 2px 5px #000 !important; }
.ethos-card[data-index="01"] .ethos-icon { color: var(--j-red) !important; filter: drop-shadow(0 0 5px var(--j-red)); }

.ethos-card[data-index="02"] .ethos-title { color: var(--j-white) !important; text-shadow: 0 0 12px var(--j-white), 0 2px 5px #000 !important; }
.ethos-card[data-index="02"] .ethos-icon { color: var(--j-white) !important; filter: drop-shadow(0 0 5px var(--j-white)); }

.ethos-card[data-index="03"] .ethos-title { color: var(--j-blue) !important; text-shadow: 0 0 12px var(--j-blue), 0 2px 5px #000 !important; }
.ethos-card[data-index="03"] .ethos-icon { color: var(--j-blue) !important; filter: drop-shadow(0 0 5px var(--j-blue)); }

.ethos-card[data-index="04"] .ethos-title { color: var(--j-gold) !important; text-shadow: 0 0 12px var(--j-gold), 0 2px 5px #000 !important; }
.ethos-card[data-index="04"] .ethos-icon { color: var(--j-gold) !important; filter: drop-shadow(0 0 5px var(--j-gold)); }

.ethos-desc {
    color: #cbd5e1 !important; /* Lighter slate */
}

/* 6. Hero Button Override */
.hero-btn {
    background: transparent !important;
    border: 2px solid var(--j-red) !important;
    color: var(--j-red) !important;
    text-shadow: 0 0 8px var(--j-red) !important;
    box-shadow: 0 0 15px rgba(255, 59, 48, 0.3) !important;
}

.hero-btn:hover {
    background: var(--j-red) !important;
    color: #fff !important;
    box-shadow: 0 0 25px var(--j-red) !important;
    text-shadow: 0 0 5px #fff !important;
}

/* 7. Contact Links Overrides */
.contact-link {
    color: var(--j-white) !important;
    border-color: rgba(241, 245, 249, 0.2) !important;
}

.contact-link:hover {
    color: var(--j-red) !important;
    border-color: var(--j-red) !important;
    text-shadow: 0 0 10px var(--j-red) !important;
    box-shadow: 0 0 15px rgba(255, 59, 48, 0.2) !important;
}

/* 8. Dev Map Border */
.devs-map-container {
    border-color: rgba(37, 99, 235, 0.3) !important;
    box-shadow: 0 0 25px rgba(37, 99, 235, 0.15) !important;
}

.devs-map-container::before {
    border-color: var(--j-red) !important;
}

/* Dev Tooltip overrides */
.dev-tooltip {
    border-color: var(--j-blue) !important;
    box-shadow: 0 0 30px rgba(37, 99, 235, 0.4) !important;
}

.tooltip-content p {
    color: var(--j-white) !important;
}

.dev-tooltip .tooltip-header h3 {
    color: var(--j-red) !important;
}

/* 9. Mute Button Styling */
.mute-btn {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100001; /* Above main nav */
    background: rgba(5, 5, 21, 0.9);
    border: 1px solid var(--j-blue);
    color: var(--j-white);
    font-family: 'Share Tech Mono', monospace;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-size: 0.85rem;
    letter-spacing: 1.5px;
    box-shadow: 0 0 8px rgba(37, 99, 235, 0.4);
    transition: all 0.3s ease;
    border-radius: 2px;
}

.mute-btn:hover {
    background: var(--j-blue);
    box-shadow: 0 0 15px var(--j-blue);
    color: #fff;
    border-color: #fff;
}

/* 10. Selection Box and Marking Menu */
.selection-box {
    border: 1.5px dashed var(--j-red) !important;
    background: rgba(255, 59, 48, 0.1) !important;
}