/* css/timeline.css */
/* Custom styles to override Timeline.js defaults and match seastorm.com palette */

ul.mkultra-timeline-list li{
list-style-type:none;
}

ul.mkultra-timeline-list li:nth-child(odd) {
  background-color: var(--white);
}

ul.mkultra-timeline-list li:nth-child(even) {
  background-color: var(--pale_grey);
}

/* --- General Timeline Styling --- */
.tl-timeline-container {
    padding: 2.5rem;
    border-radius: 8px;
    background-color: var(--white);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-light);
}

/* --- Timeline Navigation (Buttons) --- */
.tl-timeline-nav .tl-nav-button {
    background-color: var(--ocean-dark);
    color: var(--ocean-foam);
    border-color: var(--ocean-dark);
    transition: all 0.3s ease;
}

.tl-timeline-nav .tl-nav-button:hover {
    background-color: var(--nav-accent);
    color: var(--coral-accent);
}

/* --- Timeline Events (Main Content) --- */
.tl-timeline-container .tl-event-card {
    background-color: var(--pale_grey);
    border-color: var(--ocean-mid);
    color: var(--text-main);
}

.tl-timeline-container .tl-event-card .tl-headline {
    color: var(--ocean-dark);
    font-weight: bold;
}

.tl-timeline-container .tl-event-card .tl-dateline {
    color: var(--ocean-water);
    font-style: italic;
}

/* --- Timeline Line and Dots --- */
.tl-timeline-line {
    background-color: var(--ocean-light);
}

.tl-timeline-container .tl-timeline-line .tl-dot {
    background-color: var(--ocean-dark);
    border-color: var(--white);
}