/**
 * WIND FLOW – Service Areas Map (front end)
 */

.wfsm {
	--wfsm-ventura: #b3daff;
	--wfsm-la: #ffffff;
	--wfsm-stroke: #0a144c;
	--wfsm-pin-ventura: #0a144c;
	--wfsm-pin-la: #4da8ff;
	--wfsm-label: #0a144c;
	--wfsm-accent: #4da8ff;
	--wfsm-popup-scale: 1;
	--wfsm-popup-bg: #b6fd86;
	--wfsm-popup-icon: #e8f3fe;
	--wfsm-popup-title: #0a144c;
	--wfsm-popup-sub: #3f4563;
	--wfsm-pin-size: 16.4;
	--wfsm-pin-min: 13px;
	/* none = fill whatever it is dropped into. */
	--wfsm-max: none;
	--wfsm-font: inherit;
	--wfsm-radius: 16px;
	--wfsm-artboard-w: 886;

	width: 100%;
	max-width: var(--wfsm-max);
	/* No vertical margin of our own - the container owns the spacing. */
	margin: 0 auto;
	padding: 0;
	font-family: var(--wfsm-font);
	color: var(--wfsm-stroke);
}

.wfsm *,
.wfsm *::before,
.wfsm *::after {
	box-sizing: border-box;
}

/* ---------- Heading ---------- */

.wfsm__head {
	text-align: center;
	margin-bottom: 1.5rem;
}

.wfsm__title {
	margin: 0 0 0.4em;
	color: var(--wfsm-stroke);
	font-size: clamp(1.5rem, 3.2vw, 2.25rem);
	line-height: 1.15;
}

.wfsm__sub {
	margin: 0;
	opacity: 0.72;
	font-size: clamp(0.95rem, 1.6vw, 1.075rem);
	line-height: 1.5;
}

/* ---------- Stage ---------- */

.wfsm__stage {
	position: relative;
	width: 100%;
	line-height: 0;
}

.wfsm__svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
	filter: drop-shadow(0 8px 16px rgba(10, 20, 76, 0.2));
}

/* The white "sticker" ring that sits behind the outline. */
.wfsm__halo {
	fill: #fff;
	stroke: #fff;
	stroke-width: 26;
	stroke-linejoin: round;
}

.wfsm__region {
	transition: fill 0.25s ease;
}

/* The navy line art, sitting on top of both fills. */
.wfsm__ink {
	fill: var(--wfsm-stroke);
	pointer-events: none;
}

.wfsm__region--la {
	fill: var(--wfsm-la);
}

.wfsm__region--ventura {
	fill: var(--wfsm-ventura);
}

.wfsm__region-label {
	fill: var(--wfsm-label);
	font-family: var(--wfsm-font);
	font-weight: 700;
	letter-spacing: 0.01em;
	paint-order: stroke;
	pointer-events: none;
	user-select: none;
}

/* ---------- Pins ---------- */

.wfsm__pin {
	position: absolute;
	z-index: 3;
	/* The inline style sets the variables; an Elementor selector can override
	   left/top directly and win on specificity, which is what makes dragging a
	   position slider update the editor live. */
	left: var(--wfsm-x, 50%);
	top: var(--wfsm-y, 50%);
	width: max(var(--wfsm-pin-min), calc(var(--wfsm-pin-size) / var(--wfsm-artboard-w) * 100%));
	aspect-ratio: 17.5 / 25;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	transform: translate(-50%, -100%);
	transform-origin: 50% 100%;
	cursor: pointer;
	line-height: 0;
	transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.18s ease;
}

.wfsm__pin::before {
	/* Slightly larger tap target than the glyph, scaled to the pin so that
	   neighbouring pins in a dense cluster never swallow each other's clicks. */
	content: "";
	position: absolute;
	inset: -30% -30% -15%;
}

.wfsm__pin-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.wfsm__pin-svg path {
	fill: var(--wfsm-pin-ventura);
	transition: fill 0.18s ease;
}

.wfsm__pin--la .wfsm__pin-svg path {
	fill: var(--wfsm-pin-la);
}

.wfsm__pin-label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.wfsm__pin:hover,
.wfsm__pin:focus-visible {
	z-index: 6;
	transform: translate(-50%, -100%) scale(1.28);
	filter: drop-shadow(0 4px 8px rgba(10, 20, 76, 0.35));
	outline: none;
}

.wfsm__pin:focus-visible .wfsm__pin-svg path {
	stroke: var(--wfsm-accent);
	stroke-width: 2.5;
	paint-order: stroke;
}

.wfsm__pin.is-active,
.wfsm__pin.is-active:hover,
.wfsm__pin.is-active:focus-visible {
	z-index: 5;
	/* Deliberately no scale. The card sits over the top of the pin, so growing
	   it here would push its widest part out below the card and read as a pin
	   with a flat chopped-off top. */
	transform: translate(-50%, -100%);
	filter: none;
}

/* Idle attention ping on the first paint only. */
@media (prefers-reduced-motion: no-preference) {
	.wfsm__pin::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 33%;
		width: 90%;
		aspect-ratio: 1;
		border-radius: 50%;
		background: currentColor;
		color: var(--wfsm-pin-la);
		opacity: 0;
		transform: translate(-50%, -50%);
		pointer-events: none;
	}

	.wfsm__pin.is-pinging::after {
		animation: wfsm-ping 1.6s ease-out;
	}
}

@keyframes wfsm-ping {
	0% {
		opacity: 0.45;
		transform: translate(-50%, -50%) scale(0.4);
	}

	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(2.6);
	}
}

/* Stage one: the pins are markers, not controls. No pointer, no hover, no ping. */
.wfsm--static .wfsm__pin {
	cursor: default;
	pointer-events: none;
}

.wfsm--static .wfsm__pin::before,
.wfsm--static .wfsm__pin::after {
	display: none;
}

.wfsm--static .wfsm__pin:hover {
	transform: translate(-50%, -100%);
	filter: none;
}


/* ---------- Theme armour ----------
   The pins and the mobile chips are <button> elements. Themes routinely style
   every button on the page — often with !important — which paints a coloured
   box behind the pin the moment you hover it. Reset hard, then restate our own
   look at the same weight so nothing outside can reach in. */

.wfsm .wfsm__pin,
.wfsm .wfsm__pin:hover,
.wfsm .wfsm__pin:focus,
.wfsm .wfsm__pin:active,
.wfsm .wfsm__pin:focus-visible,
.wfsm .wfsm__pin:focus-within {
	-webkit-appearance: none !important;
	appearance: none !important;
	background: transparent none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: none !important;
	max-height: none !important;
	outline: none !important;
	text-decoration: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	line-height: 0 !important;
	font-size: 0 !important;
}

/* Focus stays visible through the pin glyph itself, not a browser outline. */
.wfsm .wfsm__pin:focus-visible .wfsm__pin-svg path {
	stroke: var(--wfsm-accent);
	stroke-width: 2.5;
	paint-order: stroke;
}

.wfsm .wfsm__chip,
.wfsm .wfsm__chip:hover,
.wfsm .wfsm__chip:focus,
.wfsm .wfsm__chip:active,
.wfsm .wfsm__chip:focus-visible {
	-webkit-appearance: none !important;
	appearance: none !important;
	background-image: none !important;
	box-shadow: none !important;
	min-width: 0 !important;
	min-height: 0 !important;
	text-decoration: none !important;
	text-transform: none !important;
	border-radius: 999px !important;
	padding: 7px 13px !important;
	border: 1px solid rgba(10, 20, 76, 0.16) !important;
	background-color: #fff !important;
	color: var(--wfsm-stroke) !important;
}

.wfsm .wfsm__chip.is-active,
.wfsm .wfsm__chip:hover {
	background-color: var(--wfsm-stroke) !important;
	border-color: var(--wfsm-stroke) !important;
	color: #fff !important;
}

.wfsm a.wfsm__card,
.wfsm a.wfsm__card:hover,
.wfsm a.wfsm__card:focus,
.wfsm a.wfsm__card:active,
.wfsm a.wfsm__card:visited {
	background-color: var(--wfsm-popup-bg) !important;
	background-image: none !important;
	border: 0 !important;
	color: inherit !important;
	text-decoration: none !important;
}

/* Optional deliberate hover colour. Unset means the pin keeps its county
   colour, which is what the design does. */
.wfsm .wfsm__pin:hover .wfsm__pin-svg path,
.wfsm .wfsm__pin.is-active .wfsm__pin-svg path {
	fill: var(--wfsm-pin-hover, var(--wfsm-pin-ventura));
}

.wfsm .wfsm__pin--la:hover .wfsm__pin-svg path,
.wfsm .wfsm__pin--la.is-active .wfsm__pin-svg path {
	fill: var(--wfsm-pin-hover, var(--wfsm-pin-la));
}

/* ---------- Popup card ---------- */
/* Sizes below are measured off the design: 55px icon, 16px type,
   18px radius, 10px padding. */

.wfsm__card {
	position: absolute;
	z-index: 10;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	gap: calc(21px * var(--wfsm-popup-scale));
	padding: calc(10px * var(--wfsm-popup-scale)) calc(24px * var(--wfsm-popup-scale))
		calc(10px * var(--wfsm-popup-scale)) calc(10px * var(--wfsm-popup-scale));
	border-radius: calc(18px * var(--wfsm-popup-scale));
	background: var(--wfsm-popup-bg);
	/* The ring is the same pale blue as the icon circle, 1.5px in the design. */
	box-shadow:
		0 0 0 calc(1.5px * var(--wfsm-popup-scale)) var(--wfsm-popup-icon),
		0 10px 24px -6px rgba(10, 20, 76, 0.28),
		0 2px 6px rgba(10, 20, 76, 0.08);
	text-decoration: none;
	opacity: 0;
	transform: translateY(5px) scale(0.97);
	transition: opacity 0.16s ease, transform 0.18s cubic-bezier(0.34, 1.4, 0.64, 1);
	pointer-events: none;
}

.wfsm__card[hidden] {
	display: none;
}

.wfsm__card.is-open {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.wfsm .wfsm__card-icon {
	/* Fixed on every axis. The card's height is derived from this circle, so a
	   theme rule like `span { height: auto }` would otherwise collapse both. */
	flex: 0 0 auto !important;
	display: grid !important;
	place-items: center !important;
	box-sizing: border-box !important;
	width: calc(55px * var(--wfsm-popup-scale)) !important;
	height: calc(55px * var(--wfsm-popup-scale)) !important;
	min-width: calc(55px * var(--wfsm-popup-scale)) !important;
	min-height: calc(55px * var(--wfsm-popup-scale)) !important;
	max-width: calc(55px * var(--wfsm-popup-scale)) !important;
	max-height: calc(55px * var(--wfsm-popup-scale)) !important;
	aspect-ratio: 1 !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--wfsm-popup-icon) !important;
	align-self: center !important;
}

.wfsm .wfsm__card-icon svg {
	display: block !important;
	width: calc(18px * var(--wfsm-popup-scale)) !important;
	height: calc(26px * var(--wfsm-popup-scale)) !important;
	max-width: none !important;
	max-height: none !important;
	fill: var(--wfsm-popup-title);
}

.wfsm .wfsm__card-text {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	min-width: calc(150px * var(--wfsm-popup-scale));
	margin: 0 !important;
	padding: 0 !important;
}

.wfsm .wfsm__card-title,
.wfsm .wfsm__card-sub {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	font-size: calc(16px * var(--wfsm-popup-scale)) !important;
	line-height: calc(25px * var(--wfsm-popup-scale)) !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	white-space: nowrap !important;
}

.wfsm__card-title,
.wfsm__card-sub {
	font-size: calc(16px * var(--wfsm-popup-scale));
	line-height: calc(25px * var(--wfsm-popup-scale));
	white-space: nowrap;
}

.wfsm__card-title {
	color: var(--wfsm-popup-title);
	font-weight: 500;
}

.wfsm__card-sub {
	color: var(--wfsm-popup-sub);
	font-weight: 400;
}

a.wfsm__card:hover {
	transform: translateY(-1px);
	box-shadow:
		0 0 0 calc(1.5px * var(--wfsm-popup-scale)) var(--wfsm-popup-icon),
		0 14px 28px -6px rgba(10, 20, 76, 0.32);
}

.wfsm__scrim {
	display: none;
}

/* ---------- Quick list (small screens only) ---------- */

.wfsm__quick {
	display: none;
	list-style: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 7px;
	margin: 18px 0 0;
	padding: 0;
}

.wfsm__chip {
	padding: 7px 13px;
	border: 1px solid rgba(10, 20, 76, 0.16);
	border-radius: 999px;
	background: #fff;
	color: var(--wfsm-stroke);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.wfsm__chip::before {
	content: "";
	display: inline-block;
	width: 7px;
	height: 7px;
	margin-inline-end: 7px;
	border-radius: 50%;
	background: var(--wfsm-pin-ventura);
	vertical-align: middle;
}

.wfsm__chip--la::before {
	background: var(--wfsm-pin-la);
}

.wfsm__chip.is-active,
.wfsm__chip:hover {
	border-color: var(--wfsm-stroke);
	background: var(--wfsm-stroke);
	color: #fff;
}

/* ---------- Mobile: the card becomes a sheet ---------- */

@media (max-width: 640px) {
	.wfsm {
		/* Keep the pins near their designed proportions on small screens;
		   the list below the map is the reliable way to open a location. */
		--wfsm-pin-min: 9px;
	}

	.wfsm__pin::before {
		inset: -15%;
	}

	.wfsm__quick {
		display: flex;
	}

	.wfsm__card {
		--wfsm-popup-scale: 0.75;
	}

	.wfsm__card-text {
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wfsm__pin,
	.wfsm__card {
		transition-duration: 0.01ms;
	}

	.wfsm__pin.is-pinging::after {
		animation: none;
	}
}