/* ViVa vind- och vattenwidget ([grotvik_viva]) */
/* Färger ärvs (color: inherit) så widgeten fungerar på både ljus och mörk
   bakgrund, t.ex. sidebarens första widget som får .widget-highlight.
   CSS-variablerna har fallback-värden så widgeten fungerar även i teman
   som saknar dem. */
.viva-widget {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 1rem);
    color: inherit;
    /* Reservera höjd så layouten inte hoppar när datan laddas in. */
    min-height: 200px;
}

.viva-widget__station + .viva-widget__station {
    padding-top: var(--space-sm, 0.5rem);
    border-top: 1px solid rgba(128, 128, 128, 0.3);
    border-top-color: color-mix(in srgb, currentColor 20%, transparent);
}

.viva-widget__title {
    margin: 0 0 var(--space-xs, 0.25rem);
    font-size: var(--font-size-sm, 0.875rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: inherit;
    opacity: 0.65;
}

.viva-widget__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, 0.25rem);
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nollställ ev. list-/border-styling från värdtemat så bara
   stationsseparatorn (mellan vind och vatten) syns. !important krävs
   för att slå värdtemans li-border-regler (t.ex. .widget-container li). */
.viva-widget .viva-widget__row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    gap: var(--space-sm, 0.5rem);
    margin: 0;
    padding: 0;
    border: 0 !important;
}

.viva-widget__label {
    color: inherit;
    opacity: 0.8;
    font-size: var(--font-size-sm, 0.875rem);
    min-width: 0;
    overflow-wrap: break-word;
}

.viva-widget__value {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35em;
    font-weight: 600;
    color: inherit;
    white-space: nowrap;
    text-align: right;
}

/* Byvind är sekundär info; visas utan fetstil så medelvind framhävs. */
.viva-widget__value--secondary {
    font-weight: 400;
}

.viva-widget__unit {
    font-weight: 400;
    font-size: var(--font-size-sm, 0.875rem);
    opacity: 0.65;
}

.viva-widget__arrow {
    display: inline-block;
    color: inherit;
    opacity: 0.75;
    font-weight: 400;
}

.viva-widget__meta {
    margin: 0;
    font-size: var(--font-size-sm, 0.7rem);
    color: inherit;
    opacity: 0.6;
}

.viva-widget__meta a {
    color: inherit;
    text-decoration: underline;
    white-space: nowrap;
}

.viva-widget__status {
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
    color: inherit;
    opacity: 0.6;
}