/* ==========================================================================
   History & Trivia page (history_trivia.php)
   Loaded with $pageStyles = ['history.css'] before header.php.
   Shared pieces it relies on stay in styles.css: .page-heading, .intro-box,
   .section-label, .horizontal-nav-wrapper, .quick-links, .nav-section-label.
   ========================================================================== */

/* --- Two-column layout with the timeline sidebar --- */
.history-layout {
    display: grid;
    /* minmax(0, ...) lets the main column shrink below its content's natural
       width; with a plain 1fr the nowrap "Jump to section" row held the column
       open and the whole page scrolled sideways on phones. */
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 2rem;
    align-items: start; /* Ensures both columns share the same top baseline */
}

.history-sidebar {
    position: sticky;
    /* 1. STICKY POSITION (While Scrolling): Set this to match navbar height + small gap */
    top: 80px; 

    /* 2. INITIAL POSITION (On Page Load): Pushes the sidebar down to align with the main content */
    margin-top: 100px; 

    /* Adjust max-height for scrolling window */
    max-height: calc(100vh - 110px); 
    overflow-y: auto;
    overscroll-behavior: contain;

    background: #0B1F3A;
    border: 2px solid #F2C14E;
    border-radius: 15px;
    padding: 1.25rem 1.1rem 1.25rem 1.25rem;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.history-sidebar::-webkit-scrollbar {
    width: 8px;
}

.history-sidebar::-webkit-scrollbar-track {
    background: #0B1F3A;
    border-radius: 10px;
}

.history-sidebar::-webkit-scrollbar-thumb {
    background: #F2C14E;
    border-radius: 10px;
}

.history-sidebar::-webkit-scrollbar-thumb:hover {
    background: #d9a900;
}

.sidebar-title {
    display: block;
    font-family: 'Cinzel', serif;
    font-size: 1.05rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #F2C14E;
    text-align: center;
    margin: 0 0 1.4rem;
    padding-bottom: 0.85rem;
    border-bottom: 2px solid rgba(242, 193, 78, 0.4);
}

.timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}

.timeline-list::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 6px;
    bottom: 6px;
    width: 2px;
    background: rgba(242, 193, 78, 0.35);
}

.timeline-list li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 1.3rem;
    font-size: 0.83rem;
    line-height: 1.55;
    color: #F8F1E0;
}

.timeline-list li:last-child {
    margin-bottom: 0;
}

.timeline-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #F2C14E;
    box-shadow:
        0 0 0 3px #0B1F3A,
        0 0 0 4px rgba(242, 193, 78, 0.5);
}

.timeline-year {
    display: block;
    font-family: 'Cinzel', serif;
    font-weight: 700;
    color: #F2C14E;
    font-size: 0.92rem;
    margin-bottom: 0.2rem;
}

/* The shared .intro-box padding uses a viewport-relative clamp() sized for
   full-width pages. Inside the narrower history-main column, that math still
   references the full browser width, so use fixed proportional padding here. */
.history-main .intro-box {
    padding: 25px 2rem;
}

/* Tablet / small desktop: move the timeline below the content */
@media (max-width: 1150px) {
    .history-layout {
        grid-template-columns: minmax(0, 1fr);
    }

    .history-main {
        max-width: 900px;
        width: 100%;
        margin: 0 auto;
    }

    .history-sidebar {
        position: static;
        max-height: none;
        overflow-y: visible;
        width: 100%;
        max-width: 900px;
        margin: 0 auto;
        padding: 1.5rem;
    }

    .timeline-list {
        columns: 2;
        column-gap: 2rem;
    }

    .timeline-list li {
        break-inside: avoid;
    }
}

@media (max-width: 650px) {
    .history-main .intro-box {
        padding: 25px 1.25rem;
    }

    .history-sidebar {
        padding: 1.25rem;
    }

    .timeline-list {
        columns: 1;
    }
}

/* --- FAQ cards --- */
.faq-answer-card {
    background: white; 
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05); 
    margin-bottom: 1.25rem;
    border: 1px solid #e8e8e8;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
}

.faq-answer-card:hover { box-shadow: 0 14px 28px rgba(11,31,58,0.1); }

.faq-answer-card summary {
    padding: 1.5rem 1.75rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #0056b3;
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    transition: color 0.2s ease;
}

.faq-answer-card summary::-webkit-details-marker { display: none; }

.faq-answer-card summary::after {
    content: '\f067';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #d9a900;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.faq-answer-card[open] summary { color: #0B1F3A; border-bottom: 1px solid #f0f0f0; }
.faq-answer-card[open] summary::after { content: '\f068'; }

.faq-answer { padding: 1.5rem 1.75rem; background: #fdfdfd; }
.answer-label { font-weight: bold; color: #666; display: block; margin-bottom: 0.5rem; text-transform: uppercase; font-size: 0.8rem; }
.faq-answer p { margin-bottom: 1.2rem; }

.history-page-heading {
    margin: 0 0 1.5rem;
}