/* ... (आपका पूरा CSS यहाँ अपरिवर्तित रहेगा) ... */
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
background: #f7f7f7;
}
a { text-decoration: none; color: #000; }
a:hover { color: #cc0000; }

/* HEADER */
.masthead {
background: #fff;
border-bottom: 1px solid #e0e0e0;
}
.header-container {
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 15px;
}
.logo-text {
color: #cc0000;
font-size: 32px;
font-weight: 900;
}

/* MOBILE LEFT MENU */
.mobile-left-menu {
display: none;
overflow-x: auto;
background: #fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 5px 0;
}
.mobile-left-menu div {
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 8px 12px;
font-size: 14px;
color: #cc0000;
white-space: nowrap;
}
.mobile-left-menu i, .mobile-left-menu img {
width: 24px;
height: 24px;
margin-bottom: 4px;
}

/* DISTRICT BAR */
.district-bar {
display: none;
background: #fff;
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
white-space: nowrap;
overflow-x: auto;
padding: 8px 10px;
}
.district-bar span {
display: inline-block;
margin-right: 15px;
color: #cc0000;
font-weight: 600;
cursor: pointer;
}
.district-bar span:hover { text-decoration: underline; }

/* LAYOUT - UPDATED */
.main-content-wrapper-bhaskar {
max-width: 1200px;
margin: 20px auto;
display: grid;
grid-template-columns: 200px 1fr 300px;
gap: 20px;
/* FIX: Ensures sidebars match the height of the main content for correct layout rendering */
align-items: stretch; 
}

/* LEFT SIDEBAR */
.left-nav-sidebar {
background: #fff;
padding: 15px 0;
border-radius: 4px;
border: 1px solid #e0e0e0;
/* To allow proper scrolling, do not make it sticky if the main column is very long */
}
.nav-item {
padding: 10px 15px;
font-weight: 500;
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
}
.nav-item i { color: #cc0000; font-size: 20px; }
.nav-item img { width: 20px; height: 20px; }

.nav-item:hover {
background-color: #f0f0f0;
}

/* CENTER CONTENT */
.center-main-content {
background: #fff;
padding: 15px;
border-radius: 4px;
}

/* TOP NEWS */
.main-top-news { position: relative; }
.main-top-news img { width: 100%; height: 380px; object-fit: cover; border-radius: 6px; }
.top-news-text {
position: absolute; bottom: 20px; left: 20px;
background: rgba(0,0,0,0.7);
color: #fff;
padding: 15px 20px; border-radius: 6px;
max-width: 90%;
}
.top-news-text h2 { margin-top: 0; font-size: 20px; }
.top-news-text a { color: #fff; }
.category-tag {
background: #cc0000; padding: 3px 8px;
font-size: 13px; border-radius: 3px; color: #fff;
}

/* CATEGORY NEWS */
.category-head {
margin: 25px 0 15px;
border-left: 5px solid #cc0000;
padding-left: 10px;
font-size: 20px;
}
.category-head a { color: #000; }
.category-head a:hover { color: #cc0000; }
.category-head i { font-size: 16px; margin-left: 5px; }

/* SMALL NEWS STYLES */
.small-top-news {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
padding-bottom: 10px;
border-bottom: 1px dotted #e0e0e0;
}
.small-top-news:last-child { border-bottom: none; }
.small-news-text {
flex-grow: 1;
padding-right: 15px;
}
.small-news-text b { font-size: 16px; font-weight: 600; }
.small-top-news img {
width: 100px;
height: 70px;
object-fit: cover;
border-radius: 4px;
flex-shrink: 0;
}
.category-small {
font-size: 12px;
color: #cc0000;
font-weight: 600;
margin-top: 5px;
}

/* RIGHT AD SIDEBAR - FIX RETAINED */
.right-ad-sidebar {
display: flex;
flex-direction: column;
gap: 20px;
/* 'sticky', 'max-height', and 'overflow-y' removed */
padding-right: 5px;
}
.ad-box-vertical {
background: #fff;
padding: 10px;
border: 1px solid #e0e0e0;
border-radius: 4px;
text-align: center;
flex-shrink: 0;
}
.ad-box-vertical img {
max-width: 100%;
height: auto;
display: block;
margin: 0 auto;
}

/* WEATHER BOX */
.weather-box {
background: #fff;
padding: 15px;
border-radius: 4px;
border: 1px solid #e0e0e0;
text-align: center;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
flex-shrink: 0;
min-height: 200px;
}
.weather-box h4 {
margin-top: 0;
color: #1c0668;
font-size: 18px;
border-bottom: 2px solid #cc0000;
padding-bottom: 8px;
margin-bottom: 15px;
}
.weather-icon {
font-size: 40px;
color: #f39c12;
margin-bottom: 10px;
}
.temperature {
font-size: 32px;
font-weight: bold;
color: #cc0000;
margin-bottom: 5px;
}
.city-name {
font-size: 16px;
color: #555;
margin-bottom: 10px;
}
.weather-details {
font-size: 14px;
color: #333;
display: flex;
justify-content: space-around;
padding: 10px 0;
border-top: 1px solid #eee;
}
.weather-detail-item {
display: flex;
flex-direction: column;
align-items: center;
}
.weather-detail-item i {
font-size: 18px;
margin-bottom: 3px;
color: #1c0668;
}

/* FOOTER - UPDATED */
footer {
text-align: center;
background: #1c0668;
color: #fff;
padding: 20px;
/* FIX: Reduced margin-top to ensure it appears directly after the main content wrapper */
margin-top: 0; 
/* You might want to add some space here if the content directly touches the footer */
padding-top: 40px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
.main-content-wrapper-bhaskar {
 grid-template-columns: 1fr;
 margin: 10px auto;
 gap: 10px;
 align-items: stretch; /* Added for consistency */
}
.left-nav-sidebar { display: none; }
.mobile-left-menu { display: flex; }
.right-ad-sidebar {
 display: flex;
 position: static;
 max-height: none;
 overflow-y: visible;
 padding-right: 0;
}
.center-main-content { padding: 10px; }
.main-top-news img { height: 250px; }
.top-news-text {
 bottom: 10px; left: 10px; padding: 10px 15px;
}
.top-news-text h2 { font-size: 16px; }
}

@media (min-width: 993px) {
    /* 1. Body पर ओवरफ्लो सेट करें */
    body { 
        overflow: auto; 
    } 

    /* 2. लेफ्ट साइडबार (Left Sidebar) के लिए बदलाव */
    .left-nav-sidebar { 
        position: sticky; 
        top: 20px; /* या आपके header की ऊँचाई के अनुसार */
        height: calc(100vh - 40px); /* लगभग पूरी स्क्रीन की ऊँचाई - ऊपर और नीचे का मार्जिन */
        overflow-y: auto; /* अगर कंटेंट ज़्यादा हो तो साइडबार के अंदर स्क्रॉल हो */
    } 

    .center-main-content { 
        max-height: none; 
        overflow-y: visible; 
    }
    
    /* 3. राइट साइडबार (Right Sidebar) के लिए बदलाव */
    .right-ad-sidebar { 
        position: sticky; 
        top: 20px; /* या आपके header की ऊँचाई के अनुसार */
        height: calc(100vh - 40px); /* लगभग पूरी स्क्रीन की ऊँचाई - ऊपर और नीचे का मार्जिन */
        overflow-y: auto; /* यह सबसे ज़रूरी है! */
        padding-right: 5px; /* यदि आपने इसे पहले हटाया नहीं है */
    }
}

/* --- News Detail Page Styling (CSS) --- */

/* Ensure the main content section has space and a background */
.center-main-content {
    padding: 20px;
    background-color: #fff;
}

.news-details-container {
    padding: 0 10px;
}

.news-detail-title {
    font-family: 'Arial', sans-serif; /* Use a readable font */
    text-align: justify;
    font-size: 2.0em;
    font-weight: 700;
    line-height: 1.2;
    color: #333;
    margin-bottom: 15px;
    border-bottom: 2px solid #eee; /* Subtle separator */
    padding-bottom: 10px;
}

.news-metadata {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 25px;
    display: flex; /* Helps align the elements */
    align-items: center;
}

.category-tag-detail {
    background-color: #d9534f; /* A clear, visible red/maroon for category */
    color: white;
    padding: 3px 8px;
    border-radius: 3px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85em;
}

.posting-date-detail {
    margin-left: 10px;
}

.news-detail-image {
    margin: 25px 0;
    overflow: hidden;
    border-radius: 5px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* More pronounced shadow */
}

.news-detail-image img {
    width: 100%; 
    height: auto;
    display: block;
}

.news-detail-content {
    font-size: 1.1em;
    line-height: 1.8;
    color: #444;
    text-align: justify; /* Justify text for a professional look */
    /* Targeting the <p> tags inside the content (which are coming from the DB) */
}

.news-detail-content p {
    margin-bottom: 20px; /* Space between paragraphs */
}