/*
Theme Name: My Simple Theme
Theme URI: http://example.com/my-simple-theme/
Author: Your Name
Author URI: http://example.com
Description: A simple WordPress theme with a grid layout and basic post display.
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-simple-theme
*/

/* Basic Styling - you mentioned CSS would be ready to manage these */
body {
    background-color: #f3ecec;
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 960px;
    margin: 0 auto;
    padding: 20px;
}

/* Header */
header {
    background: #4176e9;
    color: #f5efef;
    padding: 1rem 0;
    text-align: center;
}

header h1 {
    margin: 0;
    font-size: 2.5rem;
}

header h1 a {
    color: #000;
    text-decoration: none;
}

.site-title {
    font-size: 2.5rem;
    font-weight: bold;
}

.site-title a {
    text-decoration: none;
}

.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
}

.main-navigation li {
    margin: 0 15px;
}

.main-navigation a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    display: block;
}

/* Content Grid */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.post-card {
    background-color: white;
    border: 1px solid #ddd;
    padding: 15px;
    text-align: center;
    position: relative; /* For the badge */
}

.post-card img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 15px;
}

.post-card h2 {
    font-size: 1.2rem;
    margin-top: 0;
}

.post-card h2 a {
    text-decoration: none;
    color: #333;
}

.post-card .post-date {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 10px;
}

.post-card .category-badge {
    position: absolute;
    top: 0px;
    left: 0px;
    background: #0073aa;
    color: #fff;
    padding: 5px 10px;
    font-size: 0.8rem;
    text-transform: uppercase;
    font-weight: bold;
}

.category-badge a {
    color: #fff;
}

/* Single Post */
.single-post-content {
    margin-top: 20px;
}

.single-post-content .post-meta {
    font-size: 0.9rem;
    color: #777;
    margin-bottom: 20px;
}

.single-post-content .post-meta span {
    margin-right: 15px;
}

.single-post-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}

.single-post-content .post-tags {
    margin-top: 30px;
    font-size: 0.9rem;
}

.single-post-content .post-tags span {
    font-weight: bold;
}

.single-post-content .post-tags a {
    background: #eee;
    padding: 5px 10px;
    margin-right: 5px;
    text-decoration: none;
    color: #555;
    border-radius: 3px;
    display: inline-block; /* to allow margin and padding properly */
    margin-bottom: 5px;
}

/* Footer */
footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1rem 0;
    margin-top: 30px;
}

.entry-content {
    padding: 1rem;
}

/* General image styling for content */
.entry-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 1em auto;
}

/* Table styling for content */
.entry-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1em;
}

.entry-content th,
.entry-content td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}

.entry-content th {
    background-color: #f2f2f2;
}

/* Basic header and paragraph styling for content */
.entry-content h1, .entry-content h2, .entry-content h3, .entry-content h4, .entry-content h5, .entry-content h6 {
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    line-height: 1.2;
}

.entry-content p {
    margin-bottom: 1em;
}

article header {
    background-color: #FFF;
    color: black;
}

/* Single Post Layout with Sidebar */
.single-post-layout {
    background-color: rgb(255, 253, 253);
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    gap: 30px; /* Space between content and sidebar */
    margin-top: 20px;
}

.single-post-content {
    flex: 3; /* Main content takes more space */
    min-width: 60%; /* Ensure main content doesn't get too small */
}

.latest-posts-sidebar {
    flex: 1; /* Sidebar takes remaining space */
    min-width: 250px; /* Minimum width for sidebar */
    background: #f9f9f9;
    border: 1px solid #eee;
    padding: 20px;
}

.latest-posts-sidebar h3 {
    margin-top: 0;
    font-size: 1.6rem;
    color: #333;
    border-bottom: 1px solid #ddd;
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.latest-posts-sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.latest-posts-sidebar li {
    margin-bottom: 10px;
}

.latest-posts-sidebar li a {
    text-decoration: none;
    color: #0073aa;
    font-weight: bold;
    display: block; /* Make the whole link clickable area */
}

.latest-posts-sidebar li a:hover {
    text-decoration: underline;
}

.latest-posts-sidebar li .post-date {
    display: block; /* New line for date */
    font-size: 0.8rem;
    color: #777;
    margin-top: 3px;
}

/* Responsive adjustments for the single post layout */
@media (max-width: 768px) {
    .single-post-layout {
        flex-direction: column; /* Stack columns on smaller screens */
        gap: 20px;
    }

    .single-post-content,
    .latest-posts-sidebar {
        flex: auto; /* Allow them to take full width */
        min-width: unset; /* Remove min-width constraints */
    }
}