/* Blog Page Specific Styles */
#primary.content-area {
    max-width: 960px; /* Set a maximum width for the content area */
    margin: 55px auto 0; /* Center the content area and add top margin */
    padding: 0 20px; /* Add horizontal padding, remove vertical padding from the main container */
}

#primary.content-area .page-header {
    border-bottom: 2px solid #009900; /* Green accent line */
    padding-bottom: 10px;
    margin-bottom: 20px;
    display: inline-block;
    width: 100%; /* Make header take full width to center its content */
    text-align: center; /* Center the title and underline */
}

#primary.content-area .page-title,
#primary.content-area .entry-title {
    color: #ffffff;
    font-size: 3em;
    margin: 0;
}

/* Search and Filter Forms */
.search-form {
    display: flex;
    align-items: center;
    margin: 30px auto 10px; /* Reduced bottom margin to bring it closer to the filters */
    max-width: 600px; /* Limit width for a floating effect */
    background-color: rgba(30, 30, 31, 1); /* Changed to portfolio container background color */
    border-radius: 25px; /* Rounded corners */
    padding: 10px 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Floating shadow */
    transition: box-shadow 0.3s ease;
}

.search-form:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
}

.search-form label {
    display: flex; /* Use flexbox for label content */
    align-items: center;
    flex-grow: 1; /* Allow label (and input) to take available space */
    margin-bottom: 0; /* Remove bottom margin from label */
}

.search-form .search-icon {
    width: 20px;
    height: 20px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path fill="%23a0a0a0" d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.1-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    margin-right: 10px;
    display: inline-block;
    vertical-align: middle;
}


.search-form .search-field {
    flex-grow: 1; /* Allow input to take remaining space */
    padding: 10px 0; /* Adjust padding as icon is now present */
    border: none; /* Remove border */
    background-color: transparent; /* Transparent background to blend with form */
    color: #e0e0e0;
    font-size: 1.1em;
    outline: none; /* Remove outline on focus */
}

.search-form .search-field::placeholder {
    color: #a0a0a0;
}

.search-form .search-field:focus {
    background-color: transparent; /* Keep transparent on focus */
}

/* Blog Filters (Category and Tag) - Pill Style */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center the pill filters */
    gap: 10px; /* Smaller gap between pills */
    margin-top: 0; /* Remove margin-top to bring it even closer */
    margin-bottom: 30px;
    padding: 10px 0; /* Reduced padding */
    background-color: transparent; /* No background for the container */
    border-radius: 0; /* No border-radius for the container */
    align-items: center;
}

.blog-filters .category-filter-form,
.blog-filters .tag-filter-form {
    flex: 0 0 auto; /* Don't grow, take natural width */
    margin: 0; /* Remove margin from forms */
}

.blog-filters .filter-select {
    width: auto; /* Adjust width to content */
    padding: 8px 15px; /* Padding for pill shape */
    border: 1px solid #555;
    border-radius: 20px; /* Pill shape */
    background-color: rgba(30, 30, 31, 1); /* Changed to portfolio container background color */
    color: #e0e0e0;
    font-size: 0.9em; /* Smaller font size */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Subtle shadow for floating effect */
    -webkit-appearance: none; /* Remove default browser styling for select */
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.blog-filters .filter-select:hover {
    background-color: #4a4d52;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
}

.blog-filters .filter-select:focus {
    border-color: #f9a825;
    outline: none;
    box-shadow: 0 0 0 2px rgba(249, 168, 37, 0.3);
}

/* Blog Post List */
.blog-posts-list {
    display: grid;
    grid-template-columns: 1fr; /* Single column for posts */
    gap: 30px;
}

.blog-post-card {
    background-color: rgba(30, 30, 31, 1); /* Changed to portfolio container background color */
    border-radius: 15px;
    padding: 25px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.blog-post-card .post-thumbnail {
    margin-bottom: 15px;
    border-radius: 10px;
    overflow: hidden;
}

.blog-post-card .post-thumbnail img {
    width: 100%;
    height: 250px; /* Fixed height for consistency */
    object-fit: cover;
    display: block;
}

.blog-post-card h2.entry-title {
    font-size: 2em;
    margin-top: 0;
    margin-bottom: 10px;
}

.blog-post-card h2.entry-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-post-card h2.entry-title a:hover {
    color: #00cc00; /* Lighter Matrix Green */
}

.blog-post-card .entry-meta {
    font-size: 0.9em;
    color: #a0a0a0;
    margin-bottom: 15px;
    display: flex; /* Use flexbox for horizontal alignment */
    flex-wrap: wrap; /* Allow items to wrap if space is limited */
    gap: 10px; /* Space between meta items */
    align-items: center; /* Vertically align items */
}

.blog-post-card .entry-meta .edit-link {
    color: #a0a0a0; /* Ensure edit link color matches other meta links */
    text-decoration: none;
}

.blog-post-card .entry-meta .edit-link:hover {
    color: #00cc00; /* Lighter Matrix Green */
}

.blog-post-card .entry-meta a {
    color: #a0a0a0;
    text-decoration: none;
}

.blog-post-card .entry-meta a:hover {
    color: #00cc00; /* Lighter Matrix Green */
}

.blog-post-card .entry-summary p {
    font-size: 1em;
    line-height: 1.6;
    color: #ffffff; /* Changed to white */
    margin-bottom: 15px;
}

.blog-post-card .read-more-link {
    display: inline-block;
    background-color: #009900; /* Matrix Green */
    color: #2a2d32;
    padding: 8px 18px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.blog-post-card .read-more-link:hover {
    background-color: #007700; /* Darker Matrix Green */
    transform: translateY(-2px);
}

/* Single Post Styles */
a.back-to-blog-button {
    display: inline-block; /* Keep it inline-block for natural width */
    margin-bottom: 20px;
    color: #a0a0a0; /* Dark grey text color */
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2em; /* Slightly larger font for the arrow and text */
    transition: color 0.2s ease;
    background-color: transparent; /* No background */
    padding: 0; /* Remove padding */
    border: none; /* Remove border */
}

a.back-to-blog-button:hover {
    color: #e0e0e0; /* Lighter grey on hover */
    background-color: transparent; /* Ensure no background change on hover */
    transform: none; /* Remove transform on hover */
}

.blog-single-post {
    margin-top: 55px;
    padding: 0 20px;
}

.blog-content-wrapper {
    display: flex;
    gap: 40px;
    max-width: 1200px; /* Wider content area */
    margin: 0 auto;
    align-items: flex-start; /* Align items to the top */
}

.table-of-contents {
    flex: 0 0 250px; /* Fixed width for TOC */
    position: sticky; /* Make TOC sticky */
    top: 100px; /* Increased top value for more spacing */
    margin-top: 20px; /* Added margin-top for spacing above TOC */
    padding: 20px;
    background-color: rgba(30, 30, 31, 1); /* Changed to portfolio container background color */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    color: #e0e0e0;
}

.table-of-contents h3 {
    color: #009900; /* Matrix Green */
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #009900; /* Matrix Green */
    padding-bottom: 10px;
}

.table-of-contents ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.table-of-contents ul li {
    margin-bottom: 10px;
}

.table-of-contents ul li a {
    color: #e0e0e0;
    text-decoration: none;
    transition: color 0.2s ease;
    display: block;
    padding: 5px 0;
}

.table-of-contents ul li a:hover {
    color: #00cc00; /* Lighter Matrix Green */
}

.table-of-contents ul li.active > a {
    color: #00cc00; /* Lighter Matrix Green */
    font-weight: 600;
}

.post-content-area {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.post-content {
    background-color: transparent; /* Remove background */
    border-radius: 0; /* Remove border-radius */
    padding: 0; /* Remove padding */
    box-shadow: none; /* Remove box-shadow */
    color: #e0e0e0;
}

.post-content .entry-header {
    margin-bottom: 30px;
}

.post-content .post-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    margin-bottom: 30px;
    position: relative; /* Added for absolute positioning of child elements */
    padding-bottom: 30px; /* Add space for the absolutely positioned date */
}

.post-content .post-header-content .entry-title {
    flex: 1 1 60%; /* Allow to grow, shrink, and start at 60% */
    min-width: 0; /* Allow content to shrink below its intrinsic size */
    font-size: 3.5em;
    color: #ffffff;
    margin-top: 0;
    margin-bottom: 0; /* Remove bottom margin as it's handled by gap */
    line-height: 1.2;
    text-align: left;
}

.post-content .post-header-content .post-thumbnail {
    flex: 0 0 40%; /* Don't grow, don't shrink, start at 40% */
    max-width: 40%;
    border-radius: 15px;
    overflow: hidden;
}

.post-content .post-header-content .post-thumbnail img {
    width: 100%;
    height: auto;
    max-height: 300px; /* Adjust max-height for a better visual balance */
    object-fit: cover;
    display: block;
}

/* Adjustments for smaller screens */
@media (max-width: 992px) {
    .post-content .post-header-content {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .post-content .post-header-content .entry-title {
        text-align: center;
        font-size: 2.8em; /* Adjust font size for smaller screens */
    }

    .post-content .post-header-content .post-thumbnail {
        flex: none;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .post-content .post-header-content .entry-title {
        font-size: 2.2em;
    }
}

.post-content .post-meta {
    font-size: 1em;
    color: #ffffff; /* Changed to white */
    text-align: left; /* Align to left */
    position: absolute; /* Position absolutely within post-header-content */
    bottom: 0; /* Align to the bottom */
    left: 0; /* Align to the left */
    padding-left: 0; /* Removed padding from the left edge */
    padding-bottom: 5px; /* Add some padding from the bottom edge */
    display: flex; /* Use flexbox for horizontal alignment */
    align-items: center; /* Vertically align items */
    gap: 15px; /* Space between meta items */
}

.post-content .post-meta .posted-on,
.post-content .post-meta .comments-link,
.post-content .post-meta .comments-link a,
.post-content .post-meta .reading-time {
    color: #ffffff !important; /* Ensure all elements are white */
    text-decoration: none !important; /* Ensure no underlines */
}

.post-content .post-meta a {
    color: #ffffff; /* Changed to white */
    text-decoration: none;
}

.post-content .post-meta a:hover {
    color: #f9a825;
}

.post-content .post-meta .posted-on {
    margin-right: 0; /* Reset margin as gap handles spacing */
}

.post-content .post-meta .comments-link {
    margin-right: 0; /* Reset margin as gap handles spacing */
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-content .post-meta .comments-link .comment-count-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.2em; /* Make the count bigger */
    color: #e0e0e0; /* Set text color to light grey */
    text-decoration: none !important; /* Ensure no underline */
}

.post-content .post-meta .comments-link .comment-count-wrapper .comment-icon {
    font-size: 1.18em !important; /* Make the icon smaller, match text */
    width: 1.18em !important; /* Ensure consistent sizing */
    height: 1.18em !important; /* Ensure consistent sizing */
    vertical-align: middle !important; /* Align with text */
    filter: invert(100%) brightness(200%); /* Make the icon white */
    position: relative;
    top: 0em; /* Adjust vertical position to align with numbers */
}

.post-content .post-meta .reading-time {
    display: flex;
    align-items: center;
    gap: 5px;
}

.post-content .post-meta .reading-time .reading-time-icon {
    font-size: 1.18em !important; /* Make the icon smaller, match text */
    width: 1.18em !important; /* Ensure consistent sizing */
    height: 1.18em !important; /* Ensure consistent sizing */
    vertical-align: middle !important; /* Align with text */
    filter: invert(100%) brightness(200%); /* Make the icon white */
    position: relative;
    top: 0em; /* Adjust vertical position to align with numbers */
}

.post-content .entry-content {
    font-size: 18px;
    line-height: 1.8;
    color: #e0e0e0;
    margin-bottom: 30px;
}

.post-content .entry-content h2,
.post-content .entry-content h3,
.post-content .entry-content h4 {
    color: #009900; /* Matrix Green */
    margin-top: 1.5em;
    margin-bottom: 0.8em;
    scroll-margin-top: 80px; /* Offset for fixed header */
}

.post-content .entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    margin: 20px 0;
    display: block;
}

.post-content .entry-content a {
    color: #009900; /* Matrix Green */
    text-decoration: underline;
}

.post-content .entry-content a:hover {
    color: #007700; /* Darker Matrix Green */
}

@media (max-width: 992px) {
    .blog-content-wrapper {
        flex-direction: column;
        gap: 20px;
    }

    .table-of-contents {
        position: static;
        width: 100%;
        flex: none;
    }
}

@media (max-width: 768px) {
    .blog-single-post {
        margin-top: 20px;
        padding: 0 15px;
    }

    .post-content {
        padding: 20px;
    }

    .post-content h1.entry-title {
        font-size: 2.5em;
    }
}

/* Post Navigation Styles */
.post-navigation {
    margin-top: 40px;
    margin-bottom: 40px;
    padding: 0; /* Remove padding from main container */
    background-color: transparent; /* Remove background from main container */
    border-radius: 0; /* Remove border-radius from main container */
    box-shadow: none; /* Remove box-shadow from main container */
    display: flex;
    justify-content: space-between; /* Distribute items to ends */
    align-items: center;
    width: 100%;
}

.post-navigation .nav-links {
    display: flex;
    justify-content: space-between; /* Distribute items to ends */
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 20px; /* Keep gap between previous and next buttons */
    width: 100%; /* Ensure nav-links takes full width */
}

.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex: 1; /* Allow to grow and take available space */
}

.post-navigation .nav-previous a,
.post-navigation .nav-next a {
    display: flex; /* Changed to flex to control content alignment */
    align-items: center;
    gap: 10px; /* Increased gap for better spacing with large arrows */
    padding: 15px 20px;
    background-color: rgba(30, 30, 31, 1);
    color: #e0e0e0;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    height: 100%;
}

.post-navigation .nav-previous a {
    justify-content: flex-start; /* Align content to the start for previous button */
    text-align: left;
}

.post-navigation .nav-next a {
    justify-content: flex-end; /* Align content to the end for next button */
    text-align: right;
}

.post-navigation .nav-previous a:hover,
.post-navigation .nav-next a:hover {
    background-color: #4a4d52;
    transform: translateY(-2px);
}

/* Arrows for navigation */
.post-navigation .nav-previous a::before {
    content: '\2190'; /* Left arrow */
    font-size: 2em; /* Big arrow */
    color: #009900; /* Matrix Green */
    margin-right: 10px;
}

.post-navigation .nav-next a::after {
    content: '\2192'; /* Right arrow */
    font-size: 2em; /* Big arrow */
    color: #009900; /* Matrix Green */
    margin-left: 10px;
}

/* Ensure the subtitle and title elements are visible */
.post-navigation .nav-subtitle {
    display: block;
    font-size: 1.2em; /* Make subtitle bigger */
    color: #a0a0a0; /* A slightly muted color for the subtitle */
}

.post-navigation .nav-title {
    display: block;
    font-size: 1.5em; /* Make title significantly bigger */
    font-weight: bold;
    color: #ffffff; /* White color for the main title */
    line-height: 1.2; /* Adjust line height for better readability */
}

/* General Pagination Styles (for blog list, if applicable) */
.posts-navigation { /* Re-added for general pagination, if any */
    margin-top: 40px;
    text-align: center;
}

.posts-navigation .nav-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
}

.posts-navigation .nav-links .page-numbers {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 8px;
    background-color: #3c3f45;
    color: #e0e0e0;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.posts-navigation .nav-links .page-numbers:hover {
    background-color: #009900; /* Matrix Green */
    color: #2a2d32;
}

.posts-navigation .nav-links .page-numbers.current {
    background-color: #009900; /* Matrix Green */
    color: #2a2d32;
    font-weight: 700;
}

.posts-navigation .nav-links .prev,
.posts-navigation .nav-links .next {
    background-color: #009900; /* Matrix Green */
    color: #2a2d32;
    font-weight: 700;
}

.posts-navigation .nav-links .prev:hover,
.posts-navigation .nav-links .next:hover {
    background-color: #007700; /* Darker Matrix Green */
}

/* Blog Post Item Styling */
.blog-post-item {
    background-color: rgba(30, 30, 31, 1); /* Changed to portfolio container background color */
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px; /* Space between blog posts */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.blog-post-container {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 25px; /* Space between image and content */
}

.blog-post-image {
    flex: 0 0 250px; /* Fixed width for the image container */
    max-width: 250px;
    border-radius: 10px;
    overflow: hidden;
}

.blog-post-image img {
    width: 100%;
    height: 180px; /* Fixed height for consistency */
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.blog-post-content {
    flex: 1; /* Take remaining space */
}

.blog-post-content .entry-header {
    border-bottom: none; /* Remove border from individual post header */
    padding-bottom: 0;
    margin-bottom: 10px;
}

.blog-post-content .entry-title {
    font-size: 2em; /* Adjust title size for preview */
    margin-top: 0;
    margin-bottom: 10px;
}

.blog-post-content .entry-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-post-content .entry-title a:hover {
    color: #00cc00; /* Lighter Matrix Green */
}

.blog-post-content .entry-summary p {
    font-size: 1.1em; /* Increased font size for blog preview text */
    line-height: 1.6;
    color: #e0e0e0;
    margin-bottom: 15px;
}

/* Adjustments for smaller screens */
.blog-post-content .post-meta {
    display: flex;
    align-items: center;
    gap: 15px; /* Space between date and comments */
    margin-bottom: 10px;
}

.blog-post-content .posted-on {
    font-size: 1.2em; /* Make date bigger */
    color: #e0e0e0; /* Light grey for date */
    text-decoration: none !important;
}

.blog-post-content .comments-link {
    font-size: 0.9em;
    color: #a0a0a0;
    text-decoration: none !important;
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-post-content .comments-link a {
    color: #a0a0a0;
    text-decoration: none;
}

.blog-post-content .comments-link a:hover {
    color: #00cc00; /* Lighter Matrix Green */
}

/* Styling for the new likes count on blog list page */
.blog-post-content .likes-link {
    font-size: 0.9em;
    color: #e0e0e0; /* Light grey for likes count */
    text-decoration: none !important; /* Ensure no underline */
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-post-content .likes-link .like-count-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.2em; /* Make the count bigger */
    color: #e0e0e0; /* Set text color to light grey */
    text-decoration: none !important; /* Ensure no underline */
}

.blog-post-content .likes-link .like-count-wrapper .dashicons {
    font-size: 1.2em !important; /* Make the icon bigger, match text */
    width: 1.2em !important; /* Ensure consistent sizing */
    height: 1.2em !important; /* Ensure consistent sizing */
    vertical-align: middle !important; /* Align with text */
    color: #e0e0e0 !important; /* Change color to light grey */
    position: relative;
    top: 0.09em; /* Adjust vertical position to align with numbers */
}

/* Styling for the new reading time on blog list page */
.blog-post-content .reading-time {
    font-size: 0.9em;
    color: #e0e0e0; /* Light grey for reading time */
    text-decoration: none !important; /* Ensure no underline */
    display: flex;
    align-items: center;
    gap: 5px;
}

.blog-post-content .reading-time .reading-time-icon {
    font-size: 1.18em !important; /* Make the icon smaller, match text */
    width: 1.18em !important; /* Ensure consistent sizing */
    height: 1.18em !important; /* Ensure consistent sizing */
    vertical-align: middle !important; /* Align with text */
    filter: invert(100%) brightness(200%); /* Make the icon white */
    position: relative;
    top: 0em; /* Adjust vertical position to align with numbers */
}


@media (max-width: 768px) {
    .blog-post-container {
        flex-direction: column; /* Stack image and content vertically */
        gap: 15px;
    }

    .blog-post-image {
        flex: 0 0 auto;
        max-width: 100%; /* Full width for image on small screens */
    }

    .blog-post-image img {
        height: auto; /* Auto height for image on small screens */
    }

    .blog-post-content .entry-title {
        font-size: 1.5em;
    }
}

/* Comments Section Styling */
#comments {
    max-width: 100%;
    margin: 15px 0; /* Reduced top margin */
    padding: 0; /* Add horizontal padding */
    background-color: transparent;
    color: #e0e0e0;
}

#respond {
    position: relative; /* Establish positioning context for absolute children */
}

/* Main Comment Form (YouTube-like "Add a comment...") */
#commentform-main {
    display: flex;
    flex-direction: column; /* Stack form elements vertically */
    gap: 15px; /* Space between form fields */
    margin-bottom: 15px;
    padding: 0;
}

#respond {
    position: relative;
    display: block; /* Ensure it behaves as a block container */
}

.comment-reply-title-wrapper {
    margin-bottom: 15px; /* Add space below the title */
    text-align: left;
    display: block; /* Ensure it behaves as a block element */
}

.comment-reply-title-wrapper .comment-reply-title {
    font-size: 1.2em;
    color: #e0e0e0;
    margin-bottom: 0;
    font-weight: normal;
}

/* Main Comment Form (YouTube-like "Add a comment...") */
#commentform-main {
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    gap: 15px; /* Space between form elements */
    margin-bottom: 15px;
    padding: 0;
}

#commentform-main .comment-form-comment {
    position: relative;
    margin: 0;
    padding: 0;
}

#commentform-main .comment-form-comment label {
    margin: 0;
    padding: 0;
    display: block;
    line-height: 1;
    color: #a0a0a0;
}

#commentform-main textarea#comment {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #555;
    color: #e0e0e0;
    padding: 0; /* Ensure no padding */
    margin-top: 5px;
    font-size: 1em; /* Reverted font size */
    line-height: 1; /* Explicitly set line-height to 1 */
    resize: none; /* Prevent manual resizing */
    transition: border-bottom-color 0.3s ease;
    height: 20px; /* Fixed height as per user request */
    min-height: 20px; /* Ensure fixed height */
    overflow-y: auto; /* Allow scrolling if content exceeds fixed height */
    box-sizing: border-box; /* Explicitly set box-sizing */
}

#commentform-main textarea#comment:focus {
    outline: none;
    border-bottom-color: #009900; /* Matrix Green */
    height: 20px; /* Keep fixed height on focus */
    min-height: 20px; /* Keep fixed height on focus */
}

/* Ensure Name and Email fields are visible and styled */
#commentform-main .comment-form-author,
#commentform-main .comment-form-email {
    display: block !important;
    visibility: visible !important;
    margin-bottom: 0; /* Remove bottom margin to reduce gap */
}

#commentform-main .comment-form-author label,
#commentform-main .comment-form-email label {
    display: block;
    margin-bottom: 5px;
    color: #a0a0a0;
}

#commentform-main .comment-form-author input,
#commentform-main .comment-form-email input {
    width: 100%;
    padding: 10px;
    border: 1px solid #3c3f45;
    border-radius: 5px;
    background-color: #1f2124;
    color: #e0e0e0;
    box-sizing: border-box;
}

#commentform-main .comment-form-author input:focus,
#commentform-main .comment-form-email input:focus {
    border-color: rgb(66, 133, 244);
    outline: none;
}

/* Styling for the "Save my name, email..." checkbox */
#commentform-main .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    margin-bottom: 0; /* Remove bottom margin to reduce gap */
    color: #a0a0a0;
}

#commentform-main #wp-comment-cookies-consent {
    margin-right: 10px;
    width: auto;
}

#commentform-main .form-submit-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}

#commentform-main input#submit {
    background-color: transparent; /* Removed grayish background */
    color: #e0e0e0; /* Set text color to a visible light grey */
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    cursor: not-allowed;
    transition: background-color 0.3s ease, color 0.3s ease, cursor 0.3s ease;
}

#commentform-main input#submit:enabled {
    background-color: #009900; /* Matrix Green */
    color: #2a2d32;
    cursor: pointer;
}

#commentform-main input#submit:enabled:hover {
    background-color: #007700; /* Darker Matrix Green */
}

/* Hide elements that are not needed for the main comment form */
#commentform-main .comment-form-url,
#commentform-main .comment-notes,
#commentform-main .logged-in-as,
#commentform-main .cancel-comment-button-proxy {
    display: none !important;
}

.cancel-comment-reply-button { /* Styling for the new cancel button */
    background-color: transparent;
    color: #a0a0a0;
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cancel-comment-reply-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Comment List */
#comments .comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#comments .comment {
    margin-bottom: 10px; /* Reduced bottom margin */
    padding: 10px 0;
    display: grid; /* Use grid for better control over avatar and content */
    grid-template-columns: 40px 1fr; /* Avatar on left, content on right */
    gap: 0px;
    align-items: start;
    background-color: transparent; /* Ensure no background on individual comments */
}

#comments .comment-author .avatar {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    min-width: 40px; /* Ensure avatar doesn't shrink */
    grid-column: 1; /* Place avatar in the first column */
}

#comments .comment-content-wrapper {
    grid-column: 2; /* Place comment content wrapper in the second column */
    padding: 0;
    border-radius: 0;
    box-shadow: none;
}

#comments .children .comment-content-wrapper {
    padding-left: 0;
    border-left: none;
}

#comments .comment-body-inner { /* New class for the article element */
    padding: 10px 15px;
    border-radius: 0;
    box-shadow: none;
    min-height: 60px; /* Ensure a minimum height for short comments */
    background-color: transparent; /* Ensure no background on comment body */
}

#comments .comment-meta {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#comments .comment-content {
    line-height: 1.6;
    font-size: 0.95em;
    color: #e0e0e0;
    margin-top: 5px;
    margin-bottom: 10px;
}

#comments .comment-meta {
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#comments .comment-author.vcard {
    display: flex;
    align-items: center;
    gap: 8px;
}

#comments .comment-author .fn {
    font-weight: 600;
    font-size: 1.2em;
    margin-top: -4px; /* Adjust this value to move the name higher */
}

#comments .comment-author .fn a {
    color: #ffffff; /* White for author name */
    text-decoration: none;
}

#comments .comment-author .fn a:hover {
    text-decoration: underline;
}

#comments .comment-metadata {
    font-size: 0.85em;
    color: #a0a0a0;
}

#comments .comment-metadata a {
    color: #a0a0a0; /* Grey for timestamp */
    text-decoration: none;
}

#comments .comment-content {
    line-height: 1.6;
    font-size: 0.95em;
    color: #e0e0e0;
    margin-top: 5px;
    margin-bottom: 10px;
}

/* Reply button styling */
.comment-actions .comment-reply-link { /* Corrected selector */
    display: inline-block; /* Ensure padding and border-radius apply */
    background-color: #3c3f45; /* Dark background for the pill */
    color: #e0e0e0; /* Light text color */
    padding: 8px 18px; /* Padding for pill shape */
    border: none;
    border-radius: 20px; /* Pill shape */
    font-weight: 600;
    font-size: 0.9em; /* Slightly larger font */
    cursor: pointer;
    text-decoration: none; /* Remove underline from link */
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}

.comment-actions .comment-reply-link:hover {
    background-color: #4a4d52; /* Slightly lighter on hover */
    color: #ffffff;
    transform: translateY(-2px); /* Subtle lift effect */
}

/* Threaded Comments */
#comments .children {
    list-style: none;
    margin: 0;
    padding-left: 80px; /* Further increased indentation for the entire children list */
    position: relative;
    grid-column: 1 / -1;
}

#comments .children::before {
    content: '';
    position: absolute;
    left: 40px; /* Adjusted to align with the new indentation */
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #4a4d52; /* Subtle line color */
}

#comments .children .comment-content-wrapper {
    padding-left: 0; /* Remove padding-left, grid will handle it */
    border-left: none; /* Remove border-left, the ::before pseudo-element handles the line */
}

/* Ensure nested comments maintain grid layout */
#comments .children .comment {
    grid-template-columns: 40px 1fr; /* Re-apply grid for avatar and content */
    gap: 15px;
    margin-left: 0; /* Remove extra margin, rely on parent padding-left */
    position: relative; /* For positioning the vertical line for nested replies */
    padding-top: 10px; /* Add some top padding for spacing between replies */
}

#comments .children .comment-author .avatar {
    grid-column: 1;
}

#comments .children .comment-content-wrapper {
    grid-column: 2;
}

/* Dynamic Reply Form Styling */
.comment-reply-form {
    margin-top: 15px;
    margin-bottom: 15px;
    padding: 10px 0;
    /* Removed border-top as it was an extra line */
    gap: 15px;
    grid-column: 1 / -1; /* Make the reply form span all columns of the parent grid */
}

.comment-reply-form .comment-reply-title {
    display: none !important; /* Ensure title is hidden */
}

.comment-reply-form .comment-form-reply {
    /* Removed grid-column: 2; to allow it to flow naturally within the full-width container */
    gap: 10px;
    width: 100%; /* Ensure it takes full width of its grid column */
    padding: 0; /* Remove padding */
    margin: 0; /* Remove margin */
}

#commentform-reply textarea#comment-reply {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #555;
    color: #e0e0e0;
    padding: 0; /* Ensure no padding */
    margin-top: 5px;
    font-size: 1em;
    line-height: 1; /* Explicitly set line-height to 1 */
    resize: none; /* Prevent manual resizing */
    transition: border-bottom-color 0.3s ease;
    height: 20px; /* Fixed height for single line */
    min-height: 20px; /* Ensure fixed height */
    overflow-y: auto; /* Allow scrolling if content exceeds fixed height */
    box-sizing: border-box; /* Explicitly set box-sizing */
}

#commentform-reply textarea#comment-reply:focus {
    outline: none;
    border-bottom-color: #009900; /* Matrix Green */
    height: 20px; /* Keep fixed height on focus */
    min-height: 20px; /* Keep fixed height on focus */
}

.comment-reply-form .form-submit {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 10px; /* Add some top margin for spacing */
    width: 100%;
    padding: 0; /* Remove padding */
    margin-bottom: 0; /* Remove bottom margin */
}

.comment-reply-form .comment-cancel-button {
    background-color: transparent;
    color: #a0a0a0;
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.comment-reply-form .comment-cancel-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Hide default fields for reply forms (cloned from main form) */
/* Hide default fields and notes for reply forms */
#commentform-reply .comment-form-author,
#commentform-reply .comment-form-email,
#commentform-reply .comment-form-url,
#commentform-reply .comment-notes,
#commentform-reply .logged-in-as {
    display: none !important;
}

/* Hide the reply title for a simpler UI */
#reply-title-reply {
    display: none !important;
}

/* Remove container styling for the reply form */
#respond-reply.comment-respond {
    background-color: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    margin: 0;
}

/* Replies Toggle Button */
.replies-toggle-wrapper {
    margin-top: 10px;
    margin-left: 120px; /* Further to the right */
}

.replies-toggle {
    background-color: transparent;
    border: none;
    color: #a0a0a0; /* Grey color */
    font-size: 0.9em;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0; /* Remove padding */
    border-radius: 0; /* Remove border-radius */
    transition: color 0.3s ease; /* Only color transition */
}

.replies-toggle:hover {
    color: #ffffff;
    background-color: transparent; /* Ensure no background change on hover */
}

.replies-toggle .toggle-icon {
    font-size: 0.8em;
    line-height: 1;
    margin-right: 5px; /* Space between icon and text */
}

/* Hide replies by default */
.children.replies-hidden {
    display: none;
}


/* Sidebar Widget Styles (if applicable) */
.widget-area {
    background-color: #2a2d32;
    border-radius: 20px;
    padding: 25px;
    margin-top: 30px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.widget-area .widget-title {
    color: #009900; /* Matrix Green */
    font-size: 1.8em;
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #009900; /* Matrix Green */
    padding-bottom: 10px;
}

.widget-area ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget-area ul li {
    margin-bottom: 10px;
}

.widget-area ul li a {
    color: #e0e0e0;
    text-decoration: none;
    transition: color 0.2s ease;
}

.widget-area ul li a:hover {
    color: #00cc00; /* Lighter Matrix Green */
}

.widget-area .search-form input[type="search"] {
    width: calc(100% - 70px);
    padding: 10px;
    border: 1px solid #555;
    border-radius: 8px;
    background-color: #4a4d52;
    color: #e0e0e0;
}

.widget-area .search-form input[type="submit"] {
    width: 60px;
    padding: 10px;
    background-color: #009900; /* Matrix Green */
    color: #2a2d32;
    border: none;
    border-radius: 8px;
    margin-left: 5px;
    cursor: pointer;
}
@media (max-width: 768px) {
    .blog-page-container,
    .single-post-container {
        margin-top: 20px;
        padding: 15px;
    }

    .blog-filters {
        flex-direction: column;
        gap: 15px;
        padding: 15px;
    }

    .blog-filters .filter-group {
        min-width: unset;
        width: 100%;
    }

    .blog-filters button[type="submit"] {
        width: 100%;
    }

    .blog-post-card h2.entry-title {
        font-size: 1.5em;
    }

    .single-post-container h1.entry-title {
        font-size: 2.5em;
    }
}

/* Blog Post Item Styling */
.blog-post-item {
    background-color: rgba(30, 30, 31, 1); /* Changed to portfolio container background color */
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 30px; /* Space between blog posts */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-post-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.blog-post-container {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 25px; /* Space between image and content */
}

.blog-post-image {
    flex: 0 0 250px; /* Fixed width for the image container */
    max-width: 250px;
    border-radius: 10px;
    overflow: hidden;
}

.blog-post-image img {
    width: 100%;
    height: 180px; /* Fixed height for consistency */
    object-fit: cover;
    display: block;
    border-radius: 10px;
}

.blog-post-content {
    flex: 1; /* Take remaining space */
}

.blog-post-content .entry-header {
    border-bottom: none; /* Remove border from individual post header */
    padding-bottom: 0;
    margin-bottom: 10px;
}

.blog-post-content .entry-title {
    font-size: 2em; /* Adjust title size for preview */
    margin-top: 0;
    margin-bottom: 10px;
}

.blog-post-content .entry-title a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s ease;
}

.blog-post-content .entry-title a:hover {
    color: #f9a825;
}

.blog-post-content .entry-summary {
    font-size: 1em;
    line-height: 1.6;
    color: #ffffff; /* Changed to white */
    margin-bottom: 15px;
}

/* Adjustments for smaller screens */
@media (max-width: 768px) {
    .blog-post-container {
        flex-direction: column; /* Stack image and content vertically */
        gap: 15px;
    }

    .blog-post-image {
        flex: 0 0 auto;
        max-width: 100%; /* Full width for image on small screens */
    }

    .blog-post-image img {
        height: auto; /* Auto height for image on small screens */
    }

    .blog-post-content .entry-title {
        font-size: 1.5em;
    }
}/* Reply form UI adjustments */
.comment-reply-form-wrapper {
    margin-top: 15px; /* Adjust margin to be closer to the comment */
    padding: 0; /* Remove padding */
    background-color: transparent; /* Remove background */
    border-radius: 0; /* Remove border-radius */
    box-shadow: none; /* Remove box-shadow */
}

.comment-reply-title-wrapper {
    /* Ensure block display for stacking title and form */
    display: block;
    margin-bottom: 15px; /* Space below the title wrapper */
    border-bottom: none; /* Remove border if not needed */
    padding-bottom: 0;
    text-align: left; /* Align title to the left */
}

#reply-title-reply {
    display: none !important; /* Ensure title is hidden */
}

.cancel-comment-reply-button-reply {
    background-color: #555;
    color: #fff;
    border: none;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.cancel-comment-reply-button-reply:hover {
    background-color: #777;
}

/* Hide the original WordPress cancel reply link */
#cancel-comment-reply-link {
    display: none;
}

.comment-form p {
    margin-bottom: 15px;
}

.comment-form label {
    display: block;
    margin-bottom: 5px;
    color: #a0a0a0;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #3c3f45;
    border-radius: 5px;
    background-color: #1f2124; /* Darker input background */
    color: #e0e0e0;
    box-sizing: border-box; /* Ensure padding doesn't increase width */
}

.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
    border-color: rgb(66, 133, 244); /* Google Blue on focus */
    outline: none;
}

.comment-form textarea {
    min-height: 20px; /* Ensure single line height */
    resize: none; /* Prevent resizing */
    height: 20px; /* Fixed height */
    padding: 0; /* Remove padding */
    border: none; /* Remove border */
    border-bottom: 1px solid #555; /* Keep the bottom line */
    background-color: transparent; /* Transparent background */
    color: #e0e0e0; /* Text color */
    font-size: 1em;
    line-height: 1;
    box-sizing: border-box;
    overflow-y: auto;
}

.form-submit-wrapper {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

#submit-reply {
    background-color: #009900; /* Matrix Green */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#submit-reply:hover {
    background-color: #007700; /* Darker Matrix Green */
}

/* Styling for the new proxy cancel button */
.cancel-comment-button-proxy {
    background-color: transparent;
    color: #a0a0a0;
    padding: 8px 18px;
    border: none;
    border-radius: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.cancel-comment-button-proxy:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Gradual appearance for reply form */
.comment-reply-form-wrapper {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.3s ease-out, max-height 0.3s ease-out;
}

.comment-reply-form-wrapper.is-active {
    opacity: 1;
    max-height: 500px; /* Sufficiently large value to show content */
    transition: opacity 0.3s ease-in, max-height 0.3s ease-in;
}

/* Ensure blog titles (links) do not have an underline */
h1.entry-title a,
h2.entry-title a {
    text-decoration: none !important;
}

h1.entry-title a:hover,
h2.entry-title a:hover {
    text-decoration: none !important;
}

#main-navigation-custom {
    transition: max-height 0.7s ease-in-out, opacity 0.7s ease-in-out;
    overflow: hidden; /* Ensure content is hidden when sliding up */
}

/* Styling for the new comment icon and count */
.blog-post-content .comments-link .comment-count-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 1.2em; /* Make the count bigger */
    color: #e0e0e0; /* Set text color to light grey */
    text-decoration: none !important; /* Ensure no underline */
}

.blog-post-content .comments-link .comment-count-wrapper .comment-icon {
    font-size: 1.18em !important; /* Make the icon smaller, match text */
    width: 1.18em !important; /* Ensure consistent sizing */
    height: 1.18em !important; /* Ensure consistent sizing */
    vertical-align: middle !important; /* Align with text */
    filter: invert(100%) brightness(200%); /* Make the icon white */
    position: relative;
    top: 0em; /* Adjust vertical position to align with numbers */
}

/* Remove underlines from all links within blog post items */
.blog-post-item a,
.blog-post-item .blog-post-link-wrapper {
    text-decoration: none !important;
}

.blog-post-item a:hover,
.blog-post-item .blog-post-link-wrapper:hover {
    text-decoration: none !important;
}