/*
Theme Name:   Poker Pro
Theme URI:    https://poker2.org
Description:  Poker Pro — sophisticated green/dark child theme for poker2.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:  poker-pro
Tags:         gambling, poker, affiliate, dark, green, premium
*/

/* =============================================
   Poker Pro — DixMox Phase 11.5.4
   Green felt scheme for poker2.org
   ============================================= */

:root {
    --pp-primary:       #059669;   /* Emerald green */
    --pp-primary-dark:  #047857;   /* Deep emerald */
    --pp-accent:        #34D399;   /* Light emerald */
    --pp-gold:          #D4AF37;   /* Card gold accent */
    --pp-bg:            #060A08;   /* Near-black with green tint */
    --pp-bg-card:       #0A1210;   /* Dark green-tinted card */
    --pp-bg-elevated:   #0F1A16;   /* Elevated panel */
    --pp-bg-header:     #040806;   /* Header background */
    --pp-text:          #E8F5E9;   /* Slightly green-white */
    --pp-text-muted:    #6A8A78;   /* Muted green-grey */
    --pp-border:        #142018;   /* Dark green border */
    --pp-success:       #34D399;   /* Bright green */
    --pp-danger:        #EF4444;   /* Red for warnings */
    --pp-disclaimer:    #050A06;   /* Disclaimer bg */
}

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

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

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

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

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

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

/* =============================================
   CTA buttons
   ============================================= */
.pp-cta-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--pp-primary), var(--pp-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(5, 150, 105, 0.4);
}

.pp-cta-btn:hover {
    opacity: 0.88;
    color: #fff;
    box-shadow: 0 0 24px rgba(52, 211, 153, 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(--pp-bg) !important;
}

.dark-mode .space-main-nav-area,
.dark-mode .space-header-area,
#masthead,
.space-main-nav-area {
    background-color: var(--pp-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(--pp-bg-card) !important;
    border-color: var(--pp-border) !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.space-casinos-archive-item:hover, .space-casino-item:hover {
    border-color: var(--pp-primary) !important;
    box-shadow: 0 0 12px rgba(5, 150, 105, 0.25);
}

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

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

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

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

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

.space-units-archive-item:hover {
    border-color: var(--pp-primary) !important;
    box-shadow: 0 0 14px rgba(5, 150, 105, 0.3);
}

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

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

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

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

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

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

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

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

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

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

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

/* =============================================
   Homepage hero (Poker Pro — felt table style)
   ============================================= */
.pp-hero-section {
    background: linear-gradient(135deg, #060A08 0%, #081408 50%, #060A08 100%);
    border-bottom: 2px solid var(--pp-primary);
    position: relative;
    overflow: hidden;
}

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

/* =============================================
   Poker-specific elements
   ============================================= */
.pp-hand-rank-badge {
    display: inline-block;
    background: rgba(5, 150, 105, 0.15);
    border: 1px solid var(--pp-primary);
    color: var(--pp-primary);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 12px;
}

.pp-gold-text { color: var(--pp-gold); font-weight: 700; }

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