/*
Theme Name: Newsletter Theme
Author: Sami Maina
Description: A responsive, mobile-first theme for a half-year monthly newsletter with a fixed header and floating content.
Version: 3.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: newsletter, responsive-layout, one-column, custom-menu, featured-images
Text Domain: newslettertheme
*/

/* --- Global Styles --- */
body {
    background-color: #f2e6ff; /* Light purple-ish background */
    font-family: 'Inter', sans-serif;
    color: #333;
    margin: 0;
    padding-top: 60px; /* Provide space for the fixed header */
}

a {
    color: #c83349;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #8f1b2d;
}

img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.screen-reader-text, .visually-hidden {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* --- Header & Navigation --- */
.site-header {
    position: relative;
    height: 40vh;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
    background-size: cover;
    background-position: center;
}

.banner-title {
    font-size: 3.5rem;
    color: #4b0082; /* CHANGED: Dark purple color for the title */
    margin: 0;
    text-shadow: 1px 1px 3px rgba(255, 255, 255, 0.4); /* CHANGED: Light shadow for contrast */
}

.menu-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(239, 68, 68, 0.85); 
    border-bottom: 2px solid #6a0dad; 
    z-index: 1000;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease;
}

/* --- Menu Toggle --- */
.menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0.5rem;
    position: relative;
    z-index: 1001;
}

.hamburger-bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #fff;
    margin: 5px 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* --- Main Navigation --- */
.main-navigation { display: block; }
.main-navigation ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: center; gap: 1.5rem; }
.main-navigation ul li a { color: white; font-weight: bold; font-size: 1.1rem; padding: 0.5rem; transition: background-color 0.3s ease; border-radius: 5px; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5); }
.main-navigation ul li a:hover { background-color: rgba(255, 255, 255, 0.2); }

/* --- Main Content --- */
.main-content {
    background-color: #ffffff;
    margin: -10vh auto 2rem auto;
    padding: 2rem;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-width: 90%;
    width: 800px;
    position: relative;
    z-index: 10;
}

/* --- Post Styles on Index Page --- */
article.post {
    border-bottom: 1px solid #eee;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
}
article.post:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Title is a block element above the content wrapper */
.entry-title { 
    font-size: 2.2rem; 
    margin-top: 0; 
    margin-bottom: 1rem; /* Space between title and content below */
    color: #4b0082; 
}
.single .entry-title { 
    font-size: 2.8rem;
    margin-bottom: 1.5rem;
}

.entry-content p, .entry-summary p { 
    line-height: 1.7; 
    font-size: 1.1rem; 
    margin-top: 0;
}

/* This wrapper contains the image and excerpt */
.post-content-wrapper {
    display: flex;
    flex-direction: column; /* Mobile-first: stack image and text */
    gap: 1rem;
}
.post-thumbnail {
    flex-shrink: 0; 
    width: 100%; /* Full width on mobile */
    margin: 0 auto;
}
.entry-summary {
    flex-grow: 1;
}

/* --- Responsive Design --- */
@media (min-width: 601px) {
    /* Desktop styles for index page posts */
    body.home article.post,
    body.blog article.post {
        background-color: #faf5ff; /* Light purple-ish background */
        border: 1px solid #e0cffc;
        border-radius: 10px;
        padding: 1.5rem;
        border-bottom: none; /* Remove the default separator */
    }

    .menu-bar {
        justify-content: center;
    }

    /* On desktop, the wrapper becomes a row */
    .post-content-wrapper {
        flex-direction: row; /* Horizontal layout on desktop */
        gap: 1.5rem;
        align-items: flex-start;
    }

    /* Set a fixed width for the image container */
    .post-thumbnail {
        width: 200px; 
    }
}

@media (max-width: 768px) {
    body { padding-top: 55px; }
    .main-content { padding: 1.5rem; max-width: 95%; }
    .banner-title { font-size: 3rem; }
    .entry-title { font-size: 2rem; }
    .site-header { height: 30vh; }
}

@media (max-width: 600px) {
    .menu-bar { justify-content: flex-end; }
    .menu-toggle { display: block; }
    .main-navigation { display: none; }

    /* Mobile Menu Dropdown Styles */
    .main-navigation.toggled { display: block; position: absolute; top: 100%; left: 0; width: 100%; background-color: rgba(20, 20, 20, 0.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
    .main-navigation ul { flex-direction: column; align-items: center; padding: 1rem 0; gap: 0; }
    .main-navigation ul li { width: 100%; text-align: center; }
    .main-navigation ul li a { display: block; padding: 1rem; border-bottom: 1px solid rgba(106, 13, 173, 0.2); text-shadow: none; }
    .main-navigation ul li:last-child a { border-bottom: none; }

    .site-header { height: 25vh; }
    .main-content { padding: 1rem; margin: -5vh auto 1rem auto; }
    .banner-title { font-size: 2.5rem; }
    .entry-title { font-size: 1.5rem; }
    .single .entry-title { font-size: 2rem; }
}

/* --- Footer --- */
.site-footer {
    text-align: center;
    padding: 2rem;
    color: #663399;
}