/**
 * InOut Labs State Map
 * Front-end styles. All colours come from custom properties set inline by the
 * shortcode, so they can be overridden per instance or globally in your theme.
 */

.iolsm-wrap {
	--iolsm-fill: #2373be;
	--iolsm-hover: #ffffff;
	--iolsm-stroke: #ffffff;
	--iolsm-bg: #e6e6e6;
	--iolsm-label: #ffffff;
	--iolsm-label-hover: #2373be;
	--iolsm-title: #626262;

	margin: 0 auto 1.5em;
	width: 100%;
}

.iolsm-title {
	color: var(--iolsm-title);
	font-weight: 400;
	margin: 0 0 0.75em;
	text-align: right;
}

.iolsm-map {
	background: var(--iolsm-bg);
	line-height: 0;
}

.iolsm-svg {
	display: block;
	height: auto;
	width: 100%;
}

/* --- States ------------------------------------------------------------- */

.iolsm-svg .iolsm-state {
	cursor: pointer;
	outline: none;
	text-decoration: none;
}

.iolsm-svg .iolsm-state path,
.iolsm-svg .iolsm-state rect {
	fill: var(--iolsm-fill);
	stroke: var(--iolsm-stroke);
	stroke-width: 1;
	stroke-linejoin: round;
	transition: fill 0.15s ease-in-out;
}

.iolsm-svg .iolsm-label {
	fill: var(--iolsm-label);
	dominant-baseline: central;
	text-anchor: middle;
	font-family: inherit;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.02em;
	pointer-events: none;
	transition: fill 0.15s ease-in-out;
	-webkit-user-select: none;
	user-select: none;
}

/* A state set to "No link" looks identical, but is not a click target. */
.iolsm-svg .iolsm-state--nolink {
	cursor: default;
}

/* Hover / keyboard focus: state turns white, its label takes the fill colour. */
.iolsm-svg .iolsm-state:hover path,
.iolsm-svg .iolsm-state:hover rect,
.iolsm-svg .iolsm-state:focus path,
.iolsm-svg .iolsm-state:focus rect,
.iolsm-svg .iolsm-state:focus-visible path,
.iolsm-svg .iolsm-state:focus-visible rect,
.iolsm-svg .iolsm-state.is-active path,
.iolsm-svg .iolsm-state.is-active rect {
	fill: var(--iolsm-hover);
	stroke: var(--iolsm-fill);
}

.iolsm-svg .iolsm-state:hover .iolsm-label,
.iolsm-svg .iolsm-state:focus .iolsm-label,
.iolsm-svg .iolsm-state:focus-visible .iolsm-label,
.iolsm-svg .iolsm-state.is-active .iolsm-label {
	fill: var(--iolsm-label-hover);
}

/* Keyboard users get an extra ring so focus is unmistakable. */
.iolsm-svg .iolsm-state:focus-visible path,
.iolsm-svg .iolsm-state:focus-visible rect {
	stroke-width: 2.5;
}

@media (prefers-reduced-motion: reduce) {
	.iolsm-svg .iolsm-state path,
	.iolsm-svg .iolsm-state rect,
	.iolsm-svg .iolsm-label {
		transition: none;
	}
}