/* static/css/blog/blog_styles.css */
/* Remove Font Import */

/* Basic Reset/Defaults for Blog Area (if needed, Bootstrap covers a lot) */
body {
    /* Apply a subtle background, could target a blog-specific wrapper if needed */
    background-color: #f8f9fa; /* Light grey background */
    /* Remove Font Apply */
}

/* Remove Heading Font Apply */
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    /* Keep Bootstrap default or apply custom non-Google font if desired */
}

.display-4 { /* Example: Specific heading style adjustments */
    font-weight: 700; /* Ensure display headings are bold */
}

/* Style for the featured card container */
.featured-card-container {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3rem; /* Add some space below featured */
}

/* Assuming the included partial uses a .card element */
.featured-post-section .card {
    border: none; /* Remove default border */
    box-shadow: var(--glass-shadow); /* More prominent shadow */
    /* Optional: Add a subtle gradient or background */
    background: linear-gradient(135deg, #ffffff 0%, #eef2f7 100%);
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out;
}

.featured-post-section .card:hover {
    transform: translateY(-5px) scale(1.01); /* Slight lift and scale on hover */
    box-shadow: var(--glass-shadow-hover);
}


/* Regular Post Card Styles */
.regular-posts-section .card {
    /* Frosted Glass Effect */
    background-color: var(--material-thin-bg); /* Semi-transparent white */
    backdrop-filter: blur(var(--material-thin-blur)) saturate(var(--material-thin-saturate));
    -webkit-backdrop-filter: blur(var(--material-thin-blur)) saturate(var(--material-thin-saturate)); /* Safari support */
    border: 1px solid var(--material-thin-border); /* Subtle border */
    border-radius: 0.75rem; /* Slightly more rounded corners */
    box-shadow: var(--glass-shadow); /* Soft shadow */
    height: 100%; /* Ensure cards in a row have same height */
    
    /* Hover Effect */
    transition: transform 0.3s ease-out, box-shadow 0.3s ease-out, background-color 0.3s ease-out;
}

.regular-posts-section .card:hover {
    transform: translateY(-6px); /* Lift effect */
    box-shadow: var(--glass-shadow-hover); /* Enhanced shadow */
    background-color: var(--material-regular-bg); /* Slightly less transparent on hover */
}

/* New styles for the preview image */
.regular-post-preview-img {
    max-height: 180px; /* Limit height */
    object-fit: cover; /* Ensure image covers the area nicely */
    border-top-left-radius: 17px; /* Match card's border-radius */
    border-top-right-radius: 17px;
    border-bottom: 1px solid var(--material-thin-border); /* Subtle separator */
    width: 100%; /* Ensure it spans the card width */
}

.regular-posts-section .card:hover .regular-post-preview-img {
     /* Optional: add subtle hover effect to image too */
     opacity: 0.9;
}

/* Ensure card body content respects padding */
.regular-posts-section .card .card-body {
    padding: 1.5rem; /* Adjust padding if needed */
}

/* Ensure images within cards look good */
.card img {
    border-top-left-radius: calc(0.75rem - 1px); /* Match card border-radius */
    border-top-right-radius: calc(0.75rem - 1px);
}


/* --- Styles for .blog-content-bs (Content rendered from Markdown) --- */

/* Hide the first H1 inside the main content if it duplicates the header */
.blog-content-bs > h1:first-child {
    display: none;
}

.blog-content-bs {
    font-size: 1.05rem; /* Slightly larger base font for readability */
    line-height: 1.75; /* Increased line height */
    color: #343a40; /* Slightly darker text than default Bootstrap */
    max-width: 720px; /* Optimal line length for reading */
    margin-left: auto;
    margin-right: auto;
}

/* Headings within blog content */
.blog-content-bs h1,
.blog-content-bs h2,
.blog-content-bs h3,
.blog-content-bs h4,
.blog-content-bs h5,
.blog-content-bs h6 {
    margin-top: 2rem;
    margin-bottom: 1rem;
    /* font-weight: 700; // Remove Poppins reference */
    line-height: 1.4;
    color: #212529; /* Darker heading color */
}

.blog-content-bs h1 { font-size: 2.5rem; } /* Adjust sizes as needed */
.blog-content-bs h2 { font-size: 2rem; margin-top: 3rem; padding-bottom: 0.6rem; border-bottom: 1px solid #dee2e6; }
.blog-content-bs h3 { font-size: 1.75rem; }
.blog-content-bs h4 { font-size: 1.5rem; }

/* Paragraphs */
.blog-content-bs p {
    margin-bottom: 1.25rem;
}

/* Links */
.blog-content-bs a {
    color: var(--bs-primary, #0d6efd); /* Use Bootstrap primary color */
    text-decoration: none; /* Remove default underline */
    border-bottom: 2px solid rgba(var(--bs-primary-rgb, 13, 110, 253), 0.3); /* Custom underline */
    transition: border-bottom-color 0.2s ease-in-out, color 0.2s ease-in-out;
}
.blog-content-bs a:hover {
    color: darken(var(--bs-primary, #0d6efd), 10%); /* Darken link on hover */
    border-bottom-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.7);
}

/* Lists */
.blog-content-bs ul,
.blog-content-bs ol {
    margin-bottom: 1.25rem;
    padding-left: 2rem;
}
.blog-content-bs li {
    margin-bottom: 0.6rem;
}
.blog-content-bs li > ul,
.blog-content-bs li > ol {
    margin-top: 0.6rem;
    margin-bottom: 0.6rem;
}

/* Code Blocks */
.blog-content-bs pre {
    background-color: #282c34; /* Dark background for code */
    color: #abb2bf; /* Light text for code */
    border: none; /* Remove border */
    border-radius: 0.35rem;
    padding: 1.25rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    /* font-family: 'Fira Code', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; // Remove Fira Code reference */
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Fallback */
    font-size: 0.9em;
    line-height: 1.7;
    box-shadow: var(--glass-shadow);
}

/* Consider adding a font link for 'Fira Code' if you use it */
/* <link href="https://fonts.googleapis.com/css2?family=Fira+Code&display=swap" rel="stylesheet"> */

.blog-content-bs code {
    /* Inline code */
    /* font-family: 'Fira Code', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; // Remove Fira Code */
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* Fallback */
    font-size: 0.875em;
    color: #e06c75; /* Reddish color for inline code */
    background-color: var(--code-highlight-bg); /* Light reddish background */
    padding: 0.2em 0.5em;
    border-radius: 0.25rem;
    word-wrap: break-word;
}

.blog-content-bs pre code {
    /* Code inside pre blocks - reset inline styles */
    font-size: inherit;
    color: inherit;
    background-color: transparent;
    padding: 0;
    border-radius: 0;
    border: none;
    font-family: inherit; /* Inherit from pre */
}

/* Blockquotes */
.blog-content-bs blockquote {
    margin: 1.5rem 0;
    padding: 1rem 1.5rem;
    border-left: 0.3rem solid var(--bs-primary, #0d6efd); /* Use primary color for border */
    background-color: #eef2f7; /* Slightly different background */
    color: #495057;
    font-style: normal; /* Remove italic */
    border-radius: 0.25rem;
}
.blog-content-bs blockquote p {
    margin-bottom: 0;
    font-size: 1.1rem; /* Slightly larger text for quotes */
    font-weight: 500; /* Medium weight */
}
.blog-content-bs blockquote footer { /* For citation if used */
    margin-top: 0.5rem;
    font-size: 0.9rem;
    color: #6c757d;
}


/* Tables */
.blog-content-bs table {
    width: 100%;
    margin-bottom: 1.5rem;
    border-collapse: collapse;
    border: 1px solid #dee2e6;
    box-shadow: var(--glass-shadow);
    border-radius: 0.3rem;
    overflow: hidden; /* Ensures radius applies to cells */
}
.blog-content-bs th,
.blog-content-bs td {
    border: 1px solid #e9ecef; /* Lighter internal borders */
    padding: 0.85rem 1rem;
    vertical-align: top;
    text-align: left;
}
.blog-content-bs thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #adb5bd; /* Stronger header border */
    background-color: #f1f3f5;
    /* font-weight: 600; // Remove Lato reference */
    /* font-family: 'Lato', sans-serif; // Remove Lato reference */
    font-weight: 600; /* Keep weight if desired */
    color: #343a40;
}
.blog-content-bs tbody tr:nth-of-type(odd) {
    background-color: var(--material-ultra-thin-bg);
}
.blog-content-bs tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb, 13, 110, 253), 0.05); /* Subtle hover */
}


/* Horizontal Rule */
.blog-content-bs hr {
    margin: 3rem 0;
    border: 0;
    height: 1px;
    background-image: linear-gradient(to right, transparent, var(--material-ultra-thin-bg), transparent); /* Faded HR */
}

/* Images in blog content */
.blog-content-bs p:has(> img:only-child) {
    text-align: center;
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.blog-content-bs img {
    display: inline-block;
    max-width: 100%;
    width: auto; /* Let image take natural width up to max */
    height: auto;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0.5rem; /* Slightly larger radius */
    box-shadow: var(--glass-shadow); /* Softer, larger shadow */
    transition: transform 0.3s ease;
}

.blog-content-bs img:hover {
     transform: scale(1.03); /* Slight scale on hover */
}

/* --- End .blog-content-bs styles --- */