/**
 * The Enchanters - Holiday Theme Styles
 * CSS variables and styles that adapt to holiday themes
 */

:root {
    /* Default theme colors (will be overridden by JavaScript) */
    --holiday-primary: #C9B7E2; /* Lavender Glow */
    --holiday-secondary: #E6DDF3; /* Soft Lilac */
    --holiday-accent: #F6D77A; /* Stardust Gold */
    --holiday-glow: rgba(201, 183, 226, 0.5);
}

/* Apply holiday colors to primary elements */
body[data-holiday-theme] .hero h1,
body[data-holiday-theme] section h2 {
    color: var(--holiday-primary) !important;
}

/* Update button colors */
body[data-holiday-theme] .btn-primary {
    background: linear-gradient(135deg, var(--holiday-primary) 0%, var(--holiday-secondary) 100%) !important;
    border-color: var(--holiday-primary) !important;
}

body[data-holiday-theme] .btn-primary:hover {
    box-shadow: 0 12px 30px var(--holiday-glow) !important;
}

body[data-holiday-theme] .btn-secondary {
    color: var(--holiday-primary) !important;
    border-color: var(--holiday-primary) !important;
}

/* Update card borders and highlights */
body[data-holiday-theme] .card {
    border-color: var(--holiday-primary) !important;
}

body[data-holiday-theme] .card:hover {
    border-color: var(--holiday-accent) !important;
    box-shadow: 0 15px 40px var(--holiday-glow) !important;
}

body[data-holiday-theme] .card h3 {
    color: var(--holiday-accent) !important;
}

/* Update section borders */
body[data-holiday-theme] section {
    border-bottom-color: var(--holiday-primary) !important;
}

/* Update streamer of the week section */
body[data-holiday-theme] .streamer-featured::before {
    background: linear-gradient(90deg, var(--holiday-primary) 0%, var(--holiday-secondary) 50%, var(--holiday-accent) 100%) !important;
}

body[data-holiday-theme] .streamer-featured-label {
    background: linear-gradient(135deg, var(--holiday-primary) 0%, var(--holiday-accent) 100%) !important;
    -webkit-background-clip: text;
    background-clip: text;
}

/* Update links and accents */
body[data-holiday-theme] .highlight {
    color: var(--holiday-accent) !important;
}

/* Update header theme color meta tag */
body[data-holiday-theme] {
    --theme-color: var(--holiday-primary);
}

/* Specific holiday theme adjustments */

/* Christmas Theme - Add festive touches */
body[data-holiday-theme="Christmas"] .hero::before {
    background: linear-gradient(180deg, 
        rgba(196, 30, 58, 0.2) 0%, 
        rgba(22, 91, 51, 0.2) 50%, 
        rgba(196, 30, 58, 0.2) 100%) !important;
}

/* New Years Theme - Sparkle effect */
body[data-holiday-theme="New Years"] .hero h1,
body[data-holiday-theme="New Years"] section h2 {
    animation: sparkle 2s ease-in-out infinite;
}

@keyframes sparkle {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.3); }
}

/* Valentines Theme - Romantic glow */
body[data-holiday-theme="Valentines Day"] .card:hover {
    animation: heartbeat 1.5s ease-in-out infinite;
}

@keyframes heartbeat {
    0%, 100% { transform: translateY(-8px) scale(1); }
    50% { transform: translateY(-8px) scale(1.02); }
}

/* Halloween Theme - Spooky effects */
body[data-holiday-theme="Halloween"] .hero::before {
    background: linear-gradient(180deg, 
        rgba(255, 102, 0, 0.3) 0%, 
        rgba(106, 13, 173, 0.3) 50%, 
        rgba(0, 0, 0, 0.5) 100%) !important;
}

body[data-holiday-theme="Halloween"] .card:hover {
    animation: spooky-shake 0.5s ease-in-out;
}

@keyframes spooky-shake {
    0%, 100% { transform: translateY(-8px) rotate(0deg); }
    25% { transform: translateY(-8px) rotate(-2deg); }
    75% { transform: translateY(-8px) rotate(2deg); }
}

/* Thanksgiving Theme - Warm autumn colors */
body[data-holiday-theme="Thanksgiving"] .hero::before {
    background: linear-gradient(180deg, 
        rgba(210, 105, 30, 0.25) 0%, 
        rgba(255, 140, 0, 0.25) 50%, 
        rgba(139, 69, 19, 0.25) 100%) !important;
}

/* Easter Theme - Pastel soft glow */
body[data-holiday-theme="Easter"] .card {
    background: rgba(255, 105, 180, 0.05) !important;
}

/* St Patricks Day Theme - Lucky green */
body[data-holiday-theme="St Patricks Day"] .hero::before {
    background: linear-gradient(180deg, 
        rgba(0, 168, 107, 0.25) 0%, 
        rgba(34, 139, 34, 0.25) 50%, 
        rgba(0, 168, 107, 0.25) 100%) !important;
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    #holiday-indicator {
        bottom: 10px !important;
        right: 10px !important;
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }
}