/*
 * SVG Hotspot Maps - front end
 *
 * No JavaScript is involved. Hover and keyboard focus are handled here, links
 * are native SVG <a> elements.
 *
 * The effect declarations use !important deliberately. The artwork carries its
 * own stylesheet (an Illustrator export is a block of `.cls-N { fill: … }`
 * rules) and sometimes inline style attributes, both of which would otherwise
 * outrank anything set here. These properties are only ever applied inside a
 * hotspot link, which is markup this plugin generates, so there is nothing
 * legitimate for them to override.
 */

.svgmap {
	position: relative;
	display: block;
	margin: 0 auto;
	max-width: var(--svgmap-maxw, 100%);
}

.svgmap > svg {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--svgmap-ratio, auto);
	/*
	 * Explicit rather than relying on the initial value. Nothing may paint or
	 * receive pointer events outside the viewBox: a hotspot with runaway
	 * geometry would otherwise cover the page and swallow every click. The
	 * cost is that a hover stroke on a shape flush with the edge is clipped,
	 * which is a cosmetic trade worth making.
	 */
	overflow: hidden;
}

/* ------------------------------------------------------------------ */
/* Hotspots                                                            */
/* ------------------------------------------------------------------ */

.svgmap .svgmap__hs {
	cursor: pointer;
}

/*
 * Drawn hotspots are invisible at rest but must still receive pointer events,
 * which a fill of `none` would not.
 */
.svgmap .svgmap__hs--drawn > rect,
.svgmap .svgmap__hs--drawn > ellipse,
.svgmap .svgmap__hs--drawn > polygon {
	fill: transparent;
	stroke: none;
	pointer-events: all;
}

.svgmap .svgmap__hs,
.svgmap .svgmap__hs * {
	transition:
		fill 0.18s ease,
		stroke 0.18s ease,
		stroke-width 0.18s ease,
		opacity 0.18s ease,
		filter 0.18s ease;
}

/* ------------------------------------------------------------------ */
/* Resting state                                                       */
/* ------------------------------------------------------------------ */

.svgmap .svgmap--rf,
.svgmap .svgmap--rf * {
	fill: var(--svgmap-rf) !important;
	fill-opacity: var(--svgmap-rfo, 1) !important;
}

.svgmap .svgmap--rk,
.svgmap .svgmap--rk * {
	stroke: var(--svgmap-rk) !important;
	stroke-width: var(--svgmap-rkw, 1) !important;
}

.svgmap .svgmap--ro {
	opacity: var(--svgmap-ro) !important;
}

/* ------------------------------------------------------------------ */
/* Hover and keyboard focus                                            */
/* ------------------------------------------------------------------ */

.svgmap .svgmap--hf:hover,
.svgmap .svgmap--hf:hover *,
.svgmap .svgmap--hf:focus-visible,
.svgmap .svgmap--hf:focus-visible * {
	fill: var(--svgmap-hf) !important;
	fill-opacity: var(--svgmap-hfo, 1) !important;
}

.svgmap .svgmap--hk:hover,
.svgmap .svgmap--hk:hover *,
.svgmap .svgmap--hk:focus-visible,
.svgmap .svgmap--hk:focus-visible * {
	stroke: var(--svgmap-hk) !important;
	stroke-width: var(--svgmap-hkw, 1) !important;
	/* Keep the stroke outside the fill so it does not eat into the shape. */
	paint-order: stroke fill;
}

.svgmap .svgmap--ho:hover,
.svgmap .svgmap--ho:focus-visible {
	opacity: var(--svgmap-ho) !important;
}

.svgmap .svgmap--hb:hover,
.svgmap .svgmap--hb:focus-visible {
	filter: brightness(var(--svgmap-hb));
}

/* ------------------------------------------------------------------ */
/* Focus ring                                                          */
/* ------------------------------------------------------------------ */

/*
 * Keyboard users need to see where they are even on a hotspot with no styling
 * of its own. outline works on SVG elements in current browsers; the dashed
 * stroke is a fallback for those where it does not.
 */
.svgmap .svgmap__hs:focus {
	outline: none;
}

.svgmap .svgmap__hs:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.svgmap .svgmap__hs--drawn:focus-visible > rect,
.svgmap .svgmap__hs--drawn:focus-visible > ellipse,
.svgmap .svgmap__hs--drawn:focus-visible > polygon {
	stroke: currentColor;
	stroke-width: 2;
	stroke-dasharray: 4 3;
}

/* ------------------------------------------------------------------ */
/* Preferences and print                                               */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.svgmap .svgmap__hs,
	.svgmap .svgmap__hs * {
		transition: none;
	}
}

@media print {
	/* Hover states are meaningless on paper; print the artwork as designed. */
	.svgmap .svgmap__hs,
	.svgmap .svgmap__hs * {
		transition: none;
	}
}

/* Editor-only diagnostic, never shown to visitors. */
.svgmap-notice {
	padding: 0.75em 1em;
	border-left: 4px solid #d63638;
	background: #fcf0f1;
	color: #1d2327;
	font-size: 0.9em;
}