/* =================================================== */
/* OAKDALE WAR MEMORIAL: MODULAR TIMELINE ENGINE 
   19 September 2026 - version 3.0 
   File Version: v3.0 - Token Architecture (19 September 2026)
   Refactored Horizontal layout for mobile/vertical orientation
   =================================================== */

/* =================================================== */
/* UNIVERSAL BOX MODEL FIX                             */
/* Forces padding/borders to compute INWARD            */
/* =================================================== */
.multi-track-timeline, 
.multi-track-timeline * {
    box-sizing: border-box;
}

/* --- 1. THE VIEWPORT --- */
.horizontal-timeline-container {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    
    /* Vintage Paper Seamless Background Setup */
    background-color: var(--timeline-bg);
    background-image: url('#'); 
    background-repeat: repeat;
    
    /* Formal, squared-off frame with DEEPER inner shadow */
    border: 1px solid var(--border-light);
    border-radius: 0; 
    box-shadow: inset 0px 4px 12px rgba(0,0,0,0.25); 
    
    margin: 20px 0 0 0; 
    padding: 20px 0 20px 0; 
    
    -webkit-overflow-scrolling: touch; 
}

/* Formal, square scrollbar */
.horizontal-timeline-container::-webkit-scrollbar { height: 16px; }
.horizontal-timeline-container::-webkit-scrollbar-track { background: #d9e2ea; border-radius: 0; box-shadow: inset 0px 3px 8px rgba(0,0,0,0.35); }
.horizontal-timeline-container::-webkit-scrollbar-thumb { width: 100px; background: var(--odw-node-blue); border-radius: 0; }

/* --- 2. THE TIMELINE TRACK --- */
.horizontal-timeline-track {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    min-width: max-content; 
    padding: 0px 20px;
    align-items: stretch; 
}

/* --- THE YEAR MARKER (Massive Watermark) --- */
.rail-year-node {
    flex: 0 0 150px;
    display: flex;
    flex-direction: column;
}

.year-top-spacer {
    height: var(--top-node-height);
    background-color: var(--year-spacer);
}

.year-bottom-spacer {
    flex-grow: 1; 
    min-height: auto; 
    background-color: var(--year-spacer);
}

.year-text-wrapper {
    position: relative;
    height: 0;
}

.year-text {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 9rem; 
    font-weight: 800;
    letter-spacing: -8px;
    color: var(--year-text);
    writing-mode: vertical-rl; 
    transform: rotate(180deg);
    position: absolute;
    bottom: -110px; 
    left: 64px;
    z-index: 2;
}

/* --- 3. THE NODES --- */
.node-base {
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--text-dark); 
    min-height: 100%; 
    box-sizing: border-box;
}

.node-event { flex: 0 0 180px; } 
.node-battle { flex: 0 0 260px; } 
.node-battle-large { flex: 0 0 300px; } 
.node-battle-exlarge { flex: 0 0 340px; } 

.node-top-section {
    background-color: var(--node-color);
    min-height: var(--top-node-height);
    display: flex;
    flex-direction: column;
}

.node-top-section-alt {
    background-color: var(--node-color-alt);
    min-height: var(--top-node-height);
    display: flex;
    flex-direction: column;
}

.node-date-badge {
    width: 120px;
    background-color: rgba(255, 255, 255, 0.65);
    border: 1px solid var(--text-body);
    margin-left: -1px; 
    margin-top: 15px;
    padding: 5px 10px;
    text-align: center;
}

.node-casualty-badge {
    width: 120px;
    background-color: none;
    border: 1px solid var(--border-dark);
    margin-left: 15px; 
    margin-top: 15px;
    padding: 5px 10px;
    text-align: center;
}

.node-content-top {
    padding: 15px 15px 0px 15px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; 
    border: 0px solid #ff0000;
}

.node-content-top .track-event {
    margin-top: auto; 
    margin-bottom: 0;
}

.node-axis-band {
    height: var(--node-axis-band-height); 
    width: 100%;
    padding: 15px;
    background-color: var(--node-axis-band); 
}

.node-axis-band-alt {
    height: var(--node-axis-band-height); 
    width: 100%;
    padding: 15px;
    background-color: var(--node-axis-band-alt); 
}

.node-content-bottom {
    background-color: var(--node-color);
    padding: 15px;
    flex-grow: 1; 
}

.node-content-bottom-alt {
    background-color: var(--node-color-alt);
    padding: 15px;
    flex-grow: 1; 
}

/* --- BOOKMARK NAVIGATION (NOTEBOOK TABS) --- */
.timeline-bookmarks {
    display: flex;
    justify-content: flex-start;
    gap: 3px; 
    padding: 0 25px;
    background: transparent;
    border: none;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 0.85em; /* Slightly tighter type scale */
    font-weight: 800;
}

.timeline-bookmarks span { 
    color: var(--text-muted); 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    padding: 6px 12px 6px 0;
}

.timeline-bookmarks a { 
    position: relative;
    background: var(--timeline-bg);
    padding: 4px 11px; /* Tighter horizontal footprint */
    color: #555555; 
    text-decoration: none; 
    border: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.timeline-bookmarks a:hover { 
    background: var(--odw-red-hover);
    color: #fffafa; 
}

.timeline-bookmarks a.active {
    background-color: var(--odw-node-blue);
    color: #fff;
}

/* Shape the Top Tabs (pointing UP, subtle 4px chamfer upper-left) */
.tabs-top {
    display: none; 
}
.tabs-top a {
    border-radius: 0;
    clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px);
}

/* Shape the Bottom Tabs (hanging DOWN, subtle 4px chamfer lower-left) */
.tabs-bottom {
    margin-bottom: 40px;
}
.tabs-bottom a {
    border-radius: 0;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 8px 100%, 0 calc(100% - 8px));
}

/* ---------- END BOOKMARK NAVIGATION ----------*/

.timeline-image {
    width: 100%;
    max-width: 220px; 
    height: auto; 
    object-fit: cover; 
    border: 1px solid var(--text-dark); 
    border-radius: 6px;
    margin-bottom: 7px;
    display: block; 
    transition: box-shadow 0.2s ease-in-out; 
}

a.image-lightbox-link {
    cursor: zoom-in; 
}

a.image-lightbox-link:hover .timeline-image {
    box-shadow: var(--shadow-lightbox); 
}

/* =================================================== */
/* FLOATING GHOST YEAR INDICATOR                       */
/* =================================================== */
#floating-year-indicator {
    position: absolute;
    bottom: 50px; 
    left: 50%;
    transform: translateX(-50%);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: 7rem; 
    font-weight: 800;
    color: rgba(79, 94, 104, 0.15);
    pointer-events: none; 
    z-index: 10;
    user-select: none;
    -webkit-user-select: none;
    letter-spacing: -4px;
}

/* =================================================== */
/* DRAG-TO-SCROLL CURSOR STATES                        */
/* =================================================== */
#timeline-viewport {
    cursor: grab;
}

#timeline-viewport.is-dragging {
    cursor: grabbing;
}

#timeline-viewport.is-dragging .horizontal-timeline-track {
    user-select: none;
    -webkit-user-select: none;
}

/* =================================================== */
/* DESKTOP/TABLET HIDDEN ELEMENTS                      */
/* =================================================== */

/* 1. Hide the Back to Top button on horizontal view */
#page-timeline .back-to-top-btn {
    display: none;
}

/* 2. Hide the Top Notebook Tabs on horizontal view */
#page-timeline .tabs-top {
    display: none;
}

/* =================================================== */
/* =================================================== */
/* MOBILE TIMELINE REFACTOR (Max-width: 768px)         */
/* =================================================== */
/* =================================================== */

@media screen and (max-width: 768px) {
    
    /* 1. Reset the Viewport (Kill horizontal scroll constraint) */
    .horizontal-timeline-container {
        overflow-x: hidden;
        overflow-y: visible;
        height: auto; 
        padding: 10px 0px;
        box-sizing: border-box; /* THE FIX: Ensures padding doesn't push the width past 100% */
        width: 100%;
        margin-top: 0px;
    }

    /* 2. Switch Track to Vertical Stack */
    .horizontal-timeline-track {
        flex-direction: column;
        
        /* THE FIX: Override the desktop width constraints */
        min-width: 0; 
        width: 100%;
        margin-left: 0px;
        box-sizing: border-box;
        overflow-wrap: break-word; /* Safeguard: forces long URLs or words to wrap instead of pushing the screen wide */
    }

    /* 3. Reformat the Giant Year Markers into Header Rows */
    .rail-year-node {
        flex: auto;
        flex-direction: row; 
        align-items: center; 
        justify-content: flex-start; 
        height: auto; 
        background-color: #fdfdfd;
        padding: 20px 15px; 
        
        /* THE FIX: 40px top gap, 0px bottom gap to sit flush with the first event */
        margin: 20px 0 0 0; 
        border-left: none !important;
        border-bottom: none !important;
    }

    /* Hide horizontal-specific year elements */
    .year-top-spacer, 
    .year-bottom-spacer,
    .rail-year-node .node-axis-band {
        display: none; 
    }

    .year-text-wrapper {
        height: auto;
        width: 100%; 
        display: block; /* Normalizes the container */
    }

    /* Rotate the text back to normal and scale down */
    .year-text {
        position: static;
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 6rem; /* Pulled back slightly so it doesn't break very narrow screens */
        letter-spacing: -6px;
        line-height: 1; /* THE FIX: Stops the browser from adding weird invisible spacing above/below */
        margin: 0; 
    }

    /* 4. Fluid Nodes & The Left Spine */
    .node-base {
        flex: auto !important; /* Override all the fixed flex widths (180, 260, 340) */
        width: 100%;
        margin-bottom: 0px;
        padding-left: 0px; /* Pushes content slightly away from the spine */
    }

    /* 5. Flatten the Content Areas */
    .node-top-section, 
    .node-top-section-alt {
        min-height: auto; 
        padding: 10px 10px;
    }

    .node-content-bottom, 
    .node-content-bottom-alt {
        min-height: auto; 
        padding-left: 20px;
    }

    /* Adjust the center band (where the story buttons live) */
    .node-axis-band, 
    .node-axis-band-alt {
        height: auto; 
        padding-left: 20px;
    }

    .node-date-badge {
        margin-top: 10px;
        margin-bottom: 10px;
        margin-left: 15px;
        display: inline-block; /* Prevents it from stretching full width */
    }

    /* 6. Override Inline Image Styles */
    .timeline-image {
        width: 100%;
        max-width: 220px !important; 
        height: auto !important; /* Prevents stretching */
        margin-top: 15px;
    }

    /* 7. Notebook Tabs for Mobile */
    .timeline-bookmarks {
        padding: 0 10px;
        flex-wrap: nowrap; 
        gap: 2px; 
        max-width: 100%; 
        box-sizing: border-box;
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; 
    }
    
    .timeline-bookmarks::-webkit-scrollbar { 
        display: none; 
    }

    .timeline-bookmarks a {
        padding: 6px 8px; 
        font-size: 0.8rem; 
        flex-shrink: 0; 
    }

    /* THE FIX: Add the #page-timeline ID to overpower the desktop 'display: none' */
    #page-timeline .tabs-top {
        display: flex; 
        justify-content: flex-end; 
        margin-top: 30px; 
    }

    /* You don't need the ID here because .tabs-bottom was never hidden globally */
    .tabs-bottom {
        margin-bottom: 30px; 
    }

    .timeline-bookmarks span {
        display: none; 
    }

    /* 8. Hide Desktop Only Elements */
    #floating-year-indicator {
        display: none; 
    }

    /* 9. Utility class to hide specific elements on mobile */
    .hide-on-mobile {
        display: none !important;
        border-left: 4px solid var(--text-dark) !important;
        border-bottom: 3px solid var(--text-dark) !important;
    }

    .node-base {
        display: flex;
        flex-direction: column;
        border-left: none; 
        min-height: 100%; 
        box-sizing: border-box;
    }
   
    /* 10. Utility class to show specific elements on mobile */
    #page-timeline .back-to-top-btn {
        display: block;
}
}