/**
 * How a marker that does not match the current search looks.
 *
 * Deliberately still visible and still clickable: the whole point is to keep
 * the surrounding context on the map rather than have pins disappear as the
 * filter narrows. Only the emphasis changes.
 */

.map-marker.cmm-dim,
.cmm-dim .map-marker {
	opacity: 0.28;
	filter: grayscale( 1 );
	transition: opacity 0.18s ease, filter 0.18s ease;
	z-index: 1;
}

.map-marker.cmm-dim:hover,
.cmm-dim .map-marker:hover {
	opacity: 0.75;
	filter: grayscale( 0.3 );
}

/* A matching marker sits above the dimmed ones, so it is never hidden behind
   a pin that does not match. */
.map-marker[data-cmm]:not(.cmm-dim) {
	z-index: 2;
}

@media ( prefers-reduced-motion: reduce ) {
	.map-marker.cmm-dim,
	.cmm-dim .map-marker {
		transition: none;
	}
}

/**
 * The other way to say "does not match": gone.
 *
 * Used when dimming is switched off, which gives the preloading without the
 * visual change. Kept out of the layout entirely rather than made transparent,
 * so it cannot be clicked by accident.
 */
.marker-wrapper.cmm-hidden,
.map-marker.cmm-hidden {
	display: none !important;
}

/**
 * A post type that is not the one being searched.
 *
 * One map can serve several post types through a single search form, and only
 * one of them is being looked at. The others come off entirely rather than
 * fading, because they are a different kind of thing rather than a near miss.
 */
.marker-wrapper.cmm-type-off,
.map-marker.cmm-type-off {
	display: none !important;
}

/**
 * The pin for the result being pointed at.
 *
 * Lifted rather than recoloured, so it reads as "this one" without competing
 * with whatever the marker already says about the listing itself.
 */
/*
 * Lifting the pin only. The GROWTH comes from Voxel's own `marker-focused`,
 * which this adds alongside - it scales the inner .map-marker and so survives
 * `.ts-map:not(.leaflet-container) .marker-wrapper { transform: translate(...) }`,
 * where scaling the wrapper here did not: that rule wins at (0,2,1) against
 * (0,2,0), so the transform was dropped and only the shadow ever showed.
 *
 * Nothing about the growth is restated here. Voxel already animates it -
 * `.map-marker { transition: transform .2s ease }` - so a copy of that with its
 * own duration and origin made a pin highlighted by this add-on move
 * differently from one highlighted by the theme.
 */
/*
 * Stacking order, so a faded pin never sits on top of a matching one.
 *
 * Voxel gives every .marker-wrapper z-index 10, which leaves matches and
 * non-matches interleaved by document order - so on a dense map a faded pin
 * could cover a match, which is the one thing the visitor is looking for.
 *
 * Faded pins are pushed BELOW rather than matches raised above: raising them
 * would put map markers over the map's own controls and popups, which sit in
 * the same stacking context.
 */
.marker-wrapper.cmm-dim,
.map-marker.cmm-dim {
	z-index: 4;
}

/*
 * Pointing at the PIN raises it too, not only pointing at its result.
 *
 * The add-on watches the result cards, so hovering a marker on the map itself
 * did nothing and a pin could stay buried under its neighbours exactly while
 * somebody was trying to click it. Done in CSS rather than script: :hover
 * needs no listener, cannot miss a mouseout, and puts the pin back on its own.
 *
 * `:has()` here only to out-specify Voxel's own
 * `.marker-wrapper:has(.ts-marker-cluster) { z-index: 50 }` at (0,2,0).
 */
.marker-wrapper:has( .map-marker[data-cmm] ):hover,
.map-marker[data-cmm]:hover {
	z-index: 60;
}

/*
 * The pin being pointed at goes above everything, cluster bubbles included.
 *
 * Voxel puts a wrapper holding a cluster at 50, so a hovered pin at 15 was
 * lifted above its neighbours and still covered by the nearest bubble - which
 * is the one moment it must not be. The `:has()` form matches the specificity
 * of Voxel's own rule and adds a class, so it wins outright.
 */
.marker-wrapper.cmm-hover:has( .ts-marker-cluster ),
.marker-wrapper.cmm-hover,
.map-marker.cmm-hover {
	z-index: 60;
}

/*
 * The growth itself is Voxel's `.marker-focused .map-marker { scale(1.25) }`,
 * which this add-on adds the class for. Nothing is restated here: a copy with
 * its own transform-origin and transition grew from the bottom with an
 * animation while Voxel's grows from the centre instantly, so a pin
 * highlighted by the add-on visibly did not match one highlighted by the theme.
 *
 * The one case Voxel's descendant selector cannot reach is a marker that IS
 * the focused element rather than sitting inside one, and that is the only
 * thing restated - at Voxel's value, with none of its own ideas.
 */
.map-marker.marker-focused {
	transform: scale( 1.25 );
}

/* A pin worth pointing out is worth seeing, even if the search does not match it. */
.marker-wrapper.cmm-hover.cmm-dim,
.cmm-hover .map-marker {
	opacity: 1;
	filter: none;
}

/*
 * The map stays awake while results load.
 *
 * Voxel fades the map widget and lays a full-cover pseudo-element over it for
 * the duration of a search, so that nobody drags a map whose markers are
 * mid-replacement. Ours are not being replaced - they were loaded once, up
 * front, and every pin the visitor can see is already correct - so that cover
 * is a wait for something that is not happening.
 *
 * Only ever active while our markers really are the ones on the map: the class
 * is put on by the script, which takes it off again the moment the map goes
 * back to being fed by the search response.
 *
 * Specificity is enough on its own (0,2,0 against 0,1,0), so no !important:
 * a theme that genuinely wants its own loading treatment can still have it.
 */
.cmm-live .map-pending {
	opacity: 1;
}

.cmm-live .map-pending::before {
	content: none;
}

/*
 * The pile of listings that did not match.
 *
 * Clustering only the matches leaves every other listing on the map as its own
 * pin, so narrowing a search makes the map busier instead of clearer. They are
 * clustered too, in a second pile of their own, and this is what tells the two
 * apart: the same treatment the individual faded markers get, so a map reads
 * the same whether it is clustered or not.
 *
 * Deliberately still visible. The point of the add-on is that you can see there
 * is something there.
 */
.cmm-cluster-dim .ts-marker-cluster {
	opacity: 0.38;
	filter: grayscale( 1 );
	box-shadow: none;
	background-color: var( --ts-shade-3, #8a8a8a );
	transition: opacity 0.18s, filter 0.18s;
}

.cmm-cluster-dim:hover .ts-marker-cluster {
	opacity: 0.8;
	filter: grayscale( 0.3 );
}

/*
 * A faded pile never sits on top of the results.
 *
 * Voxel lifts any wrapper holding a cluster to z-index 50 with
 * `.marker-wrapper:has(.ts-marker-cluster)`, which at (0,2,0) beat a plain
 * `.cmm-cluster-dim` at (0,1,0) - so a greyed-out pile rendered ABOVE the very
 * markers the search had matched. Matching the shape of Voxel's own selector
 * and adding our class puts it at (0,3,0), which wins.
 */
.marker-wrapper.cmm-cluster-dim:has( .ts-marker-cluster ),
.marker-wrapper.cmm-cluster-dim,
.cmm-cluster-dim {
	z-index: 1;
}

/*
 * A marker standing in a fanned-out cluster.
 *
 * Lifted above its neighbours and never faded: a pin you have deliberately
 * opened is one you are looking at, whether or not it matches the search.
 */
/*
 * A fanned-out cluster sits above the bubbles around it: it was opened
 * deliberately, and a neighbouring pile covering it defeats the point.
 */
.map-marker.cmm-spiderfied,
.marker-wrapper.cmm-spiderfied {
	z-index: 55;
	opacity: 1;
	filter: none;
}

/* A cluster that has been fanned out is not a cluster while it is open. */
.marker-wrapper.cmm-cluster-open,
.cmm-cluster-open {
	display: none !important;
}