/* Blog-specific styles that match your existing layout */
:root {
    --bg-light: #ffffff;
    --text-light: #212529;
    --bg-dark: #212529;
    --text-dark: #f8f9fa;
    --card-dark: #2c2f33;
    --sidebar-bg: #f8f9fa;
    --sidebar-hover: #e9ecef;
    --sidebar-active: #0d6efd;
    --sidebar-text: #495057;
    --sidebar-border: #dee2e6;
}

[data-theme="light"] body {
    background-color: var(--bg-light);
    color: var(--text-light);
}

/* Blog content styling */
.blog-content {
    font-size: 1.1rem;
    line-height: 1.7;
}

    .blog-content h2, .blog-content h3 {
        margin-top: 2rem;
        margin-bottom: 1rem;
        scroll-margin-top: 100px;
        color: #212529;
    }

    .blog-content h2 {
        font-size: 1.75rem;
        font-weight: 600;
        border-bottom: 2px solid #e9ecef;
        padding-bottom: 0.5rem;
    }

    .blog-content h3 {
        font-size: 1.5rem;
        font-weight: 600;
    }

    .blog-content p {
        margin-bottom: 1.5rem;
    }

    .blog-content img {
        max-width: 100%;
        height: auto;
        border-radius: 0.5rem;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        margin: 1.5rem 0;
    }

    .blog-content blockquote {
        font-size: 1.1rem;
        background-color: #f8f9fa;
        padding: 1.5rem;
        border-radius: 0.5rem;
        border-left: 4px solid #0d6efd;
        margin: 2rem 0;
        font-style: italic;
    }

    .blog-content ul, .blog-content ol {
        margin-bottom: 1.5rem;
        padding-left: 2rem;
    }

    .blog-content li {
        margin-bottom: 0.5rem;
    }

    .blog-content code {
        background-color: #f8f9fa;
        padding: 0.2rem 0.4rem;
        border-radius: 0.25rem;
        font-size: 0.9rem;
        color: #e83e8c;
    }

    .blog-content pre {
        background-color: #f8f9fa;
        padding: 1rem;
        border-radius: 0.5rem;
        overflow-x: auto;
        margin: 1.5rem 0;
    }

/* Navbar improvements - matching your existing style */
.navbar {
    background-color: white !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.navbar-brand img {
    transition: transform 0.2s ease-in-out;
}

.navbar-brand:hover img {
    transform: scale(1.05);
}

/* Card styling consistent with your design */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

    .card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(0,0,0,0.1) !important;
    }

/* Button styling */
.btn:hover {
    transform: translateY(-1px);
}

/* Badge styling */
.badge {
    font-weight: 500;
}

/* Progress bar styling */
.progress {
    background-color: #e9ecef;
}

.progress-bar {
    transition: width 0.1s ease;
}

/* Table of contents styling */
.toc-link {
    transition: all 0.2s ease;
    display: block;
    padding: 0.25rem 0;
}

    .toc-link:hover {
        color: #0d6efd !important;
        padding-left: 0.5rem;
    }

/* Footer styling */
.footer {
    background-color: var(--sidebar-bg);
    border-top: 1px solid var(--sidebar-border);
}

/* Responsive adjustments */
@@media (max-width: 991.98px) {
    .position-sticky {
        position: static !important;
    }

    .blog-content {
        font-size: 1rem;
    }
}

/* Toast container positioning */
.toast-container {
    z-index: 1060;
}

/* Breadcrumb styling */
.breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d;
}

/* (optional) tighter gutters for rows when needed */
@@media (max-width: 576px) {
    .g-mobile-0 {
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }
    /* Custom font size for .display-5 headings to improve visual hierarchy */
    .display-5 {
        font-size: 1.75rem;
    }
}

.site-footer {
    background: #fff;
    border-top: 1px solid #e9ecef;
    font-size: 0.95rem;
}

.footer-title {
    font-weight: 700;
    font-size: .95rem;
    margin-bottom: .5rem;
}

.footer-list li + li {
    margin-top: .35rem;
}

.footer-list a {
    color: #495057;
    text-decoration: none;
}

    .footer-list a:hover {
        color: #0d6efd;
        text-decoration: underline;
    }

/* Social icons */
.footer-icon {
    font-size: 1.1rem;
}

    .footer-icon:hover {
        color: #0d6efd !important;
    }

/* Mobile accordion buttons */
.footer-acc-item + .footer-acc-item {
    border-top: 1px solid #f0f2f4;
}

.footer-acc-btn {
    width: 100%;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .9rem 0;
    background: transparent;
    border: 0;
    font-weight: 600;
}

    .footer-acc-btn:focus {
        outline: 2px solid rgba(13,110,253,.25);
        outline-offset: 2px;
    }

    .footer-acc-btn[aria-expanded="true"] .bi {
        transform: rotate(90deg);
    }

    .footer-acc-btn .bi {
        transition: transform .2s ease;
    }