/*
Theme Name:   Bingo Buzz
Theme URI:    https://bingo24.org
Description:  Bingo Buzz — energetic orange/teal child theme for bingo24.org based on Mercury
Author:       DixonIT
Author URI:   https://dixonit.com
Template:     mercury
Version:      1.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  bingo-buzz
Tags:         gambling, bingo, affiliate, dark, orange, teal
*/

/* =============================================
   Bingo Buzz — DixMox Phase 11.5.3
   Orange/teal scheme for bingo24.org
   ============================================= */

:root {
    --bb-primary:       #F59E0B;   /* Amber/orange */
    --bb-primary-dark:  #D97706;   /* Deep amber */
    --bb-accent:        #0D9488;   /* Teal */
    --bb-accent-light:  #2DD4BF;   /* Light teal */
    --bb-bg:            #0C0A06;   /* Near-black warm tint */
    --bb-bg-card:       #161006;   /* Dark warm card */
    --bb-bg-elevated:   #201808;   /* Elevated panel */
    --bb-bg-header:     #0A0804;   /* Header background */
    --bb-text:          #FFF8E7;   /* Warm white */
    --bb-text-muted:    #9A8A6A;   /* Muted warm */
    --bb-border:        #2A1E08;   /* Warm border */
    --bb-success:       #0D9488;   /* Teal for positive */
    --bb-danger:        #EF4444;   /* Red for warnings */
    --bb-disclaimer:    #100A04;   /* Disclaimer bg (dark brown) */
}

body {
    background-color: var(--bb-bg);
    color: var(--bb-text);
}

/* =============================================
   Compliance bar
   ============================================= */
.bb-compliance-bar {
    background-color: var(--bb-disclaimer);
    border-top: 2px solid var(--bb-primary);
    padding: 16px 24px;
    font-size: 0.78rem;
    color: var(--bb-text-muted);
    line-height: 1.6;
    text-align: center;
}

.bb-compliance-bar a {
    color: var(--bb-primary);
    text-decoration: underline;
}

.bb-compliance-bar .bb-18plus {
    display: inline-block;
    border: 2px solid var(--bb-danger);
    color: var(--bb-danger);
    font-weight: 700;
    font-size: 0.85rem;
    padding: 2px 6px;
    border-radius: 3px;
    margin-right: 8px;
    vertical-align: middle;
}

.bb-rg-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--bb-text-muted);
    font-size: 0.78rem;
}

/* =============================================
   Typography
   ============================================= */
h1, h2, h3 { color: var(--bb-text); }
.entry-title a, .entry-title a:visited { color: var(--bb-text); }
.entry-title a:hover, .site-title a:hover { color: var(--bb-primary); }

/* =============================================
   CTA buttons
   ============================================= */
.bb-cta-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-accent));
    color: #fff;
    font-weight: 700;
    padding: 12px 28px;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s ease;
    box-shadow: 0 0 16px rgba(245, 158, 11, 0.4);
}

.bb-cta-btn:hover {
    opacity: 0.88;
    color: #fff;
    box-shadow: 0 0 24px rgba(13, 148, 136, 0.6);
}

/* =============================================
   Mercury dark-mode.css overrides
   ============================================= */
body.dark-mode,
.dark-mode .space-wrap,
.dark-mode .space-content-area,
.dark-mode .space-sidebar,
.dark-mode #page {
    background-color: var(--bb-bg) !important;
}

.dark-mode .space-main-nav-area,
.dark-mode .space-header-area,
#masthead,
.space-main-nav-area {
    background-color: var(--bb-bg-header) !important;
}

.dark-mode .space-post-item,
.dark-mode .space-widget-area,
.dark-mode .widget,
.dark-mode .space-single-post-wrap {
    background-color: var(--bb-bg-card) !important;
    border-color: var(--bb-border) !important;
}

.dark-mode .space-archive-title-box,
.space-archive-title-box {
    background-color: var(--bb-bg-header) !important;
    border-color: var(--bb-border) !important;
}

.dark-mode .space-archive-title,
.dark-mode .page-title,
.dark-mode .entry-title {
    color: var(--bb-text) !important;
}

.dark-mode .space-footer-area,
footer,
.space-footer-area {
    background-color: var(--bb-bg-header) !important;
    border-top-color: var(--bb-border) !important;
}

/* =============================================
   Header / Navigation
   ============================================= */
.space-main-nav-area,
#masthead {
    background-color: var(--bb-bg-header) !important;
    border-bottom: 1px solid var(--bb-border);
}

.space-main-nav > ul > li > a {
    color: var(--bb-text) !important;
    font-weight: 500;
}

.space-main-nav > ul > li > a:hover,
.space-main-nav > ul > li.current-menu-item > a {
    color: var(--bb-primary) !important;
}

.space-main-nav ul ul {
    background-color: var(--bb-bg-elevated) !important;
    border: 1px solid var(--bb-border);
    border-top: 2px solid var(--bb-primary);
}

.space-main-nav ul ul li a { color: var(--bb-text-muted) !important; }
.space-main-nav ul ul li a:hover {
    color: var(--bb-primary) !important;
    background-color: var(--bb-bg-card) !important;
}

.space-site-name a, .text-logo { color: var(--bb-text) !important; }
.space-site-name a:hover { color: var(--bb-primary) !important; }

/* =============================================
   Archive / Blog list
   ============================================= */
.space-archive-title-box {
    background-color: var(--bb-bg-header) !important;
    color: var(--bb-text) !important;
}

.space-post-item {
    background-color: var(--bb-bg-card);
    border: 1px solid var(--bb-border);
    border-radius: 6px;
}

.space-post-item:hover { border-color: var(--bb-primary); }
.space-post-item .entry-title a { color: var(--bb-text) !important; }
.space-post-item .entry-title a:hover { color: var(--bb-primary) !important; }
.space-post-item .entry-meta,
.space-post-item .entry-meta a,
.space-post-item .space-post-excerpt { color: var(--bb-text-muted) !important; }

/* =============================================
   Single post
   ============================================= */
.single .entry-content,
.single .entry-content p { color: var(--bb-text); line-height: 1.8; }

.single .entry-content h2,
.single .entry-content h3 {
    color: var(--bb-text);
    border-bottom: 1px solid var(--bb-border);
    padding-bottom: 8px;
    margin-top: 32px;
}

.single .entry-content a { color: var(--bb-primary); }
.single .entry-content a:hover { color: var(--bb-accent-light); }

.bb-reading-time {
    color: var(--bb-text-muted);
    font-size: 0.85rem;
    margin-bottom: 16px;
    padding: 6px 12px;
    background: var(--bb-bg-elevated);
    border-left: 3px solid var(--bb-primary);
    border-radius: 2px;
    display: inline-block;
}

/* =============================================
   Section headings
   ============================================= */
.space-section-title, .space-section-block-title { color: var(--bb-text) !important; }
.space-section-title::after, .space-section-block-title::after { background-color: var(--bb-primary) !important; }

/* =============================================
   Aces casino/game cards
   ============================================= */
.space-casinos-archive-item, .space-casino-item {
    background-color: var(--bb-bg-card) !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: 6px;
}

.space-casinos-archive-item:hover, .space-casino-item:hover {
    border-color: var(--bb-primary) !important;
    box-shadow: 0 0 12px rgba(245, 158, 11, 0.25);
}

.space-casinos-archive-item .space-casino-name a,
.space-casino-item .space-casino-name a { color: var(--bb-text) !important; }
.space-casinos-archive-item .space-casino-name a:hover { color: var(--bb-primary) !important; }

.space-rating-stars .fa-star, .space-stars-rating i { color: var(--bb-primary) !important; }

.space-casino-button a, .space-visit-casino-btn {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-accent)) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3);
}

.space-casino-button a:hover { opacity: 0.9 !important; }

.space-units-archive-item {
    background-color: var(--bb-bg-card) !important;
    border: 1px solid var(--bb-border) !important;
    border-radius: 6px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.space-units-archive-item:hover {
    border-color: var(--bb-primary) !important;
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.3);
}

.space-units-archive-item .space-units-archive-item-title a { color: var(--bb-text) !important; font-weight: 700; }
.space-units-archive-item .space-units-archive-item-title a:hover { color: var(--bb-primary) !important; }
.space-units-archive-item .space-units-archive-item-short-desc { color: var(--bb-text-muted) !important; }
.space-units-archive-item .space-units-archive-item-button a {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-accent)) !important;
    color: #fff !important;
    border-radius: 4px !important;
    font-weight: 600;
}

.space-pros-list li::before { color: var(--bb-success) !important; }
.space-cons-list li::before { color: var(--bb-danger) !important; }

/* =============================================
   Sidebar widgets
   ============================================= */
.widget {
    background-color: var(--bb-bg-card);
    border: 1px solid var(--bb-border);
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 24px;
}

.widget-title {
    color: var(--bb-text) !important;
    border-bottom: 2px solid var(--bb-primary);
    padding-bottom: 8px;
    margin-bottom: 16px;
}

.widget a { color: var(--bb-text-muted); }
.widget a:hover { color: var(--bb-primary); }

/* =============================================
   Footer
   ============================================= */
.space-footer-area, footer {
    background-color: var(--bb-bg-header) !important;
    border-top: 1px solid var(--bb-border);
    color: var(--bb-text-muted);
}

.space-footer-area a, footer a { color: var(--bb-text-muted); }
.space-footer-area a:hover, footer a:hover { color: var(--bb-primary); }
.space-footer-copyright { color: var(--bb-text-muted); font-size: 0.85rem; }

/* =============================================
   Forms / Search
   ============================================= */
input[type="text"], input[type="email"], input[type="search"], textarea, select {
    background-color: var(--bb-bg-card) !important;
    border: 1px solid var(--bb-border) !important;
    color: var(--bb-text) !important;
    border-radius: 4px;
}

input[type="text"]:focus, input[type="email"]:focus,
input[type="search"]:focus, textarea:focus {
    border-color: var(--bb-primary) !important;
    outline: none;
    box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.25);
}

/* =============================================
   Pagination
   ============================================= */
.pagination .page-numbers {
    background-color: var(--bb-bg-card);
    color: var(--bb-text-muted);
    border: 1px solid var(--bb-border);
    border-radius: 4px;
}

.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: linear-gradient(135deg, var(--bb-primary), var(--bb-accent));
    color: #fff;
    border-color: var(--bb-primary);
}

/* =============================================
   Homepage hero (Bingo Buzz style)
   ============================================= */
.bb-hero-section {
    background: linear-gradient(135deg, #0C0A06 0%, #1A1000 50%, #0C0A06 100%);
    border-bottom: 2px solid var(--bb-primary);
    position: relative;
    overflow: hidden;
}

.bb-hero-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(ellipse at center, rgba(245, 158, 11, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .bb-hero-section { padding: 40px 20px !important; }
    .bb-hero-section h1 { font-size: 1.6rem !important; }
    .space-main-nav-area { background-color: var(--bb-bg-header) !important; }
    .space-casinos-archive-items,
    .space-units-archive-items { grid-template-columns: 1fr !important; }
}