/* =============================================
   INSIDER NETWORK - UNIVERSAL CSS VARIABLES v1.0

   This file defines the color system for ALL Insider sites.
   Each city overrides only --primary-accent and variants.

   Current Site: Little Rock Insider (littlerockinsider.com)
   ============================================= */

:root {
    /* =========================================
       BACKGROUNDS - Dark Mode Base
       ========================================= */
    --bg-main: #000000;           /* Page background */
    --bg-card: #161616;           /* Card/section backgrounds */
    --bg-elevated: #000000;       /* Elevated elements, modals */
    --bg-input: #000000;          /* Form inputs */

    /* =========================================
       PRIMARY ACCENT - LITTLE ROCK: FOREST GREEN
       Natural Arkansas, Ozark mountains, green landscapes
       ========================================= */
    --primary-accent: #2D5A27;
    --primary-accent-dark: #1F3D1B;
    --primary-accent-light: #4a8542;
    --primary-accent-rgb: 45, 90, 39;  /* For rgba() usage */

    /* =========================================
       RATING BADGE - Universal (IMDb style)
       ========================================= */
    --star-gold: #F5C518;
    --star-gold-dark: #d4a617;

    /* =========================================
       TEXT COLORS
       ========================================= */
    --text-main: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #94a3b8;
    --text-subtle: #666666;

    /* =========================================
       BUTTON TEXT - WHITE ON GREEN
       White text on Forest Green buttons for contrast
       ========================================= */
    --button-text: #ffffff;

    /* =========================================
       BORDERS
       ========================================= */
    --border-color: #333333;
    --border-light: #444444;
    --border-subtle: #2a2a2a;

    /* =========================================
       STATUS COLORS
       ========================================= */
    --success: #22c55e;
    --success-bg: rgba(34, 197, 94, 0.15);
    --warning: #eab308;
    --warning-bg: rgba(234, 179, 8, 0.15);
    --error: #ef4444;
    --error-bg: rgba(239, 68, 68, 0.15);

    /* =========================================
       HOURS STATUS (Open/Closed badges)
       ========================================= */
    --hours-open-bg: #1a3d1a;
    --hours-open-text: #4ade80;
    --hours-closed-bg: #3d1a1a;
    --hours-closed-text: #f87171;
    --hours-closing-bg: #3d3d1a;
    --hours-closing-text: #fbbf24;

    /* =========================================
       SHADOWS
       ========================================= */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5);
    --shadow-card: 0 4px 20px rgba(0, 0, 0, 0.3);

    /* =========================================
       SPACING (for consistency)
       ========================================= */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* =========================================
       BORDER RADIUS
       ========================================= */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* =========================================
       THIRD-PARTY BRAND COLORS (non-themeable)
       ========================================= */
    --yelp-red: #d32323;
    --yelp-red-hover: #af1c1c;
    --google-blue: #4285f4;
    --google-blue-hover: #3367d6;
    --tripadvisor-green: #34e0a1;
}

/* =============================================
   LEGACY VARIABLE ALIASES
   For backwards compatibility during transition
   ============================================= */
:root {
    /* Little Rock legacy aliases (--lr-*) */
    --lr-obsidian: var(--bg-main);
    --lr-charcoal: var(--bg-card);
    --lr-charcoal-light: var(--bg-elevated);
    --lr-bg: var(--bg-main);
    --lr-bg-card: var(--bg-card);
    --lr-bg-elevated: var(--bg-elevated);

    /* ACCENT COLORS */
    --lr-green: var(--primary-accent);
    --lr-green-dark: var(--primary-accent-dark);
    --lr-green-light: var(--primary-accent-light);
    --lr-accent: var(--primary-accent);
    --lr-accent-hover: var(--primary-accent-dark);

    /* RATINGS/HIGHLIGHTS - Always yellow */
    --lr-rating: var(--star-gold);
    --lr-highlight: var(--star-gold);

    /* TEXT */
    --lr-text: var(--text-main);
    --lr-text-muted: var(--text-muted);
    --lr-text-subtle: var(--text-subtle);

    /* BORDERS */
    --lr-border: var(--border-color);
    --lr-border-light: var(--border-light);

    /* STATUS */
    --lr-success: var(--success);
    --lr-warning: var(--warning);
    --lr-error: var(--error);

    /* Vegas/Tyler compatibility aliases */
    --vg-obsidian: var(--bg-main);
    --vg-charcoal: var(--bg-card);
    --vg-terracotta: var(--primary-accent);
    --vg-sand: var(--star-gold);
    --vg-eggshell: var(--text-main);
    --tx-gold: var(--star-gold);
    --tx-orange: var(--primary-accent);
}

/* =============================================
   WORDPRESS ADMIN BAR PROTECTION
   Never let theme colors bleed into WP admin
   ============================================= */
#wpadminbar,
#wpadminbar * {
    --primary-accent: initial;
    --primary-accent-dark: initial;
    --primary-accent-light: initial;
}

#wpadminbar a,
#wpadminbar a:hover,
#wpadminbar a:focus,
#wpadminbar .ab-item,
#wpadminbar .ab-item:hover,
#wpadminbar .ab-item:focus,
#wpadminbar .ab-label,
#wpadminbar .ab-icon,
#wpadminbar #wp-admin-bar-site-name a,
#wpadminbar #wp-admin-bar-site-name a:hover {
    color: inherit !important;
}

/* Reset specific admin bar elements to WP defaults */
#wpadminbar #wp-admin-bar-site-name > .ab-item {
    color: #a0a5aa !important;
}

#wpadminbar #wp-admin-bar-site-name > .ab-item:hover {
    color: #00b9eb !important;
}

/* =============================================
   UNIVERSAL OVERRIDES - These NEVER change with accent
   HIGH SPECIFICITY to override all theme CSS
   ============================================= */

/* Rating badges - ALWAYS bright yellow - MAXIMUM SPECIFICITY */
.std-card-badge,
.badge-rating,
.rating-badge,
.std-card .std-card-badge,
.std-card-grid .std-card .std-card-badge,
body .std-card-badge,
body .badge-rating,
body .std-card-grid .std-card .std-card-badge,
[class*='badge'] {
    background: #F5C518 !important;
    background-color: #F5C518 !important;
    background-image: none !important;
    color: #000 !important;
}

/* LOCALS RECOMMEND label - ALWAYS white - MAXIMUM SPECIFICITY */
.std-card-recommend-label,
body .std-card-recommend-label,
.std-card .std-card-recommend-label,
.std-card-grid .std-card .std-card-recommend-label {
    color: #ffffff !important;
}

/* =============================================
   REVIEW STARS - ALWAYS bright yellow
   HIGH SPECIFICITY to override all theme CSS
   ============================================= */
.vl-review-rating,
.vl-review-stars,
.review-stars,
.star-rating,
body .vl-review-rating,
body .vl-review-stars,
body .review-stars,
body .star-rating,
html body .vl-review-rating,
html body .vl-review-stars,
html body .review-stars,
html body .star-rating {
    color: #F5C518 !important;
}

/* =============================================
   GUEST SATISFACTION - ALWAYS bright yellow
   Progress bar and score badge use star-gold
   HIGH SPECIFICITY to override layout file
   ============================================= */
.vl-satisfaction-fill,
body .vl-satisfaction-fill,
.vl-satisfaction .vl-satisfaction-fill,
.vl-sidebar-card .vl-satisfaction-fill,
div.vl-satisfaction-bar div.vl-satisfaction-fill,
body .vl-sidebar-card .vl-satisfaction-fill,
body div.vl-satisfaction-bar div.vl-satisfaction-fill {
    background: #F5C518 !important;
    background-color: #F5C518 !important;
    background-image: none !important;
}

.vl-satisfaction-score,
body .vl-satisfaction-score,
.vl-satisfaction .vl-satisfaction-score,
.vl-sidebar-card .vl-satisfaction-score,
span.vl-satisfaction-score,
body span.vl-satisfaction-score {
    background: #F5C518 !important;
    background-color: #F5C518 !important;
    background-image: none !important;
    color: #000000 !important;
}

/* =============================================
   BUTTON TEXT COLOR - Uses --button-text variable
   White text on Forest Green buttons
   ============================================= */
button,
.btn,
.button,
a.btn,
a.button,
input[type="submit"],
input[type="button"],
.wp-block-button__link,
.hero-cta,
.cta-button,
.webigniter-cta,
.view-all-btn,
.own-business-cta,
body button,
body .btn,
body a.btn,
body .webigniter-cta,
body .view-all-btn {
    color: var(--button-text) !important;
}

/* Search form button - uses button-text variable */
.search-form button,
body .search-form button,
.cbd-hero .search-form button,
form.search-form button {
    color: var(--button-text) !important;
}

/* =============================================
/* =============================================
   HERO LINKS - Outline style buttons
   Transparent bg, accent border, white text
   ============================================= */
.hero-link,
.hero-links a,
body .hero-link,
body .hero-links a {
    color: #ffffff !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 2px solid var(--primary-accent) !important;
}

.hero-link:hover,
.hero-links a:hover,
body .hero-link:hover,
body .hero-links a:hover {
    background: rgba(var(--primary-accent-rgb), 0.15) !important;
    border-color: var(--primary-accent) !important;
    color: #ffffff !important;
}

/* =============================================
   FOOTER LINKS - Primary accent on hover
   Universal across all Insider sites
   ============================================= */

/* Footer column links - hover state uses primary accent */
.cbd-footer-column a:hover,
footer a:hover,
.site-footer a:hover,
body .cbd-footer-column a:hover,
body footer a:hover,
body .site-footer a:hover {
    color: var(--primary-accent) !important;
}

/* Footer bottom links (WebIgniter, etc.) - always primary accent */
.cbd-footer-bottom a,
.cbd-footer-bottom a:hover,
body .cbd-footer-bottom a,
body .cbd-footer-bottom a:hover,
footer .cbd-footer-bottom a,
.site-footer .cbd-footer-bottom a {
    color: var(--primary-accent) !important;
}
html, body { overflow-x: hidden !important; }

/* Mobile overflow fix */
*, *::before, *::after {
    box-sizing: border-box;
}
.homepage, .content-container, .content-section, .std-card-grid {
    
    overflow-x: hidden !important;
}
@media (max-width: 768px) {
    .homepage {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}