/* Bongovo! Weather – https://www.bongovo.cz – GPLv3. Icon font: Meteocons (Alessio Atzeni) */
@font-face {
    font-family: MeteoconsRegular;
    src: url(../fonts/meteocons-webfont.eot);
    src: url(../fonts/meteocons-webfont.eot?#iefix) format('embedded-opentype'),
         url(../fonts/meteocons-webfont.woff) format('woff'),
         url(../fonts/meteocons-webfont.ttf) format('truetype'),
         url(../fonts/meteocons-webfont.svg#MeteoconsRegular) format('svg');
    font-weight: 400;
    font-style: normal;
}

.skiareal-weather {
    box-sizing: border-box;
    padding: 1rem 0.75rem;
}

.skiareal-weather-icon {
    display: inline-block;
    font-style: normal;
    font-size: 4rem;
    line-height: 1.1;
}

.skiareal-weather-icon::before {
    display: inline-block;
    font-family: MeteoconsRegular;
    font-style: normal;
    font-weight: 400;
}

.skiareal-weather-icon-thunderstorm::before { content: '0'; }
.skiareal-weather-icon-sleet::before { content: 'X'; }
.skiareal-weather-icon-rain::before { content: 'R'; }
.skiareal-weather-icon-rain-night::before { content: 'S'; }
.skiareal-weather-icon-snow::before { content: 'W'; }
.skiareal-weather-icon-snow-night::before { content: 'X'; }
.skiareal-weather-icon-dusty::before { content: 'E'; }
.skiareal-weather-icon-foggy::before { content: 'J'; }
.skiareal-weather-icon-foggy-night::before,
.skiareal-weather-icon-hazy-night::before,
.skiareal-weather-icon-smoke-night::before { content: 'K'; }
.skiareal-weather-icon-hazy::before { content: 'L'; }
.skiareal-weather-icon-smoke::before { content: 'M'; }
.skiareal-weather-icon-cloudy::before { content: 'N'; }
.skiareal-weather-icon-mostly-cloudy::before { content: '3'; }
.skiareal-weather-icon-mostly-cloudy-night::before { content: '4'; }
.skiareal-weather-icon-partly-cloudy::before { content: 'H'; }
.skiareal-weather-icon-partly-cloudy-night::before { content: 'I'; }
.skiareal-weather-icon-sunny::before { content: 'B'; }
.skiareal-weather-icon-sunny-night::before { content: 'C'; }
.skiareal-weather-icon-other::before { content: ')'; }

.skiareal-weather-temp {
    font-size: 1.75rem;
    font-weight: 700;
}

.skiareal-weather-mini .skiareal-weather-icon {
    font-size: 4rem;
}

.skiareal-weather-forecast .skiareal-weather-icon {
    font-size: 1.75rem;
}

.skiareal-weather-forecast.is-block .skiareal-weather-day {
    min-width: 5.5rem;
    padding: 0.5rem;
}

.skiareal-weather-forecast.is-list .skiareal-weather-day {
    gap: 0.75rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--template-bg-dark-7, #dee2e6);
}

.skiareal-weather-picture {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto 0.5rem;
}

.skiareal-weather-details {
    text-align: center;
}

.skiareal-weather-stations {
    text-align: center;
}

.skiareal-weather-alert.bongovo-alert-orange {
    color: #5c2c00;
    background-color: #ffd1a3;
    border-color: #ff9f40;
}

.skiareal-weather-alert.bongovo-alert-yellow {
    color: #4d3d00;
    background-color: #fff3b0;
    border-color: #ffd93d;
}

.skiareal-weather-alerts {
    text-align: left;
}

.skiareal-weather-links .btn {
    padding: .4rem .35rem;
    font-size: .875rem;
    color: #1d4e72;
    background-color: #edf5fb;
    border: 1px solid #9fbfd8;
    border-radius: .25rem;
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    line-height: 1.3;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow-wrap: anywhere;
}

.skiareal-weather-links { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .375rem; width: 100%; }
.skiareal-weather-links .btn:focus-visible { outline: 2px solid var(--bw-accent, #145f9e); outline-offset: 2px; }
.card-body:has(> .skiareal-weather-flat) { padding-inline: .4rem; }
.card-body > .skiareal-weather-flat { padding-inline: 0; }
.skiareal-weather-flat .skiareal-weather-current .skiareal-weather-details,
.skiareal-weather-flat .skiareal-weather-current .skiareal-weather-stations,
.skiareal-weather-flat .skiareal-weather-current.has-stations .skiareal-weather-details,
.skiareal-weather-flat .skiareal-weather-current.has-stations .skiareal-weather-stations { text-align: center; width: 100%; }
.skiareal-weather-flat .skiareal-weather-details { line-height: 1.5; overflow-wrap: anywhere; }
.skiareal-weather-flat .skiareal-weather-city { font-size: 1.125rem; line-height: 1.35; }
.skiareal-weather-flat .skiareal-weather-condition { font-size: 1.375rem; line-height: 1.3; }
.skiareal-weather-flat { font-variant-numeric: tabular-nums; }
.skiareal-weather-links .btn:hover,
.skiareal-weather-links .btn:focus-visible {
    opacity: 1;
    color: #fff;
    background-color: #145f9e;
    border-color: #145f9e;
}
.skiareal-weather-links .btn:active { background-color: #104e83; border-color: #104e83; }

.skiareal-weather {
    container-type: inline-size;
}

.skiareal-weather-condition {
    font-size: 1.5rem;
}

/* Two thermometers: the picture fills the width, the weather icon sits in its free top-right corner */
.skiareal-weather-current.has-stations {
    flex-direction: column;
    align-items: stretch !important;
    gap: .5rem !important;
}

.skiareal-weather-current.has-stations .skiareal-weather-now {
    position: relative;
    width: 100%;
    text-align: left !important;
}

.skiareal-weather-current.has-stations .skiareal-weather-details,
.skiareal-weather-current.has-stations .skiareal-weather-stations {
    text-align: left;
}

.skiareal-weather-icon.is-scene {
    position: absolute;
    top: 3cqw;
    right: 3cqw;
    font-size: clamp(4rem, 30cqw, 7rem);
    line-height: 1;
}

/* Forecast: three days side by side even in narrow modules */
.skiareal-weather-forecast.is-block {
    flex-wrap: wrap;
}

.skiareal-weather-forecast.is-block .skiareal-weather-day {
    flex: 1 1 calc(33.333% - .5rem);
    min-width: 0;
    padding: .5rem .15rem;
}

.skiareal-weather-forecast.is-block .skiareal-weather-day-temp {
    font-size: clamp(.72rem, 5.2cqw, 1rem);
    white-space: nowrap;
}

.skiareal-weather-mini-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    font-size: .9rem;
}

.skiareal-weather-mini-info .skiareal-weather-condition {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.2;
}

/* Colour themes (opt-in, class has-theme): one hue per theme in several shades */
.skiareal-weather.theme-carbon-dark {
    --bw-bg: #17191c; --bw-bg-2: #24282d;
    --bw-text: #d5d9de; --bw-text-2: #9aa2ac; --bw-strong: #fff;
    --bw-accent: #c4cad2; --bw-accent2: #6b7480;
    --bw-border: rgba(255,255,255,.1); --bw-hover: rgba(255,255,255,.05); --bw-alert-mix: 30%;
}

.skiareal-weather.theme-carbon-light {
    --bw-bg: #f4f5f6; --bw-bg-2: #e3e6e9;
    --bw-text: #2a2f35; --bw-text-2: #5d6670; --bw-strong: #0d1013;
    --bw-accent: #3b434b; --bw-accent2: #9aa2ac;
    --bw-border: rgba(0,0,0,.12); --bw-hover: rgba(255,255,255,.6); --bw-alert-mix: 45%;
}

.skiareal-weather.theme-blue-dark {
    --bw-bg: #0c1f3d; --bw-bg-2: #14396b;
    --bw-text: #e3edfb; --bw-text-2: #aac3e6; --bw-strong: #fff;
    --bw-accent: #5eb0ff; --bw-accent2: #2f78c9;
    --bw-border: rgba(255,255,255,.14); --bw-hover: rgba(255,255,255,.07); --bw-alert-mix: 34%;
}

.skiareal-weather.theme-blue-light {
    --bw-bg: #eef5fd; --bw-bg-2: #d9e8f9;
    --bw-text: #1c2f46; --bw-text-2: #4d6785; --bw-strong: #0a1a2e;
    --bw-accent: #1a63c4; --bw-accent2: #7fb0ea;
    --bw-border: rgba(0,0,0,.1); --bw-hover: rgba(255,255,255,.65); --bw-alert-mix: 48%;
}

.skiareal-weather.theme-purple-dark {
    --bw-bg: #1d1238; --bw-bg-2: #38206b;
    --bw-text: #ece6fb; --bw-text-2: #bcaee6; --bw-strong: #fff;
    --bw-accent: #b69cff; --bw-accent2: #7c53d9;
    --bw-border: rgba(255,255,255,.14); --bw-hover: rgba(255,255,255,.07); --bw-alert-mix: 34%;
}

.skiareal-weather.theme-purple-light {
    --bw-bg: #f4effd; --bw-bg-2: #e5daf8;
    --bw-text: #2c2144; --bw-text-2: #66578a; --bw-strong: #170f29;
    --bw-accent: #6a3fcf; --bw-accent2: #b399ec;
    --bw-border: rgba(0,0,0,.1); --bw-hover: rgba(255,255,255,.65); --bw-alert-mix: 48%;
}

.skiareal-weather.theme-green-dark {
    --bw-bg: #0d2a1b; --bw-bg-2: #17482e;
    --bw-text: #e2f4e8; --bw-text-2: #a6cfb4; --bw-strong: #fff;
    --bw-accent: #5fd68c; --bw-accent2: #2f9c5d;
    --bw-border: rgba(255,255,255,.14); --bw-hover: rgba(255,255,255,.07); --bw-alert-mix: 34%;
}

.skiareal-weather.theme-green-light {
    --bw-bg: #eef9f1; --bw-bg-2: #d8f0e0;
    --bw-text: #1a3325; --bw-text-2: #4b6e5a; --bw-strong: #0a1c12;
    --bw-accent: #1b8a4b; --bw-accent2: #7fcfa0;
    --bw-border: rgba(0,0,0,.1); --bw-hover: rgba(255,255,255,.65); --bw-alert-mix: 48%;
}

.skiareal-weather.theme-red-dark {
    --bw-bg: #2d0d12; --bw-bg-2: #561820;
    --bw-text: #fbe6e8; --bw-text-2: #e3aeb4; --bw-strong: #fff;
    --bw-accent: #ff7a85; --bw-accent2: #d2404f;
    --bw-border: rgba(255,255,255,.14); --bw-hover: rgba(255,255,255,.07); --bw-alert-mix: 34%;
}

.skiareal-weather.theme-red-light {
    --bw-bg: #fdf0f1; --bw-bg-2: #f8dcdf;
    --bw-text: #3a1a1e; --bw-text-2: #86525a; --bw-strong: #1f0a0d;
    --bw-accent: #c42a3b; --bw-accent2: #ee8f98;
    --bw-border: rgba(0,0,0,.1); --bw-hover: rgba(255,255,255,.65); --bw-alert-mix: 48%;
}

.skiareal-weather.has-theme {
    position: relative;
    overflow: hidden;
    border-radius: .75rem;
    background: var(--bw-pattern, linear-gradient(transparent, transparent)), linear-gradient(160deg, var(--bw-bg), var(--bw-bg-2));
    color: var(--bw-text);
}

.skiareal-weather.has-theme .skiareal-weather-city,
.skiareal-weather.has-theme .skiareal-weather-condition,
.skiareal-weather.has-theme .skiareal-weather-temp { color: var(--bw-strong); }

.skiareal-weather.has-theme .skiareal-weather-humidity,
.skiareal-weather.has-theme .skiareal-weather-wind,
.skiareal-weather.has-theme .skiareal-weather-stations,
.skiareal-weather.has-theme .skiareal-weather-day-temp { color: var(--bw-text-2); }

.skiareal-weather.has-theme .skiareal-weather-icon { color: var(--bw-accent); }
.skiareal-weather.has-theme .skiareal-weather-forecast .skiareal-weather-icon,
.skiareal-weather.has-theme .skiareal-weather-day-name { color: var(--bw-strong); }

.skiareal-weather.has-theme a:not(.btn) { color: var(--bw-accent); }

.skiareal-weather.has-theme .skiareal-weather-forecast.is-block .skiareal-weather-day {
    border: 1px solid var(--bw-border);
    border-radius: .6rem;
    background: var(--bw-hover);
}

.skiareal-weather.has-theme .skiareal-weather-forecast.is-list .skiareal-weather-day { border-bottom-color: var(--bw-border); }

.skiareal-weather.has-theme .skiareal-weather-links .btn {
    --bs-btn-color: var(--bw-accent);
    --bs-btn-border-color: var(--bw-accent);
    --bs-btn-hover-color: var(--bw-bg);
    --bs-btn-hover-bg: var(--bw-accent);
    --bs-btn-hover-border-color: var(--bw-accent);
    --bs-btn-active-color: var(--bw-bg);
    --bs-btn-active-bg: var(--bw-accent);
    --bs-btn-active-border-color: var(--bw-accent);
    color: var(--bw-accent);
    border-color: var(--bw-accent);
    background-color: transparent;
}

.skiareal-weather.has-theme .skiareal-weather-links .btn:hover,
.skiareal-weather.has-theme .skiareal-weather-links .btn:focus-visible {
    color: var(--bw-bg);
    background-color: var(--bw-accent);
}

/* Warnings keep the colour of their level but blend into the theme */
.skiareal-weather.has-theme .skiareal-weather-alert {
    --bw-level: #ffd93d;
    color: var(--bw-strong);
    background: color-mix(in srgb, var(--bw-level) var(--bw-alert-mix, 36%), var(--bw-bg-2));
    border: 1px solid color-mix(in srgb, var(--bw-level) 55%, var(--bw-bg));
    border-left: 5px solid var(--bw-level);
    border-radius: .5rem;
}

.skiareal-weather.has-theme .skiareal-weather-alert.bongovo-alert-orange { --bw-level: #ff9f40; }
.skiareal-weather.has-theme .skiareal-weather-alert.bongovo-alert-red { --bw-level: #ff4d4d; }
.skiareal-weather.has-theme .skiareal-weather-alert summary { color: var(--bw-accent); cursor: pointer; }

/* The mountain picture keeps its own colours in every theme */

/* Effects */
.skiareal-weather.fx-shadow { box-shadow: 0 4px 12px rgba(0, 0, 0, .25); }
.skiareal-weather.fx-gradient {
    background: var(--bw-pattern, linear-gradient(transparent, transparent)), linear-gradient(135deg, var(--bw-bg), var(--bw-bg-2) 55%, color-mix(in srgb, var(--bw-accent2) 45%, var(--bw-bg-2)));
}
.skiareal-weather.fx-glass {
    background: color-mix(in srgb, var(--bw-bg) 55%, transparent);
    border: 1px solid var(--bw-border);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
    backdrop-filter: blur(12px) saturate(140%);
}
.skiareal-weather.fx-glow { box-shadow: 0 0 0 1px color-mix(in srgb, var(--bw-accent) 45%, transparent), 0 0 22px color-mix(in srgb, var(--bw-accent) 35%, transparent); }
.skiareal-weather.fx-accent {
    position: relative;
    overflow: hidden;
}
.skiareal-weather.fx-accent:not(.has-theme) {
    --bw-accent: var(--bs-primary, #0d6efd);
    --bw-accent2: color-mix(in srgb, var(--bw-accent) 55%, white);
}
.skiareal-weather.fx-accent::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 34%;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, var(--bw-accent), var(--bw-accent2), var(--bw-accent), transparent);
    opacity: .9;
    pointer-events: none;
    animation: bw-accent-sweep 7s ease-in-out infinite;
}

@keyframes bw-accent-sweep {
    0% { transform: translateX(-110%); opacity: 0; }
    12% { opacity: .9; }
    88% { opacity: .9; }
    100% { transform: translateX(310%); opacity: 0; }
}

.skiareal-weather.fx-animated {
    background: linear-gradient(120deg, var(--bw-bg), var(--bw-bg-2), color-mix(in srgb, var(--bw-accent2) 40%, var(--bw-bg)), var(--bw-bg-2), var(--bw-bg));
    background-size: 300% 300%;
    animation: bw-shift 16s ease-in-out infinite;
}

@keyframes bw-shift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
    .skiareal-weather.fx-animated { animation: none; }
    .skiareal-weather.fx-accent::before { display: none; }
}