/*
 Theme Name:   GeneratePress Child
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme
 Author:       Tom Usborne
 Author URI:   https://tomusborne.com
 Template:     generatepress
 Version:      0.1
*/

/* Title ke upar wali category ko style karne ke liye */
.custom-single-category {
    margin-bottom: 20px; /* Title aur Category ke beech ka gap */
    display: block;
    text-align: left; /* Left align rakhne ke liye */
}

/* Category link ko button jaisa look dene ke liye (agar border chahiye) */
.custom-single-category a {
    color: #e50914; /* Red color ya apna pasandida color code daalein */
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    border: 1px solid #e70000;
    padding: 2px 5px 0px 5px;
    border-radius: 4px;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Hover effect */
.custom-single-category a:hover {
    background-color: #e50914;
    color: #fff;
}
/* ---- Post Navigation Card with Thumbnail Styling ---- */

/* Main Container */
.post-navigation {
    display: flex !important;
    justify-content: space-between !important;
    gap: 20px !important;
    padding: 20px 0 !important;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

/* Individual Next & Previous cards */
.nav-previous, .nav-next {
    flex: 1 !important;
    width: 50% !important;
}

.nav-previous a, .nav-next a {
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
    text-decoration: none !important;
    padding: 10px !important;
    border: 1px solid #f0f0f0;
    border-radius: 8px;
    background-color: #f0f8ff;
    transition: background-color 0.2s, border-color 0.2s;
}

.nav-previous a:hover, .nav-next a:hover {
    background-color: #f0f8ff; /* Hover highlight light-blue background */
    border-color: #1e73be;
}

/* Left Align for Previous and Right Align for Next */
.nav-next a {
    justify-content: flex-end !important;
    text-align: right !important;
}

/* Thumbnail Styling */
.nav-thumb {
    width: 60px !important;
    height: 60px !important;
    object-fit: cover !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
}

/* Placeholder box jab koi featured image na ho */
.nav-thumb-placeholder {
    width: 60px;
    height: 60px;
    background-color: #e0e0e0;
    border-radius: 6px;
    flex-shrink: 0;
}

/* Text Container inside links */
.nav-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;
}

/* Small Indicator Text (Previous / Next) */
.nav-direction {
    font-size: 11px !important;
    text-transform: uppercase;
    color: #888 !important;
    font-weight: bold;
}

/* Actual Post Title */
.nav-post-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Bada title hone par '...' dikhega */
}

/* Mobile Responsiveness (Ek ke niche ek card aa jayega) */
@media (max-width: 768px) {
    .post-navigation {
        flex-direction: column !important;
        gap: 10px !important;
    }
    .nav-previous, .nav-next {
        width: 100% !important;
    }
    .nav-next a {
        flex-direction: row-reverse !important; /* Image ko text ke baad hi rakhega */
        justify-content: flex-start !important;
        text-align: left !important;
    }
}
/* ---- Post Navigation Title Wrapping Fix ---- */

/* 1. Text Wrapper ko allow karein ki wo flexbox space ke hisab se stretch ho */
.nav-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex-grow: 1;
    min-width: 0; /* Flexbox overflow bugs ko rokne ke liye */
}

/* 2. Title ko cutne se rokein aur multiline wrapping allow karein */
.nav-post-title {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #333 !important;
    white-space: normal !important; /* nowrap ko normal kiya taaki next line me aaye */
    overflow: visible !important;   /* hidden ko hata diya */
    text-overflow: clip !important; /* ellipsis (...) ko disable kiya */
    line-height: 1.3 !important;    /* Lamba title hone par lines ke beech achha gap rahe */
}
/* ==========================================================================
   GENERATEPRESS PERFECT 2-COLUMN GRID + SEQUENCE FIX
   ========================================================================== */

@media (min-width: 769px) {
    /* 1. Archive aur Search Wrapper ko Grid me badlein */
    .archive .site-main,
    .search-results .site-main {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* Pure 2 Columns */
        gap: 10px !important; /* Cards ke beech ka gap */
        align-items: stretch !important;
    }

    /* 2. PAGE HEADER / TITLE (Bilkul Safe & Full Width) */
    .archive .site-main .page-header,
    .search-results .site-main .page-header,
    .archive .page-header, 
    .search-results .page-header {
        grid-column: 1 / -1 !important; /* Grid ke upar poori 100% width lega */
        display: block !important;
        width: 100% !important;
        float: none !important;
        margin-bottom: 0px !important;
    }

    /* 3. Sabhi Articles standard grid block banege */
    .archive .site-main article,
    .search-results .site-main article {
        width: 100% !important;
        float: none !important;
        margin: 0 !important;
        grid-column: auto !important;
    }

    /* 4. SEQUENCE FIX: Inside Article ko Column container banana */
    .archive .site-main .inside-article,
    .search-results .site-main .inside-article {
        display: flex !important;
        flex-direction: column !important; /* Element ko upar se neeche lagane ke liye */
        height: 100% !important;
        box-sizing: border-box !important;
    }

    /* 5. STEP 1: Featured Image (Sabse Upar) */
    .archive .site-main .post-image,
    .search-results .site-main .post-image {
        order: 1 !important; /* Pehla number */
        margin: 0 0 15px 0 !important;
        width: 100% !important;
    }

    .archive .site-main .post-image img,
    .search-results .site-main .post-image img {
        width: 100% !important;
        height: 200px !important; /* Fixed height landscape look ke liye */
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* 6. STEP 2: Post Title (Image ke baad) */
    .archive .site-main .entry-header,
    .search-results .site-main .entry-header {
        order: 2 !important; /* Doosra number */
        margin-bottom: 10px !important;
    }

    /* 7. STEP 3: Post Meta / Date / Author (Sabse Neeche) */
    .archive .site-main .entry-meta,
    .search-results .site-main .entry-meta,
    .archive .site-main .entry-summary,
    .search-results .site-main .entry-summary {
        order: 3 !important; /* Teesra number */
        margin-top: auto !important; /* Meta ko card ke bilkul bottom me chipka dega */
    }
}

/* ==========================================================================
   GLOBAL CARD BEAUTIFICATION
   ========================================================================== */
.archive .site-main .inside-article,
.search-results .site-main .inside-article {
    background: #ffffff !important;
    border: 1px solid #eef2f5 !important;
    border-radius: 18px !important;
    padding: 20px !important;
}
/* Archive aur Search pages se excerpt ko hide karne ke liye */
.archive .site-main .entry-summary,
.search-results .site-main .entry-summary,
.archive .site-main .post-excerpt,
.search-results .site-main .post-excerpt {
    display: none !important;
}
/* ==========================================================================
   MOBILE VIEW FIX (1 Post Per Row + Perfect Sequence)
   ========================================================================== */
@media (max-width: 768px) {
    /* 1. Mobile me Grid ko 1 Column me badalne ke liye */
    .archive .site-main,
    .search-results .site-main {
        display: grid !important;
        grid-template-columns: repeat(1, 1fr) !important; /* Mobile me sirf 1 post per row */
        gap: 0px !important; /* Posts ke beech ka clean gap */
        align-items: stretch !important;
    }

    /* Page Header Mobile me full width rahega */
    .archive .site-main .page-header,
    .search-results .site-main .page-header,
    .archive .page-header, 
    .search-results .page-header {
        grid-column: 1 / -1 !important;
        display: block !important;
        width: 100% !important;
    }

    /* 2. Sequence Fix (Image -> Title -> Meta) */
    .archive .site-main .inside-article,
    .search-results .site-main .inside-article {
        display: flex !important;
        flex-direction: column !important;
        padding: 16px !important; /* Mobile par full card padding */
        height: 100% !important;
    }

    /* Mobile Image Size Settings */
    .archive .site-main .post-image,
    .search-results .site-main .post-image {
        order: 1 !important; /* Image sabse upar */
        margin: 0 0 12px 0 !important;
        width: 100% !important;
    }

    .archive .site-main .post-image img,
    .search-results .site-main .post-image img {
        height: 180px !important; /* Full width post ke liye perfect height */
        width: 100% !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    /* Mobile Title Settings */
    .archive .site-main .entry-header,
    .search-results .site-main .entry-header {
        order: 2 !important; /* Title beech me */
        margin-bottom: 8px !important;
    }
    
    .archive .site-main .entry-title,
    .search-results .site-main .entry-title {
        font-size: 18px !important; /* Single post ke hisab se responsive size */
        line-height: 1.4 !important;
    }

    /* Mobile Meta Settings */
    .archive .site-main .entry-meta,
    .search-results .site-main .entry-meta {
        order: 3 !important; /* Meta sabse neeche */
        margin-top: auto !important;
    }

    /* Excerpt ko mobile me bhi hide rakhne ke liye */
    .archive .site-main .entry-summary,
    .search-results .site-main .entry-summary,
    .archive .site-main .post-excerpt,
    .search-results .site-main .post-excerpt {
        display: none !important;
    }
}
/* ==========================================================================
   TITLE & META GAP FIX (Desktop & Mobile)
   ========================================================================== */

/* Desktop ke liye gap control */
@media (min-width: 769px) {
    .archive .site-main .entry-header,
    .search-results .site-main .entry-header {
        margin-bottom: 4px !important; /* Title ke theek niche ka gap (Default se kam kiya) */
    }
    
    .archive .site-main .entry-meta,
    .search-results .site-main .entry-meta {
        margin-top: 10px !important; /* Meta ke upar ka extra space hatane ke liye */
    }
}

/* Mobile ke liye gap control */
@media (max-width: 768px) {
    .archive .site-main .entry-header,
    .search-results .site-main .entry-header {
        margin-bottom: 2px !important; /* Mobile par bilkul barabar compact gap */
    }
    
    .archive .site-main .entry-meta,
    .search-results .site-main .entry-meta {
        margin-top: 0 !important;
    }
}

/* ==========================================================================
   PAGINATION DESIGN: CUSTOM VAR BACKGROUND + RED HOVER FILL (#e70000)
   ========================================================================== */

/* 1. Main container alignment */
.archive .site-main .paging-navigation,
.search-results .site-main .paging-navigation {
    grid-column: 1 / -1 !important; 
    width: 100% !important;
    display: block !important;
    clear: both !important;
    text-align: center !important; 
    margin: 40px 0 20px 0 !important; 
	background-color:#f7f8f9;
}

/* 2. Page Numbers spacing */
.archive .paging-navigation .nav-links,
.search-results .paging-navigation .nav-links {
    display: inline-flex !important;
    gap: 8px !important; 
    flex-wrap: wrap;
    justify-content: center;
}

/* Base style for all links and current page */
.paging-navigation .nav-links a,
.paging-navigation .nav-links .current {
    display: inline-block !important;
    padding: 8px 14px !important; 
    border-radius: 6px !important; 
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    transition: all 0.25s ease-in-out !important; 
    min-width: 40px !important; 
    box-sizing: border-box !important;
}

/* 3. NORMAL LINKS: Default me --base-2 background aur Red Border/Text */
.paging-navigation .nav-links a {
    background-color: var(--base-3) !important; /* Aapka custom background variable */
    color: #e70000 !important; 
    border: 1px solid #e70000 !important; 
}

/* 4. CURRENT PAGE: Hamesha completely filled rahega Red se */
.paging-navigation .nav-links .current {
    background-color: #e70000 !important; 
    color: #ffffff !important; 
    border: 1px solid #e70000 !important; 
}

/* 5. HOVER EFFECT: Mouse le jaane par Red Color Fill hoga */
.paging-navigation .nav-links a:hover {
    background-color: #e70000 !important; /* Full red on hover */
    color: #ffffff !important; 
    border-color: #e70000 !important; 
    transform: translateY(-2px); 
}

/* 1. Full Width Background Container */
.news-menu-wrapper {
    width: 100%;
    background-color: #FFF; /* Menu ka background color */
    border-bottom: 0px solid #ddd;
    box-sizing: border-box;
	box-shadow: 0px 3px 3px 0px rgba(219, 219, 219, 0.29);
}

/* 2. Menu Items Container (Header ki width se match karne ke liye) */
.scrollable-news-menu {
    display: flex;
    overflow-x: auto;
    white-space: nowrap;
    padding: 10px 15px;
    
    /* ALIGNMENT AUR WIDTH: Ise apne site header ke hisaab se adjust karein */
    max-width: 1200px; /* Agar aapka header chhota hai toh ise 1140px ya 1080px karke dekhein */
    margin: 0 auto; /* Yeh items ko center me lock kar dega */
    
    /* Mobile ke liye smooth scroll */
    -webkit-overflow-scrolling: touch; 
    scrollbar-width: none; 
}

/* 3. Scrollbar Hide Karne Ke Liye */
.scrollable-news-menu::-webkit-scrollbar {
    display: none;
}

/* 4. Menu Buttons ki Styling */
.scrollable-news-menu a {
    display: inline-block;
    color: #151515;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
	padding:0px 6px;
    margin-right: 10px;
    border-radius: 8px;
    border: 0px solid #e0e0e0;
    transition: all 0.3s ease;
}

/* Hover Effect */
.scrollable-news-menu a:hover {
    color: #e70000;
}