/*
 Theme Name:   Blocksy Child
 Template:     blocksy
*/

/* --- बेस स्टाइल --- */
body { background-color: #f0f2f5 !important; font-family: sans-serif; margin: 0; padding: 0; }

.main-header {
    background: #0033a0 !important;
    padding: 10px 5%;
    position: sticky; top: 0; z-index: 10005;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.header-content-wrapper {
    display: flex; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto;
}

/* लोगो स्टाइल */
.logo-container { display: flex !important; align-items: center; text-decoration: none; }
.logo-z {
    background: #ffffff; color: #0033a0; width: 35px; height: 35px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; font-weight: 900; border-radius: 6px; margin-right: 8px;
}
.logo-text { color: #ffffff !important; font-size: 22px; font-weight: bold; }

/* मेनू स्टाइल */
.header-menu { list-style: none; display: flex; margin: 0; padding: 0; }
.header-menu li a { color: white !important; padding: 10px 15px; text-decoration: none; font-weight: bold; font-size: 14px; }

/* शेयर बार स्टाइल */
.share-bar { position: fixed; bottom: 25px; right: 20px; display: flex; flex-direction: column; gap: 12px; z-index: 20000; }
.share-btn { width: 48px; height: 48px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: white !important; box-shadow: 0 4px 12px rgba(0,0,0,0.25); font-size: 22px; text-decoration: none; }
.whatsapp { background: #25D366; }
.telegram { background: #0088cc; }
.facebook { background: #1877F2; }

/* मोबाइल के लिए */
@media screen and (max-width: 768px) {
    .header-content-wrapper { flex-direction: column; }
    .header-menu { margin-top: 10px; overflow-x: auto; width: 100%; justify-content: center; }
}

/* किसी भी हाल में एक लाइन में लाने के लिए */
.nav-container ul, 
.nav-container .header-menu, 
#site-header ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* नीचे गिरने से रोकना */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: auto !important; /* स्क्रॉलिंग के लिए */
}

.nav-container ul li, 
.nav-container .header-menu li {
    display: inline-block !important;
    flex: 0 0 auto !important; /* सिकुड़ने से रोकना */
}

.nav-container ul li a, 
.nav-container .header-menu li a {
    color: #ffffff !important;
    display: block !important;
    padding: 15px 20px !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* टेक्स्ट एक लाइन में रखना */
    font-weight: bold !important;
}

/* मोबाइल के लिए विशेष स्क्रॉल बार छुपाने का तरीका (Optional) */
.nav-container {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* Firefox के लिए स्क्रॉल बार छुपाना */
}
.nav-container::-webkit-scrollbar {
    display: none; /* Chrome/Safari के लिए स्क्रॉल बार छुपाना */
}

/* मुख्य कंटेंट बॉक्स को बीच में लाने के लिए */
.main-wrapper { 
    max-width: 850px !important; /* वही साइज जो ब्लॉगर में था */
    margin-left: auto !important; 
    margin-right: auto !important; 
    padding: 15px !important; 
    min-height: 400px !important;
    background-color: #ffffff; /* पोस्ट के पीछे का सफ़ेद हिस्सा */
    box-shadow: 0 0 10px rgba(0,0,0,0.05); /* हल्का सा शैडो जो प्रोफेशनल लगता है */
}

/* स्क्रॉलिंग चालू करने के लिए मुख्य सेटिंग्स */
.nav-container {
    width: 100% !important;
    background: #0033a0 !important;
    overflow-x: auto !important; /* यह सबसे जरूरी है: हॉरिजॉन्टल स्क्रॉल चालू करेगा */
    overflow-y: hidden !important; /* ऊपर-नीचे का स्क्रॉल बंद रखेगा */
    display: block !important; /* फ्लेक्स के अंदर कभी-कभी स्क्रॉल काम नहीं करता, इसलिए ब्लॉक */
    -webkit-overflow-scrolling: touch; /* मोबाइल पर स्मूथ स्क्रॉल के लिए */
}

.header-menu {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important; /* किसी भी हाल में दूसरी लाइन में नहीं जाएगा */
    width: max-content !important; /* यह जादुई लाइन है: यह मेनू को उसकी असली चौड़ाई देगी चाहे वो स्क्रीन से बाहर जाए */
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.header-menu li {
    flex: 0 0 auto !important; /* मेनू आइटम्स को पिचकने (Shrink) से रोकेगा */
}

/* स्क्रॉल बार को सुंदर या अदृश्य बनाने के लिए (Optional) */
.nav-container::-webkit-scrollbar {
    height: 0px; /* स्क्रॉल बार की मोटाई 0 कर देगा ताकि वह दिखे नहीं पर काम करे */
}


/* मोबाइल पर यह सट न जाए इसके लिए */
@media screen and (max-width: 850px) {
    .main-wrapper {
        width: 100% !important;
        margin: 0 !important;
    }
}


/* फुटर का बैकग्राउंड और टेक्स्ट अलाइनमेंट */
.footer-section { 
    background: #1a202c !important; 
    color: #ffffff !important; 
    padding: 40px 20px !important; 
    text-align: center !important; 
    margin-top: 50px !important;
    width: 100% !important;
    display: inline-block !important; /* ब्लॉक को सही से सेट करने के लिए */
    box-sizing: border-box; /* पैडिंग को विड्थ के अंदर रखने के लिए */
}

/* कॉपीराइट टेक्स्ट के लिए */
.footer-section p {
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    font-size: 14px;
    letter-spacing: 0.5px;
}

/* लोगो और स्लोगन की सजावट */
.logo-brand-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.online-tag {
    font-size: 14px;
    margin-left: 5px;
    font-weight: normal;
    opacity: 0.9;
}

.site-description {
    color: #ffffff;
    font-size: 11px;
    opacity: 0.8;
    margin-top: -2px;
    font-weight: normal;
    display: block;
}

/* PC पर मेनू को दाहिने शिफ्ट करने के लिए */
@media screen and (min-width: 769px) {
    .header-content-wrapper {
        display: flex;
        justify-content: space-between !important; /* यह लोगो को बाएं और मेनू को दाएं रखेगा */
        align-items: center;
        max-width: 1200px;
        margin: 0 auto;
    }

    .nav-container {
        width: auto !important; /* PC पर पूरी चौड़ाई नहीं लेगा ताकि दाएं शिफ्ट हो सके */
        background: transparent !important; /* बैकग्राउंड नीला ही दिखेगा हेडर की वजह से */
    }
}

/* मोबाइल पर सब वैसा ही रहे जैसा अभी सही हुआ है */
@media screen and (max-width: 768px) {
    .header-content-wrapper {
        flex-direction: column;
        align-items: center;
    }
    .logo-container {
        margin-bottom: 10px;
    }
}


/* मोबाइल पर सोशल शेयर बटनों को ऊपर खिसकाना */
@media screen and (max-width: 768px) {
    .share-bar {
        bottom: 100px !important; /* इसे आप अपनी ज़रूरत के हिसाब से 80px से 120px तक रख सकते हैं */
        right: 15px !important;
        gap: 8px !important;
    }

    .share-btn {
        width: 42px !important;  /* मोबाइल पर थोड़ा छोटा ताकि डिस्टर्ब न करे */
        height: 42px !important;
        font-size: 20px !important;
    }
}








/* फुटर के लिए बिल्कुल नया और शक्तिशाली कोड */
footer.footer-section {
    text-align: center !important;
    display: block !important;
}

/* मेनू कंटेनर को फ्लेक्स बनाना */
.footer-menu-links div, 
.footer-menu-links ul {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    list-style-type: none !important; /* डॉट्स हटाने के लिए */
    padding: 0 !important;
    margin: 0 auto 15px auto !important;
}

/* लिस्ट आइटम्स को एक लाइन में सेट करना */
.footer-menu-links li {
    display: inline-block !important;
    list-style: none !important;
    margin: 5px 15px !important; /* लिंक्स के बीच गैप */
}

/* लिंक स्टाइल */
.footer-menu-links li a {
    color: #ffffff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    white-space: nowrap !important; /* टेक्स्ट को टूटने से रोकना */
}

.footer-menu-links li a:hover {
    text-decoration: underline !important;
}

/* मोबाइल पर भी एक लाइन में रखने या बेहतर दिखाने के लिए */
@media screen and (max-width: 600px) {
    .footer-menu-links li {
        margin: 5px 8px !important;
    }
}



.footer-section ul li { display: inline-block !important; }
.footer-section ul li a { color: #ffffff !important; text-decoration: none !important; font-size: 14px !important; }
.footer-section ul li a:hover { text-decoration: underline !important; }