/**
 * Single Post Page Styles
 */

/* --------------------------------
 * 1. Main Layout (Adjusted - assuming primary/secondary columns are handled globally)
 * -------------------------------- */
.single .site-main .container { /* This is the container INSIDE #primary */
    padding-top: var(--lubinik-spacing-lg, 1.5rem);
    padding-bottom: var(--lubinik-spacing-lg, 1.5rem);
    /* This container is for content within #primary. It's a block by default. */
    /* Add max-width and margin: auto if you want to constrain its width and center it */
    /* e.g., max-width: 800px; margin-left: auto; margin-right: auto; */
}

/* --------------------------------
 * 2. Article Styling
 * -------------------------------- */
.single .site-main article.post {
    background-color: var(--lubinik-blog-posts-section-card-bg-color, #fff); /* From blog-posts.css */
    padding: var(--lubinik-spacing-lg, 1.5rem);
    border-radius: 8px; /* Slightly less rounded than cards */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    margin-bottom: var(--lubinik-spacing-lg, 1.5rem);
}

/* --------------------------------
 * 3. Entry Header (Title & Meta)
 * -------------------------------- */
.single .entry-header {
    margin-bottom: var(--lubinik-spacing-md, 1rem);
    border-bottom: 1px solid #eee; /* Subtle separator */
    padding-bottom: var(--lubinik-spacing-md, 1rem);
}

.single .entry-title {
    font-size: var(--lubinik-font-size-xxl, 2.5rem); /* From blog-posts.css or theme variables */
    color: var(--lubinik-heading-color, #333); /* From blog-posts.css or theme variables */
    margin-bottom: var(--lubinik-spacing-sm, 0.5rem);
    line-height: 1.3;
}

.single .entry-meta {
    font-size: 0.9rem;
    color: var(--lubinik-blog-posts-section-card-text-muted-color, #757575); /* From blog-posts.css */
    margin-bottom: var(--lubinik-spacing-md, 1rem);
}

.single .entry-meta a {
    color: var(--lubinik-blog-posts-section-card-text-muted-color, #757575);
    text-decoration: none;
}

.single .entry-meta a:hover {
    color: var(--lubinik-primary-color, #007bff); /* Assuming a primary color variable */
    text-decoration: underline;
}

.single .entry-meta .posted-on,
.single .entry-meta .byline {
    margin-right: var(--lubinik-spacing-md, 1rem);
}

/* --------------------------------
 * 4. Post Thumbnail
 * -------------------------------- */
.single .post-thumbnail { /* Assuming this class is used by lubinik_post_thumbnail() */
    margin-bottom: var(--lubinik-spacing-md, 1rem);
    text-align: center; /* Center the image if it's not full-width */
}

.single .post-thumbnail img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* --------------------------------
 * 5. Entry Content
 * -------------------------------- */
.single .entry-content {
    color: var(--lubinik-blog-posts-section-card-text-color, #444); /* From blog-posts.css */
    line-height: 1.7;
    font-size: 1.05rem; /* Slightly larger for readability */
}

.single .entry-content h1,
.single .entry-content h2,
.single .entry-content h3,
.single .entry-content h4,
.single .entry-content h5,
.single .entry-content h6 {
    color: var(--lubinik-heading-color, #333);
    margin-top: var(--lubinik-spacing-lg, 1.5rem);
    margin-bottom: var(--lubinik-spacing-md, 1rem);
    line-height: 1.4;
}

.single .entry-content p {
    margin-bottom: var(--lubinik-spacing-md, 1rem);
}

.single .entry-content a {
    color: var(--lubinik-primary-color, #007bff);
    text-decoration: underline;
}

.single .entry-content a:hover {
    text-decoration: none;
}

.single .entry-content ul,
.single .entry-content ol {
    margin-bottom: var(--lubinik-spacing-md, 1rem);
    padding-left: var(--lubinik-spacing-md, 1rem); /* Indent lists */
}

.single .entry-content blockquote {
    border-left: 4px solid var(--lubinik-primary-color, #007bff);
    padding-left: var(--lubinik-spacing-md, 1rem);
    margin: var(--lubinik-spacing-md, 1rem) 0;
    font-style: italic;
    color: #555;
}

/* --------------------------------
 * 6. Entry Footer (Categories, Tags)
 * -------------------------------- */
.single .entry-footer {
    margin-top: var(--lubinik-spacing-lg, 1.5rem);
    padding-top: var(--lubinik-spacing-md, 1rem);
    border-top: 1px solid #eee;
    font-size: 0.9rem;
    color: var(--lubinik-blog-posts-section-card-text-muted-color, #757575);
}

.single .entry-footer .cat-links,
.single .entry-footer .tags-links {
    margin-right: var(--lubinik-spacing-md, 1rem);
}

.single .entry-footer a {
    color: var(--lubinik-blog-posts-section-card-text-muted-color, #757575);
    text-decoration: none;
    border-bottom: 1px dotted var(--lubinik-blog-posts-section-card-text-muted-color, #757575);
}

.single .entry-footer a:hover {
    color: var(--lubinik-primary-color, #007bff);
    border-bottom-style: solid;
}


/* --------------------------------
 * 8. Comments Area
 * -------------------------------- */
.single .comments-area {
    margin-top: var(--lubinik-spacing-xl, 2rem);
    padding-top: var(--lubinik-spacing-lg, 1.5rem);
    border-top: 1px solid #eee;
}

.single .comments-area .comments-title,
.single .comments-area .comment-reply-title {
    font-size: var(--lubinik-font-size-lg, 1.8rem); /* From theme variables */
    color: var(--lubinik-heading-color, #333);
    margin-bottom: var(--lubinik-spacing-lg, 1.5rem);
}

/* Add more specific comment styling as needed */

/* --------------------------------
 * 9. Sidebar Styling (Basic)
 * -------------------------------- */
.single #secondary .widget {
    margin-bottom: var(--lubinik-spacing-lg, 1.5rem);
    background-color: var(--lubinik-widget-bg-color, #f9f9f9); /* Assuming a widget bg color variable */
    padding: var(--lubinik-spacing-md, 1rem);
    border-radius: 4px;
}

.single #secondary .widget-title {
    font-size: var(--lubinik-font-size-md, 1.25rem); /* From theme variables */
    color: var(--lubinik-heading-color, #333);
    margin-bottom: var(--lubinik-spacing-sm, 0.5rem);
    padding-bottom: var(--lubinik-spacing-sm, 0.5rem);
    border-bottom: 1px solid #eee;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
    .single .site-main .container {
        flex-direction: column;
    }

    .single #primary,
    .single #secondary {
        flex: 1 1 100%; /* Full width on small screens */
    }
}