/* Christmas Theme Variables */
:root {
    --xmas-red: #D42426;
    --xmas-green: #165B33;
    --xmas-gold: #F8B229;
    --xmas-white: #ffffff;
    --xmas-gradient: linear-gradient(135deg, var(--xmas-red) 0%, #a01a1c 100%);
    --xmas-font: 'Mountains of Christmas', cursive;
}

/* Typography Overrides */
.hero-title,
.section-title {
    font-family: var(--xmas-font) !important;
}

.hero-title {
    color: var(--xmas-white);
    text-shadow: 0 4px 10px rgba(180, 20, 20, 0.5) !important;
}

.section-title {
    color: var(--xmas-red);
}

.section-title:after {
    background: var(--xmas-green) !important;
}

/* Button Overrides */
.btn-primary {
    background: var(--xmas-gradient) !important;
    border: none;
    box-shadow: 0 5px 15px rgba(212, 36, 38, 0.3) !important;
}

.btn-primary:hover {
    box-shadow: 0 8px 25px rgba(212, 36, 38, 0.5) !important;
    transform: translateY(-2px);
}

.btn-outline-primary {
    border-color: var(--xmas-red) !important;
    color: var(--xmas-red) !important;
}

.btn-outline-primary:hover {
    background: var(--xmas-red) !important;
    color: white !important;
}

/* Hero Section with Snow */
.hero-section {
    background:
        linear-gradient(135deg, rgba(22, 91, 51, 0.85) 0%, rgba(212, 36, 38, 0.85) 100%),
        url("../img/banner3.png") no-repeat center center !important;
    background-size: cover !important;
    position: relative;
    overflow: hidden;
}

/* Snowflake Animation */
.snowflake {
    position: absolute;
    top: -10px;
    background: white;
    border-radius: 50%;
    opacity: 0.8;
    pointer-events: none;
    animation: fall linear infinite;
}

@keyframes fall {
    0% {
        transform: translateY(-10px) translateX(0) rotate(0deg);
        opacity: 0.8;
    }

    100% {
        transform: translateY(100vh) translateX(20px) rotate(360deg);
        opacity: 0;
    }
}

/* Festive Card Accents */
.card-modern {
    border-top: 4px solid var(--xmas-red) !important;
}

.card-modern-badge {
    background: var(--xmas-gold) !important;
    color: #fff !important;
}

.event-date-box {
    border: 2px solid var(--xmas-green) !important;
}

.event-day {
    color: var(--xmas-red) !important;
}

/* Footer Festive Touch */
footer {
    border-top: 5px solid var(--xmas-gold);
}

/* Christmas Lights Top Bar (Optional via CSS pseudo-element on body) */
body:before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 8px;
    background: repeating-linear-gradient(90deg,
            var(--xmas-red) 0px,
            var(--xmas-red) 20px,
            var(--xmas-green) 20px,
            var(--xmas-green) 40px,
            var(--xmas-gold) 40px,
            var(--xmas-gold) 60px);
    z-index: 9999;
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

/* Festive Footer */
footer {
    background: linear-gradient(to bottom, #0f2b1d, #05100a) !important;
    /* Dark Green Christmas */
    border-top: 5px solid var(--xmas-red) !important;
    position: relative;
    overflow: hidden;
}

footer:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 10px;
    background: repeating-linear-gradient(45deg,
            var(--xmas-red),
            var(--xmas-red) 10px,
            var(--xmas-white) 10px,
            var(--xmas-white) 20px);
    opacity: 0.8;
}

.footer-title {
    color: var(--xmas-gold) !important;
    font-family: var(--xmas-font);
    font-size: 1.5rem !important;
}

.footer-title:after {
    background: var(--xmas-red) !important;
}

.social-icons a {
    background: rgba(255, 255, 255, 0.1) !important;
    color: var(--xmas-gold) !important;
    border: 1px solid var(--xmas-gold);
}

.social-icons a:hover {
    background: var(--xmas-red) !important;
    color: white !important;
    border-color: var(--xmas-red) !important;
    transform: rotate(15deg) scale(1.1);
}

.footer-links a:hover,
.footer-contact i {
    color: var(--xmas-gold) !important;
}

.back-to-top {
    background: var(--xmas-red) !important;
    border: 2px solid white;
}