/**
 * SlotReviewer.co.uk - Custom Rebranding CSS
 * 
 * New Color Scheme:
 * - Deep Backgrounds: #1A0000, #0C0000
 * - Alt Background: #4B0000
 * - Cards Background: #2A0000
 * - Primary Button: #A00000
 * - Button Hover: #D11212
 * - Button Active: #7C0000
 * - Text White: #FFFFFF
 * - Body Text: #D5D5D5
 * - Muted Text: #A8A8A8
 */

/* ============================================
   ROOT VARIABLES - Override Elementor Globals
   ============================================ */
:root {
    --primary-color: #A00000;
    --secondary-color: #4B0000;
    --text-color: #D5D5D5;
    --accent-color: #D11212;
    --deep-bg-1: #1A0000;
    --deep-bg-2: #0C0000;
    --alt-bg: #4B0000;
    --card-bg: #2A0000;
    --card-border: #4B0000;
    --btn-primary: #A00000;
    --btn-hover: #D11212;
    --btn-active: #7C0000;
    --text-white: #FFFFFF;
    --text-body: #D5D5D5;
    --text-muted: #A8A8A8;
}

/* Override Elementor Global Colors */
.elementor-kit-5 {
    --e-global-color-primary: #A00000 !important;
    --e-global-color-secondary: #4B0000 !important;
    --e-global-color-text: #D5D5D5 !important;
    --e-global-color-accent: #D11212 !important;
}

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

/* Deep Section Backgrounds */
body,
.site-main,
.elementor-section.deep-section {
    background-color: var(--deep-bg-1) !important;
}

.dark-section,
.footer-section {
    background-color: var(--deep-bg-2) !important;
}

/* Alt Section Background for Contrast */
.alt-section,
.elementor-section.alt-section {
    background-color: var(--alt-bg) !important;
}

/* Hero/Header Background with Pattern */
.hero-section,
.header-bg-pattern {
    background-image: url('https://slotreviewer.co.uk/wp-content/uploads/2025/11/bg_main-scaled.png') !important;
    background-position: center !important;
    background-size: contain !important;
    background-repeat: repeat !important;
}

/* Block group should have color background by default, but inline styles take precedence */
.wp-block-group.alignfull {
    background-color: var(--deep-bg-1);
}

/* ============================================
   BUTTONS
   ============================================ */

/* Primary Buttons */
.button,
.btn,
.wp-block-button__link,
.elementor-button,
button[type="submit"],
input[type="submit"] {
    background-color: var(--btn-primary) !important;
    color: var(--text-white) !important;
    border: none !important;
    transition: all 0.3s ease !important;
}

/* Button Hover State */
.button:hover,
.btn:hover,
.wp-block-button__link:hover,
.elementor-button:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
    background-color: var(--btn-hover) !important;
    color: var(--text-white) !important;
}

/* Button Active/Pressed State */
.button:active,
.btn:active,
.wp-block-button__link:active,
.elementor-button:active,
button[type="submit"]:active,
input[type="submit"]:active {
    background-color: var(--btn-active) !important;
}

/* ============================================
   CARDS & TILES
   ============================================ */

.card,
.tile,
.post-card,
.widget,
.elementor-widget-container,
.box,
.panel {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    transition: box-shadow 0.3s ease !important;
}

/* Card Hover Effect */
.card:hover,
.tile:hover,
.post-card:hover {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */

/* Titles - Always White */
h1, h2, h3, h4, h5, h6,
.title,
.heading,
.elementor-heading-title {
    color: var(--text-white) !important;
}

/* Body Text */
body,
p,
.body-text,
.content,
.description {
    color: var(--text-body) !important;
}

/* Muted Text */
.muted,
.text-muted,
.meta,
.small-text,
.caption {
    color: var(--text-muted) !important;
}

/* Links */
a {
    color: var(--text-body);
    transition: color 0.3s ease;
}

a:hover {
    color: var(--btn-hover);
}

/* ============================================
   SPECIFIC ELEMENTOR OVERRIDES
   ============================================ */

/* Elementor Sections */
.elementor-section {
    background-color: var(--deep-bg-1);
}

/* Elementor Widgets */
.elementor-widget-wrap {
    color: var(--text-body);
}

/* ============================================
   FORMS
   ============================================ */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea,
select {
    background-color: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text-body) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--btn-primary) !important;
    outline: none !important;
}

/* ============================================
   NAVIGATION
   ============================================ */

.nav-menu,
.main-navigation {
    background-color: var(--deep-bg-2);
}

.nav-menu a,
.main-navigation a {
    color: var(--text-white);
}

.nav-menu a:hover,
.main-navigation a:hover {
    color: var(--btn-hover);
}

/* ============================================
   FOOTER
   ============================================ */

.site-footer {
    background-color: var(--deep-bg-2) !important;
    color: var(--text-body) !important;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.bg-primary { background-color: var(--btn-primary) !important; }
.bg-secondary { background-color: var(--secondary-color) !important; }
.bg-deep-1 { background-color: var(--deep-bg-1) !important; }
.bg-deep-2 { background-color: var(--deep-bg-2) !important; }
.bg-alt { background-color: var(--alt-bg) !important; }
.bg-card { background-color: var(--card-bg) !important; }

.text-white { color: var(--text-white) !important; }
.text-body { color: var(--text-body) !important; }
.text-muted { color: var(--text-muted) !important; }
.text-primary { color: var(--btn-primary) !important; }
.text-accent { color: var(--accent-color) !important; }

.border-primary { border-color: var(--card-border) !important; }