/* Radio Simba Design Enhancements - Safe CSS Additions */

/* Mobile Responsive Fixes */
@media (max-width: 768px) {
    .container, .wrap, .content-area {
        padding: 15px !important;
        max-width: 100% !important;
    }
    
    .site-header {
        position: sticky !important;
        top: 0 !important;
        background: rgba(255,255,255,0.95) !important;
        backdrop-filter: blur(10px) !important;
        z-index: 1000 !important;
    }
    
    img, .wp-block-image img {
        max-width: 100% !important;
        height: auto !important;
    }
}

/* Radio Player Styles */
.radio-player-enhanced {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    padding: 20px !important;
    border-radius: 10px !important;
    margin: 20px 0 !important;
    color: white !important;
}

.radio-player-enhanced audio {
    width: 100% !important;
    margin: 10px 0 !important;
}

.play-button {
    background: #ff6b6b !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    color: white !important;
    cursor: pointer !important;
}

/* Smooth hover effects */
.main-navigation a, .menu-item a {
    transition: all 0.3s ease !important;
}

.main-navigation a:hover, .menu-item a:hover {
    transform: translateY(-2px) !important;
}

/* Loading animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.5s ease-in-out !important;
}

/* ================================================== */
/* RADIO SIMBA TARGETED DESIGN FIXES */
/* ================================================== */

/* 1. Remove thumbnails ONLY from trending stories and trending songs */
.trending-stories .post-thumbnail,
.trending-songs .post-thumbnail,
.trending-stories .wp-post-image,
.trending-songs .wp-post-image,
.trending-stories img[class*="thumbnail"],
.trending-songs img[class*="thumbnail"],
.widget_trending_stories .post-thumbnail,
.widget_trending_songs .post-thumbnail,
.trending-posts .post-thumbnail:not(.featured-thumbnail),
.trending-posts .wp-post-image:not(.featured-image) {
    display: none !important;
    visibility: hidden !important;
}

/* Adjust layout after removing thumbnails */
.trending-stories .entry-content,
.trending-songs .entry-content,
.widget_trending_stories .entry-content,
.widget_trending_songs .entry-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
}

/* 2. Fix ONLY breaking news scroll text visibility */
.breaking-news,
.breaking-news-ticker,
.news-ticker,
.marquee-news,
.scrolling-news {
    background: transparent !important;
}

.breaking-news .news-item,
.breaking-news-ticker .ticker-item,
.news-ticker .news-item,
.marquee-news .news-item,
.scrolling-news .news-item,
.breaking-news a,
.breaking-news-ticker a, 
.news-ticker a,
.marquee-news a,
.scrolling-news a,
.breaking-news span,
.breaking-news-ticker span,
.news-ticker span,
.marquee-news span,
.scrolling-news span {
    background: transparent !important;
    color: #ffffff !important;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.9) !important;
    font-weight: bold !important;
}

/* Make breaking news links stand out */
.breaking-news a:hover,
.breaking-news-ticker a:hover,
.news-ticker a:hover,
.marquee-news a:hover,
.scrolling-news a:hover {
    color: #ffd700 !important;
    text-decoration: underline !important;
}

/* 3. EXCLUDE other text elements - keep them as they are */
/* This ensures we don't affect other parts of the site */

/* 4. Emergency fix if breaking news still has grey background */
.breaking-news-marquee,
.ticker-content,
.news-scroll {
    background: transparent !important;
}

.breaking-news-marquee *,
.ticker-content *,
.news-scroll * {
    background: transparent !important;
}

/* ================================================== */
/* RADIO SIMBA TARGETED DESIGN FIXES - ENHANCED */
/* ================================================== */

/* 1. Remove ALL images from trending stories and trending songs - including broken ones */
.trending-stories img,
.trending-songs img,
.widget_trending_stories img,
.widget_trending_songs img,
.trending-posts img,
.trending-stories .post-thumbnail,
.trending-songs .post-thumbnail,
.trending-stories .wp-post-image,
.trending-songs .wp-post-image,
.trending-stories [class*="image"],
.trending-songs [class*="image"],
.trending-stories [class*="thumbnail"],
.trending-songs [class*="thumbnail"],
.trending-stories [class*="img"],
.trending-songs [class*="img"],
.widget_trending_stories .post-thumbnail,
.widget_trending_songs .post-thumbnail,
.trending-posts .post-thumbnail,
.trending-posts .wp-post-image,
.trending-stories figure,
.trending-songs figure,
.trending-stories .featured-image,
.trending-songs .featured-image {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* Adjust layout after removing ALL images */
.trending-stories .entry-content,
.trending-songs .entry-content,
.widget_trending_stories .entry-content,
.widget_trending_songs .entry-content,
.trending-stories .post-content,
.trending-songs .post-content,
.trending-stories .entry-summary,
.trending-songs .entry-summary {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    float: none !important;
}

/* Fix any empty spaces where images were */
.trending-stories .entry-header,
.trending-songs .entry-header,
.trending-stories .post-header,
.trending-songs .post-header {
    width: 100% !important;
    padding: 15px !important;
    border-bottom: 1px solid #eee !important;
}

/* 2. Enhanced breaking news with darker, more professional colors */
.breaking-news,
.breaking-news-ticker,
.news-ticker,
.marquee-news,
.scrolling-news,
.news-scroll {
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    border: 1px solid #1a252f !important;
    border-radius: 5px !important;
    padding: 12px 20px !important;
}

.breaking-news .news-item,
.breaking-news-ticker .ticker-item,
.news-ticker .news-item,
.marquee-news .news-item,
.scrolling-news .news-item,
.breaking-news a,
.breaking-news-ticker a, 
.news-ticker a,
.marquee-news a,
.scrolling-news a,
.breaking-news span,
.breaking-news-ticker span,
.news-ticker span,
.marquee-news span,
.scrolling-news span,
.breaking-news .news-title,
.breaking-news-ticker .news-title {
    background: transparent !important;
    color: #ecf0f1 !important;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* Breaking news hover effects */
.breaking-news a:hover,
.breaking-news-ticker a:hover,
.news-ticker a:hover,
.marquee-news a:hover,
.scrolling-news a:hover {
    color: #3498db !important;
    text-decoration: none !important;
    background: rgba(52, 152, 219, 0.1) !important;
    padding: 2px 5px !important;
    border-radius: 3px !important;
    transition: all 0.3s ease !important;
}

/* Breaking news label styling */
.breaking-news-label,
.news-label,
.ticker-label {
    background: #e74c3c !important;
    color: white !important;
    padding: 3px 8px !important;
    border-radius: 3px !important;
    font-weight: bold !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    margin-right: 10px !important;
}

/* 3. EXCLUDE other text elements - keep them as they are */
/* This ensures we don't affect other parts of the site */

/* 4. Fix any marquee or ticker containers */
.breaking-news-marquee,
.ticker-content,
.news-scroll-content {
    background: transparent !important;
}

.breaking-news-marquee *,
.ticker-content *,
.news-scroll-content * {
    background: transparent !important;
}

/* 5. Ensure trending content looks clean without images */
.trending-stories .entry-title,
.trending-songs .entry-title,
.widget_trending_stories .entry-title,
.widget_trending_songs .entry-title {
    font-size: 16px !important;
    line-height: 1.4 !important;
    margin-bottom: 8px !important;
    color: #2c3e50 !important;
}

.trending-stories .entry-meta,
.trending-songs .entry-meta,
.widget_trending_stories .entry-meta,
.widget_trending_songs .entry-meta {
    font-size: 12px !important;
    color: #7f8c8d !important;
}

.trending-stories li,
.trending-songs li,
.widget_trending_stories li,
.widget_trending_songs li {
    padding: 12px 0 !important;
    border-bottom: 1px solid #ecf0f1 !important;
}

.trending-stories li:last-child,
.trending-songs li:last-child,
.widget_trending_stories li:last-child,
.widget_trending_songs li:last-child {
    border-bottom: none !important;
}