/* new-year-theme.css – load after the main stylesheet */

@media (max-width: 767px) {   
	.new-logo {
		height: 95% !important; width: auto;
	}
}

@media (min-width: 768px) {
		.new-logo {
			width:120px !important; height: auto;
		}
}

/* -------------------------------------------------
   Root colour variables (blue‑silver theme)
   ------------------------------------------------- */
:root {
    --primary-blue:    #FAFDF2;
    --accent-silver:   #D0F4EE;   /* light steel */
    --text-dark:       #212529;   /* near‑black for readability */
}

/* -------------------------------------------------
   Global background & text
   ------------------------------------------------- */
body {
    background-image: none !important;
    background-color: rgba(255,255,255,.9) !important;
    color: var(--text-dark) !important;
}

#main {
	color: #505050;
}

#siteWrapper * { /* doesn't work */
	background-color: rgba(220,220,220,.9) !important;
}

h1,h2,h3,h4 {
	color: #a0c4eb;
	color: #80b4ab;
	border: 1px dashed rgba(160,160,160,.9);
	border-width: 1px 0;
}

/* -------------------------------------------------
   Header – frosted glass with subtle gradient
   ------------------------------------------------- */
.header {
	background-color: #fafafa;
	background-image: none;
}

.header {
    position: relative;
		background-color: #cafafa;
}
/* New Year snow + glimmer background (pseudo-element) */
.header::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%;
		height: calc(100% + 100px); /* Extend beyond the header */
    background:
        /* Snowflakes */
        radial-gradient(1px 1px at 10% 10%, white 1px, transparent 4px),
        radial-gradient(1px 1px at 70% 20%, white 1px, transparent 4px),
        radial-gradient(1px 1px at 30% 60%, white 1px, transparent 4px),
        /* Glimmer */
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.2) 50%,
            rgba(255, 255, 255, 0) 100%
        );
    background-size: 25px 25px;
    opacity: 0.7;
    z-index: -1;
    animation:
        snowFall 30s linear infinite,
        glimmer 80s ease-in-out infinite;
}

/* Animations */
@keyframes snowFall {
    0% { transform: translateY(-50px); opacity:0; }
    1% {  opacity:0.7; }
    99% {  opacity:0.7; }
    100% { transform: translateY(100% + 50px); opacity:0; }
}
@keyframes glimmer {
    0% { background-position: 0% 50%; }
    50% { background-position: 50% 100%; }
    100% { background-position: 100% 50%; }
}


/* -------------------------------------------- */

/* Streetlight effect above the header */
.header::after {
    content: "";
    position: absolute;
    top: -120px;
    left: 50%;
    width: 120px;
    height: 120px;
    margin-left: -60px; /* Center the light */
    background:
        radial-gradient(
            circle at 50% 80%,
            rgba(255, 255, 200, 0.8) 0%,
            rgba(255, 255, 200, 0.3) 30%,
            transparent 60%
        ),
        conical-gradient(
            from 90deg at 50% 50%,
            rgba(255, 255, 200, 0.5) 0deg,
            transparent 30deg
        );
    border-radius: 50%;
    animation: streetlightMove 12s ease-in-out infinite alternate,
               flicker 3s ease-in-out infinite;
    pointer-events: none;
    z-index: 10;
    box-shadow: 0 0 30px 10px rgba(255, 255, 255, 0.4);
    box-shadow: 0 0 40px 120px rgba(255, 255, 255, 0.4);
}

@keyframes streetlightMove {
    0% {
        left: -10%;
        transform: translateX(-50px);
    }
    100% {
        left: 110%;
        transform: translateX(50px);
    }
}

@keyframes flicker {
    0%, 100% {
        opacity: 0.9;
    }
    50% {
        opacity: 0.95;
    }
}

/* -------------------------------------------- */

/* .header-site-name::after { */
/*     content: "🎄⛄🏡"; */
/*     font-size: 30px; letter-spacing: 10px; */
/*     text-shadow: 0 0 5px rgba(0, 0, 0, 0.5); */
/*     position: absolute; */
/*     top: -30px; right: 20px; */
/*     color: #fff; */
/*     z-index: 20; */
/* } */

.header-site-name::before {
    content: ""; position: absolute;  width: 100%; height: 100%;
		top: -83px;
		right: 0px;
		width: 120px; height: 100px;
		z-index: -1;
		background-image: url('for-new-year-theme.jpg');
		background-size: contain;
		background-repeat: no-repeat;
}
	.header {
			overflow: hidden;
	}
	.mist7b-dropdown {
		display: none;
	}


/* -------------------------------------------------
   Buttons – gradient from blue to silver
   ------------------------------------------------- */
#mainNav a,
button,
.button,
form input[type="submit"] {
    background: linear-gradient(135deg,
                var(--primary-blue) 30%,
                var(--accent-silver) 80%) !important;
    color: #555 !important;
    border: none !important;
    box-shadow: inset 0 0 3px rgba(0,0,0,.2);
}
#mainNav a:hover,
button:hover,
.button:hover,
form input[type="submit"]:hover {
    background: linear-gradient(135deg,
                var(--accent-silver) 30%,
                var(--primary-blue) 80%) !important;
}

.mainNavListContainer li div {
    background: linear-gradient(180deg,
                #eee 30%,
                #ccc 80%) !important;
	color: #5F5F5F !important;
}


/* -------------------------------------------------
   Alerts / messages – colour‑coded to theme
   ------------------------------------------------- */
.error   { background:#ffebee !important; border-color:#f44336 !important; }
.caution { background:#fff8e1 !important; border-color:#ffb300 !important; }
.success { background:#e8f5e9 !important; border-color:#4caf50 !important; }





/* -------------------------------------------- */
/* ---------------------------------------------*/