/* Revolution Markers – COMMAR */

.rhm {
	/* weergave – per breakpoint gezet door de widget */
	--rhm-card-display: flex;
	--rhm-list: none;
	--rhm-card-vis: visible;
	--rhm-card-op: 1;
	--rhm-card-events: auto;
	--rhm-pin-display: none;

	--rhm-img-radius: 0px;
	--rhm-overlay: 0;

	--rhm-pin-size: 34px;
	--rhm-pin-bg: #ffffff;
	--rhm-pin-color: #2f3e34;
	--rhm-pin-bg-active: #2f3e34;
	--rhm-pin-color-active: #ffffff;
	--rhm-pin-ring: rgba(255, 255, 255, 0.55);
	--rhm-inset: 28px;
	--rhm-badge-x: -12px;
	--rhm-badge-y: -12px;
	--rhm-badge-size: 34px;
	--rhm-badge-bg: #ffffff;
	--rhm-badge-color: #2f3e34;
	--rhm-badge-ring-w: 0px;
	--rhm-badge-ring: rgba(255, 255, 255, 0.55);
	--rhm-badge-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.55);

	--rhm-card-w: 250px;
	--rhm-card-offset: 14px;
	--rhm-card-bg: #ffffff;
	--rhm-card-blur: 0px;
	--rhm-card-radius: 14px;
	--rhm-card-title: #1a1a1a;
	--rhm-card-text: rgba(26, 26, 26, 0.68);

	--rhm-icon-box: 34px;
	--rhm-icon-size: 15px;
	--rhm-icon-color: #2f3e34;
	--rhm-icon-bg: rgba(47, 62, 52, 0.08);
	--rhm-icon-radius: 50%;

	--rhm-list-gap: 2px;
	--rhm-list-top: 24px;
	--rhm-list-divider: rgba(26, 26, 26, 0.12);
	--rhm-list-bg-active: rgba(47, 62, 52, 0.05);

	position: relative;
}

/* ------------------------------------------------------------------ foto */

.rhm-frame {
	position: relative;
	width: 100%;
	border-radius: var(--rhm-img-radius);
	line-height: 0;
}

.rhm-frame img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--rhm-img-radius);
}

.rhm-veil {
	position: absolute;
	inset: 0;
	border-radius: var(--rhm-img-radius);
	background: rgba(12, 16, 14, var(--rhm-overlay));
	pointer-events: none;
}

/* ------------------------------------------------------------- ankerpunt */

.rhm-point {
	position: absolute;
	left: var(--rhm-x, 50%);
	top: var(--rhm-y, 50%);
	width: 0;
	height: 0;
	z-index: 2;
}

.rhm-point.is-open,
.rhm-point.is-linked,
.rhm-point:hover,
.rhm-point:focus-within {
	z-index: 6;
}

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

.rhm-card {
	position: absolute;
	display: var(--rhm-card-display);
	flex-direction: column;
	gap: 6px;
	width: calc(var(--rhm-card-w) * var(--rhm-fit, 1));
	max-width: min(80vw, 360px);
	left: calc(var(--rhm-l, 0px) + var(--rhm-nx, 0px));
	top: calc(var(--rhm-t, 0px) + var(--rhm-ny, 0px));
	padding: 14px 16px;
	background: var(--rhm-card-bg);
	border-radius: var(--rhm-card-radius);
	backdrop-filter: blur(var(--rhm-card-blur));
	-webkit-backdrop-filter: blur(var(--rhm-card-blur));
	text-align: left;
	line-height: normal;
	opacity: var(--rhm-card-op);
	visibility: var(--rhm-card-vis);
	pointer-events: var(--rhm-card-events);
	transform: translate(var(--rhm-tx, -50%), var(--rhm-ty, -50%));
	transition: opacity 0.28s ease, box-shadow 0.3s ease;
	z-index: 5;
}

/* meetmodus – posities meten zonder animatie-offsets */
.rhm.is-solving .rhm-point,
.rhm.is-solving .rhm-card {
	transition: none !important;
	animation: none !important;
	opacity: 1 !important;
}

.rhm.is-solving .rhm-card {
	transform: translate(var(--rhm-tx, -50%), var(--rhm-ty, -50%)) !important;
}

/* uitlijning op het ankerpunt – geldt als de kaarten altijd zichtbaar zijn */

.rhm-align-center {
	--rhm-tx: -50%;
	--rhm-ty: -50%;
}

.rhm-align-top-left {
	--rhm-tx: 0%;
	--rhm-ty: 0%;
}

.rhm-align-top-right {
	--rhm-tx: -100%;
	--rhm-ty: 0%;
}

.rhm-align-bottom-left {
	--rhm-tx: 0%;
	--rhm-ty: -100%;
}

.rhm-align-bottom-right {
	--rhm-tx: -100%;
	--rhm-ty: -100%;
}

/* zijde ten opzichte van de marker – geldt bij hover of klik */

.rhm-point[data-place="right"] {
	--rhm-l: calc(var(--rhm-pin-size) / 2 + var(--rhm-card-offset));
	--rhm-t: 0px;
	--rhm-tx: 0%;
	--rhm-ty: -50%;
}

.rhm-point[data-place="left"] {
	--rhm-l: calc((var(--rhm-pin-size) / 2 + var(--rhm-card-offset)) * -1);
	--rhm-t: 0px;
	--rhm-tx: -100%;
	--rhm-ty: -50%;
}

.rhm-point[data-place="bottom"] {
	--rhm-l: 0px;
	--rhm-t: calc(var(--rhm-pin-size) / 2 + var(--rhm-card-offset));
	--rhm-tx: -50%;
	--rhm-ty: 0%;
}

.rhm-point[data-place="top"] {
	--rhm-l: 0px;
	--rhm-t: calc((var(--rhm-pin-size) / 2 + var(--rhm-card-offset)) * -1);
	--rhm-tx: -50%;
	--rhm-ty: -100%;
}

.rhm-point[data-place].is-open .rhm-card {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.rhm-point.is-linked .rhm-card {
	box-shadow: 0 0 0 2px var(--rhm-pin-bg-active), 0 14px 38px -14px rgba(20, 20, 20, 0.5);
}

/* ---------------------------------------------------------------- inhoud */

.rhm-head {
	display: flex;
	align-items: center;
	gap: 10px;
}

.rhm-body {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

.rhm-body-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.rhm-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rhm-icon-box);
	height: var(--rhm-icon-box);
	border-radius: var(--rhm-icon-radius);
	background: var(--rhm-icon-bg);
	color: var(--rhm-icon-color);
}

.rhm-icon i {
	font-size: var(--rhm-icon-size);
	line-height: 1;
}

.rhm-icon svg {
	width: var(--rhm-icon-size);
	height: var(--rhm-icon-size);
	fill: currentColor;
}

.rhm-card-title {
	color: var(--rhm-card-title);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.rhm-card-text {
	color: var(--rhm-card-text);
	font-size: 12.5px;
	line-height: 1.5;
}

.rhm-card-link {
	align-self: flex-start;
	margin-top: 2px;
	color: var(--rhm-pin-bg-active);
	font-size: 12.5px;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

/* ----------------------------------------------------------- nummerbadge */

.rhm-badge {
	position: absolute;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--rhm-badge-size);
	height: var(--rhm-badge-size);
	border-radius: 50%;
	background: var(--rhm-badge-bg);
	color: var(--rhm-badge-color);
	box-shadow: 0 0 0 var(--rhm-badge-ring-w) var(--rhm-badge-ring), var(--rhm-badge-shadow);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	z-index: 2;
}

.rhm--badge-top-left .rhm-card > .rhm-badge {
	left: var(--rhm-badge-x);
	top: var(--rhm-badge-y);
}

.rhm--badge-top-right .rhm-card > .rhm-badge {
	right: var(--rhm-badge-x);
	top: var(--rhm-badge-y);
}

.rhm-badge--inline {
	position: static;
	flex: 0 0 auto;
	box-shadow: 0 0 0 var(--rhm-badge-ring-w) var(--rhm-badge-ring);
}

.rhm-row .rhm-badge:not(.rhm-badge--inline) {
	display: none;
}

/* ---------------------------------------------------------------- marker */

.rhm-pin {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: var(--rhm-pin-display);
	width: var(--rhm-pin-size);
	height: var(--rhm-pin-size);
	align-items: center;
	justify-content: center;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50%;
	background: var(--rhm-pin-bg);
	color: var(--rhm-pin-color);
	box-shadow: 0 0 0 3px var(--rhm-pin-ring), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	-webkit-appearance: none;
	appearance: none;
	z-index: 3;
}

.rhm-pin:hover {
	transform: translate(-50%, -50%) scale(1.08);
}

.rhm-pin:focus-visible {
	outline: 2px solid var(--rhm-pin-bg-active);
	outline-offset: 4px;
}

.rhm-point.is-open .rhm-pin,
.rhm-point.is-linked .rhm-pin {
	background: var(--rhm-pin-bg-active);
	color: var(--rhm-pin-color-active);
	transform: translate(-50%, -50%) scale(1.08);
}

.rhm-pin-label {
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.rhm-pin-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.rhm--ping .rhm-pin::after {
	content: "";
	position: absolute;
	inset: -3px;
	border-radius: 50%;
	border: 2px solid var(--rhm-pin-bg-active);
	opacity: 0;
	animation: rhm-ping 2.8s ease-out infinite;
	animation-delay: calc(var(--rhm-i, 0) * 0.35s);
	pointer-events: none;
}

.rhm--ping .rhm-point.is-open .rhm-pin::after {
	animation: none;
	opacity: 0;
}

/* ----------------------------------------------------------------- lijst */

.rhm-list {
	display: var(--rhm-list);
	flex-direction: column;
	gap: var(--rhm-list-gap);
	margin-top: var(--rhm-list-top);
}

.rhm-row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	padding: 14px 12px;
	border-top: 1px solid var(--rhm-list-divider);
	border-radius: 10px;
	transition: background-color 0.3s ease;
}

.rhm-row:last-child {
	border-bottom: 1px solid var(--rhm-list-divider);
}

.rhm-row.is-linked {
	background: var(--rhm-list-bg-active);
}

.rhm-row-num {
	display: none;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: var(--rhm-badge-size);
	height: var(--rhm-badge-size);
	border-radius: 50%;
	background: var(--rhm-badge-bg);
	color: var(--rhm-badge-color);
	box-shadow: 0 0 0 var(--rhm-badge-ring-w) var(--rhm-badge-ring);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
}

.rhm--list-numbers .rhm-row-num {
	display: inline-flex;
}

.rhm-row-body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}

/* -------------------------------------------------------------- beweging */

.rhm--reveal.rhm--js .rhm-point {
	opacity: 0;
}

.rhm--reveal.rhm--js .rhm-card {
	transform: translate(var(--rhm-tx, -50%), var(--rhm-ty, -50%)) translateY(12px) scale(0.97);
}

.rhm--reveal.rhm--js.is-in .rhm-point {
	opacity: 1;
	transition: opacity 0.6s ease;
	transition-delay: calc(var(--rhm-i, 0) * 120ms);
}

.rhm--reveal.rhm--js.is-in .rhm-card {
	transform: translate(var(--rhm-tx, -50%), var(--rhm-ty, -50%));
	transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.28s ease, box-shadow 0.3s ease;
	transition-delay: calc(var(--rhm-i, 0) * 120ms);
}

@keyframes rhm-ping {
	0% {
		transform: scale(1);
		opacity: 0.7;
	}
	70% {
		transform: scale(1.9);
		opacity: 0;
	}
	100% {
		transform: scale(1.9);
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.rhm *,
	.rhm *::after {
		animation: none !important;
		transition-duration: 0.01ms !important;
	}

	.rhm--reveal.rhm--js .rhm-point {
		opacity: 1;
	}

	.rhm--reveal.rhm--js .rhm-card {
		transform: translate(var(--rhm-tx, -50%), var(--rhm-ty, -50%));
	}
}

/* ------------------------------- uitlijning per breakpoint ------------- */

@media (max-width: 1024px) {
	.rhm-align-t-center {
		--rhm-tx: -50%;
		--rhm-ty: -50%;
	}
	.rhm-align-t-top-left {
		--rhm-tx: 0%;
		--rhm-ty: 0%;
	}
	.rhm-align-t-top-right {
		--rhm-tx: -100%;
		--rhm-ty: 0%;
	}
	.rhm-align-t-bottom-left {
		--rhm-tx: 0%;
		--rhm-ty: -100%;
	}
	.rhm-align-t-bottom-right {
		--rhm-tx: -100%;
		--rhm-ty: -100%;
	}
}

@media (max-width: 767px) {
	.rhm-align-m-center {
		--rhm-tx: -50%;
		--rhm-ty: -50%;
	}
	.rhm-align-m-top-left {
		--rhm-tx: 0%;
		--rhm-ty: 0%;
	}
	.rhm-align-m-top-right {
		--rhm-tx: -100%;
		--rhm-ty: 0%;
	}
	.rhm-align-m-bottom-left {
		--rhm-tx: 0%;
		--rhm-ty: -100%;
	}
	.rhm-align-m-bottom-right {
		--rhm-tx: -100%;
		--rhm-ty: -100%;
	}
}