/*
Theme Name: colornews-pro-child
Author: Caliph Knight
Description: Your description goes here
Version: 1.0
Template: colornews-pro

This is the child theme for ColorNews Pro theme, generated with Generate Child Theme plugin by catchthemes.

(optional values you can add: Theme URI, Author URI, License, License URI, Tags, Text Domain)
*/
/* Write here your own personal stylesheet */
/* ============================================
   SITE WIDE STYLES
   ============================================ */

/* ============================================
   1. IMAGE CONSTRAINTS
   ============================================ */

.widget_featured_posts .featured-slider img,
.breaking-news-latest-item {
    max-height: 450px !important;
    object-fit: cover;
}

/* ============================================
   2. ENTIRE SITE BODY BLACK
   ============================================ */

#page,
#main,
#primary,
.tg-container,
.widget,
.widget_featured_posts_style_one,
.tg-block-wrapper,
.bx-wrapper,
.bx-wrapper .bx-viewport,
.site-content,
.entry-content,
.article-content,
.boxed-layout #page,
#colophon {
    background-color: #000000 !important;
}

.bx-wrapper .caption-wrapper {
    background-color: rgba(0, 0, 0, 0.7) !important;
}
/* ============================================
   3. ALL TEXT WHITE
   ============================================ */

body,
#page,
#main,
#primary,
.tg-container,
.site-content,
.entry-content,
.article-content,
.widget,
.widget_featured_posts_style_one,
.tg-block-wrapper,
h1, h2, h3, h4, h5, h6,
p, span, div, li,
.entry-title,
.widget-title,
.caption-title,
.post-title,
.article-title,
.entry-meta,
.posted-on,
.byline,
.cat-links a,
#colophon,
#colophon p,
#colophon a {
    color: #ffffff !important;
}

a {
    color: #ffffff !important;
}

a:hover {
    color: #e63946 !important;
}

/* ============================================
   4. RESPONSIVE - MOBILE FIXES
   ============================================ */

@media (max-width: 768px) {
    .breaking-news-wrapper {
        min-height: 32px !important;
        padding: 0px 0 !important;
    }
    
    .breaking-news-wrapper .bn-title::before,
    .breaking-news-wrapper .breaking-news-title::before,
    .breaking-news-wrapper .bn-label::before {
        content: "ALERTS" !important;
        font-size: 10px !important;
        padding: 0px 0px !important;
        border-width: 2px !important;
        letter-spacing: 0.5px !important;
    }
    
    .breaking-news-wrapper .bn-news {
        padding-left: 3px !important;
        flex: 1 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }
    
    .breaking-news-wrapper .bn-news-text,
    .breaking-news-wrapper .bn-news a,
    .breaking-news-wrapper .bn-text,
    .breaking-news-wrapper .bn-news-text a,
    .breaking-news-wrapper .news-item,
    .breaking-news-wrapper .news-item a,
    .breaking-news-wrapper .ticker-text,
    .breaking-news-wrapper .ticker-text a {
        font-size: 10px !important;
        color: #d4a017 !important;
        white-space: nowrap !important;
        display: inline !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .breaking-news-wrapper {
        gap: 0 !important;
        flex-wrap: nowrap !important;
    }
}

@media (max-width: 480px) {
    .breaking-news-wrapper {
        min-height: 28px !important;
        padding: 2px 0 !important;
    }
    
    .breaking-news-wrapper .bn-title::before,
    .breaking-news-wrapper .breaking-news-title::before,
    .breaking-news-wrapper .bn-label::before {
        content: "Krusade" !important;
        font-size: 10px !important;
        padding: 2px 8px !important;
        border-width: 2px !important;
        border-radius: 3px !important;
        background-color: #d4a017 !important;
        border-color: #f5c842 !important;
        color: #ff0000 !important;
        animation: redFlash 1s ease-in-out infinite !important;
        box-shadow: 0 0 10px rgba(212, 160, 23, 0.3) !important;
    }
    
    .breaking-news-wrapper .bn-news {
        padding-left: 3px !important;
        flex: 1 !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        min-width: 0 !important;
    }
    
    .breaking-news-wrapper .bn-news-text,
    .breaking-news-wrapper .bn-news a,
    .breaking-news-wrapper .bn-text,
    .breaking-news-wrapper .bn-news-text a,
    .breaking-news-wrapper .news-item,
    .breaking-news-wrapper .news-item a,
    .breaking-news-wrapper .ticker-text,
    .breaking-news-wrapper .ticker-text a {
        font-size: 3px !important;
        color: #d4a017 !important;
        white-space: nowrap !important;
        display: inline !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .breaking-news-wrapper {
        gap: 0 !important;
        flex-wrap: nowrap !important;
    }
}
/* ============================================
   5. PAGE TITLE & CATEGORY TITLE - BURNT GOLD + BLACK TEXT
   ============================================ */

/* ---------- Page Title ---------- */
.page-title {
    background-color: #d4a017 !important;
    color: #000000 !important;
    padding: 12px 20px !important;
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 0 20px 0 !important;
    box-sizing: border-box !important;
}

/* ---------- Category Title ---------- */
.category-title {
    background-color: #d4a017 !important;
    color: #000000 !important;
    padding: 12px 20px !important;
    display: block !important;
    width: 100% !important;
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
    margin: 0 0 20px 0 !important;
    box-sizing: border-box !important;
}

/* ---------- Ensure text stays black ---------- */
.page-title *,
.category-title * {
    color: #000000 !important;
}

/* ---------- Fix any inline or floated issues ---------- */
.page-title,
.category-title {
    float: none !important;
    clear: both !important;
}
/* ============================================
   6. RESPONSIVE HEADER VIDEO - SAFE (No nav interference)
   ============================================ */

/* Target ONLY the video container - not the header */
.wp-custom-header-video,
#wp-custom-header-video,
.custom-header-video {
    display: block !important;
    text-align: center !important;
    margin: 10px auto !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    float: none !important;
    background-color: #000000 !important;
    padding: 20px 0 !important;
    border-radius: 8px !important;
}

/* Target ONLY the video element */
.wp-custom-header-video video,
#wp-custom-header-video video,
.custom-header-video video {
    display: block !important;
    margin: 0 auto !important;
    max-width: 100% !important;
    height: auto !important;
}

/* Target the parent container - but only the video wrapper */
.wp-custom-header,
.custom-header {
    text-align: center !important;
    margin: 0 auto !important;
    display: block !important;
    width: 100% !important;
    background-color: #000000 !important;
    padding: 20px 0 !important;
    border-radius: 8px !important;
}

/* Logo centering - safe, doesn't affect nav */
.site-branding {
    text-align: center !important;
    width: 100% !important;
    margin: 0 auto !important;
}
/* ============================================
   RESPONSIVE BREAKPOINTS
   ============================================ */

@media (min-width: 769px) {
    .wp-custom-header-video video,
    #wp-custom-header-video video,
    .custom-header-video video {
        max-width: 80% !important;
    }
    
    .wp-custom-header-video,
    .wp-custom-header,
    .custom-header {
        padding: 25px 0 !important;
    }
}

@media (max-width: 768px) {
    .wp-custom-header-video,
    #wp-custom-header-video,
    .custom-header-video,
    .wp-custom-header,
    .custom-header {
        margin: 5px auto !important;
        padding: 15px 0 !important;
        border-radius: 6px !important;
    }
    
    .wp-custom-header-video video,
    #wp-custom-header-video video,
    .custom-header-video video {
        max-width: 100% !important;
        max-height: 250px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 480px) {
    .wp-custom-header-video,
    #wp-custom-header-video,
    .custom-header-video,
    .wp-custom-header,
    .custom-header {
        margin: 3px auto !important;
        padding: 10px 0 !important;
        border-radius: 4px !important;
    }
    
    .wp-custom-header-video video,
    #wp-custom-header-video video,
    .custom-header-video video {
        max-width: 100% !important;
        max-height: 180px !important;
        object-fit: cover !important;
    }
}
/* ============================================
   4. KRUSADE ALERTS - BREAKING NEWS TICKER
   ============================================ */

/* ---------- WRAPPER ---------- */
.breaking-news-wrapper {
    background-color: #000000 !important;
    border-bottom: 2px solid #ff0000 !important;
    padding: 0 !important;
    display: inline-block !important;
    align-items: center !important;
    gap: 100 !important;  /* ← ZERO GAP - THEY TOUCH */
    justify-content: flex-start !important;
    text-align: left !important;
    width: 100% !important;
    height: auto !important;
    min-height: 40px !important;
    overflow: hidden !important;
    flex-wrap: nowrap !important;
}


/* ---------- HIDE ORIGINAL "BREAKING NEWS" TEXT ---------- */
.breaking-news-wrapper .bn-title,
.breaking-news-wrapper .breaking-news-title,
.breaking-news-wrapper .bn-label,
.breaking-news-wrapper .bn-title span,
.breaking-news-wrapper .breaking-news-title span,
.breaking-news-wrapper .bn-label span,
.breaking-news-wrapper .bn-title a,
.breaking-news-wrapper .breaking-news-title a,
.breaking-news-wrapper .bn-label a,
.breaking-news-wrapper .bn-title .bn-text,
.breaking-news-wrapper .bn-label .bn-text {
    font-size: 0 !important;
    color: transparent !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    animation: none !important;
    position: relative !important;
    min-width: auto !important;
    display: inline-block !important;
    border: none !important;
    box-shadow: none !important;
}

/* ---------- KRUSADE ALERTS GOLD BOX ---------- */
.breaking-news-wrapper .bn-title::before,
.breaking-news-wrapper .breaking-news-title::before,
.breaking-news-wrapper .bn-label::before,
.breaking-news-wrapper .bn-title .bn-text::before,
.breaking-news-wrapper .bn-label .bn-text::before {
    content: "KRUSADE ALERTS" !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #ff0000 !important;
    animation: redFlash 1s ease-in-out infinite !important;
    
    /* GOLD BACKGROUND BOX */
    background-color: #d4a017 !important;
    border: 3px solid #f5c842 !important;
    border-radius: 5px !important;
    padding: 4px 12px !important;
    display: inline-block !important;
    letter-spacing: 1px !important;
    box-shadow: 0 0 15px rgba(212, 160, 23, 0.4) !important;
    margin: 0 !important;
    position: relative !important;
    visibility: visible !important;
    white-space: nowrap !important;
}

/* ---------- TICKER CONTAINER ---------- */
.breaking-news-wrapper .bn-title,
.breaking-news-wrapper .bn-label {
    display: inline-block !important;
    float: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
/* ---------- TICKER BOX - CHARCOAL GREY (NO PADDING) ---------- */
.breaking-news-wrapper .bn-news {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;  /* ← REMOVED ALL PADDING */
    background: #1a1a1a !important;  /* CHARCOAL GREY */
    border: none !important;
    box-shadow: none !important;
    flex: 1 !important;
    text-align: left !important;
    float: none !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    border-radius: 4px !important;
}

.breaking-news-wrapper .bn-news-text,
.breaking-news-wrapper .bn-text,
.breaking-news-wrapper .marquee,
.breaking-news-wrapper .ticker,
.breaking-news-wrapper .news-ticker,
.breaking-news-wrapper .ticker-content,
.breaking-news-wrapper .marquee-content {
    margin: 0 !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
    display: inline-block !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    white-space: nowrap !important;
}

.breaking-news-wrapper .bn-news *,
.breaking-news-wrapper .bn-news-text *,
.breaking-news-wrapper .bn-text *,
.breaking-news-wrapper .marquee *,
.breaking-news-wrapper .ticker * {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    white-space: nowrap !important;
}

/* ---------- TICKER TEXT - GOLD ---------- */
.breaking-news-wrapper .bn-news-text,
.breaking-news-wrapper .bn-news a,
.breaking-news-wrapper .bn-text,
.breaking-news-wrapper .bn-news-text a,
.breaking-news-wrapper .bn-news-item,
.breaking-news-wrapper .bn-news-item a,
.breaking-news-wrapper .news-item,
.breaking-news-wrapper .news-item a,
.breaking-news-wrapper .ticker-text,
.breaking-news-wrapper .ticker-text a,
.breaking-news-wrapper .marquee-text,
.breaking-news-wrapper .marquee-text a {
    color: #d4a017 !important;
    animation: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: 0 0 10px rgba(212, 160, 23, 0.2) !important;
    font-size: 13px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline !important;
    text-align: left !important;
    float: none !important;
    white-space: nowrap !important;
}

/* ---------- CONTROLS/BUTTONS - WHITE ---------- */
.breaking-news-wrapper .bn-news .bn-news-text a,
.breaking-news-wrapper .bn-news a,
.breaking-news-wrapper .news-item a,
.breaking-news-wrapper .ticker-text a,
.breaking-news-wrapper .marquee-text a {
    color: #ffffff !important;  /* WHITE CONTROLS */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ---------- TICKER HOVER ---------- */
.breaking-news-wrapper .bn-news a:hover,
.breaking-news-wrapper .bn-text a:hover,
.breaking-news-wrapper .news-item a:hover {
    color: #f5c842 !important;
    text-shadow: 0 0 20px rgba(212, 160, 23, 0.5) !important;
    text-decoration: underline !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ---------- REMOVE SEPARATORS ---------- */
.breaking-news-wrapper .bn-sep,
.breaking-news-wrapper .separator,
.breaking-news-wrapper .bn-separator,
.breaking-news-wrapper .sep {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
}

/* ---------- CLEARFIX ---------- */
.breaking-news-wrapper::after {
    content: "" !important;
    display: table !important;
    clear: both !important;
}

/* ---------- GOLD BOX HOVER ---------- */
.breaking-news-wrapper .bn-title:hover::before,
.breaking-news-wrapper .breaking-news-title:hover::before,
.breaking-news-wrapper .bn-label:hover::before {
    background-color: #f5c842 !important;
    box-shadow: 0 0 30px rgba(212, 160, 23, 0.7) !important;
    border-color: #ffd700 !important;
    transform: scale(1.02) !important;
    transition: all 0.3s ease !important;
}

/* ============================================
   5. ANIMATIONS
   ============================================ */

@keyframes redFlash {
    0% { 
        color: #ff0000;
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    }
    25% { 
        color: #ff3333;
        text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    }
    50% { 
        color: #ff0000;
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    }
    75% { 
        color: #ff3333;
        text-shadow: 0 0 20px rgba(255, 0, 0, 0.8);
    }
    100% { 
        color: #ff0000;
        text-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
    }
}

@keyframes goldGlow {
    0% { 
        text-shadow: 0 0 5px rgba(212, 160, 23, 0.2);
    }
    50% { 
        text-shadow: 0 0 20px rgba(212, 160, 23, 0.5);
    }
    100% { 
        text-shadow: 0 0 5px rgba(212, 160, 23, 0.2);
    }
}

.breaking-news-wrapper .bn-news-text a {
    animation: goldGlow 3s ease-in-out infinite !important;
}


/* Description Tab Active - Burnt Gold Font, Black Background, White Border */
#tab-title-description,
.woocommerce-tabs .tabs li:first-of-type {
    background-color: #FFFFFF !important;  /* 
																					  *  background */
    border: 2px solid #000000 !important;  /* White border */
    border-bottom: none !important;
}

#tab-title-description a,
.woocommerce-tabs .tabs li:first-of-type a {
    background-color: #000000 !important;  /* Black background */
    color: #d4a017 !important;  /* Burnt Gold font */
    padding: 10px 20px !important;
    border-radius: 4px 4px 0 0 !important;
    display: block !important;
}

/* Hover state */
#tab-title-description a:hover,
.woocommerce-tabs .tabs li:first-of-type a:hover {
    background-color: #1a1a1a !important;  /* Slightly lighter black on hover */
    color: #f5c842 !important;  /* Brighter gold on hover */
}

/* Active state */
#tab-title-description.active,
.woocommerce-tabs .tabs li.active:first-of-type {
    background-color: #000000 !important;
    border: 2px solid #ffffff !important;
    border-bottom: none !important;
}

#tab-title-description.active a,
.woocommerce-tabs .tabs li.active:first-of-type a {
    background-color: #000000 !important;
    color: #d4a017 !important;
}
/* ============================================
   FORCE SOCIAL ICONS: THREADS, SNAPCHAT, SOUNDCLOUD
   (Matching TikTok Format)
   ============================================ */

/* ---------- THREADS ---------- */
.menu-item-3967 a::before {  /* ← Replace XXXX with your Threads menu item ID */
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    content: "\e618" !important; /* Threads logo */
    font-size: 18px !important;
    display: inline-block !important;
}

/* ---------- SNAPCHAT ---------- */
.menu-item-XXXX a::before {  /* ← Replace XXXX with your Snapchat menu item ID */
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    content: "\f2ab" !important; /* Snapchat logo */
    font-size: 18px !important;
    display: inline-block !important;
}


/* ---------- HIDE TEXT FOR ALL SOCIAL MENU ITEMS ---------- */
.menu-item-3967 a,
    font-size: 0 !important;
}
/* ============================================
   FORCE SOCIAL ICONS: X, THREADS, SNAPCHAT, SOUNDCLOUD
   (Matching TikTok Format)
   ============================================ */

/* Force TikTok icon for Font Awesome 6 */
.menu-social .menu-item-3945 a[href*="tiktok.com"]::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    content: "\e07b" !important; /* TikTok logo */
    font-size: 18px !important;
    display: inline-block !important;
}

/* Force X (Twitter) icon using Font Awesome 6 */
.menu-social .menu-item a[href*="twitter.com"]::before,
.menu-social .menu-item a[href*="x.com"]::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    content: "\e61b" !important; /* X logo */
    font-size: 18px !important;
    display: inline-block !important;
}
/* Option 1: X logo */
content: "\e61b" !important;

/* Option 2: Alternative X logo */
content: "\e62b" !important;

/* Option 3: Old Twitter bird */
content: "\f099" !important;
/* Force Font Awesome 6 for all social icons */
/* Force X (Twitter) icon using Font Awesome 6 */
.menu-social .menu-item a[href*="twitter.com"]::before,
.menu-social .menu-item a[href*="x.com"]::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    content: "\e61b" !important; /* X logo */
    font-size: 18px !important;
    display: inline-block !important;
}

.menu-social .menu-item a {
    font-size: 0 !important; /* Hide text */
}

/* X/Twitter */
.menu-item-458 a::before,
.menu-social .menu-item a[href*="twitter.com"]::before,
.menu-social .menu-item a[href*="x.com"]::before {
    content: "\e61b" !important;
}

/* YouTube */
.menu-social .menu-item a[href*="youtube.com"]::before {
    content: "\f167" !important;
}

/* Facebook */
.menu-social .menu-item a[href*="facebook.com"]::before {
    content: "\f09a" !important;
}

/* Instagram */
.menu-social .menu-item a[href*="instagram.com"]::before {
    content: "\f16d" !important;
}

/* LinkedIn */
.menu-social .menu-item a[href*="linkedin.com"]::before {
    content: "\f0e1" !important;
}

/* Force TikTok icon for the specific menu item */
.menu-item-3945 a::before {
    font-family: "Font Awesome 6 Brands" !important;
    font-weight: 400 !important;
    content: "\e07b" !important; /* TikTok logo */
    font-size: 18px !important;
    display: inline-block !important;
}

/* Hide the text if it's showing */
.menu-item-458 a {
    font-size: 0 !important;
}

.menu-item-3945 a::before {
    font-size: 18px !important;
}