/*
 * Fairmedia – Nettside: Vær.
 * One <li> per place, laid out with flexbox: the places side by side, and the
 * name, icon and temperature stacked inside each place.
 */
.fmn-vaer ul.fmn-vaer-liste {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 4px 16px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.fmn-vaer li.fmn-vaer-sted,
.fmn-vaer li.fmn-vaer-dag {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	min-width: 80px;
	margin: 0;
	padding: 0;
	text-align: center;
}
.fmn-vaer .fmn-vaer-navn { font-size: 12px; font-weight: 700; text-transform: uppercase; line-height: 1.2; }
.fmn-vaer .fmn-vaer-temp { font-size: 16px; line-height: 1.2; }

/* Several days for one place (one .fmn-vaer-varsel per place). */
.fmn-vaer .fmn-vaer-varsel + .fmn-vaer-varsel { margin-top: 12px; }
.fmn-vaer .fmn-vaer-stedsnavn { margin: 0 0 4px; font-size: 12px; font-weight: 700; text-transform: uppercase; line-height: 1.2; text-align: center; }
.fmn-vaer .fmn-vaer-dagnavn { font-size: 12px; font-weight: 700; line-height: 1.2; }
.fmn-vaer .fmn-vaer-min { font-size: 13px; opacity: .7; }
.fmn-vaer-dager .fmn-vaer-ikon { width: 56px; height: 56px; }
.fmn-vaer-dager li.fmn-vaer-dag { min-width: 72px; }
.fmn-vaer .fmn-vaer-vind,
.fmn-vaer .fmn-vaer-nedbor { font-size: 11px; line-height: 1.3; }
.fmn-vaer .fmn-vaer-ikon { width: 64px; height: 64px; filter: none; }
.fmn-vaer .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/*
 * "profil": monochrome inline SVG (assets/icons-mono) in the site's colour.
 * --fmn-vaer-farge is set from the settings or by vaer.js (heading/link colour).
 * Roles: full = sun, moon, rain, snow, lightning, fog; glow = sun rays;
 * l1–l3 = light clouds; d1–d2 = dark clouds. The SVG elements use these variables in
 * inline styles (document CSS doesn't reach into nested <use> clones in Chrome).
 */
.fmn-vaer-ikon {
	--fmn-v: var(--fmn-vaer-farge, currentColor);
	/* Fallback for browsers without color-mix(): full colour with opacity. */
	--fmn-v-glow: var(--fmn-v); --fmn-v-glow-o: .55;
	--fmn-v-l1: var(--fmn-v);   --fmn-v-l1-o: .4;
	--fmn-v-l2: var(--fmn-v);   --fmn-v-l2-o: .48;
	--fmn-v-l3: var(--fmn-v);   --fmn-v-l3-o: .56;
	--fmn-v-d1: var(--fmn-v);   --fmn-v-d1-o: .68;
	--fmn-v-d2: var(--fmn-v);   --fmn-v-d2-o: .85;
	fill: var(--fmn-v);
	display: inline-block;
	vertical-align: middle;
}
@supports (color: color-mix(in srgb, red 50%, #fff)) {
	.fmn-vaer-ikon {
		--fmn-v-glow: color-mix(in srgb, var(--fmn-v) 55%, #fff); --fmn-v-glow-o: 1;
		--fmn-v-l1: color-mix(in srgb, var(--fmn-v) 40%, #fff);   --fmn-v-l1-o: 1;
		--fmn-v-l2: color-mix(in srgb, var(--fmn-v) 48%, #fff);   --fmn-v-l2-o: 1;
		--fmn-v-l3: color-mix(in srgb, var(--fmn-v) 56%, #fff);   --fmn-v-l3-o: 1;
		--fmn-v-d1: color-mix(in srgb, var(--fmn-v) 68%, #fff);   --fmn-v-d1-o: 1;
		--fmn-v-d2: color-mix(in srgb, var(--fmn-v) 85%, #fff);   --fmn-v-d2-o: 1;
	}
}

/* Settings page preview. */
.fmn-vaer-preview { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; background: #fff; border: 1px solid #dcdcde; max-width: 640px; }
.fmn-vaer-preview .fmn-vaer-ikon { width: 64px; height: 64px; }