/* winter.css */
/* This file overrides the default styles for the Winter Wonderland event page */

:root {
    /* FIX: Changed to a darker color palette */
    --winter-light-blue: #011627; /* Darkest blue for main background */
    --winter-mid-blue: #0d2149;   /* Slightly lighter dark blue for sections */
    --winter-dark-blue: #0D47A1;  /* Kept for accents on light elements */
    --winter-red: #D32F2F;
    --winter-gold: #FFD700;
    --winter-dark-text: #ecf0f1;  /* This now serves as the light text color */
}

/* --- Page Body Override --- */
body.winter-theme {
    background-color: var(--winter-light-blue);
    color: var(--winter-dark-text);
}

/* --- Snow Container & Splash Screen --- */

/* FIX: Changed the #snow-container div to have no physical size. 
  This prevents the container itself from blocking mouse events.
  FIX 2: Upped the z-index to appear ON TOP of the splash screen.
*/
#snow-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    z-index: 10005; /* Upped from 10003 to be higher than #entry-splash */
    pointer-events: none;
}

/* FIX: Added a new, more specific rule to target the canvas element created by the snow script.
  We are forcing it to be full screen and, most importantly, forcing it to ignore all
  mouse events with `pointer-events: none !important;`. This should definitively solve the issue.
*/
#snow-container > canvas {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    pointer-events: none !important;
}

#entry-splash {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* REMOVED: background-image, background-size, and background-position */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10004; 
    transition: opacity 1.5s ease-in, visibility 1.5s;
    padding: 1rem;
    box-sizing: border-box;
    overflow: hidden; /* Ensures video doesn't spill out */
}

/* ADDED: Styling for the new video background */
.splash-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fills the container, cropping if necessary */
    z-index: 1; /* Places the video at the bottom of the splash screen's stacking order */
}

/* MODIFIED: Added position and z-index to ensure it's on top of the video */
.splash-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative; 
    z-index: 2; /* Ensures it sits on top of the video */
}
.splash-logo, .splash-image {
    max-width: clamp(150px, 30vw, 300px);
    height: auto;
    margin: 1rem 0;
}
.splash-image {
    margin-top: 1.5rem;
}

#entry-button {
    padding: 1rem 2rem;
    font-size: 1.4rem;
    font-family: var(--header-font);
    background-color: var(--winter-red);
    color: var(--light-text);
    border: none;
    border-radius: 50px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
#entry-button:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

/* --- FIX: Header Override for Scrolled State --- */
/* This ensures that when the header gets its light background on scroll,
   the navigation links and icons turn dark, overriding the theme's default light text color.
*/
.winter-theme header.scrolled #main-nav a,
.winter-theme header.scrolled .login-icon a,
.winter-theme header.scrolled #theme-toggle,
.winter-theme header.scrolled .menu-button {
    color: #011627; /* A dark color for contrast against the light scrolled header */
}

/* --- REVISED: Mobile Snow (Pure CSS) --- */
@media (max-width: 768px) {
    .snow-mobile-container {
        display: block; /* Ensure it's visible on mobile */
    }
    .snow-mobile {
        position: fixed;
        top: -5vh;
        width: 2px; /* Tiny dots */
        height: 2px; /* Tiny dots */
        background: white;
        border-radius: 50%;
        z-index: 10002;
        pointer-events: none;
        will-change: transform;
        opacity: 0;
        box-shadow: 0 0 4px 1px rgba(255, 255, 255, 0.9); /* Subtle glow */
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }

    @keyframes fall {
        0% { transform: translateY(0vh) translateX(0); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: translateY(110vh) translateX(20px); opacity: 1; }
    }

    @keyframes fall-reverse {
        0% { transform: translateY(0vh) translateX(0); opacity: 0; }
        10% { opacity: 1; }
        100% { transform: translateY(110vh) translateX(-20px); opacity: 1; }
    }

    /* Randomize properties for up to 100 flakes */
    .snow-mobile:nth-child(10n - 9) { left: 10%; animation-name: fall; animation-duration: 10s; animation-delay: -2s; }
    .snow-mobile:nth-child(10n - 8) { left: 20%; animation-name: fall-reverse; animation-duration: 12s; animation-delay: -5s; }
    .snow-mobile:nth-child(10n - 7) { left: 30%; animation-name: fall; animation-duration: 9s; animation-delay: -7s; }
    .snow-mobile:nth-child(10n - 6) { left: 40%; animation-name: fall-reverse; animation-duration: 15s; animation-delay: -1s; }
    .snow-mobile:nth-child(10n - 5) { left: 50%; animation-name: fall; animation-duration: 11s; animation-delay: -9s; }
    .snow-mobile:nth-child(10n - 4) { left: 60%; animation-name: fall-reverse; animation-duration: 18s; animation-delay: -4s; }
    .snow-mobile:nth-child(10n - 3) { left: 70%; animation-name: fall; animation-duration: 8s; animation-delay: -11s; }
    .snow-mobile:nth-child(10n - 2) { left: 80%; animation-name: fall-reverse; animation-duration: 13s; animation-delay: -14s; }
    .snow-mobile:nth-child(10n - 1) { left: 90%; animation-name: fall; animation-duration: 10s; animation-delay: -6s; }
    .snow-mobile:nth-child(10n) { left: 100%; animation-name: fall-reverse; animation-duration: 16s; animation-delay: -8s; }
}

/* --- Main Content Theming --- */
.winter-theme .event-hero {
    min-height: 60vh;
    background: linear-gradient(rgba(13, 71, 161, 0.6), rgba(13, 71, 161, 0.6)), url('/Assets/Images/xmas.jpg') no-repeat center center/cover;
    margin-top: -70px;
}
.winter-theme #event-details {
    background-color: var(--winter-light-blue);
}
.winter-theme #event-details .section-header h2 {
    /* FIX: Changed header color to gold for contrast */
    color: var(--winter-gold);
}
.winter-theme .perk-item {
    background-color: #fff;
}
.winter-theme .perk-item i {
    color: var(--winter-red);
}
.winter-theme .perk-item h3 {
    /* This remains dark blue, which is fine on a white background */
    color: var(--winter-dark-blue);
}
.winter-theme #winter-booking-cta {
    background-color: var(--winter-mid-blue);
}
.winter-theme #winter-booking-cta .section-header h2 {
    /* FIX: Changed header color to gold for contrast */
    color: var(--winter-gold);
}

/* FIX: This rule now correctly uses the --winter-dark-text variable, 
  which has been updated to a light color, ensuring paragraphs are readable.
*/
.winter-theme #event-details .section-header p,
.winter-theme #winter-booking-cta .section-header p {
    color: var(--winter-dark-text);
}
.winter-theme .cta-button {
    background-color: var(--winter-red);
    color: var(--light-text);
}
.winter-theme .cta-button:hover {
    background-color: var(--winter-gold);
    color: var(--winter-dark-text);
}