/* Winter theme. Loaded only when "Iarna" is chosen in /admin/.
   Icy night colors, snow caps on the menu cards, and the decorations from files/js/season.js. */

/* ---------- Colors ---------- */
body.theme-winter #bg {
    background: linear-gradient(145deg, #1c2f48 5%, #0b1523 55%, #020407 115%);
}

/* No gray header background (and no gray-to-transparent fade): the themed background shows through */
body.theme-winter .heading,
body.theme-winter .heading-menu {
    animation: none;
    background: transparent;
}

/* The gray smoke wave right under the header only matches the standard header color:
   make it invisible but keep its space, so the page below stays where it is */
body.theme-winter header + .wave-divider {
    visibility: hidden;
}

/* The big red smoke behind the logo is only decoration: clicks go through it,
   and the page content stays above it */
body.theme-winter .background-smoke,
body.theme-winter .background-smoke-mobile {
    pointer-events: none;
}

body.theme-winter .menu-container {
    position: relative;
    z-index: 2;
}

body.theme-winter .right-zone h1,
body.theme-winter .flavours-container h2,
body.theme-winter .gallery-photos h2,
body.theme-winter .menu-container h2,
body.theme-winter .hours-container h2 {
    text-shadow: 0 0 18px rgba(170, 215, 255, .55), 2px 2px 4px rgba(0, 0, 0, .8);
}

body.theme-winter .left-links a:hover,
body.theme-winter .right-links a:hover,
body.theme-winter .social-icons a:hover {
    color: #bfe4ff;
}

body.theme-winter .menu-item img:hover,
body.theme-winter .flavour-item img:hover {
    filter: drop-shadow(0 0 16px rgba(170, 215, 255, .6));
}

/* Category buttons */
body.theme-winter .category {
    border-color: #bfe4ff;
}

body.theme-winter .category.active {
    background-color: #e3f3ff;
    color: #10202f;
}

/* Product cards: icy border + snow on top */
body.theme-winter .menu-shi-item {
    border-color: #bfe4ff;
    box-shadow: 0 0 16px rgba(150, 205, 255, .16);
}

body.theme-winter .menu-shi-item::before {
    content: "";
    position: absolute;
    top: -1px;
    right: 0;
    left: 0;
    z-index: 4;
    height: 13px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 13'%3E%3Cpath d='M0 0H120V7C113 8 106 6 99 9S86 7 78 8 66 12 58 10 46 5 38 7 26 12 18 10 6 5 0 7Z' fill='%23f4fbff'/%3E%3C/svg%3E") repeat-x left top / 120px 13px;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35));
    pointer-events: none;
}

body.theme-winter .menu-shi-item .item-details h3 {
    margin-top: 4px;
}

body.theme-winter .item-divider,
body.theme-winter .item-subdivider {
    text-shadow: 0 0 14px rgba(170, 215, 255, .5), -3px 2px #0e2238;
}

/* Navigation moves down so the social icons are not under the lights */
body.theme-winter .menubar {
    padding-top: 40px;
}

@media (max-width: 700px) {
    body.theme-winter .menubar {
        padding-top: 32px;
    }
}

/* ---------- Christmas lights ---------- */
.shs-lights {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
    width: 100%;
    overflow: hidden;
    pointer-events: none;
}

.shs-lights svg {
    display: block;
}

.shs-bulb {
    filter: drop-shadow(0 0 5px currentColor);
    animation: shsTwinkle 2.2s ease-in-out infinite;
}

@keyframes shsTwinkle {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: .35;
    }
}

/* ---------- Falling snow ---------- */
.shs-snow {
    position: fixed;
    inset: 0;
    z-index: 5;
    overflow: hidden;
    pointer-events: none;
}

.shs-flake {
    position: absolute;
    top: -12px;
    animation: shsFall 14s linear infinite;
}

.shs-flake span {
    display: block;
    border-radius: 50%;
    background: radial-gradient(circle, #fff 0%, #fff 45%, rgba(255, 255, 255, 0) 72%);
    animation: shsSway 4s ease-in-out infinite alternate;
}

@keyframes shsFall {
    to {
        transform: translateY(105vh);
    }
}

@keyframes shsSway {
    from {
        transform: translateX(-18px);
    }
    to {
        transform: translateX(18px);
    }
}

/* ---------- Snowbank with pine trees on top of the footer ---------- */
.shs-footer-deco {
    position: relative;
    height: 0;
    pointer-events: none;
}

.shs-drift {
    position: absolute;
    bottom: -4px;
    left: 0;
    z-index: 2;
    width: 100%;
    height: clamp(18px, 2.6vw, 34px);
    filter: drop-shadow(0 -2px 6px rgba(190, 225, 255, .25));
}

.shs-pine {
    position: absolute;
    bottom: 2px;
    z-index: 1;
}

.shs-pine svg {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .5));
}

.shs-pine-1 {
    left: 3%;
    width: clamp(46px, 5.5vw, 84px);
}

.shs-pine-2 {
    left: calc(3% + clamp(38px, 4.6vw, 70px));
    width: clamp(32px, 3.8vw, 58px);
}

.shs-pine-3 {
    right: 4%;
    width: clamp(48px, 6vw, 90px);
}

@media (prefers-reduced-motion: reduce) {
    .shs-bulb {
        animation: none;
    }
}