/*
Theme Name: WP Sarkari Result Pro
Theme URI: https://wpcodequill.com/themes/wp-sarkari-result
Author: WPCodeQuill
Author URI: https://wpcodequill.com
Description: A high-performance, mobile-responsive Sarkari Result style WordPress theme built for government job portals, exam notifications, admit card listings, results, answer keys, and recruitment updates. Includes customizable colors, fast loading structure, SEO optimized layout, social buttons, and Google News-friendly design. Perfect for Sarkari Result websites, Job Alert portals, and exam update platforms.
Version: 1.2.0
Text Domain: wp-sarkari-result
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Tags: responsive-layout, custom-colors, blog, education, news, custom-menu, featured-images, two-columns, grid-layout, translation-ready, rtl-language-support, full-width-template, accessibility-ready, sticky-post, threaded-comments, editor-style, block-styles, theme-options, ads-ready, government, exam, jobs, lightweight, fast-loading, seo-friendly
*/


:root {
    --primary-color: #AB0000;
    --secondary-color: #000080;
    --header-pink: #C2185B; /* Dark Pink from image */
    --nav-black: #000000;
}

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* --- New Header Styles --- */

.site-header {
    border-bottom: 1px solid #ddd;
}

.header-banner {
    background-color: var(--header-pink);
    color: #fff;
    padding: 20px 0;
    text-align: center;
}

.banner-content {
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-logo img {
    max-height: 100px; /* Adjust as needed */
    margin-right: 20px;
}

.site-title {
    font-size: 42px;
    font-weight: bold;
    margin: 0;
    text-transform: uppercase;
}

.site-title a {
    color: #fff;
    text-decoration: none;
}

.site-description {
    font-size: 18px;
    margin: 5px 0 0;
    font-weight: bold;
}

/* --- Navigation Bar --- */

.main-navigation {
    background-color: var(--nav-black);
    font-family: sans-serif;
}

.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.main-navigation li {
    border-right: 1px solid #333;
}

.main-navigation li:last-child {
    border-right: none;
}

.main-navigation a {
    display: block;
    padding: 12px 20px;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

.main-navigation a:hover {
    background-color: #333;
}

/* --- Content Area & Footer --- */

.site-content {
    padding: 20px 0;
    min-height: 400px; /* Ensures content area has height */
}

.site-footer {
    background-color: var(--nav-black);
    color: #fff;
    text-align: center;
    padding: 20px 0;
    margin-top: 30px;
}

.site-footer p {
    margin: 0;
}

/* --- Existing Grid & Link Styles (Keep these) --- */
.imp-links-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin-bottom: 20px; }
.imp-box { padding: 12px; text-align: center; border-radius: 4px; font-weight: bold; color: #fff; display: block; text-decoration: none; }
.bg-red { background-color: #FF0000; }
.bg-blue { background-color: #0000FF; }
.bg-green { background-color: #008000; }
.bg-pink { background-color: #FF00FF; }
.marquee-section { background: #000; color: #fff; padding: 8px 0; font-weight: bold; }
.sarkari-grid { display: flex; flex-wrap: wrap; margin: 0 -5px 20px; }
.grid-col { flex: 1 1 300px; margin: 5px; border: 2px solid #000; background: #fff; }
.grid-header { background: var(--primary-color); color: #fff; text-align: center; padding: 10px; font-size: 22px; font-weight: bold; }
.grid-header.blue { background: var(--secondary-color); }
.grid-header.green { background: #008000; }
.grid-content { padding: 15px; }
.grid-content ul { list-style: none; padding: 0; margin: 0; }
.grid-content ul li { border-bottom: 1px solid #eee; padding: 8px 0; text-align: center; }
.grid-content ul li a { color: #0000EE; font-weight: bold; font-size: 15px; text-decoration: none; }
.grid-content ul li a:hover { text-decoration: underline; }
.btn-view-more { display: inline-block; margin: 10px; padding: 8px 15px; color: #0000EE; font-weight: bold; text-decoration: none; }




/* =========================================
   EXACT SARKARI HEADER STYLES
   ========================================= */

/* 1. Reset & Container */
body { margin: 0; padding: 0; font-family: Arial, sans-serif; background: #f4f4f4; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 10px; }

/* 2. Pink Banner Area */
.header-top-pink {
    background-color: #B91E52; /* Exact Dark Pink from image */
    padding: 15px 0;
    border-bottom: 1px solid #900;
    color: #fff;
}

.header-flex-wrapper {
    display: flex;
    align-items: center;
    justify-content: center; /* Keeps everything centered */
    position: relative;
}

/* Logo Styling */
.header-logo-box {
    position: absolute; /* Force logo to left */
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.main-logo {
    height: 95px; /* Adjust based on your logo size */
    width: auto;
    border-radius: 50%;
    border: 3px solid #fff; /* White ring around logo */
}

/* Text Styling */
.header-text-box {
    text-align: center;
    width: 100%; /* Ensures text stays centered */
}

.header-main-title {
    font-size: 48px; /* Large Text */
    font-weight: bold;
    margin: 0;
    color: #fff;
    text-transform: uppercase;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.4);
    font-family: 'Times New Roman', serif; /* Serif font like the image */
}

.header-sub-title {
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0 0;
    color: #fff;
    text-transform: uppercase;
}

/* 3. Black Navigation Bar */
.header-bottom-black {
    background-color: #000000;
    border-top: 1px solid #333;
}

.sarkari-menu-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Center the menu items */
    flex-wrap: wrap;
}

.sarkari-menu-items li {
    border-right: 1px solid #555; /* Vertical line separator */
}

.sarkari-menu-items li:first-child {
    border-left: 1px solid #555;
}

.sarkari-menu-items li a {
    display: block;
    padding: 12px 20px;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
}

.sarkari-menu-items li a:hover {
    background-color: #333;
    color: #fff;
}

        /* MAIN GRID & POST LISTS (UPDATED FOR LEFT ALIGNMENT & BULLETS) */
        .sarkari-grid { display: flex; flex-wrap: wrap; margin: 0 -5px 20px; }
        .grid-col { flex: 1 1 300px; margin: 5px; border: 2px solid #000; background: #fff; }
        .grid-header { color: #fff; text-align: center; padding: 10px; font-size: 20px; font-weight: bold; }
        .grid-content { padding: 10px; }
        
        /* FIX: Left Align & Show Bullets */
        .grid-content ul { 
            list-style: disc; /* Shows the bullet */
            padding-left: 20px; /* Space for the bullet */
            margin: 0; 
        }
        .grid-content ul li { 
            border-bottom: 1px solid #ddd; 
            padding: 8px 0; 
            text-align: left; /* Aligns text to the left */
        }
        
        /* Ensure links inside lists respect global color settings */
        .grid-content ul li a {
            color: <?php echo get_theme_mod('global_link_color', '#0000EE'); ?>;
        }
        .grid-content ul li a:hover {
            color: <?php echo get_theme_mod('global_link_hover_color', '#FF0000'); ?> !important;
        }

        .btn-view-more { display: inline-block; margin: 10px; font-weight: bold; }


/* 4. Mobile Responsiveness */
@media (max-width: 768px) {
    .header-logo-box {
        position: static; /* Stack logo on mobile */
        margin-bottom: 10px;
        transform: none;
    }
    .header-flex-wrapper {
        flex-direction: column;
        text-align: center;
    }
    .header-main-title { font-size: 32px; }
    .header-sub-title { font-size: 14px; }
    
    .sarkari-menu-items { flex-direction: column; }
    .sarkari-menu-items li { border-right: none; border-bottom: 1px solid #333; }
    .sarkari-menu-items li a { padding: 10px; }
}


/* =========================================
   1. SLIDER STYLES (Fix Not Showing)
   ========================================= */
.sarkari-slider-wrapper {
    margin-bottom: 20px;
    border: 1px solid #ddd;
    padding: 5px;
    background: #fff;
    display: block; /* Ensures wrapper exists */
    min-height: 100px; /* Prevents collapse if images load slow */
}

.sarkari-slider {
    position: relative;
    width: 100%;
    overflow: hidden; /* Hides the other slides */
}

.slides-container {
    display: flex; /* Puts images in a horizontal row */
    transition: transform 0.5s ease-in-out; /* Smooth sliding animation */
    width: 100%;
}

.slide {
    min-width: 100%; /* Forces each slide to be full width */
    flex-shrink: 0;
}

.slide img {
    width: 100%;
    height: auto; /* Maintains aspect ratio */
    display: block;
    max-height: 400px; /* Prevents it from being too tall on desktop */
    object-fit: cover;
}

/* =========================================
   2. SEARCH BAR STYLES (Professional Look)
   ========================================= */
.sarkari-search-bar {
    background: #f1f1f1;
    padding: 15px;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
}

.search-form-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 700px;
    margin: 0 auto;
}

.search-input {
    width: 80%;
    padding: 12px 15px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-right: none;
    border-radius: 4px 0 0 4px;
    outline: none;
}

.search-input:focus {
    border-color: #333;
}

.search-submit {
    width: 20%;
    padding: 12px 0;
    font-size: 16px;
    font-weight: bold;
    color: #fff;
    background-color: #AB0000; /* Default Red fallback */
    border: 1px solid #AB0000;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background 0.3s;
}

.search-submit:hover {
    background-color: #333;
    border-color: #333;
}

/* Mobile Adjustments */
@media screen and (max-width: 600px) {
    .search-input { width: 70%; font-size: 14px; }
    .search-submit { width: 30%; font-size: 14px; padding: 12px 5px; }
    .slide img { height: auto; max-height: 200px; } /* Smaller slider on mobile */
}