/**
 * Anchored4Life — US Map for Elementor
 *
 * Everything themable is a custom property set by the widget's style controls,
 * so this file never needs per-instance CSS.
 *
 * Note on units: inside an SVG, a CSS `px` in a transform or font-size is one
 * *user unit*, so anything expressed that way scales with the map. Strokes
 * deliberately opt out via `vector-effect` — hairlines should stay hairlines at
 * every size, not thicken on a wide screen.
 */

.a4l-usmap-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
}

.a4l-usmap {
	--a4l-fill: #e4e6ea;
	--a4l-stroke: #ffffff;
	--a4l-stroke-w: 1;
	--a4l-fill-on: #1f3864;
	--a4l-stroke-on: #ffffff;
	--a4l-fill-hover: #2e5391;
	--a4l-label: #7a8394;
	--a4l-label-on: #ffffff;
	--a4l-label-size: 15;
	--a4l-leader: #1f3864;
	--a4l-leader-w: 1.5;

	--a4l-dur: 1000ms;
	--a4l-stagger: 22ms;
	--a4l-count: 51;

	width: 100%;
	line-height: 0;
}

.a4l-usmap__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* ------------------------------------------------------------------ states */

.a4l-usmap__state {
	fill: var(--a4l-fill);
	stroke: var(--a4l-stroke);
	stroke-width: var(--a4l-stroke-w);
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
	transform-box: fill-box;
	transform-origin: center;
}

.a4l-usmap__state.is-on {
	fill: var(--a4l-fill-on);
	stroke: var(--a4l-stroke-on);
}

/* ------------------------------------------------------------------ labels */

/**
 * `--a4l-fit` is the largest size this particular label can be without
 * outgrowing the state under it, computed per state from its inscribed circle
 * and bounding box. It only ever caps the chosen size, never raises it — which
 * is what keeps "Massachusetts" legible in full-name mode.
 */
.a4l-usmap__label {
	font-size: calc(min(var(--a4l-label-size), var(--a4l-fit, 999)) * 1px);
	font-family: inherit;
	font-weight: 700;
	fill: var(--a4l-label);
	paint-order: stroke;
	pointer-events: none;
	user-select: none;
}

.a4l-usmap__label.is-on {
	fill: var(--a4l-label-on);
}

/* A callout label sits in the margin, so it takes the leader's colour rather
   than the fill colour of the state it points at. */
.a4l-usmap__label.is-callout {
	fill: var(--a4l-label);
}

.a4l-usmap__label.is-callout.is-on {
	fill: var(--a4l-leader);
}

/**
 * Leaders deliberately do *not* use `vector-effect: non-scaling-stroke` the way
 * the state borders do. That property moves dash calculation into screen space,
 * which silently breaks the `pathLength="1"` normalisation the draw-on
 * animation relies on and leaves every line clipped to a stub. Their width is
 * therefore in map units and scales with the map, which is what you want for a
 * line whose whole job is to span a distance on that map.
 */
.a4l-usmap__leader {
	fill: none;
	stroke: var(--a4l-label);
	stroke-width: var(--a4l-leader-w);
	stroke-linecap: round;
}

.a4l-usmap__leader.is-on {
	stroke: var(--a4l-leader);
}

/* --------------------------------------------------------------- animation */

.a4l-usmap--animated {
	--a4l-delay: calc(var(--a4l-i, 0) * var(--a4l-stagger));
	/* Labels and leaders wait until most of the states have landed. */
	--a4l-tail: calc(var(--a4l-dur) * 0.45 + var(--a4l-count) * var(--a4l-stagger));
}

.a4l-usmap--animated .a4l-usmap__state {
	opacity: 0;
	transition:
		opacity calc(var(--a4l-dur) * 0.5) ease-out var(--a4l-delay),
		transform var(--a4l-dur) cubic-bezier(0.22, 0.72, 0.24, 1) var(--a4l-delay),
		fill 200ms ease;
}

.a4l-usmap--assemble .a4l-usmap__state {
	transform: translate(calc(var(--a4l-dx, 0) * 1px), calc(var(--a4l-dy, 0) * 1px)) scale(0.88);
}

.a4l-usmap--settle .a4l-usmap__state {
	transform: translateY(28px) scale(0.9);
}

.a4l-usmap--fade .a4l-usmap__state {
	transform: none;
}

.a4l-usmap--animated.is-in .a4l-usmap__state {
	opacity: 1;
	transform: none;
}

.a4l-usmap--animated .a4l-usmap__labels,
.a4l-usmap--animated .a4l-usmap__leaders {
	opacity: 0;
	transition: opacity calc(var(--a4l-dur) * 0.5) ease-out var(--a4l-tail);
}

.a4l-usmap--animated.is-in .a4l-usmap__labels,
.a4l-usmap--animated.is-in .a4l-usmap__leaders {
	opacity: 1;
}

/* Leader lines draw themselves toward the state. `pathLength="1"` on the path
   normalises every line's length so one dash value works for all of them. */
.a4l-usmap--animated .a4l-usmap__leader {
	stroke-dasharray: 1;
	stroke-dashoffset: 1;
	transition: stroke-dashoffset calc(var(--a4l-dur) * 0.6) ease-out
		calc(var(--a4l-tail) + 60ms);
}

.a4l-usmap--animated.is-in .a4l-usmap__leader {
	stroke-dashoffset: 0;
}

/* Applied once the entrance has finished: drops the staggered delays so hover
   and toggle feedback is immediate rather than arriving a second late. */
.a4l-usmap.is-done .a4l-usmap__state {
	transition:
		fill 180ms ease,
		stroke 180ms ease,
		transform 180ms ease;
	transition-delay: 0s;
}

.a4l-usmap.is-resetting,
.a4l-usmap.is-resetting * {
	transition: none !important;
}

/* ------------------------------------------------------- hover and toggling */

.a4l-usmap:not(.a4l-usmap--animated) .a4l-usmap__state {
	transition:
		fill 180ms ease,
		stroke 180ms ease,
		transform 180ms ease;
}

.a4l-usmap__state:hover {
	fill: var(--a4l-fill-hover);
}

.a4l-usmap--lift.is-done .a4l-usmap__state:hover,
.a4l-usmap--lift:not(.a4l-usmap--animated) .a4l-usmap__state:hover {
	transform: translateY(-3px) scale(1.015);
}

.a4l-usmap--interactive .a4l-usmap__state {
	cursor: pointer;
}

.a4l-usmap--interactive .a4l-usmap__state:focus-visible {
	outline: none;
	stroke: currentColor;
	stroke-width: calc(var(--a4l-stroke-w) + 2);
	filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.45));
}

/* ------------------------------------------------------------ reduced motion */

@media (prefers-reduced-motion: reduce) {
	.a4l-usmap--animated .a4l-usmap__state,
	.a4l-usmap--animated .a4l-usmap__labels,
	.a4l-usmap--animated .a4l-usmap__leaders,
	.a4l-usmap--animated .a4l-usmap__leader {
		opacity: 1;
		transform: none;
		stroke-dashoffset: 0;
		transition: none;
	}

	.a4l-usmap--lift .a4l-usmap__state:hover {
		transform: none;
	}
}