/*
 * Downtown Pocatello map markers (Steve's Leaflet Map).
 *
 * How it works: the plugin reads each point's `marker_class` and renders a
 * <div class="steve-map-marker YOURCLASS"> with an inner
 * <div class="steve-map-marker__pin" style="--steve-marker-color:#HEX">.
 * The point's `marker_color` is always available as --steve-marker-color,
 * so every marker below can be recolored per point without touching CSS.
 *
 * Three flavors are provided:
 *   1. CSS-drawn shapes (marker-dot, marker-pin, marker-star)
 *   2. SVG icon markers (ico-*) using the theme's icon set via CSS mask
 *   3. A combined pattern: color the icon with the point's marker_color
 *
 * Usage: set a point's `marker_class` to e.g. "ico-route".
 */

/* All classed markers use the point color when no other background is set. */
.steve-map-marker .steve-map-marker__pin {
	background-color: var(--steve-marker-color, #1e88e5);
}

/* ---------------------------------------------------------------------
 * 1. CSS-drawn shapes
 * ------------------------------------------------------------------- */

/* Simple colored dot */
.steve-map-marker.marker-dot .steve-map-marker__pin {
	width: 16px;
	height: 16px;
	border-radius: 999px;
	border: 2px solid rgba(0, 0, 0, 0.25);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Teardrop pin — the plugin ships this one; restyled slightly for the palette. */
.steve-map-marker.marker-pin .steve-map-marker__pin {
	width: 18px;
	height: 18px;
	border-radius: 18px 18px 18px 0;
	transform: rotate(-45deg);
	transform-origin: 50% 50%;
	background-color: var(--steve-marker-color, #f1601f);
	border: 2px solid rgba(0, 0, 0, 0.25);
}

.steve-map-marker.marker-pin .steve-map-marker__pin::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 6px;
	height: 6px;
	border-radius: 999px;
	transform: translate(-50%, -50%) rotate(45deg);
	background: rgba(255, 255, 255, 0.95);
}

/* Star (clip-path, no border/rotation needed) */
.steve-map-marker.marker-star .steve-map-marker__pin {
	width: 24px;
	height: 24px;
	border: 0;
	box-shadow: none;
	background-color: var(--steve-marker-color, #f9c112);
	clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* ---------------------------------------------------------------------
 * 2. SVG icon markers (theme icons via CSS mask)
 *
 * The SVGs in assets/images/icons/ are single-color with fill="currentColor".
 * Referenced through a CSS mask they adopt the point's marker_color as their
 * background color. No plugin edits required.
 * ------------------------------------------------------------------- */

/* Icon markers = white badge (contrast against map) + colored icon on top. */
.steve-map-marker.ico-pin .steve-map-marker__pin,
.steve-map-marker.ico-loc .steve-map-marker__pin,
.steve-map-marker.ico-map .steve-map-marker__pin,
.steve-map-marker.ico-route .steve-map-marker__pin,
.steve-map-marker.ico-award .steve-map-marker__pin,
.steve-map-marker.ico-cal .steve-map-marker__pin,
.steve-map-marker.ico-video .steve-map-marker__pin,
.steve-map-marker.ico-bus .steve-map-marker__pin {
	position: relative;
	width: 28px;
	height: 28px;
	border-radius: 999px;
	background-color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}

.steve-map-marker.ico-pin .steve-map-marker__pin::before,
.steve-map-marker.ico-loc .steve-map-marker__pin::before,
.steve-map-marker.ico-map .steve-map-marker__pin::before,
.steve-map-marker.ico-route .steve-map-marker__pin::before,
.steve-map-marker.ico-award .steve-map-marker__pin::before,
.steve-map-marker.ico-cal .steve-map-marker__pin::before,
.steve-map-marker.ico-video .steve-map-marker__pin::before,
.steve-map-marker.ico-bus .steve-map-marker__pin::before {
	content: "";
	position: absolute;
	inset: 4px;
	background-color: var(--steve-marker-color, #1e88e5);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-position: center;
	-webkit-mask-size: contain;
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
}

.steve-map-marker.ico-pin .steve-map-marker__pin::before {
	-webkit-mask-image: url('../images/icons/map-pin.svg');
	mask-image: url('../images/icons/map-pin.svg');
}

.steve-map-marker.ico-loc .steve-map-marker__pin::before {
	-webkit-mask-image: url('../images/icons/location-dot.svg');
	mask-image: url('../images/icons/location-dot.svg');
}

.steve-map-marker.ico-map .steve-map-marker__pin::before {
	-webkit-mask-image: url('../images/icons/map-marked.svg');
	mask-image: url('../images/icons/map-marked.svg');
}

.steve-map-marker.ico-route .steve-map-marker__pin::before {
	-webkit-mask-image: url('../images/icons/route.svg');
	mask-image: url('../images/icons/route.svg');
}

.steve-map-marker.ico-award .steve-map-marker__pin::before {
	-webkit-mask-image: url('../images/icons/award.svg');
	mask-image: url('../images/icons/award.svg');
}

.steve-map-marker.ico-cal .steve-map-marker__pin::before {
	-webkit-mask-image: url('../images/icons/calendar-day.svg');
	mask-image: url('../images/icons/calendar-day.svg');
}

.steve-map-marker.ico-video .steve-map-marker__pin::before {
	-webkit-mask-image: url('../images/icons/video.svg');
	mask-image: url('../images/icons/video.svg');
}

.steve-map-marker.ico-bus .steve-map-marker__pin::before {
	-webkit-mask-image: url('../images/icons/bus.svg');
	mask-image: url('../images/icons/bus.svg');
}