/* ====================================================
   MASTER THEME SETTINGS - ONE FILE CONTROLS EVERYTHING
   ====================================================
   Edit ONLY the values below to change your entire website
   Copy this file to other websites and change colors/sizes
   ==================================================== */

:root {
    /* ========== PRIMARY COLORS ========== */
    --primary-color: #dd3333;        /* Main theme color (buttons, ticker, borders) */
    --primary-hover: #aa2222;        /* Darker color for hover effects */
    --primary-light: #ff5555;        /* Lighter color for blinking */
    
    /* ========== BACKGROUNDS ========== */
    --header-bg: #ffffff;            /* Header background */
    --footer-bg: #1a1a2e;            /* Footer background */
    --footer-bottom-bg: #15152a;     /* Footer copyright bar background */
    --ticker-bg: #222222;            /* Breaking news bar background */
    --category-bar-bg: #f5f5f5;      /* Category buttons bar background */
    --body-bg: #ffffff;              /* Main body background */
    
    /* ========== TEXT COLORS ========== */
    --text-dark: #333333;            /* Dark text (headings) */
    --text-light: #ffffff;           /* White text (buttons, ticker) */
    --text-gray: #666666;            /* Gray text (meta, dates) */
    --footer-text: #cccccc;          /* Footer text color */
    --footer-heading: #ffffff;       /* Footer heading color */
    
    /* ========== BUTTON SIZES ========== */
    --btn-padding: 6px 12px;         /* Button padding (top/bottom left/right) */
    --btn-font-size: 13px;           /* Button font size */
    --btn-radius: 25px;              /* Button border radius (roundness) */
    
    /* ========== BUTTON SIZES - MOBILE ========== */
    --btn-mobile-padding: 4px 8px;
    --btn-mobile-font-size: 10px;
    
    /* ========== SPACING ========== */
    --gap-small: 8px;
    --gap-medium: 15px;
    --gap-large: 25px;
}

/* ====================================================
   APPLY PRIMARY COLORS
   ==================================================== */

/* Buttons & Interactive Elements */
.category-btn,
.search-submit,
.ticker-label,
.slider-nav:hover,
.view-all:hover,
.dot.active,
.page-numbers.current,
.close-search:hover {
    background-color: var(--primary-color) !important;
}

.category-btn:hover {
    background-color: var(--primary-hover) !important;
}

/* Borders & Lines */
.section-title,
.section-title.viral,
.section-title.crime,
.section-title.national,
.section-title.cinema,
.section-title.ap,
.section-title.ts,
.post-category a,
.news-ticker-container {
    border-color: var(--primary-color) !important;
}

/* Text Colors */
.section-title.viral,
.section-title.crime,
.section-title.national,
.section-title.cinema,
.section-title.ap,
.section-title.ts,
.post-category a {
    color: var(--primary-color) !important;
}

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

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

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

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

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

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

/* Breaking News Bar */
.news-ticker-container {
    background: var(--ticker-bg);
}

/* Category Bar */
.category-buttons-container,
.section-header {
    background: var(--category-bar-bg);
}

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

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

/* Buttons & Ticker Text */
.category-btn,
.ticker-label,
.search-submit {
    color: var(--text-light) !important;
}

/* Headings & Titles */
.post-title,
.post-item-title a,
.slider-title h4,
.single-title,
.category-title,
.about-page h1,
.privacy-page h1,
.terms-page h1 {
    color: var(--text-dark);
}

/* Meta, Dates, Gray Text */
.post-meta,
.post-date,
.category-post-date,
.last-updated,
.footer-bottom p {
    color: var(--text-gray);
}

/* Footer Links */
.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 (Desktop)
   ==================================================== */

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

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

/* ====================================================
   BUTTON SIZES (Mobile)
   ==================================================== */

@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);
    }
}

/* ====================================================
   QUICK ADJUSTMENTS
   ==================================================== */

/* Category Section Spacing */
.category-section {
    margin-bottom: var(--gap-large);
}

/* Post Items Spacing */
.post-item {
    padding: var(--gap-medium);
    gap: var(--gap-medium);
}

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

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