/* static/css/style.css */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    width: 80%;
    max-width: 960px; /* Keep this, but the flex container might need to be wider if this max-width is strictly for content column */
    margin: 0 auto;
    padding: 0 20px; /* Added horizontal padding if not already there */
    box-sizing: border-box;
}

/* Header Styles */
.site-header {
    background-color: #333;
    color: #fff;
    padding: 1rem 0;
    margin-bottom: 2rem;
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow header items to wrap */
}

.site-title a {
    color: #fff;
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: bold;
}

.site-nav {
    margin-left: auto; /* Push nav to the right if title is on left */
}
.site-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.site-nav li {
    margin-left: 20px;
}

.site-nav a {
    color: #fff;
    text-decoration: none;
    font-size: 1rem;
}

.site-nav a:hover {
    text-decoration: underline;
}

/* Main Content Area */
.site-main {
    padding-bottom: 2rem;
}

/* Make the .container within site-main a bit wider to accommodate sidebar, or adjust max-width */
.site-main .container {
    /* If 960px is for the whole layout including sidebar, it's fine.
       If 960px was intended for the content column alone, this max-width might need to increase,
       or the percentages for main-content-area and site-sidebar will be based on this.
       For now, let's assume 960px is for the overall content + sidebar width. */
    background-color: #fff; /* This was on .site-main .container, might need to be on .main-content-area now */
    padding: 0; /* Remove padding here, will add to columns */
    /* box-shadow: 0 0 10px rgba(0,0,0,0.1); */ /* Move shadow to main content area if desired */
    /* border-radius: 5px; */ /* Move radius to main content area */
}


/* --- Two-Column Layout --- */
.layout-container {
    display: flex;
    gap: 30px; /* Space between main content and sidebar */
    /* Reset padding from .container if it was there, apply to children */
    padding: 0; /* Ensure this container itself has no padding if children will have it */
}

.main-content-area {
    flex: 1; /* Takes up available space */
    min-width: 0; /* Prevents flexbox overflow issues */
    background-color: #fff; /* Moved from .site-main .container */
    padding: 2rem; /* Moved from .site-main .container */
    box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Moved from .site-main .container */
    border-radius: 5px; /* Moved from .site-main .container */
}

.site-sidebar {
    width: 280px; /* Fixed width for sidebar, adjust as needed */
    flex-shrink: 0; /* Prevents sidebar from shrinking */
    /* background-color: #f9f9f9; */ /* Optional distinct background for the whole sidebar */
    /* padding: 15px; */ /* Optional padding for the whole sidebar if widgets don't have enough */
}

/* --- Ad Placeholder Styling --- */
.ad-placeholder {
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    color: #888;
    font-size: 0.9em;
    margin-bottom: 20px; /* Default bottom margin */
}

.header-banner-ad {
    width: 100%; /* Takes full width of its flex container part */
    min-height: 90px; /* Use min-height to allow content to define height if needed */
    margin-top: 15px;
    order: 3; /* Ensure it comes after title and nav in flex order if wrapping */
}

.sidebar-medium-rectangle-ad { /* This is also a .sidebar-widget */
    width: 100%;
    min-height: 250px;
}

.below-article-ad {
    min-height: 90px;
    width: 100%; /* Full width of the article content area */
    margin-top: 30px;
}

/* --- Sidebar Widget Styling --- */
.sidebar-widget {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    box-sizing: border-box;
}

.sidebar-widget:last-child {
    margin-bottom: 0;
}

.sidebar-widget .widget-title {
    font-size: 1.2em;
    color: #333;
    margin-top: 0;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 8px;
}

/* Footer Styles */
.site-footer {
    background-color: #222;
    color: #aaa;
    text-align: center;
    padding: 1.5rem 0;
    font-size: 0.9rem;
    margin-top: 2rem; /* Add some space above the footer */
}

/* Blog Post Specific Styles */
.blog-post .post-header {
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
}

.blog-post .post-title {
    font-size: 2.2rem;
    margin-top: 0;
    margin-bottom: 0.5rem;
    color: #333;
}

.blog-post .post-meta {
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 1rem;
}

.blog-post .post-hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 1rem;
}

.blog-post .post-tags {
    margin-bottom: 1rem;
    font-size: 0.9rem;
}
.blog-post .post-tags ul {
    list-style: none;
    padding: 0;
    display: inline; /* Changed from flex to inline for tags */
}
.blog-post .post-tags li {
    display: inline-block;
    background-color: #eef;
    color: #337ab7;
    padding: 0.2em 0.6em;
    margin-right: 5px;
    margin-bottom: 5px; /* Added for wrapping */
    border-radius: 3px;
    font-size: 0.85rem;
}
.blog-post .post-tags a {
    color: #337ab7;
    text-decoration: none;
}


.blog-post .post-content {
    font-size: 1rem;
}

.blog-post .post-content h2,
.blog-post .post-content h3,
.blog-post .post-content h4 {
    color: #444;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
}

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

.blog-post .post-content ul,
.blog-post .post-content ol {
    margin-bottom: 1em;
    padding-left: 1.5em;
}

.blog-post .post-content blockquote {
    border-left: 4px solid #ccc;
    padding-left: 1em;
    margin-left: 0;
    margin-right: 0;
    font-style: italic;
    color: #555;
}
.blog-post .post-content blockquote footer {
    font-style: normal;
    font-size: 0.9em;
    color: #777;
    margin-top: 0.5em;
}


.blog-post .post-content pre {
    background-color: #2d2d2d; /* Dark background for code blocks */
    color: #f8f8f2; /* Light text for code blocks */
    padding: 1em;
    overflow-x: auto; /* Allow horizontal scrolling for long lines */
    border-radius: 4px;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
    font-size: 0.9em;
    line-height: 1.4;
}

.blog-post .post-content code { /* Inline code and code within pre */
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
}

.blog-post .post-content pre code { /* Code specifically within pre, no extra background/padding */
    background: none;
    padding: 0;
}


.blog-post .post-content figure {
    margin: 1.5em 0;
    text-align: center; /* Center images by default */
}
.blog-post .post-content figure img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
}
.blog-post .post-content figure figcaption {
    font-size: 0.9em;
    color: #666;
    margin-top: 0.5em;
    font-style: italic;
}

/* Blog Index Page Styles */
.blog-index .index-header { /* This class is on the <section class="blog-index"> */
    margin-bottom: 2rem;
    text-align: center;
}
.blog-index .index-header h1 { /* This should be .blog-index > header h1 if header is inside blog-index */
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.post-list {
    list-style: none;
    padding: 0;
}

.post-list-item {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid #eee;
}
.post-list-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.post-list-item h2 {
    margin-top: 0;
    font-size: 1.6rem;
    margin-bottom: 0.3rem;
}
.post-list-item h2 a {
    text-decoration: none;
    color: #337ab7;
}
.post-list-item h2 a:hover {
    text-decoration: underline;
    color: #23527c;
}

.post-list-item .post-meta {
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 0.5rem;
}
.post-list-item .post-summary {
    margin-bottom: 0.7rem;
    color: #444;
}
.post-list-item .read-more {
    font-size: 0.9rem;
    font-weight: bold;
    color: #337ab7;
    text-decoration: none;
}
.post-list-item .read-more:hover {
    text-decoration: underline;
}

/* Responsive Adjustments - Basic for now, more in Step 3 */
@media (max-width: 768px) {
    .site-header .container {
        flex-direction: column;
        align-items: flex-start;
    }
    .site-nav {
        margin-left: 0;
        margin-top: 1rem;
        width: 100%;
    }
    .site-nav ul {
        flex-direction: column;
        width: 100%;
    }
    .site-nav li {
        margin-left: 0;
        margin-bottom: 0.5rem;
        text-align: center;
        background-color: #444; /* Example for better visibility */
        padding: 0.5rem 0;
        border-radius: 3px;
    }
    .site-nav a {
        display: block; /* Make link fill li */
    }

    .header-banner-ad {
        order: initial; /* Reset order or adjust as needed */
        margin-top: 1rem;
    }

    .layout-container {
        flex-direction: column;
    }

    .main-content-area,
    .site-sidebar {
        width: 100%;
    }

    .site-sidebar {
        margin-top: 30px; /* Space when sidebar stacks below */
    }
}


/* --- Sidebar Widget Content Styling --- */

/* Poem Widget */
.weekly-poem-widget .poem-title {
    font-size: 1.1em;
    font-weight: bold;
    color: #444;
    margin-top: 0;
    margin-bottom: 5px;
}

.weekly-poem-widget .poem-author {
    font-size: 0.9em;
    font-style: italic;
    color: #777;
    margin-bottom: 10px;
}

.weekly-poem-widget .poem-text {
    font-size: 0.95em;
    line-height: 1.6;
    color: #555;
    max-height: 250px; /* Adjust as needed */
    overflow-y: auto;
    padding-right: 10px; /* For scrollbar */
}

.weekly-poem-widget .poem-text p {
    margin-bottom: 0.5em;
}
.weekly-poem-widget .poem-text p:last-child {
    margin-bottom: 0;
}

.weekly-poem-widget .poem-source-link {
    display: block;
    margin-top: 10px;
    font-size: 0.85em;
    text-align: right;
}


/* Story Teaser Widget */
.weekly-story-widget .story-title { /* Main title of the serial */
    font-size: 1.0em; /* Slightly smaller if chapter title is more prominent */
    font-weight: normal;
    color: #555;
    margin-top: 0;
    margin-bottom: 2px;
}

.weekly-story-widget .chapter-title { /* Title of the current chapter */
    font-size: 1.1em;
    font-weight: bold;
    color: #444;
    margin-bottom: 8px;
}

.weekly-story-widget .story-excerpt p {
    font-size: 0.9em;
    line-height: 1.5;
    color: #666;
    margin-bottom: 12px;
}

.weekly-story-widget .read-more-story.button {
    display: inline-block;
    background-color: #337ab7; /* Example blue */
    color: #fff;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: bold;
    transition: background-color 0.2s ease-in-out;
}

.weekly-story-widget .read-more-story.button:hover {
    background-color: #286090; /* Darker blue */
}


/* --- Story Chapter Page Styling --- */
.story-chapter-full .main-story-title { /* e.g. Les Aventures de la Gata Lluna */
    font-size: 1.5rem; /* Or adjust as needed */
    color: #555;
    margin-bottom: 0.25rem;
    font-weight: normal;
    text-align: center;
}
.story-chapter-full .full-chapter-title { /* e.g. El Misteri del Fil d'Estel */
    font-size: 2.0rem; /* Inherits from .post-title or can be specific */
    margin-bottom: 0.5rem; /* Inherits from .post-title */
}
.story-chapter-full .post-meta { /* Re-use post-meta styling */
    text-align: center; /* Center chapter meta */
    margin-bottom: 1.5rem;
}

.chapter-content {
    /* Inherits most styles from .post-content */
    font-size: 1.05em; /* Slightly larger for readability */
    line-height: 1.7;
}

.chapter-navigation {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}

.chapter-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.chapter-navigation .nav-previous,
.chapter-navigation .nav-next {
    flex-basis: calc(50% - 10px); /* Adjust for gap */
    margin-bottom: 10px;
}

.chapter-navigation a {
    display: block;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #337ab7;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.chapter-navigation a:hover {
    background-color: #f9f9f9;
    border-color: #ccc;
}

.chapter-navigation .nav-next {
    text-align: right;
}

.chapter-navigation .meta-nav {
    font-weight: bold;
}

/* Responsive adjustments for chapter navigation */
@media (max-width: 600px) {
    .chapter-navigation .nav-previous,
    .chapter-navigation .nav-next {
        flex-basis: 100%;
    }
    .chapter-navigation .nav-next {
        text-align: left; /* Stack them aligned left */
    }
}

/* Ensure post-navigation class also gets styling if used elsewhere */
.post-navigation {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #eee;
}
.post-navigation .nav-links {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.post-navigation .nav-previous,
.post-navigation .nav-next {
    flex-basis: calc(50% - 10px);
    margin-bottom: 10px;
}
.post-navigation a {
    display: block;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #337ab7;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.post-navigation a:hover {
    background-color: #f9f9f9;
    border-color: #ccc;
}
.post-navigation .nav-next {
    text-align: right;
}
.post-navigation .meta-nav {
    font-weight: bold;
}
@media (max-width: 600px) {
    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        flex-basis: 100%;
    }
    .post-navigation .nav-next {
        text-align: left;
    }
}
/* --- Responsive Adjustments --- */

/* Tablet and larger mobile landscape (e.g., up to 991px) */
@media (max-width: 991px) {
    .container {
        width: 90%; /* Allow a bit more width on tablets */
    }

    .layout-container {
        gap: 20px; /* Reduce gap slightly on tablets */
    }

    .site-sidebar {
        width: 220px; /* Slightly narrower sidebar for tablets if needed */
    }
}

/* Mobile devices (e.g., up to 767px) */
@media (max-width: 767px) {
    .container {
        width: 95%; /* Use more of the screen width on mobiles */
        padding: 0 15px; /* Adjust padding for smaller screens */
    }

    .site-header .container {
        flex-direction: column;
        align-items: center; /* Center header items when stacked */
    }

    .site-title {
        margin-bottom: 0.5rem;
    }

    .site-nav {
        margin-left: 0;
        margin-top: 1rem;
        width: 100%;
    }

    .site-nav ul {
        flex-direction: column;
        width: 100%;
        align-items: center; /* Center nav items */
    }

    .site-nav li {
        margin-left: 0;
        margin-bottom: 0.5rem;
        width: 100%; /* Make nav items full width */
        max-width: 280px; /* Optional: max-width for nav items */
        text-align: center;
    }
    .site-nav li a { /* Ensure links are easily tappable */
        display: block;
        padding: 0.75rem 0.5rem;
        background-color: #444; /* Example for better visibility/tap area */
        border-radius: 4px;
    }
    .site-nav li a:hover {
        background-color: #555;
    }


    .header-banner-ad {
        order: initial; /* Reset order if it was changed for flex */
        margin-top: 1rem;
        min-height: 60px; /* Adjust for smaller mobile banners if needed */
    }

    .layout-container {
        flex-direction: column;
    }

    .main-content-area,
    .site-sidebar {
        width: 100%; /* Full width when stacked */
    }
    
    .main-content-area {
        padding: 1.5rem; /* Adjust padding for mobile */
    }

    .site-sidebar {
        margin-top: 30px; /* Space when sidebar stacks below */
    }

    .blog-post .post-title,
    .story-chapter-full .full-chapter-title {
        font-size: 1.8rem; /* Adjust title sizes for mobile */
    }
    .blog-index .index-header h1 {
        font-size: 1.6rem;
    }

    .chapter-navigation .nav-previous,
    .chapter-navigation .nav-next,
    .post-navigation .nav-previous,
    .post-navigation .nav-next {
        flex-basis: 100%; /* Stack prev/next links */
        margin-bottom: 10px;
    }
    .chapter-navigation .nav-next,
    .post-navigation .nav-next {
        text-align: left; /* Align next to left when stacked */
    }
}

/* Further adjustments for very small screens if needed (e.g., < 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 10px;
    }
    .main-content-area {
        padding: 1rem;
    }
    .blog-post .post-title,
    .story-chapter-full .full-chapter-title {
        font-size: 1.6rem;
    }
    .blog-index .index-header h1 {
        font-size: 1.4rem;
    }
    .weekly-poem-widget .poem-text,
    .weekly-story-widget .story-excerpt p {
        font-size: 0.9em; /* Slightly smaller text in widgets if needed */
    }
}

/* --- General Content Readability Refinements --- */
.main-content-area p,
.main-content-area li,
.chapter-content p, /* For story chapter page */
.chapter-content li {
    line-height: 1.7; /* Slightly more spacious line height for long text */
}

.sidebar-widget p,
.sidebar-widget li { /* If widgets ever contain lists */
    line-height: 1.5; /* Slightly tighter for sidebar compactness */
}

/* Ensure last widget in sidebar has no bottom margin */
.site-sidebar .sidebar-widget:last-of-type { /* Using :last-of-type is often more robust */
    margin-bottom: 0;
}

/* --- Ad Styling Additions / Adjustments --- */
.ad-container-wrapper {
    width: 100%; 
    text-align: center; 
    margin-bottom: 15px; 
}

.header-ad-wrapper {
    order: 3; 
    margin-top: 15px;
}

.ad-label {
    font-size: 0.75em; 
    color: #888; 
    margin-bottom: 5px; 
    text-align: center;
}

.ad-placeholder.header-banner-ad {
    min-height: 90px;
    width: 728px; 
    max-width: 100%; 
    margin-left: auto; 
    margin-right: auto; 
}

/* Styling for the Sidebar Ad Container */
.ad-placeholder.sidebar-medium-rectangle-ad {
    /* This div is also a .sidebar-widget, so it inherits padding, border, etc. from .sidebar-widget */
    /* We need to ensure it accommodates the 300x250 ad. */
    width: 300px; /* Fixed width from ad tag */
    min-height: 250px; /* Fixed height from ad tag */
    max-width: 100%; /* Ensure it doesn't overflow sidebar if sidebar is made narrower */
    
    /* Override sidebar-widget padding if the ad needs to be flush or control its own padding */
    padding: 0; /* Remove padding if the ad iframe should fill the bordered box */
    
    /* Center the fixed-width ad within the sidebar if the sidebar is wider than 300px */
    margin-left: auto;
    margin-right: auto;
    
    /* Ensure the ad script (which creates an iframe) can be centered if it's smaller */
    display: flex; /* Can help center the iframe if it's smaller than container */
    justify-content: center;
    align-items: center;

    /* Remove placeholder-specific text styling if needed */
    /* color: transparent; */
    /* background-color: transparent; */ /* Ad will have its own background */
}

/* If .sidebar-widget has padding and you want the ad to be flush to its border,
   you might need to ensure the ad script's iframe itself is 100% width/height of this container.
   Often, the ad script handles its own iframe sizing. The key is that this container
   is 300x250. */

/* ... (rest of your styles, including responsive) ... */

/* In your responsive section, ensure the sidebar itself can accommodate 300px width,
   or the ad will overflow/be clipped.
   The .site-sidebar is currently set to width: 280px; in the desktop view.
   This needs to be at least 300px (plus any internal padding of the sidebar itself if the ad container is inside that padding).
   Let's adjust .site-sidebar width.
*/

/* --- Two-Column Layout (Adjusted Sidebar Width) --- */
.layout-container {
    display: flex;
    gap: 30px; 
    padding: 0; 
}

.main-content-area {
    flex: 1; 
    min-width: 0; 
    background-color: #fff; 
    padding: 2rem; 
    box-shadow: 0 0 10px rgba(0,0,0,0.1); 
    border-radius: 5px; 
}

.site-sidebar {
    width: 300px; /* ADJUSTED: To fit the 300px wide ad */
    flex-shrink: 0; 
}

/* Responsive: If sidebar stacks, 300px width is fine as it will become 100% */
@media (max-width: 767px) {
    /* ... other responsive rules ... */
    .site-sidebar {
        width: 100%; /* Already set, just confirming */
        margin-top: 30px; 
    }
    .ad-placeholder.sidebar-medium-rectangle-ad {
        /* Ensure it centers or behaves well when sidebar is full width */
        margin-left: auto;
        margin-right: auto;
    }
}