/* Boinx Partner Map
   Font is deliberately inherited from the theme. No text-transform anywhere.

   EVERY component rule is scoped under `.bxpm` on purpose. Elementor kits emit
   element rules like `.elementor-kit-8 h3 { … }`, `.elementor-kit-8 button { … }`
   and `.elementor-kit-8 a { … }` at specificity 0,1,1, which beats a bare class
   at 0,1,0. Scoping puts these at 0,2,0 so they win, and keeps the plugin's
   styles from leaking outward. Do not "simplify" the prefixes away: the chips,
   card links, region headers and card names all silently take on kit styling
   without them. */

.bxpm {
	--bxpm-card: #1c231d;
	--bxpm-card-hover: #232c25;
	--bxpm-line: rgba(255, 255, 255, .09);
	--bxpm-green: #3ddc84;
	--bxpm-green-hover: #7ceaa9;
	--bxpm-btn: #26a55c;
	--bxpm-ink: #f2f6f2;
	--bxpm-mut: #9fb0a3;
	--bxpm-chip-ink: #cfe0d3;

	position: relative;
	box-sizing: border-box;
	max-width: var(--bxpm-max, 1240px);
	margin: 0 auto;
	padding: 72px 0 56px;
	background: transparent;
}

/* In Elementor the surrounding container already sets the page width. */
.bxpm--fluid {
	--bxpm-max: none;
}

/* With the built-in headline turned off, a heading widget above the map is
   carrying it. Drop the top padding so the subline reads as part of that
   heading block rather than floating between it and the map. */
.bxpm--no-heading {
	padding-top: 0;
}

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

.bxpm [hidden] {
	display: none !important;
}

/* The design's three blurred glow blobs are deliberately gone. They lived in an
   `overflow: hidden` box the size of the section, so on a dark page the blur was
   clipped to that box and read as a lighter rectangular panel sitting behind the
   map rather than as ambient glow. The Elementor section it sits in already
   provides a radial green wash, which is the effect the blobs were reaching for. */

/* ----------------------------------------------------------------- headline */

/* Beats `.elementor-kit-8 h2 { font-size: 56px }`. */
.bxpm .bxpm-hd {
	margin: 0;
	text-align: center;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -.01em;
	color: var(--bxpm-ink);
}

.bxpm .bxpm-hd span {
	display: block;
	color: var(--bxpm-green);
}

.bxpm .bxpm-sub {
	max-width: 620px;
	margin: 14px auto 0;
	text-align: center;
	font-size: 16px;
	line-height: 1.6;
	color: var(--bxpm-mut);
}

/* ---------------------------------------------------------------------- map */

/* Generous gap: the subline belongs to the heading block above it, so the map
   needs clear separation rather than sitting straight underneath the text. */
.bxpm .bxpm-mapwrap {
	margin-top: 64px;
}

.bxpm .bxpm-map {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.bxpm .bxpm-land {
	stroke: rgba(122, 220, 160, .34);
	stroke-width: .7;
}

.bxpm .bxpm-pin {
	cursor: pointer;
	transition: opacity .15s ease;
}

.bxpm .bxpm-pin:focus {
	outline: none;
}

.bxpm .bxpm-pin:focus-visible .bxpm-core {
	stroke: #fff;
	stroke-width: 2;
}

.bxpm .bxpm-core {
	fill: var(--bxpm-pin, #3ddc84);
	stroke: #0c110d;
	stroke-width: 1.5;
	transition: fill .15s ease;
}

.bxpm .bxpm-halo {
	opacity: .6;
}

.bxpm .bxpm-ring {
	fill: none;
	stroke: none;
}

.bxpm .bxpm-pin:hover .bxpm-core {
	fill: #fff;
}

.bxpm .bxpm-pin.is-dim {
	opacity: .15;
}

.bxpm .bxpm-pin.is-sel .bxpm-core {
	fill: #fff;
}

.bxpm .bxpm-pin.is-sel .bxpm-ring {
	stroke: var(--bxpm-green);
	stroke-width: 1.5;
	animation: bxpm-pulse 1.6s ease-out infinite;
}

/* r as a CSS geometry property: Chrome 31+, Safari 9+, Firefox 72+. Needs a unit
   here, unlike the presentation attribute of the same name. */
@keyframes bxpm-pulse {
	from {
		r: 4px;
		opacity: .9;
	}

	to {
		r: 16px;
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bxpm .bxpm-pin.is-sel .bxpm-ring {
		animation: none;
		opacity: .9;
	}
}

/* ------------------------------------------------------------------- legend */

.bxpm .bxpm-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 22px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	color: var(--bxpm-mut);
}

.bxpm .bxpm-legend li {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
}

.bxpm .bxpm-legend i {
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

/* -------------------------------------------------------------------- chips */

.bxpm .bxpm-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 9px;
	margin-top: 30px;
}

/* Beats `.elementor-kit-8 button`, which would otherwise paint these solid
   green at 8px radius with 15px/20px padding. */
.bxpm .bxpm-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border: 1px solid var(--bxpm-line);
	border-radius: 99px;
	background: var(--bxpm-card);
	color: var(--bxpm-chip-ink);
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.bxpm .bxpm-chip:hover,
.bxpm .bxpm-chip:focus {
	background: var(--bxpm-card);
	border-color: rgba(61, 220, 132, .55);
	color: var(--bxpm-chip-ink);
}

.bxpm .bxpm-chip span {
	font-size: 11px;
	font-weight: 600;
	color: var(--bxpm-mut);
}

.bxpm .bxpm-chip.is-active,
.bxpm .bxpm-chip.is-active:hover,
.bxpm .bxpm-chip.is-active:focus {
	background: var(--bxpm-btn);
	border-color: var(--bxpm-btn);
	color: #fff;
}

.bxpm .bxpm-chip.is-active span {
	color: rgba(255, 255, 255, .8);
}

/* ------------------------------------------------------------- region + list */

/* Beats `.elementor-kit-8 h3`, which sets the kit's secondary heading size. */
.bxpm .bxpm-regionhd {
	margin: 38px 0 16px;
	padding-bottom: 9px;
	border-bottom: 1px solid var(--bxpm-line);
	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .02em;
	color: var(--bxpm-green);
}

/* Column count is a widget setting, not a fixed choice. Two columns keeps the
   list narrow so the region headings sit near the cards instead of stranded far
   to the left, which is right while the partner list is short. Switch the widget
   to three once it gets long enough to justify the full width.

   auto-fit rather than a hard repeat(N, 1fr) so a region holding a single
   partner centres it instead of leaving it beside empty columns. The list
   max-width is what actually caps the column count. */
.bxpm .bxpm-list {
	max-width: var(--bxpm-list-max, 900px);
	margin: 0 auto;
}

/* Tracks start at the left edge so a region holding a single partner lines its
   card up under its own heading rule, rather than floating in the middle of an
   otherwise empty row. */
.bxpm .bxpm-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, var(--bxpm-col-max, 443px)));
	justify-content: start;
	gap: 14px;
}

.bxpm--cols-3 {
	--bxpm-list-max: none;
	--bxpm-col-max: 400px;
}

/* --------------------------------------------------------------------- card */

.bxpm .bxpm-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 19px 19px 17px;
	border: 1px solid var(--bxpm-line);
	border-radius: 14px;
	background: var(--bxpm-card);
	transition: border-color .15s ease, background .15s ease;
}

.bxpm .bxpm-card:hover {
	border-color: rgba(61, 220, 132, .5);
	background: var(--bxpm-card-hover);
}

/* Beats `.elementor-kit-8 h4`. */
.bxpm .bxpm-name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
}

.bxpm .bxpm-badge {
	padding: 2px 8px;
	border: 1px solid color-mix(in srgb, var(--bxpm-badge, #ff4d5e) 35%, transparent);
	border-radius: 99px;
	background: color-mix(in srgb, var(--bxpm-badge, #ff4d5e) 12%, transparent);
	/* 64% lands the spec'd #ff8d97 for the #ff4d5e Solution Partner badge, and
	   keeps any later type's badge text legible against its own 12% fill. */
	color: color-mix(in srgb, var(--bxpm-badge, #ff4d5e) 64%, #fff);
	font-size: 10.5px;
	font-weight: 700;
	line-height: 1.5;
}

.bxpm .bxpm-place {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.4;
	color: var(--bxpm-mut);
}

.bxpm .bxpm-links {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: auto;
	padding-top: 2px;
}

/* Beats `.elementor-kit-8 a`, which sets 17px/400 in the kit's primary colour. */
.bxpm .bxpm-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--bxpm-green);
	text-decoration: none;
}

.bxpm .bxpm-link:hover,
.bxpm .bxpm-link:focus {
	color: var(--bxpm-green-hover);
	text-decoration: none;
}

.bxpm .bxpm-link svg {
	width: 13px;
	height: 13px;
	flex: none;
}

/* --------------------------------------------------------------- responsive */

/* auto-fit already drops to two columns and then one as the container narrows,
   so only the gutter and headline size need a breakpoint. */
@media (max-width: 640px) {
	.bxpm {
		padding: 48px 20px 40px;
	}

	.bxpm .bxpm-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.bxpm .bxpm-hd {
		font-size: 30px;
	}
}