/* Weermodule van Embecom News Aggregator. Neemt lettertype en tekstkleur van het thema over. */

.enaggr-weather {
	--enaggr-weather-border: rgba(127, 127, 127, 0.3);
	--enaggr-weather-muted: 0.7;
	display: grid;
	gap: 1.5rem;
	line-height: 1.5;
}

.enaggr-weather__block > :last-child {
	margin-bottom: 0;
}

.enaggr-weather__title {
	margin: 0 0 0.5rem;
}

.enaggr-weather__meta,
.enaggr-weather__credit {
	font-size: 0.85em;
	opacity: var(--enaggr-weather-muted);
}

.enaggr-weather__credit {
	margin: 0;
}

/* Waarschuwingen */
.enaggr-weather__warning {
	border-left: 6px solid #3a9d23;
	padding: 0.6rem 0.9rem;
	margin: 0 0 0.75rem;
	background: rgba(127, 127, 127, 0.08);
}

.enaggr-weather__warning > p {
	margin: 0 0 0.4rem;
}

.enaggr-weather__badge {
	display: inline-block;
	padding: 0.1em 0.5em;
	border-radius: 3px;
	font-weight: 700;
	font-size: 0.85em;
	background: #3a9d23;
	color: #fff;
}

.enaggr-weather__warning--yellow { border-left-color: #ffd400; }
.enaggr-weather__warning--yellow .enaggr-weather__badge { background: #ffd400; color: #1a1a1a; }
.enaggr-weather__warning--orange { border-left-color: #ff8a00; }
.enaggr-weather__warning--orange .enaggr-weather__badge { background: #ff8a00; color: #1a1a1a; }
.enaggr-weather__warning--red { border-left-color: #d7001f; }
.enaggr-weather__warning--red .enaggr-weather__badge { background: #d7001f; color: #fff; }

/* Kader om de radar: hier zet Complianz zijn plaatshouder neer zolang er geen toestemming is. */
.enaggr-weather__radar-frame {
	position: relative;
	max-width: 500px;
}

/* Radar. Dubbele klasse: `.elementor img { max-width: 100% }` weegt anders
   zwaarder en rekte het beeld van 500 px op tot de volle kolombreedte. */
.enaggr-weather .enaggr-weather__radar-img {
	display: block;
	width: 100%;
	max-width: 500px;
	height: auto;
}

/* Vijfdaagse verwachting: één rij per dag, onder elkaar. Vaste gebieden per
   onderdeel, zodat een ontbrekend onderdeel (zoals wind) niets laat verschuiven.
   Dubbele klasse zodat lijstopmaak van het thema geen invloed heeft. */
.enaggr-weather .enaggr-weather__days {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--enaggr-weather-border);
}

.enaggr-weather .enaggr-weather__day {
	display: grid;
	grid-template-columns: 6.5rem 3.5rem 2.5rem 5.5rem 9rem auto 1fr;
	grid-template-areas: "name date icon temps rain wind desc";
	align-items: center;
	column-gap: 0.75rem;
	margin: 0;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--enaggr-weather-border);
}

.enaggr-weather__day-name { grid-area: name; }
.enaggr-weather__day-date { grid-area: date; }
.enaggr-weather__day .enaggr-weather__icon { grid-area: icon; }
.enaggr-weather__temps { grid-area: temps; white-space: nowrap; }
.enaggr-weather__rain { grid-area: rain; }
.enaggr-weather__wind { grid-area: wind; white-space: nowrap; }
.enaggr-weather__day .enaggr-weather__desc { grid-area: desc; }

@media (max-width: 600px) {
	.enaggr-weather .enaggr-weather__day {
		grid-template-columns: 1fr 2.5rem 5.5rem;
		grid-template-areas:
			"name icon temps"
			"date icon temps"
			"rain rain rain"
			"wind wind wind"
			"desc desc desc";
		row-gap: 0.1rem;
	}
}

.enaggr-weather__day-name {
	font-weight: 700;
	text-transform: capitalize;
}

.enaggr-weather__day-date,
.enaggr-weather__rain,
.enaggr-weather__wind,
.enaggr-weather__desc {
	font-size: 0.85em;
}

.enaggr-weather__day-date {
	opacity: var(--enaggr-weather-muted);
}

.enaggr-weather__temps {
	font-size: 1.1em;
}

/* Actueel */
.enaggr-weather__now {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.enaggr-weather__now-temp {
	font-size: 2em;
	font-weight: 700;
	line-height: 1;
}

.enaggr-weather__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 0.25rem 1.5rem;
	margin: 0.75rem 0;
}

.enaggr-weather__facts div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	border-bottom: 1px solid var(--enaggr-weather-border);
	padding: 0.2rem 0;
}

/* Thema's als Pro.Radio geven elke dt/dd een dikke linkerrand en inspringing
   (`dl dd, dl dt { border-left: 6px solid }`); binnen de weermodule niet. */
.enaggr-weather .enaggr-weather__facts dt,
.enaggr-weather .enaggr-weather__facts dd {
	border: 0;
	padding: 0;
	margin: 0;
	line-height: 1.4;
}

.enaggr-weather .enaggr-weather__facts dt {
	font-weight: 400;
	opacity: var(--enaggr-weather-muted);
}

.enaggr-weather .enaggr-weather__facts dd {
	font-weight: 600;
	white-space: nowrap;
	text-align: right;
}

/* Windy */
.enaggr-weather__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	max-height: 600px;
}

.enaggr-weather__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}