/*
 * Værstasjon – modulspesifikke stiler. Alt annet (grid, card, btn, h-klasser, font)
 * kommer fra SkiGeilo sitt tema (bootstrap.css + app.css). Tokens leses fra temaets
 * :root, med reserveverdier slik at modulen også ser riktig ut frittstående.
 */
.wx-weather {
    --wx-blue: var(--bg-color, #084880);
    --wx-link: var(--link-color, #002D6D);
    --wx-cta: var(--cta, #F7921E);
    --wx-cta-hover: var(--cta-hover, #CF7916);
    --wx-cta-active: var(--cta-active, #B46308);
    --wx-lightblue: var(--secondary-lightblue, #95A8C0);
    --wx-gray: var(--bg-light-gray, #EEE);
    --wx-white: var(--bg-white, #FFF);
    --wx-ink: var(--text-dark, #000);
    --wx-muted: #5c6670;
    --wx-grid: #e3e6ea;
    --wx-xs: var(--spacing-xs, 8px);
    --wx-s: var(--spacing-s, 16px);
    --wx-m: var(--spacing-m, 24px);
    --wx-l: var(--spacing-l, 32px);
    --wx-shadow: 1px 0 12px 4px #0000000d, -3px 22px 14px 4px #00000003, -11px 35px 15px 4px #00000005;

    color: var(--wx-ink);
    font-family: "Avenir", sans-serif;
    padding-block: var(--wx-l);
}

/* ---------- Topp ---------- */

.wx-header { margin-bottom: var(--wx-m); }
.wx-title { margin-bottom: var(--wx-xs); }
.wx-updated { color: var(--wx-muted); font-weight: 550; margin: 0; }
.wx-countdown { white-space: nowrap; }
.wx-countdown::before { content: "·"; margin-right: .35em; }
.wx-is-stale .wx-updated span:first-child { color: var(--wx-cta-active); }

.wx-alert {
    background: var(--wx-white);
    border-left: 4px solid var(--wx-cta);
    font-weight: 550;
    margin-bottom: var(--wx-m);
    padding: var(--wx-s);
}

/* ---------- Kort ---------- */

.wx-card {
    background: var(--wx-white);
    border-radius: 0;
    box-shadow: var(--wx-shadow);
}
.wx-card .card-body { display: flex; flex-direction: column; padding: var(--wx-m); }
.wx-card .card-title { margin-bottom: var(--wx-s); text-transform: uppercase; letter-spacing: .04em; }

.wx-value { font-size: 2.25rem; font-weight: 950; line-height: 1; white-space: nowrap; }
.wx-unit { font-size: 1rem; font-weight: 550; margin-left: .25em; color: var(--wx-muted); }
.wx-sub { color: var(--wx-muted); margin: var(--wx-xs) 0 0; }
.wx-sub:empty { display: none; }

.wx-spark { margin-top: auto; padding-top: var(--wx-s); }
.wx-spark-caption { color: var(--wx-muted); font-size: .875rem; margin: var(--wx-xs) 0 0; }

/* Hovedverdiene (temperatur og vind) får større kort og tall */
.wx-card--primary .card-body { padding: var(--wx-l); }
.wx-card--primary .wx-value { font-size: 4.5rem; }
.wx-card--primary .wx-unit { font-size: 1.375rem; }
.wx-card--primary .wx-sub { font-size: 1.125rem; }
.wx-card--primary .wx-spark { padding-top: var(--wx-m); }

/* Lufttrykk og fuktighet er sekundære */
.wx-card--secondary { box-shadow: none; }
.wx-card--secondary .card-body { padding: var(--wx-s) var(--wx-m); }
.wx-card--secondary .card-title { color: var(--wx-muted); margin-bottom: var(--wx-xs); }

.wx-main-row { align-items: center; display: flex; gap: var(--wx-m); }
.wx-symbol { height: 112px; width: 112px; object-fit: contain; }

/* Alle nåkortene: grafen på egen linje på mobil, kompakt til høyre for verdien på desktop */
.wx-card--primary .wx-main-row, .wx-card--secondary .wx-main-row { flex-wrap: wrap; }
.wx-card--primary .wx-spark, .wx-card--secondary .wx-spark { flex: 1 1 100%; }
.wx-card--primary .wx-spark-caption, .wx-card--secondary .wx-spark-caption { margin-top: auto; padding-top: var(--wx-xs); }
@media (min-width: 992px) {
    .wx-card--primary .wx-main-row, .wx-card--secondary .wx-main-row { flex-wrap: nowrap; justify-content: space-between; }
    .wx-card--primary .wx-spark, .wx-card--secondary .wx-spark { align-self: flex-start; flex: 0 1 33.333%; min-width: 0; padding-top: 0; }
}
.wx-bars, .wx-spark svg { display: block; max-width: 100%; height: auto; }
.wx-bar { fill: var(--wx-cta); }
.wx-bar--neg { fill: var(--wx-blue); }
.wx-bars-zero { stroke: var(--wx-lightblue); stroke-width: 1; }

/* ---------- Vind og kompass ---------- */

.wx-compass-host { flex: 0 0 128px; width: 128px; }
.wx-compass { display: block; overflow: visible; width: 100%; }
.wx-compass-ring { fill: none; stroke: var(--wx-lightblue); stroke-width: 1; }
.wx-compass-pulse { fill: none; stroke: var(--wx-cta); stroke-opacity: 0; transform-box: fill-box; transform-origin: center; }
.wx-compass-pulse.is-pulsing { animation: wx-pulse 2s ease-out; }
.wx-compass-tick { stroke: var(--wx-lightblue); stroke-width: 1; }
.wx-compass-tick.major { stroke: var(--wx-blue); stroke-width: 2; }
.wx-compass-label { fill: var(--wx-blue); font-size: 14px; font-weight: 850; }
.wx-compass-needle { fill: var(--wx-cta); transition: transform 1.2s cubic-bezier(.3, 1.4, .5, 1); }

@keyframes wx-pulse {
    from { stroke-opacity: 1; stroke-width: 3; transform: scale(0); }
    to { stroke-opacity: 0; stroke-width: 3; transform: scale(1); }
}

/* ---------- Trykkskive ---------- */

.wx-dial-host { flex: 0 0 144px; width: 144px; }
.wx-card--secondary .wx-value { font-size: 3rem; }
.wx-dial { display: block; overflow: visible; width: 100%; }
.wx-dial-track { fill: none; stroke: var(--wx-grid); stroke-width: 14; stroke-linecap: round; }
.wx-dial-band { fill: none; stroke: var(--wx-lightblue); stroke-width: 14; }
.wx-dial-label { fill: var(--wx-muted); font-size: 12px; font-family: "Avenir", sans-serif; }
.wx-dial-needle { fill: var(--wx-cta); transform: rotate(-90deg); transition: transform 1.2s cubic-bezier(.3, 1.4, .5, 1); }
.wx-dial-hub { fill: var(--wx-ink); }
.wx-card--secondary .wx-sub strong { color: var(--wx-ink); }

.wx-credits { color: var(--wx-muted); font-size: .875rem; margin: var(--wx-s) 0 0; }
.wx-credits a.link { border-bottom: 2px solid var(--wx-cta); color: var(--wx-ink); font-weight: 550; }
.wx-credits a.link:hover { color: var(--wx-cta); text-decoration: none; }

@media (max-width: 575.98px) {
    .wx-card--primary .card-body { padding: var(--wx-m); }
    .wx-card--primary .wx-value { font-size: 3.25rem; }
    .wx-card--primary .wx-sub { font-size: 1rem; }
    .wx-main-row { gap: var(--wx-s); }
    .wx-symbol { height: 80px; width: 80px; }
    .wx-compass-host { flex-basis: 112px; width: 112px; }
    .wx-dial-host { flex-basis: 112px; width: 112px; }
    .wx-card--secondary .wx-value { font-size: 2.25rem; }
}

@media (prefers-reduced-motion: reduce) {
    .wx-compass-needle, .wx-dial-needle { transition: none; }
    .wx-compass-pulse.is-pulsing { animation: none; }
}

@media (max-width: 575.98px) {
    .wx-card--secondary .card-body { padding: 12px var(--wx-s); }
    .wx-card--secondary .wx-sub, .wx-card--secondary .wx-spark-caption { font-size: .8125rem; }
}