/* बेसिक रीसेट */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #fdfbf7; color: #333; overflow-x: hidden; }

/* मैरून हेडर और लोगो */
.header { background-color: #5c0819; color: #f2c75c; display: flex; align-items: center; justify-content: center; padding: 25px 20px; position: relative; border-bottom: 3px solid #b38b36; }

/* 🌟 डेस्कटॉप लोगो का फाइनल फिक्स - 1mm (5px) का सटीक एडजस्टमेंट 🌟 */
.main-logo { 
    position: absolute; 
    left: max(20px, calc(50vw - 585px)); 
    height: 85px; 
    width: 85px; 
    object-fit: contain; 
    background-color: #fdfbf7; 
    border-radius: 50%; 
    border: 3px solid #f2d272; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.3); 
}

.site-title { font-size: 3.5rem; margin: 0; font-family: 'Georgia', serif; text-align: center; }

/* 🌟 थ्री-डॉट (हैमबर्गर) मेनू बटन (डेस्कटॉप पर छिपा रहेगा) 🌟 */
.menu-toggle { display: none; color: #f2c75c; font-size: 28px; cursor: pointer; }

/* नेविगेशन बार */
.nav-bar { background-color: #d4af37; padding-top: 15px; text-align: center; border-bottom: 4px solid #8c6d1d; }
.nav-links { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; padding: 0 10px; }
.nav-links li a { text-decoration: none; background-color: #faeab8; color: #5c0819; padding: 10px 18px; display: block; font-weight: bold; border-radius: 10px 10px 0 0; transition: 0.3s; font-size: 14px; }
.nav-links li a:hover { background-color: #fff8e7; padding-bottom: 12px; }

/* हीरो सेक्शन (लाइब्रेरी इमेज) */
.hero-section { background: url('images/indian_library.jpg') no-repeat center center; background-size: cover; height: 40vh; display: flex; align-items: center; justify-content: center; position: relative; }
.hero-section::before { content: ''; position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5); }
.hero-text { position: relative; color: #fff; font-size: 2.5rem; text-shadow: 2px 2px 10px #000; text-align: center; padding: 0 20px; line-height: 1.3; }

/* मुख्य लेआउट */
.main-container { display: flex; max-width: 1200px; margin: 40px auto; gap: 30px; padding: 0 20px; }
.left-content { flex: 3; width: 100%; } 
.right-sidebar { flex: 1; width: 100%; } 

/* सोशल मीडिया आइकन्स (Round Design) */
.social-box { display: flex; justify-content: center; gap: 12px; margin-bottom: 25px; flex-wrap: wrap; }
.social-icon { display: flex; align-items: center; justify-content: center; width: 45px; height: 45px; border-radius: 50%; color: #fff; text-decoration: none; font-size: 1.2rem; transition: transform 0.3s; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
.social-icon:hover { transform: scale(1.1); color: #fff; }
.fb { background-color: #3b5998; }
.yt { background-color: #ff0000; }
.ig { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.tw { background-color: #000000; }
.pi { background-color: #bd081c; }

/* सेक्शन हेडिंग */
.section-heading { color: #e6005c; font-size: 2.2rem; border-bottom: 2px solid #ddd; padding-bottom: 10px; margin-bottom: 25px; text-align: center; font-weight: bold; }

/* स्टोरी ग्रिड */
.story-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* कार्ड का डिज़ाइन */
.story-card { border: 3px solid #f2d272; border-radius: 4px; overflow: hidden; background-color: #053b47; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
.story-image { width: 100%; height: 200px; object-fit: cover; border-bottom: 3px solid #f2d272; background-color: #fff; }
.story-body { padding: 20px; }
.story-badge { background-color: #ffdb58; color: #000; font-weight: bold; font-size: 13px; padding: 5px 15px; border-radius: 15px; display: inline-block; margin-bottom: 15px; text-transform: uppercase; }
.story-title { color: #fff; font-size: 1.1rem; margin-bottom: 20px; line-height: 1.5; height: 55px; overflow: hidden; }
.read-more-btn { border: 2px solid #ffdb58; color: #fff; text-decoration: none; padding: 8px 20px; border-radius: 20px; font-size: 14px; display: inline-block; transition: 0.3s; font-weight: bold; }
.read-more-btn:hover { background-color: #ffdb58; color: #000; }

/* साइडबार डिज़ाइन */
.sidebar-box { background-color: #053b47; border: 3px solid #f2d272; border-radius: 8px; padding: 20px; margin-bottom: 20px; text-align: center; }
.sidebar-title { color: #fff; border: 2px solid #f2d272; padding: 10px; border-radius: 4px; margin-bottom: 15px; font-weight: bold; }
.sidebar-menu { list-style: none; padding: 0; }
.sidebar-menu li { margin-bottom: 10px; }
.sidebar-menu li a { display: block; background-color: #fff; color: #000; text-decoration: none; padding: 12px; font-weight: bold; border-radius: 4px; border: 2px solid #053b47; transition: 0.3s; }
.sidebar-menu li a:hover { background-color: #ffdb58; border-color: #d4af37; }

/* फुटर रिस्पॉन्सिव लिंक्स */
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 15px; margin-bottom: 20px; }
.footer-links a { color: #ff007f; text-decoration: none; font-weight: bold; font-size: 15px; transition: 0.3s; }
.footer-links a:hover { color: #fff; }

/* 🌟 सिंगल स्टोरी पेज (Read More) का नया डिज़ाइन 🌟 */
.single-post-box { background: #fff; padding: 30px; border-radius: 8px; border: 2px solid #f2d272; box-shadow: 0 5px 15px rgba(0,0,0,0.05); margin-bottom: 30px; }
.single-post-title { color: #5c0819; font-size: 2.2rem; margin-top: 10px; margin-bottom: 20px; line-height: 1.4; border-bottom: 2px dashed #ddd; padding-bottom: 15px; }
.single-post-image { width: 100%; max-height: 400px; object-fit: cover; border-radius: 8px; margin-bottom: 25px; border: 3px solid #053b47; }
.single-post-content { font-size: 1.15rem; line-height: 1.8; color: #333; text-align: justify; }


/* 📱 मोबाइल और टैबलेट के लिए पूरी तरह रिस्पॉन्सिव कोडिंग 📱 */
@media (max-width: 990px) {
    .story-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .main-container { flex-direction: column; } 
    .hero-text { font-size: 1.8rem; }
    .section-heading { font-size: 1.8rem; }
    
    /* सिंगल पोस्ट पेज की मोबाइल सेटिंग */
    .single-post-box { padding: 15px; }
    .single-post-title { font-size: 1.5rem; }
    .single-post-content { font-size: 1rem; }

    /* 🌟 1. मोबाइल हेडर का ऐप जैसा डिज़ाइन (लोगो-नाम-मेनू) 🌟 */
    .header { 
        flex-direction: row; 
        justify-content: space-between; 
        padding: 12px 20px; 
    }
    
    .main-logo { 
        position: relative; 
        left: 0; 
        height: 50px; 
        width: 50px; 
        border-width: 2px; /* मोबाइल पर थोड़ा पतला बॉर्डर */
    }
    
    .site-title { 
        position: absolute; 
        left: 50%; 
        transform: translateX(-50%); /* यह नाम को हमेशा बिल्कुल सेंटर में रखेगा */
        font-size: 2rem; 
    }
    
    .menu-toggle { display: block; z-index: 100; margin-top: 5px; }

    /* 🌟 2. मोबाइल पर नेविगेशन बार (छुपा हुआ) 🌟 */
    .nav-bar { display: none; padding-top: 5px; }
    
    /* 🌟 3. जब मेनू खुलेगा (Active State) 🌟 */
    .nav-bar.active { 
        display: block; 
        background-color: #d4af37; 
        border-top: 2px solid #5c0819; 
    }
    
    .nav-links { flex-direction: column; padding: 15px; align-items: stretch; }
    .nav-links li { width: 100%; }
    .nav-links li a { border-radius: 4px; margin-bottom: 8px; text-align: center; padding: 12px; font-size: 15px; }
}

@media (max-width: 500px) {
    .story-grid { grid-template-columns: 1fr; } 
    .story-image { height: 180px; }
    /* बहुत छोटे फ़ोन के लिए नाम थोड़ा और छोटा */
    .site-title { font-size: 1.6rem; }
}