/* =====================================================
   K4JMC History Theme Override
   Aligns history.html styling with main site palette
   ===================================================== */

/* Override history-specific variables to use k4jmc palette */
:root {
    /* Replace bright cyan/orange with k4jmc brand colors */
    --accent-cyan: var(--brand);        /* #5ac8fa instead of #00d4ff */
    --accent-orange: var(--accent);     /* #ffd166 instead of #ff6b35 */
    --text-muted-history: var(--tx-200); /* #c9d2e3 instead of #a0a0a0 */
    --card-bg-history: var(--bg-850);   /* #141a29 instead of rgba(15, 52, 96, 0.6) */
    --border-subtle: rgba(255,255,255,0.05); /* Match k4jmc card borders */
}

/* Table of Contents adjustments */
.toc-card {
    box-shadow: 0 10px 30px var(--shadow);
    transition: border-color 0.2s ease;
}

.toc-card h5 {
    color: var(--brand);
    border-bottom-color: rgba(90,200,250,.18);
}

.toc-card a {
    color: var(--tx-200);
}

.toc-card a:hover {
    color: var(--brand);
}

/* Content sections to match k4jmc cards */
.history-section {
    background: var(--bg-850);
    box-shadow: 0 10px 30px var(--shadow);
    transition: box-shadow 0.2s ease;
}

.history-section h2 {
    color: var(--brand);
    border-bottom-color: var(--accent);
}

.history-section h3 {
    color: var(--accent);
}

.history-section h4 {
    color: var(--brand);
}

.history-section p {
    color: var(--tx-100);
}

/* Image hover effects with k4jmc shadow */
.history-image:hover {
    box-shadow: 0 8px 25px rgba(90, 200, 250, 0.3);
}

/* Blockquote styling to match k4jmc aesthetic */
blockquote {
    background: rgba(90, 200, 250, 0.08);
    border-left-color: var(--brand);
}

blockquote cite {
    color: var(--accent);
}

/* Officer lists */
.officer-list {
    background: rgba(255, 209, 102, 0.08);
    border: 1px solid rgba(255, 209, 102, 0.18);
}

.officer-list h4 {
    color: var(--accent);
}

.officer-list strong {
    color: var(--brand);
}

/* Timeline markers - FIXED with dark orange and spacing */
.year-marker {
    background: #d97826 !important; /* Dark saturated orange for white text readability */
    color: white !important;
    padding: 0.2rem 0.6rem !important; /* Reduced height */
    margin-right: 0.5rem;
    margin-bottom: 0.4rem; /* Add spacing between rows */
    box-shadow: 0 3px 10px rgba(217, 120, 38, 0.3);
    display: inline-block;
}

/* External links */
.external-link {
    color: var(--brand);
}

/* Audio player */
.audio-player {
    background: rgba(90, 200, 250, 0.08);
    border-color: var(--brand);
    box-shadow: 0 4px 15px rgba(90, 200, 250, 0.12);
}

.audio-player h4 {
    color: var(--brand);
}

/* References section - explicitly target */
.references-section {
    background: var(--bg-850) !important;
    border: 1px solid rgba(255,255,255,0.05) !important;
    box-shadow: 0 10px 30px var(--shadow) !important;
}

.references-section h4,
.references-section h5 {
    color: var(--brand) !important;
}

.references-section ul {
    color: var(--tx-200) !important;
}

.references-section ul li {
    color: var(--tx-100) !important;
}

.references-section a {
    color: var(--brand) !important;
}

/* Lightbox adjustments */
.lightbox {
    background: rgba(15, 20, 32, 0.97);
}

.lightbox-close {
    color: var(--tx-100);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.lightbox-close:hover {
    opacity: 1;
}

/* Image captions */
.image-caption {
    color: var(--tx-200);
}

/* Ensure all paragraph text uses k4jmc colors */
p {
    color: var(--tx-100);
}

/* List items */
li {
    color: var(--tx-100);
}

/* Strong/bold text */
strong {
    color: var(--tx-100);
}