* {
    box-sizing: border-box;
}

body {
    /*background: #f8f8f5;&*/
    background: #e0e0d0;
    color: #181818;
    font-family: 'Courier New', Courier, monospace;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.blog-container-title-bar {
  align-items: center;
  background: linear-gradient(90deg,navy,#1084d0);
  display: flex;
  justify-content: space-between;
  padding: 3px 2px 3px 3px;
}


.blog-content-box {
    background: #fff;
    border-radius: 18px;
    margin: 3em auto 4em auto; /* top, right/left, bottom */
    padding: 2.5em 3em 2em 3em;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    text-decoration: none;
}

h2 {
    /*font-size: 2.5em;*/
    font-weight: bold;
    margin: 0.5em 0;
    text-decoration: none;
}

h2 a {
    color: black;
    letter-spacing: -2px;;
    text-decoration: none;
}

h2 a:hover{
    font-style: italic;
    color: rgb(116, 111, 111);
}

header {
    /* text-align: center; Removed as it conflicts with flexbox layout of .site-header */
    padding: 2em 0 1em 0;
}

header h1 {
    flex: 1; /* Take up available space on the left */
    font-size: 2em;
    font-weight: bold;
    margin: 0;
}

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

header h1 a:hover {
    text-decoration: none; /* Ensure no underline on hover */
}

main {
    max-width: 800px; /* Limit width for better readability on desktop */
    width: 90%;       /* Responsive width for mobile */
    margin: 2em auto;
    /* background: silver; Removed background */
    /* padding: 3px; Removed padding */
    /* border-radius: 10px; Removed border-radius */
    flex-grow: 1;
}

/* Specific styling for the individual blog post container */
.blog-post-container {
    background: #ffffff;
    padding: 3em; /* Generous padding for readability */
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Subtle shadow for depth */
}

/* Ensure images within the post stay within bounds */
.blog-post-container img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 2em auto;
}

main p img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 2em auto;         /* centers the image and adds vertical spacing */
    padding-left: 1em;
    padding-right: 1em;
    box-sizing: border-box;   /* ensures padding doesn't exceed container */
}

.post-preview {
    display: block;
    position: relative; /* For absolute positioning of the date */
    /* width: 100%; Removed to rely on default block width (auto) which respects padding */
    clear: both; /* Clear any floats */
    background: #f8f8f5;
    border-radius: 10px;
    margin-bottom: 2em;
    padding: 1.2em;
    box-shadow: none;
}

/* Styling for the date timestamp */
.post-date {
    position: absolute;
    bottom: 0;
    right: 0;
    top: auto; /* Reset top */
    left: auto; /* Reset left */
    background: rgba(0, 0, 0, 0.4); /* Dark background for contrast */
    color: #fff;
    padding: 0.3em 0.6em;
    border-radius: 10px 0 10px 0; /* Rounded top-left and bottom-right */
    font-size: 0.8em;
    font-weight: bold;
    z-index: 10; /* Ensure it's above other content */
}


/* New Container to align thumbnail and title */
.post-header-container {
    display: flex;
    align-items: center; /* Vertically align image and text */
    margin-bottom: 1em;
}

.post-thumbnail {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border-radius: 6px;
    margin: 0 1.2em 0 0; /* Margin right only */
    /* flex-shrink: 0; Removed as not applicable for block */
    background: #eee;
}

.post-title-container h3 {
    margin: 0; /* Remove default margins */
    font-size: 2.25em; /* Increased font size */
    line-height: 1.2;
    color: black;
    text-decoration: none;
    letter-spacing: -2px
}

.post-title-container h3:hover{
    font-style: italic;
    color: rgb(116, 111, 111);
}

.post-info h3 {
    margin: 0 0 0.5em 0;
    font-size: 1.15em;
}

.post-info a {
    color: #181818;
    text-decoration: none;
    font-weight: bold;
}

.post-info a:hover {
    text-decoration: underline;
}

.post-excerpt {
    color: #444;
    margin: 0;
    font-size: 1em;
}

.site-header {
    display: flex;
    /* justify-content: space-between; Removed for flex layout */
    align-items: center;
    transition: all 0.3s;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    padding: 2rem 1rem 1rem 1rem;
    border-bottom: 1px solid black; /* Thin border at the bottom */
}

.site-nav {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 0.5rem;
    justify-content: center;
    text-align: center;
}

.search-form {
    flex: 1; /* Take up remaining space on the right */
    display: flex;
    justify-content: flex-end; /* Align input to the right */
    /* text-align: center; Removed due to flexbox alignment */
    /* margin-top: 1em; Removed due to flexbox alignment */
    transition: all 0.3s ease;
}

.search-form input[type="text"] {
    padding: 8px 12px;
    border-radius: 20px;
    border: 1px solid #ccc;
    outline: none;
    font-family: inherit;
    width: 200px;
    transition: width 0.3s ease;
}

.search-form input[type="text"]:focus {
    width: 250px;
    border-color: #1084d0;
}



/* Styles for Next/Previous Post buttons */
.blog-nav-button {
    text-decoration: none;
    font-weight: bold;
    color: black; /* Default color */
}

.blog-nav-button:hover {
    font-style: italic;
    color: rgb(116, 111, 111);
}

/* Styling for Individual Post Date */
.individual-post-date {
    color: #666;
    font-style: italic;
    margin-bottom: 1.5em;
    font-size: 0.9em;
}

/* Base styles for post-navigation */
.post-navigation {
    display: flex;
    flex-direction: column; /* Desktop: Column */
    align-items: center;   /* Desktop: Center children */
    margin-top: 3em;
    border-top: 1px solid #ccc;
    padding-top: 1em;
}


.post-navigation-top-row { /* Desktop styles */
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 800px; /* Match main content width */
    margin-bottom: 1em; /* Space from Blog Home button */
}

.post-navigation-left {
    text-align: left;
    flex: 1; /* Needed for its parent (.post-navigation-top-row) */
}

.post-navigation-center {
    text-align: center;
    width: 100%;       /* Ensure it takes full width for text-align to work */
    max-width: 800px;  /* Match main content width */
}

.post-navigation-right {
    text-align: right;
    flex: 1; /* Needed for its parent (.post-navigation-top-row) */
}

/* --- Mobile / Responsive Styles --- */

/* Mobile styles for post-navigation and its children */
@media screen and (max-width: 768px) {
    .post-navigation {
        flex-direction: column; /* Stack main navigation sections vertically */
        align-items: center; /* Center them horizontally */
    }

    .post-navigation-top-row {
        display: flex;
        flex-direction: row; /* Keep Newer/Older side-by-side */
        justify-content: space-around; /* Space them out */
        width: 100%; /* Take full width */
        margin-bottom: 1em; /* Space below this row */
    }

    .post-navigation-item {
        /* flex: 1; Removed to allow item to shrink and be centered by parent */
        width: auto; /* Override previous 100% width if any from generic .post-navigation-item rule */
        margin-bottom: 0; /* Reset margin for items within the row */
    }

    .post-navigation-left {
        text-align: center; /* Center text within its own flex item */
    }

    .post-navigation-center {
        text-align: center; /* Ensure Blog Home is centered */
        width: 100%; /* Blog Home takes full width on its own row */
        margin-top: 1em; /* Add space above Blog Home */
    }

    .post-navigation-right {
        text-align: center; /* Center text within its own flex item */
    }

    /* Hamburger Icon */
    .hamburger {
        display: none;
        cursor: pointer;
        width: 30px;
        height: 25px;
        position: relative;
        margin-left: auto;
        z-index: 1001;
    }

    .hamburger span {
        display: block;
        position: absolute;
        height: 3px;
        width: 100%;
        background: #333;
        border-radius: 3px;
        opacity: 1;
        left: 0;
        transition: all 0.3s ease;
    }

    .hamburger span:nth-child(1) { top: 0px; }
    .hamburger span:nth-child(2) { top: 10px; }
    .hamburger span:nth-child(3) { top: 20px; }

    /* Hamburger Animation */
    .hamburger.active span:nth-child(1) {
        top: 10px;
        transform: rotate(45deg);
    }

    .hamburger.active span:nth-child(2) {
        opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
        top: 10px;
        transform: rotate(-45deg);
    }

    @media screen and (max-width: 768px) {
        .site-header {
            flex-wrap: wrap;
            padding: 1rem;
            justify-content: space-between;
        }

        header h1 {
            font-size: 1.6em;
            flex: 0 0 auto;
            max-width: 80%;
        }

        .hamburger {
            display: flex;
        }

        .site-nav {
            display: none;
            width: 100%;
            flex-direction: column;
            align-items: center;
            margin-top: 1em;
            border-top: 1px solid #eee;
            padding-top: 1em;
        }

        .site-nav.active {
            display: flex;
        }

        .search-form {
            display: none;
            width: 100%;
            margin-top: 1rem;
            justify-content: center;
        }

        .search-form.active {
            display: flex;
        }
        
        .search-form input[type="text"] {
            width: 100%; /* Full width search on mobile */
        }

        /* Fix Content Overlap in Previews */
        .post-header-container {
            flex-direction: column;
            align-items: flex-start;
        }

        .post-thumbnail {
            margin: 0 0 1em 0;
            width: 100%;
            height: 200px;
        }

        .post-title-container h3 {
            font-size: 1.8em;
        }
        
        /* Adjust blog post container padding */
        .blog-post-container {
            padding: 1.5em;
        }
}
}