/*
 * UMOOOVE Netwerk
 *
 * Geen eigen kleuren, geen eigen lettertype, geen eigen radius. Alles leunt op
 * de variabelen die Impreza zelf uitrolt vanuit Theme Options. Verandert de
 * backoffice daar het palet, dan verkleurt de zoeker mee.
 */

.umo-finder,
.umo-logos {
	--umo-bg:      var(--color-content-bg-alt, rgba(128,128,128,.06));
	--umo-rand:    var(--color-content-border, rgba(128,128,128,.25));
	--umo-tekst:   var(--color-content-text, inherit);
	--umo-kop:     var(--color-content-heading, inherit);
	--umo-primair: var(--color-content-primary, currentColor);
	--umo-radius:  var(--site-border-radius, 8px);
	--umo-gap:     var(--columns-gap, 1.5rem);
	color: var(--umo-tekst);
}

/*
 * Impreza zet --color-content-* niet om per rij: een rij met een ander
 * kleurschema krijgt een klasse en een eigen set variabelen. Zonder deze
 * blokken zou de zoeker in een zwarte rij lichte kaarten blijven tonen.
 */
.color_alternate .umo-finder,
.color_alternate .umo-logos {
	--umo-bg:      var(--color-alt-content-bg-alt);
	--umo-rand:    var(--color-alt-content-border);
	--umo-tekst:   var(--color-alt-content-text);
	--umo-kop:     var(--color-alt-content-heading);
	--umo-primair: var(--color-alt-content-primary);
}
.color_footer-top .umo-finder,
.color_footer-top .umo-logos {
	--umo-bg:      var(--color-subfooter-bg-alt);
	--umo-rand:    var(--color-subfooter-border);
	--umo-tekst:   var(--color-subfooter-text);
	--umo-kop:     var(--color-subfooter-heading);
	--umo-primair: var(--color-subfooter-link);
}
.color_footer-bottom .umo-finder,
.color_footer-bottom .umo-logos {
	--umo-bg:      var(--color-footer-bg-alt);
	--umo-rand:    var(--color-footer-border);
	--umo-tekst:   var(--color-footer-text);
	--umo-kop:     var(--color-footer-heading);
	--umo-primair: var(--color-footer-link);
}

/* ---------- stap 1: de enige vraag ---------- */

.umo-zoek {
	background: var(--umo-bg);
	border: 1px solid var(--umo-rand);
	border-radius: var(--umo-radius);
	padding: clamp(1.25rem, 3vw, 2rem);
	margin-bottom: var(--umo-gap);
}
.umo-zoek__label {
	display: block;
	font-weight: 600;
	font-size: 1.1em;
	color: var(--umo-kop);
	margin-bottom: .75rem;
}
.umo-zoek__rij {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
}
.umo-zoek__veld {
	flex: 1 1 18rem;
	min-width: 0;
	font-size: 1.05em;
}
.umo-zoek__knop {
	flex: 0 0 auto;
}
.umo-zoek__hier {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	margin-top: .9rem;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	font-size: .95em;
	cursor: pointer;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	opacity: .85;
}
.umo-zoek__hier:hover,
.umo-zoek__hier:focus-visible {
	opacity: 1;
	color: var(--umo-primair);
}
.umo-zoek__hier[disabled] {
	opacity: .5;
	cursor: wait;
}
.umo-zoek__hint {
	margin: .9rem 0 0;
	font-size: .92em;
	opacity: .65;
}

/* ---------- stap 2: verfijnen, pas na de eerste zoekopdracht ---------- */

.umo-verfijn {
	margin-top: 1.5rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--umo-rand);
}
.umo-verfijn__knop {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}
.umo-verfijn__knop::after {
	content: "";
	width: .5rem;
	height: .5rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .2s;
}
.umo-verfijn__knop[aria-expanded="true"]::after {
	transform: rotate(225deg) translate(-2px, -2px);
}
.umo-verfijn__aantal {
	font-weight: 400;
	opacity: .7;
}
.umo-verfijn__paneel {
	margin-top: 1.1rem;
}

.umo-filters {
	border: 0;
	padding: 0;
	margin: 0 0 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: .4rem;
	align-items: center;
}
.umo-filters legend {
	float: left;
	width: 100%;
	padding: 0;
	margin-bottom: .55rem;
	font-weight: 600;
	color: var(--umo-kop);
	font-size: .92em;
}
.umo-filters--sub {
	opacity: .9;
}

.umo-chip {
	--umo-c: var(--umo-primair);
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .45rem .9rem .45rem .7rem;
	border: 1px solid var(--umo-rand);
	border-radius: 2em;
	cursor: pointer;
	font-size: .92em;
	line-height: 1.3;
	transition: border-color .15s, background .15s;
}
.umo-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.umo-chip__dot {
	width: .75rem;
	height: .75rem;
	border-radius: 50%;
	border: 3px solid var(--umo-c);
	flex: 0 0 auto;
	transition: background .15s;
	/* Vangt het geval waarin een merkkleur wegvalt tegen de achtergrond,
	   zoals wit voor hersenletsel op een lichte sectie. */
	outline: 1px solid rgba(128,128,128,.35);
	outline-offset: -1px;
}
.umo-chip:hover {
	border-color: var(--umo-c);
}
.umo-chip:has(input:checked) {
	border-color: var(--umo-c);
	background: color-mix(in srgb, var(--umo-c) 14%, transparent);
}
.umo-chip:has(input:checked) .umo-chip__dot {
	background: var(--umo-c);
}
.umo-chip:has(input:focus-visible) {
	outline: 2px solid var(--umo-primair);
	outline-offset: 2px;
}

.umo-straal label {
	display: flex;
	justify-content: space-between;
	font-weight: 600;
	font-size: .92em;
	color: var(--umo-kop);
	margin-bottom: .5rem;
}
.umo-straal__km {
	font-weight: 700;
	color: var(--umo-primair);
}
.umo-straal input[type=range] {
	width: 100%;
	max-width: 22rem;
	accent-color: var(--umo-primair);
}

/* ---------- kaart ---------- */

.umo-finder__map {
	border: 1px solid var(--umo-rand);
	border-radius: var(--umo-radius);
	overflow: hidden;
	background: var(--umo-bg);
	z-index: 0;
}
/* In donkere secties keren we de tegels om, zodat de kaart bij het merk past
   in plaats van als een wit gat in het zwart te staan. Nog steeds PDOK,
   nog steeds geen cookies. */
.color_alternate .umo-finder__map .leaflet-tile-pane,
.color_footer-top .umo-finder__map .leaflet-tile-pane,
.color_footer-bottom .umo-finder__map .leaflet-tile-pane {
	filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.95) saturate(.35);
}
.color_alternate .umo-finder__map .leaflet-control-attribution,
.color_alternate .umo-finder__map .leaflet-control-zoom a {
	background: rgba(20,20,20,.85);
	color: #c8c8c8;
	border-color: rgba(255,255,255,.18);
}
.umo-speld {
	display: block;
	border-radius: 50%;
	border: 6px solid var(--umo-c, currentColor);
	background: transparent;
	box-sizing: border-box;
}
.umo-speld--hier {
	border-width: 4px;
	border-style: dashed;
}
.umo-straalcirkel {
	stroke: var(--umo-primair);
	stroke-width: 1.5;
	stroke-dasharray: 6 7;
	fill: var(--umo-primair);
	fill-opacity: .07;
}

.umo-finder__status {
	margin: var(--umo-gap) 0 .5rem;
	font-weight: 600;
	color: var(--umo-kop);
}
.umo-finder__status:empty {
	display: none;
}

/* ---------- zoeker: resultaten ---------- */

.umo-finder__results {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: var(--umo-gap);
}
.umo-kaart {
	border: 1px solid var(--umo-rand);
	border-radius: var(--umo-radius);
	padding: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.umo-kaart__afstand {
	display: flex;
	align-items: center;
	gap: .5rem;
	font-size: .85em;
	opacity: .75;
}
.umo-kaart__naam {
	margin: 0;
	font-size: 1.1em;
	color: var(--umo-kop);
}
.umo-kaart__adres,
.umo-kaart__tags {
	font-size: .92em;
	margin: 0;
}
.umo-kaart__tags {
	opacity: .75;
}
.umo-kaart__acties {
	margin-top: auto;
	padding-top: .9rem;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.1rem;
	align-items: baseline;
}
.umo-kaart__link {
	font-weight: 600;
}
.umo-kaart__tel {
	font-size: .92em;
	opacity: .8;
	text-decoration: none;
}
.umo-kaart__tel:hover {
	opacity: 1;
	text-decoration: underline;
}
.umo-finder__meer {
	margin-top: var(--umo-gap);
	opacity: .75;
	font-size: .95em;
}
.umo-kaart__logo {
	max-height: 2.4rem;
	width: auto;
	margin-bottom: .25rem;
	align-self: flex-start;
}

/* ---------- logomuur ---------- */

.umo-logos__titel {
	margin: 0 0 var(--umo-gap);
}
.umo-logos--raster .umo-logos__spoor {
	display: grid;
	grid-template-columns: repeat(var(--umo-kolommen, 5), minmax(0, 1fr));
	gap: var(--umo-gap);
	align-items: center;
}
.umo-logos__item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: .5rem;
	min-height: 3.5rem;
}
.umo-logos__item img {
	max-height: 3.25rem;
	width: auto;
	object-fit: contain;
}
.umo-logos.is-grijs .umo-logos__item img {
	filter: grayscale(1);
	opacity: .65;
	transition: filter .2s, opacity .2s;
}
.umo-logos.is-grijs a.umo-logos__item:hover img,
.umo-logos.is-grijs a.umo-logos__item:focus-visible img {
	filter: none;
	opacity: 1;
}

.umo-logos--marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.umo-logos--marquee .umo-logos__spoor {
	display: flex;
	gap: clamp(2rem, 5vw, 4.5rem);
	width: max-content;
	animation: umo-schuif 46s linear infinite;
}
.umo-logos--marquee:hover .umo-logos__spoor {
	animation-play-state: paused;
}
@keyframes umo-schuif {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.umo-logos--marquee .umo-logos__spoor {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
	}
	.umo-logos--marquee {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

@media (max-width: 767px) {
	.umo-logos--raster .umo-logos__spoor {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.umo-leeg {
	padding: 1rem;
	border: 1px dashed var(--color-content-border, #ccc);
	border-radius: var(--site-border-radius, 8px);
	opacity: .8;
}


/* ---------- ringen ---------- */

.umo-ring {
	display: block;
	width: 100%;
	height: auto;
}
.umo-ring--icoon {
	width: 4rem;
	margin-bottom: 1rem;
}

/* ---------- agenda ---------- */

.umo-agenda {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
	gap: var(--umo-gap, 1.5rem);
}
.umo-agenda__item {
	border: 1px solid var(--color-content-border, rgba(128,128,128,.25));
	border-radius: var(--site-border-radius, 1rem);
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.color_alternate .umo-agenda__item {
	border-color: var(--color-alt-content-border);
}
.umo-agenda__wanneer {
	font-size: .88rem;
	font-weight: 600;
	color: var(--color-content-primary);
}
.color_alternate .umo-agenda__wanneer {
	color: var(--color-alt-content-primary);
}
.umo-agenda__item.is-terugblik .umo-agenda__wanneer {
	color: inherit;
	opacity: .6;
}
.umo-agenda__titel {
	margin: 0;
	font-size: 1.1rem;
}
.umo-agenda__tekst {
	margin: 0;
	font-size: .95rem;
	opacity: .85;
}
.umo-agenda__waar {
	margin-top: auto;
	padding-top: .75rem;
	font-size: .9rem;
	opacity: .65;
}


/* ---------- de zes gebieden, uit de taxonomie ---------- */

.umo-gebieden {
	display: grid;
	grid-template-columns: repeat(var(--umo-kolommen, 3), minmax(0, 1fr));
	gap: var(--umo-gap, 1.5rem);
}
.umo-gebied {
	--umo-c: var(--color-content-primary);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: 2rem 1.75rem;
	border: 1px solid var(--color-content-border, rgba(128,128,128,.25));
	border-radius: var(--site-border-radius, 1rem);
	background: var(--color-content-bg-alt, rgba(128,128,128,.05));
	text-decoration: none;
	color: inherit;
	transition: border-color .2s, transform .2s;
}
.color_alternate .umo-gebied {
	border-color: var(--color-alt-content-border);
	background: var(--color-alt-content-bg-alt);
}
.umo-gebied:hover,
.umo-gebied:focus-visible {
	border-color: var(--umo-c);
	transform: translateY(-2px);
}
.umo-gebied .umo-ring--icoon {
	width: 3.5rem;
	margin-bottom: .75rem;
}
.umo-gebied__naam {
	margin: 0;
	color: var(--color-content-heading, inherit);
}
.color_alternate .umo-gebied__naam {
	color: var(--color-alt-content-heading);
}
.umo-gebied__tekst {
	margin: 0;
	font-size: .95em;
	opacity: .8;
}
/* Eén vaste knoptekst voor alle kaarten: dat houdt ze even hoog en
   voorkomt labels die over twee regels breken. */
.umo-gebied__knop {
	margin-top: auto;
	padding-top: 1.1rem;
	font-weight: 600;
	color: var(--umo-c);
	display: inline-flex;
	align-items: center;
	gap: .4rem;
}
.umo-gebied__knop::after {
	content: "";
	width: .4rem;
	height: .4rem;
	border-top: 2px solid currentColor;
	border-right: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s;
}
.umo-gebied:hover .umo-gebied__knop::after {
	transform: rotate(45deg) translate(2px, -2px);
}

@media (max-width: 1024px) {
	.umo-gebieden { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.umo-gebieden { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.umo-gebied, .umo-gebied__knop::after { transition: none; }
	.umo-gebied:hover { transform: none; }
}