/* =======================
   Remove Quarto default timeline dots
======================= */
.timeline-alt li::before,
.timeline-date::before {
    content: none !important;
    display: none !important;
}

/* =======================
   Topbar / Navbar
======================= */
.navbar {
    background-color: #0c4a4dff !important; /* Topbar background */
}

.navbar a.nav-link {
    color: #ffffff !important;              /* Link text color */
}

.navbar a.nav-link:hover {
    color: #f1c40f !important;             /* Hover effect */
}

/* =======================
   Pretty Timeline (Light Mode)
======================= */
.timeline-pretty {
    position: relative;
    margin: 50px 0;
    padding-left: 40px;                   /* Space from left */
    border-left: 4px solid #0c4a4dff;    /* Vertical line color */
}

.timeline-pretty li {
    position: relative;
    margin-bottom: 35px;
    padding-left: 20px;
    background-color: #f8f9fa;            /* Light mode card background */
    border-radius: 8px;
    padding: 12px 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s, color 0.2s;
    list-style: none;
    color: #0c4a4dff;                     /* Light mode text */
}

.timeline-pretty li:hover {
    transform: translateX(5px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

.timeline-pretty li::before {
    content: '';
    position: absolute;
    left: -24px;                           /* Dot position */
    top: 12px;
    width: 16px;
    height: 16px;
    background-color: #1abc9c;             /* Dot color */
    border: 4px solid #fff;                /* White border around dot */
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.timeline-pretty li strong {
    display: block;
    font-size: 1.05em;
    color: #0c4a4dff;                     /* Date color in light mode */
    margin-bottom: 4px;
}

/* =======================
   Pretty Timeline (Dark Mode)
======================= */
body.dark .timeline-pretty li {
    background-color: #1e1e1e;            /* Dark background */
    color: #f0f0f0;                       /* Dark text */
    border: 1px solid #444;               /* Subtle border in dark mode */
    box-shadow: 0 4px 8px rgba(0,0,0,0.6);
}

body.dark .timeline-pretty li::before {
    background-color: #1abc9c;             /* Dot stays same */
    border: 3px solid #1e1e1e;             /* Dot border matches dark background */
}

body.dark .timeline-pretty li strong {
    color: #1abc9c;                        /* Date color in dark mode */
}

/* =======================
   Responsive
======================= */
@media screen and (max-width: 600px) {
    .timeline-pretty {
        padding-left: 20px;
    }

    .timeline-pretty li::before {
        left: -16px;
        width: 12px;
        height: 12px;
    }
}