/*
Theme Name: Samastipur News
Theme URI: https://samastipurnews.in/
Description: Samastipur News Child theme for mobile responsive news blog website. Using this child theme you can easily create a news website. This GeneratePress Child theme design by samastipurnews.in
Author: SamastipurNews.in
Author URI: https://samastipurnews.in/author/
Template: generatepress
Version: 1.3
Keywords: बिहार न्यूज़,समस्‍तीपुर न्यूज़,Samastipur News,Samastipur Election News,Bihar chunav,Bihar Election,Bihar Politics News,Bihar News,Lok Sabha,lok sabha election,election news,Hindi Samachar,हिंदी न्यूज़,hindi news,latest news in hindi,breaking news in hindi,taza samachar,aaj ki khabar,aaj ki taza khabar,आज की ताजा ख़बरें,ब्रेकिंग न्यूज़.,हिंदी समाचार
*/

/* --- Base and General Styles --- */

:root {
    touch-action: pan-x pan-y;
    height: 100%;
}

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@100..900&family=Source+Serif+4:opsz,wght@8..60,200..900&display=swap');

/* Base Typography */
body,
p,
li,
td,
span {
    font-family: 'Noto Sans Devanagari', 'Roboto', sans-serif;
    font-size: 17px;
    line-height: 1.7;
    color: #111;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    color: #222;
    line-height: 1.4;
}

img {
    border-radius: 10px;
}

.avatar {
    border-radius: 50%;
}

/* Scrollbar Customization */
::-webkit-scrollbar {
    width: 5px;
    height: 0;
    -webkit-appearance: none;
}

::-webkit-scrollbar-track {
    background: #d1d8eb;
}

::-webkit-scrollbar-thumb {
    background-color: #8b0000;
    border-radius: 20px;
}

/* --- Header and Navigation --- */

.main-navigation {
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding-right: 10px;
    position: relative;
}

div > button > span.gp-icon.icon-menu-bars > svg {
    height: 1.6em;
    width: 1.6em;
    top: 0.5em;
}

.navigation-branding img,
.site-logo.mobile-header-logo img {
    padding: 7px 0 !important;
}

.main-navigation.has-branding .menu-toggle,
.main-navigation.has-sticky-branding.navigation-stick .menu-toggle {
    padding-right: 10px;
}

/* --- Off-Canvas Menu --- */
#generate-slideout-menu .slideout-menu li {
    border-bottom: 1px solid #afafafb3;
}

.offside-js--is-open .slideout-overlay {
    background: rgba(0, 0, 0, .2);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    backdrop-filter: saturate(180%) blur(10px);
}

.offcanvaslogo {
    margin: 20px auto;
    width: 120px;
}

/* --- Content and Typography --- */

.entry-title {
    font-size: 28px;
    font-weight: bold;
    line-height: 1.3;
    color: #222;
}

.entry-content h2 {
    color: #fff;
    font-size: 25px;
    font-weight: bold;
    line-height: 1.4;
    padding: 10px 15px;
    border-radius: 8px;
    margin: 25px 0 15px;
}

.entry-content h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 20px 0 10px;
}

div.dynamic-entry-content > p {
    text-align: justify;
}

/* --- Images and Media --- */

.page-header-image-single .attachment-full {
    box-shadow: rgba(23, 43, 99, .3) 0 7px 28px;
    border-radius: 16px;
    margin-bottom: -5px;
    transition: opacity 0.3s ease-in-out;
}

.wp-block-image {
    padding: 10px 0 20px;
}

.wp-block-image img {
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.06);
    border: 1px solid #cfcfcf;
    padding: 3px;
}

/* --- Sidebar --- */

.sidebar {
    background-color: #ffffff !important;
}

.inside-right-sidebar {
    position: sticky;
    top: 85px;
}

/* --- Plugins and Widgets --- */

/* WPLite Ads */
.wplite-banner-ads {
    margin-bottom: 15px;
}

/* Rank Math Breadcrumb */
.rank-math-breadcrumb p {
    background: none;
    color: #000;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 13px; /* साइज़ 10px से 13px किया गया */
    font-weight: 700;
}

nav.rank-math-breadcrumb {
    margin-bottom: 10px;
    color: #c9c5c5 !important;
    border-bottom: 1px solid #c9c5c5 !important;
}

nav.rank-math-breadcrumb p {
    margin-bottom: 5px;
    padding: 0;
    font-size: 13px; /* यहाँ भी साइज़ 13px किया गया */
    color: #838383;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

nav.rank-math-breadcrumb a {
    color: var(--color-background-hover);
}

/* Table of Contents */
#toc_container {
    background: transparent;
    border: 1px solid #aaa;
    padding: 0;
}

#toc_container li a {
    display: block;
    width: 100%;
    color: var(--link-text);
    padding: 10px 1em;
    border-top: 1px solid #aaa;
}

#toc_container span.toc_toggle {
    font-weight: 400;
    background: #fff;
    padding: 3px 20px;
    font-size: 18px;
    text-transform: capitalize;
    text-align: center;
    display: block;
}

/* --- Related Posts Section --- */

.related-posts-section {
    margin: 40px 0;
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.related-posts-section .related-posts-title-text {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    text-align: center;
    margin-bottom: 25px;
    padding-bottom: 10px;
    border-bottom: 2px solid #0073aa;
    width: auto;
    display: table;
    margin-left: auto;
    margin-right: auto;
}

/* FIX: Hide mobile header on desktop by default */
.mobile-related-stories-header {
    display: none;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    justify-content: center;
    margin-bottom: 40px;
    padding: 0;
    list-style: none;
    margin-left: 0;
}

.related-post-card {
    background-color: #fff;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}

.related-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.related-post-card a {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.related-post-card .post-thumbnail-wrapper {
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
    position: relative;
    overflow: hidden;
    background-color: #e0e0e0;
}

.related-post-card .related-post-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease-in-out;
    border-radius: 0;
    box-shadow: none;
    border: none;
}

.related-post-card:hover .related-post-thumbnail {
    transform: scale(1.05);
}

.related-post-card .post-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
    margin: 10px;
    line-height: 1.4;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Social Sharing --- */

.float-social-wrapper {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
    right: 0;
}

.float-social-sharing {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: flex-start;
    min-height: 30px;
    font-size: 12px;
    padding: 10px 7px;
}

/* --- Post Navigation --- */
.nav-next,
.nav-previous {
    font-weight: 600;
    color: #5d0000;
    font-size: 16px;
    padding: 8px;
    text-align: left;
    margin-bottom: 15px;
    border-radius: 10px;
}

.nav-next {
    background: #e6f7ff;
    border-left: 6px solid #0c4ca4;
}

.nav-previous {
    background: #e6fff6;
    border-left: 6px solid #02a569;
}

/* --- Bottom Mobile Menu --- */
#BottomMenu {
    display: none;
}

@media (max-width: 991px) {
    #BottomMenu {
        background: #fff;
        display: block !important;
        width: 100%;
        height: 65px;
        overflow-x: scroll;
        overflow-y: hidden;
        position: fixed;
        bottom: 0;
        z-index: 1;
        box-shadow: 0 -10px 10px -10px rgba(115, 115, 115, .45);
        border-radius: 20px 20px 0 0;
    }
    ul#bmul {
        margin-top: 12px;
        margin-left: 0 !important;
    }
    #BottomMenu li a {
        color: #747474;
        font-size: 15px;
        font-weight: 600;
    }
    .bml {
        float: left;
        color: #fff;
        font-size: 16px;
        list-style: none;
        text-align: center;
        width: 25%;
    }
    #BottomMenu .svg-icon {
        display: block;
        color: #d4005f;
        margin: auto;
        height: 25px;
        width: 25px;
        padding-bottom: 2px;
    }
}

/* --- Mobile and Responsive Styles --- */

/* General Mobile Styles (up to 768px) */
@media (max-width: 768px) {
    body,
    p,
    li,
    td,
    span {
        font-size: 17px !important;
    }
    .entry-title {
        font-size: 24px !important;
    }
    .entry-content h2 {
        font-size: 20px !important;
    }
    .entry-content h3 {
        font-size: 18px !important;
    }
    .main-navigation .menu-toggle,
    .mobile-header .menu-toggle {
        position: absolute;
        top: 50%;
        right: 15px;
        transform: translateY(-50%);
        z-index: 1000;
    }
    .rank-math-breadcrumb p {
        margin: 0 10px;
    }
    .related-posts-grid {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .related-post-card {
        flex-direction: row;
        align-items: center;
        padding: 10px;
        width: 100%;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .related-post-card a {
        flex-direction: row;
        align-items: center;
    }
    .related-post-card .post-thumbnail-wrapper {
        width: 90px;
        height: 65px;
        padding-bottom: 0;
        flex-shrink: 0;
        border-radius: 4px;
        margin-right: 15px;
    }
    .related-post-card .related-post-thumbnail {
        border-radius: 4px;
    }

    /* FIX: Set correct font size for all related post titles on mobile */
    .related-post-card .post-title,
    .kkb-rp-link,
    .kkb-related-posttitle {
        font-size: 10px !important;
        font-weight: bold;
        margin: 0;
        font-family: 'Noto Sans Devanagari', 'Roboto', sans-serif;
    }
    
    /* FIX: Hide desktop header and show mobile header */
    .related-posts-section .related-posts-title-text {
        display: none;
    }
    .mobile-related-stories-header {
        display: block;
        font-size: 1.1em;
        font-weight: bold;
        color: #d63638;
        margin-bottom: 20px;
        text-align: left;
        padding-left: 10px;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
    }
    .mobile-related-stories-header span.dashicons {
        color: #d63638;
        margin-right: 8px;
        vertical-align: middle;
    }
}

/* Smaller Mobile Styles (up to 568px) */
@media (max-width: 568px) {
    .related-post-card {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .post-thumbnail-wrapper {
        width: 100px;
        height: 30px;
        border: none;
    }
    .mobile-related-stories-header {
        font-size: 1.4em;
    }
}

/* Very Small Mobile Styles (up to 480px) */
@media (max-width: 480px) {
    .related-post-card .post-thumbnail-wrapper {
        width: 80px;
        height: 60px;
        margin-right: 10px;
    }
}

/* Smallest Mobile Styles (up to 280px) */
@media (max-width: 280px) {
    .related-post-card {
        flex-direction: column;
        align-items: flex-start;
    }
    .post-thumbnail-wrapper {
        width: 100%;
        height: auto;
        padding-top: 56.25%;
        margin-right: 0;
        margin-bottom: 10px;
    }
}