/* General Page Setup */
body { 
    margin: 0; 
    font-family: Arial, sans-serif; 
    display: flex; 
    flex-direction: column; 
    min-height: 100vh; 
    background-color: #fcfcfc;
}

/* Header & Footer Styling */
/* Header & Footer Styling */
.site-header, .site-footer { 
    background-color: #2c3e50; 
    color: #fff; 
    padding: 25px 15px; 
    text-align: center; 
}
.site-header h1 { margin: 0; font-size: 28px; }

/* Sticky Footer Setup */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.grid-container {
    flex: 1; /* Pushes the footer to the bottom if content is short */
}

/* Header Ads & Menu Containers */
.header-ads-container { padding: 15px 10px 5px 10px; background-color: #fff; }
.header-ads-container img { max-width: 100%; height: auto; margin-bottom: 10px; }
.site-menu { 
    background-color: #f4f4f4; 
    text-align: center; 
    padding: 12px; 
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd; 
    font-size: 16px; 
}
.site-menu a { color: #0066cc; text-decoration: none; padding: 0 12px; font-weight: bold; }
.site-menu a:hover { text-decoration: underline; }

/* Grid Columns Configuration */
.grid-container { 
    display: grid; 
    grid-template-columns: 1fr 180px;
    gap: 20px; 
    max-width: 1200px; 
    width: 100%;
    margin: 0 auto; 
    padding: 20px; 
    box-sizing: border-box;
}

.grid-container {
    display: grid !important;
    grid-template-columns: 1fr 180px !important;
}

/* Left Column (The Story) */
.story-column { 
    background-color: #fff; 
    padding: 30px; 
    border: 1px solid #e0e0e0; 
    line-height: 1.6;
    font-size: 18px;
}

.story-column {
    min-width: 0;
    overflow-x: auto;
}

/* Right Column (Sidebar Ads) */


.sidebar {
    width: 180px;
    flex-shrink: 0;
    text-align: center;
}

.sidebar a {
    display: block;
    margin-bottom: 20px;
}

.sidebar img {
    width: 160px;
    max-width: 100%;
    height: auto;
}

/* Footer Styling */
/* Footer Styling */
.site-footer .footer-about {
    max-width: 800px;
    margin: 0 auto 20px auto;
    line-height: 1.8;
    font-size: 16px;
}
.site-footer p { 
    margin: 0 0 10px 0; 
}

/* Footer Specific Menu Override */
.site-footer .site-menu { 
    background-color: transparent; 
    border: none;
    padding: 10px 0 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.site-footer .site-menu a { 
    color: #fff; 
}
.site-footer .site-menu a:hover { 
    color: #3498db; 
}

/* Responsive Mobile Screen Collapse */
/* Responsive Mobile Screen Collapse */
@media (max-width: 768px) { 
    /* Changes side-by-side layout into a top-to-bottom stack */
    .grid-container { 
        display: flex !important;
        flex-direction: column;
        padding: 15px; 
    } 
    
    /* Makes the story take up the full width of the phone screen */
    .story-column {
        width: 100%;
        padding: 15px; /* Slightly smaller padding so text fits nicely */
        box-sizing: border-box;
    }

    /* Pushes the sidebar directly under the story and spreads ads horizontally */
    .sidebar { 
        width: 100%;
        margin-top: 25px;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    } 

    /* Changes ads from vertical stacked blocks to side-by-side rows on mobile */
    .sidebar a {
        margin-bottom: 0;
        display: inline-block;
    }
}