/* About page specific styles */

/* About page box - dark background with white text in both modes */
.about-page {
    color: white !important;
    background-color: #1f2937 !important;
    padding: 2rem !important;
    border-radius: 0.5rem !important;
    margin-bottom: 2rem !important;
}

.about-page p {
    margin-bottom: 1.25rem !important;
    color: white !important;
}

.about-page a {
    text-decoration: underline !important;
    color: white !important;
}

.about-page a:hover {
    opacity: 0.8 !important;
    color: white !important;
}

/* More specific selectors for about page content */
div.about-page p,
div.about-page div p,
.about-page div div p {
    color: white !important;
}

div.about-page a,
div.about-page div a,
.about-page div div a {
    color: white !important;
    text-decoration: underline !important;
}

/* Timeline text outside the box - should be darker/themed */
div.flex p,
div.flex-1 p,
body div.flex p,
body div.flex-1 p {
    margin-bottom: 1rem !important;
    color: #111827 !important;
}

/* Timeline links - same color as text with underlines */
.about-page-content div.flex a,
.about-page-content div.flex-1 a {
    color: #111827 !important;
    text-decoration: underline !important;
}

div.flex a:hover,
div.flex-1 a:hover,
body div.flex p a:hover,
body div.flex a:hover,
body h4+div a:hover {
    opacity: 0.8 !important;
}

/* Dark mode overrides for timeline text only */
html.dark div.flex p,
html.dark div.flex-1 p,
html.dark body div.flex p,
html.dark body div.flex-1 p {
    color: #d1d5db !important;
}

html.dark div.flex a,
html.dark div.flex-1 a,
html.dark body div.flex p a,
html.dark body div.flex a,
html.dark body h4+div a {
    color: #d1d5db !important;
}

html.dark div.flex a:hover,
html.dark div.flex-1 a:hover,
html.dark body div.flex p a:hover,
html.dark body div.flex a:hover,
html.dark body h4+div a:hover {
    opacity: 0.8 !important;
}