/*
 * WP-Holiday Header Styles - Version 1.5.0
 * REVISION: Adjusted mobile light position (top: 5px) after switching to static positioning on mobile.
 */

/* =================================
 * 1. BASE HEADER STYLES (Overrides)
 * ================================= */

#wph-holiday-header {
    width: 100%;
    /* height is now handled by inline PHP style: height: XXXpx !important; */
    top: 0;
    left: 0;
    /* z-index, and background-color are handled by inline PHP style */
    overflow: hidden; 
    box-sizing: border-box;
    position: relative; 
}

/* * CRITICAL FIX for Overlap: 
 * This compensates for the fixed header height on DESKTOP only.
 */
#wph-holiday-header + * {
    /* Use the variable with a fallback to the old default -30px */
    margin-top: var(--wph-vertical-offset, -30px) !important;
}


/* Position options */
/* Only fixed is supported now */
.wph-pos-fixed {
    position: fixed;
}


/* Decoration layer to hold the repeating background image */
.wph-decoration-layer {
    position: absolute;
    width: 200%; /* Double width for animation */
    height: 100%; /* Important: This makes the image fill the dynamically set height */
    top: 0;
    left: 0;
    background-repeat: repeat-x; 
    background-size: auto 100%; 
}

/* =================================
 * 2. IMAGE MOTION CONTROL (Decoupled from lights)
 * ================================= */

/* Keyframes for a slow, subtle horizontal scroll of the background image */
@keyframes slowScroll {
    0% { background-position-x: 0; }
    100% { background-position-x: -1000px; } 
}

/* Scroll (Rotating Motion) */
.wph-motion-scroll {
    animation: slowScroll 60s linear infinite; 
}

/* No Movement (Static) */
.wph-motion-static {
    animation: none;
    width: 100%; /* Reset width to 100% since no scrolling is needed */
}

/* =================================
 * 3. LIGHTS LAYER STYLES (CSS Overlay)
 * ================================= */

.wph-lights-layer {
    position: absolute;
    top: 20px; /* Default desktop position */
    left: 0;
    width: 100%;
    height: 40px; /* Area where bulbs are placed */
    z-index: 100; 
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.wph-light-bulb {
    display: block;
    border-radius: 50%;
    background-color: currentColor; 
    box-shadow: 0 0 10px 2px currentColor;
    opacity: 1;
}

/* --- LIGHT BULB STYLES --- */

/* 1. String Small Bulbs */
.wph-bulbs-string-small .wph-light-bulb {
    width: 8px;
    height: 8px;
    box-shadow: 0 0 5px 1px currentColor;
}

/* 2. Large Bulbs (Shape) */
.wph-bulbs-large-bulbs .wph-light-bulb {
    width: 15px;
    height: 25px;
    /* Simulate a traditional bulb shape */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; 
}

/* --- LIGHT COLORS --- */

/* 3. White Lights */
.wph-lights-white-lights {
    color: #fceea4; /* Warm White */
}

/* 2. Color Lights */
.wph-lights-color-lights .wph-light-bulb {
    color: #f1c40f; /* Default to yellow */
}
.wph-lights-color-lights .wph-light-bulb:nth-child(4n + 1) { color: #e74c3c; /* Red */ }
.wph-lights-color-lights .wph-light-bulb:nth-child(4n + 2) { color: #f1c40f; /* Yellow/Amber */ }
.wph-lights-color-lights .wph-light-bulb:nth-child(4n + 3) { color: #3498db; /* Blue */ }
.wph-lights-color-lights .wph-light-bulb:nth-child(4n + 4) { color: #2ecc71; /* Green */ }

/* --- LIGHT STATE ANIMATION --- */

/* Keyframes for staggered blinking */
@keyframes blink {
    0%, 100% { 
        opacity: 1; 
        box-shadow: 0 0 10px 2px currentColor; 
    }
    50% { 
        opacity: 0.1; 
        box-shadow: none; 
    }
}

/* Blinking Light state */
.wph-state-blinking .wph-light-bulb {
    animation: blink 1.5s infinite;
    /* Individual delay is set via inline style in PHP for stagger */
}

/* Lights On state */
.wph-state-on .wph-light-bulb {
    animation: none;
    opacity: 1;
}

/* =================================
 * 4. MOBILE RESPONSIVENESS
 * ================================= */

@media (max-width: 768px) {
    
    /* Force position: static on mobile to make it part of the normal document flow and resolve z-index issues. */
    #wph-holiday-header {
        position: static !important;
        z-index: 99 !important; /* Extremely low z-index for safety */
    }

    /* Reset the compensating margin when the header is static */
    #wph-holiday-header + * {
        margin-top: 0 !important;
    }
    
    /* REVISION: Adjust light position for static layout */
    .wph-lights-layer {
        top: 5px; /* Reduced offset to pull lights down inside the static header */
        height: 30px;
    }

    /* Adjust decoration layer position when the header is static */
    .wph-decoration-layer {
        position: relative; 
    }

    /* Adjust bulb sizes for mobile */
    .wph-bulbs-large-bulbs .wph-light-bulb {
        width: 10px;
        height: 15px;
    }
    .wph-bulbs-string-small .wph-light-bulb {
        width: 5px;
        height: 5px;
    }

    /* Adjust scroll speed for smaller screens */
    @keyframes slowScroll {
        0% { background-position-x: 0; }
        100% { background-position-x: -500px; } 
    }
    /* Mobile scroll will be faster to cover 500px distance */
    .wph-motion-scroll {
        animation: slowScroll 40s linear infinite; 
    }
}