.rvnm-wrapper {
	--rvnm-accent: var(--pv-primary, #cc3333);
	--rvnm-accent-ink: var(--contrast-3, #fff);
	--rvnm-panel: var(--pv-bg-body, #e6e6e6);
	--rvnm-area: var(--pv-lightgrey, #f5f5f5);
	--rvnm-ink:  var(--pv-text-body, #404040);
	--rvnm-panel-width: min(1400px, 100%);
	color: var(--rvnm-ink);
	transition: width .3s ease-out;
}

/* Toggle button */
button.rvnm-button {
	position: sticky;
	display: flex;
	width: 100%;
	justify-content: space-between;
	gap: 10px;
	align-items: center;
	padding-block: var(--pv-space-5xs, 10px);
	padding-inline: var(--pv-space-2xs, 20px) var(--pv-space-5xs, 10px);
	margin: 0;
	border: 0;
	border-radius: 0;
	background: var(--rvnm-accent);
	color: var(--rvnm-accent-ink);
	font-size: var(--pv-text-s);
	cursor: pointer;
	z-index: 110;
}
.rvnm-title { display: flex; align-items: center; gap: 5px; }
.rvnm-icon { width: 22px; height: 22px; fill: currentColor; flex: none; }
.rvnm-more { fill: none; transition: transform .3s; }
.rvnm-button:hover .rvnm-more,
.rvnm-open .rvnm-more { transform: rotate(90deg); }

/* Panel */
.rvnm-content {
	display: grid;
	grid-template-columns: 1fr 50ch;
	gap: 30px;
	padding: 50px 30px;
	background: var(--rvnm-panel);
	box-sizing: border-box;
}
.rvnm-content[hidden] { display: none; }
.rvnm-collapsible .rvnm-content {
	position: fixed;
	right: 0;
	top: 0;
	width: 0;
	z-index: 100;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
	/* fade in and out, see setOpen() in rv-navigation-map.js */
	opacity: 0;
	transform: translateY(-8px);
	transition: opacity .25s ease-out, transform .25s ease-out;
}
.rvnm-collapsible .rvnm-content.rvnm-shown {
	opacity: 1;
	transform: none;
	max-height: 100%;
	width: var(--rvnm-panel-width);
	overflow: scroll;
}

@media (prefers-reduced-motion: reduce) {
	.rvnm-collapsible .rvnm-content { transform: none; transition-property: opacity; }
}
/* Page behind the open map does not scroll, see setOpen() in rv-navigation-map.js;
   the gutter keeps the layout from shifting when the scrollbar disappears */
html.rvnm-scroll-lock {
	overflow: hidden;
	scrollbar-gutter: stable;
}
.rvnm-collapsible .rvnm-content { overscroll-behavior: contain; }
.rvnm-heading {
	margin: 0 0 15px;
	text-align: left;
}

/* Map */
.rvnm-map-holder { position: relative; }
.rvnm-map { display: block; width: 100%; max-width: 100%; height: auto; }
.rvnm-area {
	fill: var(--rvnm-area);
	stroke: var(--rvnm-panel);
	stroke-width: 1;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: fill .2s linear, fill-opacity .2s linear;
	cursor: pointer;
}
.rvnm-area:hover,
.rvnm-area.rvnm-highlight { fill: var(--rvnm-accent); }
.rvnm-area.rvnm-inactive { fill: var(--rvnm-area); cursor: default; }
.rvnm-highlight-all .rvnm-area { fill: var(--rvnm-accent); fill-opacity: .5;}
.rvnm-map a:focus { outline: none; }
.rvnm-map a:focus-visible .rvnm-area {
	fill: var(--rvnm-accent);
	stroke: var(--rvnm-ink);
	stroke-width: 2;
}

/* Spots for associations without an area */
.rvnm-spot { opacity: 0; pointer-events: none; transition: opacity .15s ease-out; }
.rvnm-spot.rvnm-visible { opacity: 1; }
.rvnm-spot-dot { fill: var(--rvnm-accent); stroke: #fff; stroke-width: .5; } /* spot size set in php:107 $spots .= ... */
.rvnm-spot-halo { fill: var(--rvnm-accent); fill-opacity: .25; transform-box: fill-box; transform-origin: center; }
.rvnm-spot.rvnm-visible .rvnm-spot-halo { animation: rvnm-pulse 1.4s ease-out infinite; }
@keyframes rvnm-pulse {
	from { transform: scale(.5); opacity: 1; }
	to { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.rvnm-spot.rvnm-visible .rvnm-spot-halo { animation: none; }
}

/* Tooltip */
.rvnm-tooltip {
	--rvnm-arrow: 50%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	padding: 6px 12px;
	border-radius: 6px;
	background: var(--rvnm-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, calc(-100% - 14px));
	transition: opacity .1s ease-out;
}
.rvnm-tooltip.rvnm-visible { opacity: 1; }
.rvnm-tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: var(--rvnm-arrow);
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top-color: var(--rvnm-ink);
}

/* List */
.rvnm-list {
	list-style: none;
	margin: 0;
	padding: 0;
	columns: 2;
	column-gap: 30px;
}
.rvnm-item {
	margin: 0 0 5px;
	break-inside: avoid;
	margin-bottom: 0 !important;
}
.rvnm-item a {
	display: block;
	color: inherit;
	text-decoration: none;
	padding-inline: 0;
	transition: padding-inline .3s ease-in-out;
}
.rvnm-item a:hover,
.rvnm-item a:focus-visible,
.rvnm-item.rvnm-highlight a {
	color: var(--rvnm-accent);
	width: fit-content;
	padding-inline: 0.5em;
}
/* Mobile select: same height and chevron as the toggle button */
.rvnm-select-mobile { display: none; position: relative; }
.rvnm-select-mobile::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 14px;
	width: 22px;
	height: 22px;
	background: var(--rvnm-accent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%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'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transform: translateY(-50%);
	pointer-events: none;
}
select.rvnm-select {
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	min-height: 48px;
	margin: 0;
	padding: 10px 50px 10px 16px;
	font: inherit;
	line-height: 1.3;
	color: var(--rvnm-ink);
	background: var(--rvnm-accent-ink);
	border: 2px solid var(--base, #d5d5d5);
	border-radius: var(--btn-radius-2, 0);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
	cursor: pointer;
	transition: border-color .15s ease-out, box-shadow .15s ease-out;
}
select.rvnm-select:hover { border-color: var(--rvnm-accent); }
select.rvnm-select:focus { outline: none; }
select.rvnm-select:focus-visible {
	border-color: var(--rvnm-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rvnm-accent) 25%, transparent);
}

@media (max-width: 992px) {
	.rvnm-content { grid-template-columns: 1fr; padding: 4rem var(--pv-space-2xl, 2rem); }
	.rvnm-map-col,
	.rvnm-list { display: none; }
	.rvnm-select-mobile { display: block; }
}