/* Jouluteema käyttää samoja kerroksia kuin teeman nykyinen taustakuvien häivytys. */
body.radio-seasonal-theme--christmas {
    --radio-time-glow-left: rgba(190, 38, 52, 0.30);
    --radio-time-glow-right: rgba(44, 145, 83, 0.27);
    --jr-seasonal-page-title-before: "🎄";
    --jr-seasonal-page-title-after: "❄️";
    --jr-seasonal-section-title-before: "🍖";
    --jr-seasonal-section-title-after: "🍺";
    --jr-seasonal-card-title-after: "🍪";
    --jr-seasonal-card-kicker-after: "🤶";
    --jr-seasonal-hero-kicker-before: "🎅";
    --jr-chat-seasonal-border: rgba(218, 239, 250, 0.58);
    --jr-chat-seasonal-glow: rgba(198, 232, 250, 0.18);
    --jr-chat-snow-opacity: 0.28;
    --jr-chat-snow-duration: 34s;
    --jr-home-card-artists-icon: "🎤";
    --jr-home-card-advertisers-icon: "📻";
    --jr-home-card-community-icon: "🎄";
    --jr-home-card-events-icon: "🎁";
}

body.radio-seasonal-theme--default {
    --jr-chat-seasonal-border: transparent;
    --jr-chat-seasonal-glow: transparent;
    --jr-home-card-artists-icon: "🎤";
    --jr-home-card-advertisers-icon: "📣";
    --jr-home-card-community-icon: "🤝";
    --jr-home-card-events-icon: "🎉";
}

/* Halloween reuses these CSS decoration locations with its own symbols and colors. */
body.radio-seasonal-theme--halloween {
    --jr-seasonal-page-title-before: "🎃";
    --jr-seasonal-page-title-after: "🦇";
    --jr-seasonal-section-title-before: "🕸️";
    --jr-seasonal-section-title-after: "👻";
    --jr-seasonal-card-title-after: "🕷️";
    --jr-seasonal-card-kicker-after: "🧙";
    --jr-seasonal-hero-kicker-before: "👻";
    --jr-chat-seasonal-border: rgba(235, 139, 57, 0.62);
    --jr-chat-seasonal-glow: rgba(235, 118, 42, 0.16);
    --jr-chat-snow-opacity: 0;
}

.radio-page h1::before,
.radio-page h1::after,
.radio-page .radio-section h2::before,
.radio-page .radio-section h2::after,
.radio-page .radio-note-card h2::after,
.radio-page .radio-note-card h3::after,
.radio-page .radio-note-card .radio-kicker::after,
.radio-page .radio-hero .radio-kicker::before,
.radio-page .radio-programs-hero .radio-kicker::before {
    display: inline-block;
    line-height: 1;
    vertical-align: 0.12em;
    filter: drop-shadow(0 2px 5px var(--jr-chat-seasonal-glow));
}

.radio-page h1::before {
    content: var(--jr-seasonal-page-title-before);
    margin-inline-end: 0.28em;
    font-size: 0.62em;
}

.radio-page h1::after {
    content: var(--jr-seasonal-page-title-after);
    margin-inline-start: 0.28em;
    font-size: 0.58em;
}

.radio-page .radio-section h2::before {
    content: var(--jr-seasonal-section-title-before);
    margin-inline-end: 0.32em;
    font-size: 0.76em;
}

.radio-page .radio-section h2::after {
    content: var(--jr-seasonal-section-title-after);
    margin-inline-start: 0.32em;
    font-size: 0.7em;
}

.radio-page .radio-note-card h2::after,
.radio-page .radio-note-card h3::after {
    content: var(--jr-seasonal-card-title-after);
    margin-inline-start: 0.34em;
    font-size: 0.72em;
}

.radio-page .radio-note-card .radio-kicker::after {
    content: var(--jr-seasonal-card-kicker-after);
    margin-inline-start: 0.35em;
    font-size: 0.95em;
}

.radio-page .radio-hero .radio-kicker::before,
.radio-page .radio-programs-hero .radio-kicker::before {
    content: var(--jr-seasonal-hero-kicker-before);
    margin-inline-end: 0.4em;
    font-size: 0.9em;
}

body.radio-seasonal-theme--christmas .radio-page .radio-hero--home .radio-hero__tagline::before,
body.radio-seasonal-theme--christmas .radio-page .radio-hero--home .radio-hero__tagline::after {
    display: inline-block;
    font-size: 0.88em;
    vertical-align: 0.08em;
    filter: drop-shadow(0 2px 5px var(--jr-chat-seasonal-glow));
}

body.radio-seasonal-theme--christmas .radio-page .radio-hero--home .radio-hero__tagline::before {
    content: "🎄";
    margin-inline-end: 0.42em;
}

body.radio-seasonal-theme--christmas .radio-page .radio-hero--home .radio-hero__tagline::after {
    content: "❄️";
    margin-inline-start: 0.42em;
}

body.radio-seasonal-theme--default .radio-home-links__grid .radio-audience-card h2::before,
body.radio-seasonal-theme--christmas .radio-home-links__grid .radio-audience-card h2::before,
body.radio-seasonal-theme--default .radio-home-links__grid .radio-audience-card h2::after,
body.radio-seasonal-theme--christmas .radio-home-links__grid .radio-audience-card h2::after {
    content: none;
}

body.radio-seasonal-theme--default .radio-home-links__grid .radio-audience-card .radio-kicker::after,
body.radio-seasonal-theme--christmas .radio-home-links__grid .radio-audience-card .radio-kicker::after {
    display: block;
    margin-block-start: 0.32em;
    font-size: 1.45rem;
    line-height: 1;
    filter: drop-shadow(0 2px 5px var(--jr-chat-seasonal-glow));
}

body.radio-seasonal-theme--default .radio-home-links__grid .radio-audience-card--artists .radio-kicker::after,
body.radio-seasonal-theme--christmas .radio-home-links__grid .radio-audience-card--artists .radio-kicker::after {
    content: var(--jr-home-card-artists-icon, "🎤");
}

body.radio-seasonal-theme--default .radio-home-links__grid .radio-audience-card--advertisers .radio-kicker::after,
body.radio-seasonal-theme--christmas .radio-home-links__grid .radio-audience-card--advertisers .radio-kicker::after {
    content: var(--jr-home-card-advertisers-icon, "📣");
}

body.radio-seasonal-theme--default .radio-home-links__grid .radio-audience-card--community .radio-kicker::after,
body.radio-seasonal-theme--christmas .radio-home-links__grid .radio-audience-card--community .radio-kicker::after {
    content: var(--jr-home-card-community-icon, "🤝");
}

body.radio-seasonal-theme--default .radio-home-links__grid .radio-audience-card--events .radio-kicker::after,
body.radio-seasonal-theme--christmas .radio-home-links__grid .radio-audience-card--events .radio-kicker::after {
    content: var(--jr-home-card-events-icon, "🎉");
}

body.radio-seasonal-theme--christmas .global-radio-player [data-radio-now-playing]::before {
    content: "🎄";
    margin-inline-end: 0.42em;
}

body.radio-seasonal-theme--christmas .global-radio-player [data-radio-now-playing]::after {
    content: "❄️";
    margin-inline-start: 0.42em;
}

body.radio-seasonal-theme--christmas .ja-radio-chat__emoji-toggle > img.emoji {
    display: none !important;
}

body.radio-seasonal-theme--christmas .ja-radio-chat__emoji-toggle {
    font-size: 0;
}

body.radio-seasonal-theme--christmas .ja-radio-chat__emoji-toggle::before {
    content: "🎅";
    font-size: 1.15rem;
    line-height: 1;
}

.radio-page--chat .jaakon-radio-aurinkotiedot--list {
    position: relative;
    border-color: var(--jr-chat-seasonal-border);
    box-shadow: 0 0 22px var(--jr-chat-seasonal-glow), 0 16px 40px rgba(0, 0, 0, 0.18);
}

body.radio-seasonal-theme--default .radio-page--chat .jaakon-radio-aurinkotiedot--list {
    border-color: transparent;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

/* Kevyt lumisade jouluteeman chat- ja etusivuotsakkeisiin. */
body.radio-seasonal-theme--christmas .radio-page--chat .radio-programs-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

body.radio-seasonal-theme--christmas .radio-page .radio-hero--home {
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

body.radio-seasonal-theme--christmas .radio-page .radio-hero--home::before {
    position: absolute;
    z-index: 0;
    inset: -100% 0;
    content: "";
    pointer-events: none;
    opacity: 0.34;
    background-image:
        radial-gradient(1.8px 1.8px at 18px 34px, rgba(255, 255, 255, 0.9) 98%, transparent),
        radial-gradient(1.2px 1.2px at 72px 116px, rgba(226, 242, 255, 0.85) 98%, transparent),
        radial-gradient(1.6px 1.6px at 146px 68px, rgba(255, 255, 255, 0.78) 98%, transparent),
        radial-gradient(1.2px 1.2px at 206px 188px, rgba(230, 244, 255, 0.86) 98%, transparent),
        radial-gradient(1.5px 1.5px at 54px 222px, rgba(255, 255, 255, 0.8) 98%, transparent),
        radial-gradient(1px 1px at 176px 248px, rgba(235, 246, 255, 0.82) 98%, transparent),
        radial-gradient(1.4px 1.4px at 112px 202px, rgba(255, 255, 255, 0.82) 98%, transparent);
    background-size: 220px 260px;
    animation: jr-chat-snowfall 30s linear infinite;
}

body.radio-seasonal-theme--christmas .radio-page .radio-hero--home > .content-wide {
    position: relative;
    z-index: 1;
}

body.radio-seasonal-theme--christmas .radio-page--chat .radio-programs-hero::before {
    position: absolute;
    z-index: 0;
    inset: -100% 0;
    content: "";
    pointer-events: none;
    opacity: var(--jr-chat-snow-opacity, 0.28);
    background-image:
        radial-gradient(1.8px 1.8px at 18px 34px, rgba(255, 255, 255, 0.9) 98%, transparent),
        radial-gradient(1.2px 1.2px at 72px 116px, rgba(226, 242, 255, 0.85) 98%, transparent),
        radial-gradient(1.6px 1.6px at 146px 68px, rgba(255, 255, 255, 0.78) 98%, transparent),
        radial-gradient(1.2px 1.2px at 206px 188px, rgba(230, 244, 255, 0.86) 98%, transparent),
        radial-gradient(1.5px 1.5px at 54px 222px, rgba(255, 255, 255, 0.8) 98%, transparent),
        radial-gradient(1px 1px at 176px 248px, rgba(235, 246, 255, 0.82) 98%, transparent);
    background-size: 220px 260px;
    animation: jr-chat-snowfall var(--jr-chat-snow-duration, 34s) linear infinite;
}

body.radio-seasonal-theme--christmas .radio-page--chat .radio-programs-hero > .content-wide {
    position: relative;
    z-index: 1;
}

@keyframes jr-chat-snowfall {
    to { transform: translateY(33.333%); }
}

@media (prefers-reduced-motion: reduce) {
    body.radio-seasonal-theme--christmas .radio-page--chat .radio-programs-hero::before {
        animation: none;
    }

    body.radio-seasonal-theme--christmas .radio-page .radio-hero--home::before {
        animation: none;
    }
}

body.radio-seasonal-theme--christmas.radio-time-theme--night,
body.radio-seasonal-theme--christmas.radio-time-theme--misty-autumn-forest,
body.radio-seasonal-theme--christmas.radio-time-theme--misty-hill,
body.radio-seasonal-theme--christmas.radio-time-theme--morning-forest {
    background: #0b1010;
}

body.radio-seasonal-theme--christmas.radio-time-theme--day,
body.radio-seasonal-theme--default.radio-time-theme--day.radio-time-day-has-image {
    isolation: isolate;
    background: #0b1010;
}

body.radio-seasonal-theme--christmas.radio-time-theme--night::before,
body.radio-seasonal-theme--christmas.radio-time-theme--misty-autumn-forest::before,
body.radio-seasonal-theme--christmas.radio-time-theme--misty-hill::before,
body.radio-seasonal-theme--christmas.radio-time-theme--morning-forest::before {
    background:
        radial-gradient(ellipse 42rem 28rem at 90% 4%, rgba(175, 35, 50, 0.38), transparent 25rem),
        radial-gradient(ellipse 48rem 34rem at 8% 96%, rgba(28, 125, 68, 0.32), transparent 27rem),
        linear-gradient(180deg, rgba(9, 15, 14, 0.38), rgba(7, 11, 12, 0.74)),
        var(--radio-time-current-image, var(--radio-time-background-image)) center center / cover fixed;
}

body.radio-seasonal-theme--christmas.radio-time-theme--night::before,
body.radio-seasonal-theme--christmas.radio-time-theme--misty-autumn-forest::before,
body.radio-seasonal-theme--christmas.radio-time-theme--misty-hill::before,
body.radio-seasonal-theme--christmas.radio-time-theme--morning-forest::before,
body.radio-seasonal-theme--christmas.radio-time-theme--day::before {
    box-shadow:
        inset 0 0 0 4px rgba(196, 39, 54, 0.72),
        inset 0 0 0 9px rgba(39, 142, 72, 0.54);
}

body.radio-seasonal-theme--christmas.radio-time-theme--day::before,
body.radio-seasonal-theme--default.radio-time-theme--day.radio-time-day-has-image::before {
    position: fixed;
    z-index: -1;
    inset: 0;
    display: block;
    content: "";
    pointer-events: none;
    background-color: #0b1010;
    background-repeat: no-repeat;
    transition: opacity 2.6s ease-in-out;
    opacity: 1;
}

body.radio-seasonal-theme--christmas.radio-time-theme--day::before {
    background:
        radial-gradient(ellipse 42rem 28rem at 90% 4%, rgba(175, 35, 50, 0.38), transparent 25rem),
        radial-gradient(ellipse 48rem 34rem at 8% 96%, rgba(28, 125, 68, 0.32), transparent 27rem),
        linear-gradient(180deg, rgba(9, 15, 14, 0.38), rgba(7, 11, 12, 0.74)),
        var(--radio-time-current-image, var(--radio-time-background-image)) center center / cover fixed;
}

body.radio-seasonal-theme--default.radio-time-theme--day.radio-time-day-has-image::before {
    background:
        radial-gradient(ellipse 48rem 32rem at 12% 10%, rgba(154, 177, 199, 0.045), transparent 24rem),
        linear-gradient(180deg, rgba(7, 9, 12, 0.56), rgba(7, 9, 12, 0.76)),
        var(--radio-time-current-image, var(--radio-time-background-image)) center center / cover fixed;
}

body.radio-seasonal-theme--christmas.radio-time-theme--night::after,
body.radio-seasonal-theme--christmas.radio-time-theme--misty-autumn-forest::after,
body.radio-seasonal-theme--christmas.radio-time-theme--misty-hill::after,
body.radio-seasonal-theme--christmas.radio-time-theme--morning-forest::after {
    background:
        radial-gradient(ellipse 42rem 28rem at 90% 4%, rgba(175, 35, 50, 0.38), transparent 25rem),
        radial-gradient(ellipse 48rem 34rem at 8% 96%, rgba(28, 125, 68, 0.32), transparent 27rem),
        linear-gradient(180deg, rgba(9, 15, 14, 0.38), rgba(7, 11, 12, 0.74)),
        var(--radio-time-next-image, var(--radio-time-current-image, var(--radio-time-background-image))) center center / cover fixed;
}

body.radio-seasonal-theme--christmas.radio-time-theme--day::after,
body.radio-seasonal-theme--default.radio-time-theme--day.radio-time-day-has-image::after {
    position: fixed;
    z-index: -1;
    inset: 0;
    display: block;
    content: "";
    pointer-events: none;
    background-color: #0b1010;
    background-repeat: no-repeat;
    transition: opacity 2.6s ease-in-out;
    opacity: 0;
}

body.radio-seasonal-theme--christmas.radio-time-theme--day::after {
    background:
        radial-gradient(ellipse 42rem 28rem at 90% 4%, rgba(175, 35, 50, 0.38), transparent 25rem),
        radial-gradient(ellipse 48rem 34rem at 8% 96%, rgba(28, 125, 68, 0.32), transparent 27rem),
        linear-gradient(180deg, rgba(9, 15, 14, 0.38), rgba(7, 11, 12, 0.74)),
        var(--radio-time-next-image, var(--radio-time-current-image, var(--radio-time-background-image))) center center / cover fixed;
}

body.radio-seasonal-theme--default.radio-time-theme--day.radio-time-day-has-image::after {
    background:
        radial-gradient(ellipse 48rem 32rem at 12% 10%, rgba(154, 177, 199, 0.045), transparent 24rem),
        linear-gradient(180deg, rgba(7, 9, 12, 0.56), rgba(7, 9, 12, 0.76)),
        var(--radio-time-next-image, var(--radio-time-current-image, var(--radio-time-background-image))) center center / cover fixed;
}

body[data-radio-time-fading="true"].radio-seasonal-theme--christmas.radio-time-theme--day::before,
body[data-radio-time-fading="true"].radio-seasonal-theme--default.radio-time-theme--day.radio-time-day-has-image::before {
    opacity: 0;
}

body[data-radio-time-fading="true"].radio-seasonal-theme--christmas.radio-time-theme--day::after,
body[data-radio-time-fading="true"].radio-seasonal-theme--default.radio-time-theme--day.radio-time-day-has-image::after {
    opacity: 1;
}

@media (max-width: 820px) {
    body.radio-seasonal-theme--christmas.radio-time-theme--night::before,
    body.radio-seasonal-theme--christmas.radio-time-theme--misty-autumn-forest::before,
    body.radio-seasonal-theme--christmas.radio-time-theme--misty-hill::before,
    body.radio-seasonal-theme--christmas.radio-time-theme--morning-forest::before,
    body.radio-seasonal-theme--christmas.radio-time-theme--night::after,
    body.radio-seasonal-theme--christmas.radio-time-theme--misty-autumn-forest::after,
    body.radio-seasonal-theme--christmas.radio-time-theme--misty-hill::after,
    body.radio-seasonal-theme--christmas.radio-time-theme--morning-forest::after {
        background-attachment: scroll;
    }
    body.radio-seasonal-theme--christmas.radio-time-theme--day::before,
    body.radio-seasonal-theme--christmas.radio-time-theme--day::after,
    body.radio-seasonal-theme--default.radio-time-theme--day.radio-time-day-has-image::before,
    body.radio-seasonal-theme--default.radio-time-theme--day.radio-time-day-has-image::after {
        background-attachment: scroll;
    }
}