/* blog.css */

/* Shared container */
.blog-container {
    width: 100%;
    max-width: 672px !important;
    margin: 1rem auto;
    padding: 0 1rem;
    box-sizing: border-box;
}

/* Blog Post Page Styles */
.blog-post {
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    padding: 2.5rem;  /* Increased from 2rem */
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
    font-size: 17px !important;  /* Updated from 16px */
}

/* Make the title stand out more */
.blog-post h1,
.markdown h1 {
    font-size: 28px !important;  /* Increased from 22px */
    margin-bottom: 1rem;
    line-height: 1.4;
    font-weight: 600 !important;  /* Increased from 500 for better hierarchy */
}

/* Add more space above headings */
.markdown h2,
.blog-post h2 {
    font-size: 22px !important;  /* Clear size for section headings */
    font-weight: 600 !important;  /* Bold for clear sections */
    margin-top: 2.5rem;  /* Increased from 24px */
    margin-bottom: 1rem;  /* Increased from 0.5rem */
}

.markdown h3,
.blog-post h3 {
    font-size: 18px !important;  /* Distinct from body text */
    font-weight: 600 !important;  /* Bold for subsections */
    margin-top: 2rem;
    margin-bottom: 0.75rem;
}

/* Improve paragraph spacing */
.blog-post p, 
.markdown p {
    margin-bottom: 1.5rem;  /* Increased from 1rem */
    line-height: 1.75;      /* Increased from 1.7 for better readability */
    font-size: 17px !important;  /* Already at 17px - keeping it */
}

/* Add to your blog.css */
.markdown ul li,
.markdown ol li,
.blog-post ul li,
.blog-post ol li {
    margin-bottom: 0.75rem;  /* Increased from 0.5rem */
    line-height: 1.75;  /* Keep this as is */
}

.markdown ul li:last-child,
.markdown ol li:last-child,
.blog-post ul li:last-child,
.blog-post ol li:last-child {
    margin-bottom: 0;
}

/* Links styling - Updated with new blue color */
.blog-post a,
.markdown a {
    color: var(--link-blue);
    text-decoration: none;
    border-bottom: 1px solid var(--link-blue);
    transition: all 0.2s ease;
}

.blog-post a:hover,
.markdown a:hover {
    color: var(--link-blue-hover);
    border-bottom-color: var(--link-blue-hover);
}

/* Date styling */
.post-date,
.blog-post-date {
    color: var(--text-secondary);
    font-size: 13px !important;  /* Slightly larger */
    opacity: 0.85;              /* Slightly more visible */
    margin-bottom: 2rem !important;
}

/* Back link */
.breadcrumb {
    position: fixed;
    left: 3rem;
    top: 3rem;
}

.back-link {
    color: var(--text-secondary);
    font-size: 16px !important;
    text-decoration: none;
    transition: color 0.2s ease;
    opacity: 0.8;
}

.back-link:hover {
    color: var(--accent-primary);
    opacity: 1;
}

.progress-bar {
    position: fixed;
    top: 0;
    left: 0;
    height: 4px;  /* Adjust thickness as needed */
    background-color: var(--accent-primary);  /* Your blue color */
    width: 0%;
    z-index: 1000;  /* Ensure it stays on top */
    transition: width 0.1s ease-out;  /* Smooth transition */
}

/* Index Page Styles */
.blog-index-title {
    font-size: 40px !important;
    font-weight: 600 !important;
    color: var(--text-primary);
    margin-top: 3rem;
    margin-bottom: 3rem;
    text-align: center;
}

.blog-post-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    width: 100%;
    max-width: 800px !important;  /* Wider than blog posts for better visibility */
    margin: 0 auto;
}

.blog-post-card-link {
    display: block;
    padding: 1.75rem;
    text-decoration: none;
    color: inherit;
}

.blog-post-card {
    background-color: var(--bg-secondary);
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08);  /* Subtle depth */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-post-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.12);  /* More pronounced shadow on hover */
}

.blog-post-title {
    color: var(--text-primary);
    font-size: 22px !important;  /* Slightly smaller for better hierarchy */
    font-weight: 500;
    margin-bottom: 0.75rem;  /* Tighter spacing */
    transition: color 0.2s ease;
}

.blog-post-card-link:hover .blog-post-title {
    color: var(--accent-primary);
}

.blog-post-description {
    color: var(--text-secondary);
    opacity: 0.9;
    font-size: 15px !important;
    line-height: 1.6;  /* Slightly increased for better readability in cards */
    margin: 0.5rem 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.blog-post-date {
    font-size: 13px !important;
    color: var(--text-secondary);
    opacity: 0.8;
    margin-top: 1rem;
}

.empty-state {
    text-align: center;
    color: var(--text-secondary);
    font-size: 14px;
    padding: 2rem;
}

/* Responsive adjustments */
@media (max-width: 1200px) {
    .breadcrumb {
        position: static;
        margin-bottom: 1.5rem;
    }
}

.error-container {
    text-align: center;
    padding: 4rem 1rem;
}

.error-title {
    font-size: 6rem !important;
    font-weight: bold;
    color: var(--accent-primary);
    margin-bottom: 1rem;
}

.error-message {
    font-size: 1.25rem !important;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.error-link {
    display: inline-block;
    color: var(--accent-primary);
    text-decoration: none;
    font-size: 1rem !important;
    transition: color 0.2s ease;
    padding: 0.5rem 1rem;
    border: 1px solid var(--accent-primary);
    border-radius: 0.5rem;
}

.error-link:hover {
    background-color: var(--accent-primary);
    color: var(--bg-primary);
}

@media screen and (max-width: 768px) {
    /* Container adjustments */
    .blog-container {
        padding: 0 1.5rem;  /* Increased from 0.75rem to 1.5rem for better edge spacing */
    }
    
    /* Blog post styling */
    .blog-post {
        padding: 2rem;  /* Increased from 1.5rem to 2rem for more internal spacing */
        margin: 0.5rem 0;
    }

    /* Navigation link */
    .breadcrumb {
        position: static;
        padding: 1.5rem;  /* Increased from 1rem for consistency */
    }

    /* Blog index page adjustments */
    .blog-index-title {
        font-size: 28px !important;
        margin-top: 2rem;
        margin-bottom: 2rem;
    }

    /* Blog card adjustments */
    .blog-post-card-link {
        padding: 1.5rem;  /* Increased from 1.25rem for consistency */
    }

    .blog-post p {
        max-width: 65ch;
        margin: 0 auto 1.5rem;  /* Updated to include proper bottom margin */
        line-height: 1.75;      /* Ensure consistent line height on mobile */
    }
    
    .blog-post p, .blog-post-description {
        line-height: 1.75;      /* Updated from 1.7 */
        margin-bottom: 1.25rem;  /* Added for better paragraph spacing */
    }

    .back-link {
        padding: 1rem 0;  /* Increased from 0.75rem for better touch target */
    }
    
    .blog-post-card {
        margin-bottom: 1rem;
    }
    
    .blog-post h1 {
        font-size: 1.75rem !important;
        margin-bottom: 1.25rem;
    }
    
    .post-date {
        font-size: 0.9rem !important;
        opacity: 0.9;
        margin-bottom: 1.5rem;  /* Added for better spacing after date */
    }
    
    .markdown h2 {
        margin-top: 2rem;
        padding-bottom: 0.5rem;
    }

    /* Added for better list spacing */
    .blog-post ul {
        padding-left: 1.5rem;  /* Better list indentation */
        margin-bottom: 1.5rem;
    }
    
    .blog-post li {
        margin-bottom: 0.5rem;  /* Space between list items */
    }
}