/* ====================================================
   MASTER THEME SETTINGS - COMPLETE COLOR CONTROL
   ====================================================
   Edit ONLY the values below to change your entire website
   ==================================================== */

:root {
    
    /* ==================================================
       SECTION 1: BREAKING NEWS TICKER COLORS
       ================================================== */
    --ticker-bg: #222222;           /* Breaking news bar background */
    --ticker-label-bg: #ffcc00;     /* "BREAKING NEWS" label background (RED) */
    --ticker-label-text: #ffffff;   /* "BREAKING NEWS" label text color */
    --ticker-text-color: #ffcc00;   /* Scrolling news text color */
    --ticker-text-hover: #ffcc00;   /* Scrolling news text color on hover */
    --ticker-border-color: #ffcc00; /* Bottom border color of ticker */
    
    
    /* ==================================================
       SECTION 2: CATEGORY BUTTON COLORS (Below Logo)
       ================================================== */
    --category-btn-bg: #ffcc00;      /* Category button background */
    --category-btn-text: #030303;    /* Category button text color */
    --category-btn-hover-bg: #aa2222; /* Category button hover background */
    --category-btn-hover-text: #030303; /* Category button hover text */
    --category-bar-bg: #f5f5f5;      /* Background behind category buttons */
    
    
    /* ==================================================
       SECTION 3: SECTION HEADER COLORS (Viral, Crime, etc.)
       ================================================== */
    --section-header-bg: #f5f5f5;     /* Section header background */
    --section-header-border: #dd3333; /* Left border color of section title */
    --section-header-text: #dd3333;   /* Section title text color */
    
    /* Individual section title colors (Optional) */
    --viral-title-color: #ffcc00;     /* Viral section title color */
    --crime-title-color: #ffcc00;     /* Crime section title color */
    --national-title-color: #ffcc00;  /* National section title color */
    --cinema-title-color: #ffcc00;    /* Cinema section title color */
    --ap-title-color: #ffcc00;        /* Andhra Pradesh title color */
    --ts-title-color: #ffcc00;        /* Telangana title color */
    
    
    /* ==================================================
       SECTION 4: OTHER BUTTONS & ELEMENTS
       ================================================== */
    --primary-color: #dd3333;        /* Search button, dots, pagination color */
    --primary-hover: #aa2222;        /* Hover color for buttons */
    --primary-light: #ff5555;        /* Light color for blinking */
    
    
    /* ==================================================
       SECTION 5: BACKGROUNDS
       ================================================== */
    --header-bg: #ffffff;            /* Header background */
    --footer-bg: #ffcc00;            /* Footer background */
    --footer-bottom-bg: #ffcc00;     /* Footer copyright bar background */
    --body-bg: #ffffff;              /* Main body background */
    
    
    /* ==================================================
       SECTION 6: TEXT COLORS
       ================================================== */
    --text-dark: #333333;            /* Headings, post titles */
    --text-light: #ffffff;           /* White text for buttons */
    --text-gray: #666666;            /* Date, meta information */
    --footer-text: #cccccc;          /* Footer links and text */
    --footer-heading: #ffffff;       /* Footer headings */
    
    
    /* ==================================================
       SECTION 7: BUTTON SIZES
       ================================================== */
    --btn-padding: 6px 12px;         /* Desktop button padding */
    --btn-font-size: 13px;           /* Desktop button font size */
    --btn-radius: 25px;              /* Button roundness */
    --btn-mobile-padding: 4px 8px;   /* Mobile button padding */
    --btn-mobile-font-size: 10px;    /* Mobile button font size */
    
    
    /* ==================================================
       SECTION 8: SPACING
       ================================================== */
    --gap-small: 8px;
    --gap-medium: 15px;
    --gap-large: 25px;
}

/* ====================================================
   BREAKING NEWS TICKER STYLES
   ==================================================== */

/* Ticker background */
.news-ticker-container {
    background: var(--ticker-bg) !important;
    border-bottom-color: var(--ticker-border-color) !important;
}

/* "BREAKING NEWS" Label */
.ticker-label {
    background: var(--ticker-label-bg) !important;
    color: var(--ticker-label-text) !important;
}

/* Scrolling news text */
.ticker-list li a {
    color: var(--ticker-text-color) !important;
}

.ticker-list li a:hover {
    color: var(--ticker-text-hover) !important;
}

/* ====================================================
   CATEGORY BUTTON STYLES
   ==================================================== */

/* Category Button - Normal State */
.category-btn {
    background-color: var(--category-btn-bg) !important;
    color: var(--category-btn-text) !important;
}

/* Category Button - Hover State */
.category-btn:hover {
    background-color: var(--category-btn-hover-bg) !important;
    color: var(--category-btn-hover-text) !important;
}

/* Category Button Bar Background */
.category-buttons-container {
    background: var(--category-bar-bg) !important;
}

/* ====================================================
   SECTION HEADER STYLES (Viral, Crime, etc.)
   ==================================================== */

.section-header {
    background: var(--section-header-bg) !important;
}

/* Default section title */
.section-title {
    border-left-color: var(--section-header-border) !important;
    color: var(--section-header-text) !important;
}

/* Individual section titles */
.section-title.viral {
    border-left-color: var(--viral-title-color) !important;
    color: var(--viral-title-color) !important;
}

.section-title.crime {
    border-left-color: var(--crime-title-color) !important;
    color: var(--crime-title-color) !important;
}

.section-title.national {
    border-left-color: var(--national-title-color) !important;
    color: var(--national-title-color) !important;
}

.section-title.cinema {
    border-left-color: var(--cinema-title-color) !important;
    color: var(--cinema-title-color) !important;
}

.section-title.ap {
    border-left-color: var(--ap-title-color) !important;
    color: var(--ap-title-color) !important;
}

.section-title.ts {
    border-left-color: var(--ts-title-color) !important;
    color: var(--ts-title-color) !important;
}

/* ====================================================
   OTHER BUTTONS & ELEMENTS
   ==================================================== */

.search-submit,
.slider-nav:hover,
.view-all:hover,
.dot.active,
.page-numbers.current,
.close-search:hover {
    background-color: var(--primary-color) !important;
}

.view-all:hover {
    background-color: var(--primary-color) !important;
    color: var(--text-light) !important;
}

/* Floating ePaper Border */
.floating-epaper img {
    border-color: var(--primary-color) !important;
}

/* Blinking Animation */
@keyframes blink {
    50% { 
        background: var(--primary-light);
        opacity: 0.8;
    }
}

/* ====================================================
   BACKGROUNDS
   ==================================================== */

.site-header {
    background: var(--header-bg);
}

.site-footer {
    background: var(--footer-bg);
}

.footer-bottom {
    background: var(--footer-bottom-bg);
}

body,
.main-content {
    background: var(--body-bg);
}

/* ====================================================
   TEXT COLORS
   ==================================================== */

.ticker-label,
.search-submit {
    color: var(--text-light) !important;
}

.post-title,
.post-item-title a,
.slider-title h4,
.single-title,
.category-title {
    color: var(--text-dark);
}

.post-meta,
.post-date,
.category-post-date,
.last-updated,
.footer-bottom p {
    color: var(--text-gray);
}

.footer-links li a,
.footer-contact li a,
.footer-contact li,
.footer-about-text {
    color: var(--footer-text);
}

.footer-title {
    color: var(--footer-heading);
}

/* ====================================================
   BUTTON SIZES
   ==================================================== */

.category-btn {
    padding: var(--btn-padding);
    font-size: var(--btn-font-size);
    border-radius: var(--btn-radius);
}

.category-buttons-wrapper {
    gap: var(--gap-small);
}

@media (max-width: 768px) {
    .category-btn {
        padding: var(--btn-mobile-padding);
        font-size: var(--btn-mobile-font-size);
    }
    .category-buttons-wrapper {
        gap: calc(var(--gap-small) - 2px);
    }
}

/* ====================================================
   SPACING
   ==================================================== */

.category-section {
    margin-bottom: var(--gap-large);
}

.post-item {
    padding: var(--gap-medium);
    gap: var(--gap-medium);
}

.post-item-thumbnail {
    width: 80px;
    height: 60px;
    border-radius: var(--btn-radius);
}

@media (max-width: 768px) {
    .post-item-thumbnail {
        width: 70px;
        height: 55px;
    }
}