/* [wereldweer] — klassieke stijl, zoals de andere weer-plugins (Weer Hub). */
.wwr {
	--wwr-blauw: var(--wk-knop, #1a5fa0);
	background: #f3f4f6;
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	max-width: 1200px;
	margin: 0 auto 2em;
	color: #1c2430;
	font-size: 15px;
	line-height: 1.6;
	box-sizing: border-box;
}

.wwr *,
.wwr *::before,
.wwr *::after {
	box-sizing: border-box;
}

.wwr-kop {
	background: linear-gradient(90deg, var(--wk-kop-basis-1, #1f5fae), var(--wk-kop-basis-2, #4a8ad6));
	color: var(--wk-kop-basis-tekst, #fff);
	padding: 11px 18px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.wwr-sub {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 12px 18px 0;
}

.wwr-datum {
	font-weight: 700;
	color: #1c2430;
}

.wwr-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.wwr-kies {
	margin: 0;
}

.wwr .wwr-kies select {
	margin: 0;
	padding: 6px 30px 6px 14px;
	border: 1px solid #c9ced6;
	border-radius: 999px;
	background-color: #fff;
	color: #1c2430;
	font: inherit;
	font-size: 13px;
	line-height: 1.2;
	height: auto;
	min-height: 0;
}

.wwr a.wwr-knop,
.wwr button.wwr-knop {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid #c9ced6;
	border-radius: 999px;
	background: #fff;
	color: #1c2430;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
}

.wwr a.wwr-knop:hover,
.wwr a.wwr-knop:focus-visible {
	border-color: var(--wwr-blauw);
	color: var(--wwr-blauw);
}

.wwr-ai {
	margin: 10px 18px 4px;
	padding: 8px 12px;
	background: #fff8e6;
	border-left: 3px solid #e0a100;
	border-radius: 6px;
	font-size: 13px;
	color: #5b4a12;
	font-style: italic;
}

.wwr-item {
	margin: 14px 18px;
	padding: 14px 18px 6px;
	background: #fff;
	border: 1px solid #c9ced6;
	border-radius: 10px;
	box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.wwr h3.wwr-item-kop {
	margin: 0 0 10px;
	padding: 0;
	font-size: 17px;
	line-height: 1.35;
	font-weight: 700;
	color: var(--wwr-blauw);
}

.wwr-item p {
	margin: 0 0 10px;
}

.wwr-item {
	display: flow-root; /* beeld rechts laten zweven binnen het kader */
}

.wwr .wwr-beeld {
	float: right;
	width: 46%;
	margin: 2px 0 10px 18px;
}

.wwr-beeld img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	background: #0b1220;
}

.wwr-beeld figcaption {
	margin-top: 4px;
	font-size: 12px;
	color: #5b6472;
	font-style: italic;
}

.wwr p.wwr-bronnen {
	clear: both;
	font-size: 13px;
	color: #5b6472;
	border-top: 1px solid #e3e7ed;
	padding-top: 8px;
}

.wwr-bronnen a {
	color: var(--wwr-blauw);
	text-decoration: none;
}

.wwr-bronnen a:hover {
	text-decoration: underline;
}

.wwr-leeg {
	padding: 18px;
	margin: 0;
}

.wwr-voet {
	padding: 10px 18px 14px;
	font-size: 12px;
	color: #5b6472;
	text-align: right;
	border-top: 1px solid #dfe3e9;
	margin-top: 4px;
}

@media (max-width: 600px) {
	.wwr {
		font-size: 14px;
	}
	.wwr-item {
		margin: 12px 10px;
		padding: 12px 12px 4px;
	}
	.wwr .wwr-beeld {
		float: none;
		width: 100%;
		margin: 0 0 10px;
	}
	.wwr-sub,
	.wwr-voet {
		padding-left: 12px;
		padding-right: 12px;
	}
	.wwr-ai {
		margin-left: 10px;
		margin-right: 10px;
	}
}

/* [wereldweer_balk] — defilerende balk met de koppen van het laatste overzicht. */
.wwr-balk {
	--wwr-blauw: var(--wk-knop, #1a5fa0);
	display: flex;
	align-items: stretch;
	width: 100%;
	max-width: none; /* even breed als de kaarten eronder (bv. [weer_live]) */
	margin: 16px 0 0; /* onderaan dezelfde ruimte als tussen de kaarten */
	background: #fff;
	border: 1px solid #c9ced6;
	border-radius: 14px; /* zelfde hoeken als de weerkaarten */
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
	overflow: hidden;
	font-size: 14px;
	line-height: 1.3;
	box-sizing: border-box;
}

.wwr-balk .wwr-balk-label {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 9px 16px;
	background: linear-gradient(90deg, var(--wk-kop-basis-1, #1f5fae), var(--wk-kop-basis-2, #4a8ad6));
	color: var(--wk-kop-basis-tekst, #fff);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}

.wwr-balk .wwr-balk-label::before {
	content: "";
	width: 14px;
	height: 14px;
	flex: 0 0 14px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.6 3.8 5.6 3.8 9s-1.3 6.4-3.8 9c-2.5-2.6-3.8-5.6-3.8-9S9.5 5.6 12 3z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wwr-balk-venster {
	position: relative;
	flex: 1 1 auto;
	overflow: hidden;
	display: flex;
	align-items: center;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
	mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent);
}

.wwr-balk-band {
	display: flex;
	width: max-content;
	animation: wwr-defileer var(--wwr-duur, 40s) linear infinite;
}

.wwr-balk:hover .wwr-balk-band,
.wwr-balk:focus-within .wwr-balk-band {
	animation-play-state: paused;
}

.wwr-balk-reeks {
	display: flex;
	flex: 0 0 auto;
}

.wwr-balk-item {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.wwr-balk-item::after {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--wwr-blauw);
	opacity: 0.5;
	margin: 0 22px;
}

.wwr-balk-item a {
	color: #1c2430;
	text-decoration: none;
	font-weight: 600;
}

.wwr-balk-item a:hover,
.wwr-balk-item a:focus-visible {
	color: var(--wwr-blauw);
	text-decoration: underline;
}

@keyframes wwr-defileer {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.wwr-balk-band {
		animation: none;
	}
	.wwr-balk-venster {
		overflow-x: auto;
	}
}

@media (max-width: 600px) {
	.wwr-balk {
		font-size: 13px;
	}
	.wwr-balk .wwr-balk-label {
		padding: 8px 12px;
	}
}