body.dark, .dark {
    --background-color: #0f172a !important;
    --secondary-background-color: #1e293b !important;

    --text-color: #f1f5f9 !important;
    --text-secondary-color: #94a3b8 !important;

    --primary-color: #3b82f6 !important;
    --text-link-color: #00c4ff !important;

    --primary-color-dark: #3b82f6 !important;
    --text-link-color-dark: #60a5fa !important;
}

body.dark {
    background-color: var(--background-color) !important;
    color: var(--text-color) !important;
}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark .navbar-brand,
body.dark .primary-font {
    color: #5c94ef !important;
}

body.dark i,
body.dark .fab,
body.dark .fas {
    color: #5c94ef !important;
}

body.dark p,
body.dark li,
body.dark .secondary-font {
    color: #eceff4 !important;
    opacity: 0.9;
}

body.dark a {
    color: var(--text-link-color) !important;
    text-decoration: none;
    transition: color 0.2s ease;
}

body.dark a:hover {
    color: #77d8dc !important;
}

body.dark .card {
    background-color: #2e3440 !important;
    border: 1px solid #7083ad !important;
}

/* --- Single Page Overrides --- */

/* Hides the auto-generated featured image at the top of the post */
#single .featured-image {
    display: none !important;
}

/* --- List Page Overrides --- */

#list-page .card > .card-header .card-img-top {
    width: 100% !important;
    height: 400px !important;
    object-fit: contain;
    object-position: center;
    background-color: transparent !important;
}

/* Makes the entire card clickable */
#list-page .card {
    position: relative;
}

#list-page .card a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* --- Custom Button Style --- */
#single .page-content a.custom-button {
    display: inline-block;
    padding: 10px 20px;
    margin: 0 57px;
    background-color: var(--secondary-color);
    border: 3px solid var(--primary-color);
    color: var(--primary-color) !important;
    text-decoration: none;
    border-radius: 8px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0px 4px 12px rgba(0,0,0,0.1);
}

/* Hover Effect */
#single .page-content a.custom-button:hover {
    background-color: var(--primary-color);
    color: var(--secondary-color) !important;
    transform: translateY(-2px);
    box-shadow: 0px 6px 15px rgba(0,0,0,0.2);
}

/* Remove the standard underline animation from this specific button */
#single .page-content a.custom-button::after {
    display: none !important;
}