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

   This file defines the color system for ALL Insider sites.
   Colors are read from Blocksy Theme Palette (Customizer).

   Each site's accent comes from --theme-palette-color-1
   ============================================= */

:root {
    /* =========================================
       BACKGROUNDS - Dark Mode Base
       ========================================= */
    --bg-main: #0a0a0a;           /* Page background */
    --bg-card: #1c1c1c;           /* Card/section backgrounds */
    --bg-elevated: #252525;       /* Elevated elements, modals */
    --bg-input: #1a1a1a;          /* Form inputs */

    /* =========================================
       PRIMARY ACCENT - FROM BLOCKSY THEME PALETTE
       Each site sets Color 1 and Color 2 in Blocksy Customizer.
       Vegas: Gold (#D4AF37)
       Tyler: Rose (#D1204F)
       ========================================= */
    --primary-accent: var(--theme-palette-color-1);
    --primary-accent-dark: var(--theme-palette-color-2);
    --primary-accent-light: var(--theme-palette-color-1);
    --primary-accent-rgb: 212, 175, 55;  /* Legacy - update per site if needed */

    /* =========================================
       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 - CHANGES PER CITY
       Vegas: Black (on gold buttons)
       Tyler: White (on rose red buttons)
       ========================================= */
    --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 {
    /* Vegas legacy aliases (--vg-*) */
    --vg-obsidian: var(--bg-main);
    --vg-charcoal: var(--bg-card);
    --vg-charcoal-light: var(--bg-elevated);
    --vg-bg: var(--bg-main);
    --vg-bg-card: var(--bg-card);
    --vg-bg-elevated: var(--bg-elevated);

    /* ACCENT COLORS - Terracotta now maps to Gold */
    --vg-terracotta: var(--primary-accent);
    --vg-terracotta-dark: var(--primary-accent-dark);
    --vg-terracotta-light: var(--primary-accent-light);
    --vg-accent: var(--primary-accent);
    --vg-accent-hover: var(--primary-accent-dark);

    /* RATINGS/HIGHLIGHTS */
    --vg-sand: var(--star-gold);
    --vg-sand-dark: var(--star-gold-dark);
    --vg-sand-light: var(--primary-accent-light);
    --vg-highlight: var(--star-gold);
    --vg-highlight-hover: var(--star-gold-dark);
    --vg-rating: var(--star-gold);

    /* TEXT */
    --vg-text: var(--text-main);
    --vg-text-muted: var(--text-muted);
    --vg-text-subtle: var(--text-subtle);
    --vg-eggshell: var(--text-main);
    --vg-eggshell-muted: var(--text-secondary);

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

    /* STATUS */
    --vg-success: var(--success);
    --vg-warning: var(--warning);
    --vg-error: var(--error);
    --vg-heart: var(--primary-accent);

    /* Tyler legacy aliases (--tx-*) - for future Tyler deployment */
    --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
   ============================================= */

/* Rating badges - ALWAYS bright yellow */
.std-card-badge,
.badge-rating,
.rating-badge,
[class*='badge'] {
    background: var(--star-gold) !important;
    background-color: var(--star-gold) !important;
    color: #000 !important;
}

/* LOCALS RECOMMEND label - ALWAYS white */
.std-card-recommend-label {
    color: #ffffff !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
   Stars in individual reviews must be yellow, not accent color
   HIGH SPECIFICITY to override all theme CSS
   ============================================= */
.vl-review-stars,
.review-stars,
.star-rating,
body .vl-review-stars,
body .review-stars,
body .star-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: #0B0B0B !important;
}

/* =============================================
   BUTTON TEXT COLOR - Uses --button-text variable
   Override in city-override.css for different colors
   ============================================= */
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 cbd-button-text variable */
.search-form button,
body .search-form button,
.cbd-hero .search-form button,
form.search-form button {
    color: var(--cbd-button-text) !important;
}
/* =============================================
   HERO LINKS - Outline style buttons
   Transparent bg, accent border, white text
   Hover: secondary accent fill
   ============================================= */
.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(--theme-palette-color-1) !important;
}

.hero-link:hover,
.hero-links a:hover,
body .hero-link:hover,
body .hero-links a:hover {
    background: var(--theme-palette-color-2) !important;
    background-color: var(--theme-palette-color-2) !important;
    border-color: var(--theme-palette-color-2) !important;
    color: var(--cbd-button-text) !important;
}

/* =============================================
   POPULAR SEARCH PILLS - Dark pills with accent hover
   ============================================= */
.popular-searches a,
body .popular-searches a {
    color: #ffffff !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.15) !important;
}

.popular-searches a:hover,
body .popular-searches a:hover {
    background: var(--theme-palette-color-1) !important;
    border-color: var(--theme-palette-color-1) !important;
    color: var(--cbd-button-text) !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;
}