/* SeedSoft Partners Map — front-end styles.
 * All colours are CSS variables; Elementor widget → Style tab overrides them.
 * Defaults follow the site's Elementor global colours. */

.ssp {
	--ssp-bg: #f4f8f3;
	--ssp-land: #cfe3c8;
	--ssp-border: rgba(255, 255, 255, 0.85);
	--ssp-border-w: 0.6px;
	--ssp-dot: var(--e-global-color-secondary, #07642c);
	--ssp-dot-ring: #eaf4e3;
	--ssp-glow: rgba(133, 181, 28, 0.28);
	--ssp-dot-active: var(--e-global-color-accent, #85b51c);
	--ssp-dot-size: 9px;
	--ssp-min-gap: 17px;
	--ssp-hit: var(--ssp-min-gap); /* hit area = spacing, so neighbours never cover each other */
	--ssp-heading: var(--e-global-color-primary, #193f34);
	--ssp-text: var(--e-global-color-text, #031602);
	--ssp-muted: #5d6660;
	--ssp-accent: var(--e-global-color-accent, #85b51c);
	--ssp-card-bg: #ffffff;
	--ssp-card-w: 390px;
	--ssp-radius: 28px;
	--ssp-card-pad: 38px;
	--ssp-hint-bg: #eef2e3;
	--ssp-hint-text: #6b706b;
	--ssp-gap: 40px;
	--ssp-speed: 300ms;

	background: var(--ssp-bg);
	color: var(--ssp-text);
	font-family: inherit;
	padding: 40px 0;
	box-sizing: border-box;
	container-type: inline-size;
	container-name: ssp;
}

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

.ssp__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) clamp(270px, 34%, var(--ssp-card-w));
	gap: var(--ssp-gap);
	align-items: start;
}

/* ---------- Map ---------- */

.ssp__map {
	min-width: 0;
}

.ssp__canvas {
	position: relative;
	width: 100%;
	aspect-ratio: 1000 / 497;
}

.ssp__svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.ssp .ssp-land {
	fill: var(--ssp-land);
}

.ssp .ssp-borders {
	fill: none;
	stroke: var(--ssp-border);
	stroke-width: var(--ssp-border-w);
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.ssp__dots {
	position: absolute;
	inset: 0;
}

/* ---------- Dots (reset theme button styles first) ---------- */

.ssp .ssp-dot,
.ssp .ssp-dot:hover,
.ssp .ssp-dot:focus,
.ssp .ssp-dot:active {
	all: unset;
	position: absolute;
	width: var(--ssp-hit);
	height: var(--ssp-hit);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	display: grid;
	place-items: center;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transform: translate(-50%, -50%) translate(var(--dx, 0px), var(--dy, 0px));
	transition: none;
	z-index: 1;
}

/* Animate re-positioning only after the first layout (no jump on page load). */
.ssp.is-ready .ssp-dot {
	transition: transform var(--ssp-speed) ease;
}

.ssp .ssp-dot[hidden] {
	display: none;
}

.ssp .ssp-dot:hover,
.ssp .ssp-dot:focus-visible {
	z-index: 3;
}

.ssp .ssp-dot[aria-pressed="true"] {
	z-index: 4;
}

.ssp .ssp-dot:focus-visible {
	outline: 2px solid var(--ssp-heading);
	outline-offset: 1px;
}

.ssp-dot__core {
	position: relative;
	display: block;
	width: var(--ssp-dot-size);
	height: var(--ssp-dot-size);
	border-radius: 50%;
	background: var(--ssp-dot);
	box-shadow:
		0 0 0 2.5px var(--ssp-dot-ring),
		0 0 0 7px var(--ssp-glow),
		0 0 14px 5px var(--ssp-glow);
	transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
	pointer-events: none;
}

/* Active: different colour + bigger + thin outer ring (not colour-only). */
.ssp-dot__core::after {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 1.5px solid var(--ssp-dot-active);
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 220ms ease, transform 220ms ease;
}

.ssp .ssp-dot:hover .ssp-dot__core,
.ssp .ssp-dot:focus-visible .ssp-dot__core {
	transform: scale(1.25);
	box-shadow:
		0 0 0 2.5px var(--ssp-dot-ring),
		0 0 0 9px var(--ssp-glow),
		0 0 20px 8px var(--ssp-glow);
}

.ssp .ssp-dot[aria-pressed="true"] .ssp-dot__core {
	background: var(--ssp-dot-active);
	transform: scale(1.2);
}

.ssp .ssp-dot[aria-pressed="true"] .ssp-dot__core::after {
	opacity: 1;
	transform: scale(1);
}

/* Group of partners too close to separate at this screen size. */
.ssp .ssp-dot--group .ssp-dot__core {
	width: calc(var(--ssp-dot-size) + 12px);
	height: calc(var(--ssp-dot-size) + 12px);
	display: grid;
	place-items: center;
	color: #fff;
	font-family: inherit;
	font-size: 11px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0;
}

.ssp .ssp-dot--group:hover .ssp-dot__core,
.ssp .ssp-dot--group:focus-visible .ssp-dot__core {
	transform: scale(1.12);
}

/* ---------- Card ---------- */

.ssp__panel {
	min-width: 0;
}

.ssp-card {
	position: relative;
	background: var(--ssp-card-bg);
	border-radius: var(--ssp-radius);
	box-shadow: 0 24px 60px -18px rgba(25, 63, 52, 0.2), 0 2px 10px rgba(25, 63, 52, 0.05);
	overflow: hidden;
	transition: height var(--ssp-speed) ease, box-shadow 250ms ease, transform 250ms ease;
}

.ssp-view {
	display: block;
	padding: var(--ssp-card-pad);
	color: inherit;
	text-decoration: none;
	opacity: 1;
	transform: none;
	transition: opacity var(--ssp-speed) ease, transform var(--ssp-speed) ease;
}

.ssp-view.is-entering,
.ssp-view.is-leaving {
	opacity: 0;
	transform: translateY(6px);
}

.ssp-view.is-leaving {
	position: absolute;
	inset: 0 0 auto 0;
	transition-duration: 160ms;
}

/* Low-specificity reset of theme margins (0,1,0) so the rules below always win. */
.ssp :where(.ssp-view p, .ssp-view h1, .ssp-view h2, .ssp-view h3, .ssp-view h4, .ssp-view h5, .ssp-view ul, .ssp-view li) {
	margin: 0;
	padding: 0;
}

.ssp-hint {
	background: var(--ssp-hint-bg);
	border-radius: calc(var(--ssp-radius) * 0.78);
	padding: 30px 24px 28px;
	margin-bottom: 30px;
	text-align: center;
}

.ssp-hint__dot {
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto 18px;
	border-radius: 50%;
	background: var(--ssp-accent);
}

.ssp-hint__text {
	display: block;
	color: var(--ssp-hint-text);
	font-size: 19px;
	line-height: 1.3;
	font-weight: 500;
}

.ssp .ssp-eyebrow {
	display: block;
	margin: 0 0 14px;
	color: var(--ssp-accent);
	font-size: 14px;
	line-height: 1.3;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ssp .ssp-title {
	display: block;
	margin: 0 0 18px;
	color: var(--ssp-heading);
	font-size: clamp(26px, 2.3vw, 34px);
	line-height: 1.12;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.ssp .ssp-text {
	display: block;
	margin: 0;
	color: var(--ssp-text);
	font-size: 18px;
	line-height: 1.5;
}

/* Partner state */
.ssp-view--partner .ssp-title {
	font-size: clamp(21px, 1.7vw, 26px);
	margin-bottom: 14px;
}

.ssp-view--partner .ssp-text {
	color: var(--ssp-muted);
	font-size: 15px;
	line-height: 1.6;
}

.ssp-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 104px;
	margin: 0 0 26px;
}

.ssp-logo img {
	display: block;
	max-width: 78%;
	max-height: 96px;
	width: auto;
	height: auto;
	object-fit: contain;
}

a.ssp-view--partner {
	cursor: pointer;
}

.ssp-card:has(a.ssp-view--partner:hover) {
	box-shadow: 0 30px 70px -18px rgba(25, 63, 52, 0.26), 0 2px 10px rgba(25, 63, 52, 0.06);
}

a.ssp-view--partner:focus-visible {
	outline: 2px solid var(--ssp-heading);
	outline-offset: -6px;
	border-radius: var(--ssp-radius);
}

/* Group (cluster) state */
.ssp .ssp-view--group .ssp-text {
	color: var(--ssp-muted);
	font-size: 15px;
	line-height: 1.5;
	margin-bottom: 10px;
}

.ssp-view--group .ssp-title {
	font-size: clamp(21px, 1.7vw, 26px);
	margin-bottom: 10px;
}

.ssp-list {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: grid;
	gap: 4px;
}

.ssp .ssp-list__btn,
.ssp .ssp-list__btn:hover,
.ssp .ssp-list__btn:focus {
	all: unset;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 52px 1fr;
	align-items: center;
	gap: 14px;
	width: 100%;
	padding: 10px 12px;
	border-radius: 14px;
	cursor: pointer;
	transition: background-color 200ms ease;
	font-family: inherit;
}

.ssp .ssp-list__btn:hover,
.ssp .ssp-list__btn:focus-visible {
	background: var(--ssp-hint-bg);
}

.ssp .ssp-list__btn:focus-visible {
	outline: 2px solid var(--ssp-heading);
	outline-offset: 0;
}

.ssp-list__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 34px;
}

.ssp-list__logo img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.ssp-list__logo--empty::before {
	content: "";
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ssp-dot);
	box-shadow: 0 0 0 2.5px var(--ssp-dot-ring), 0 0 0 7px var(--ssp-glow);
}

.ssp-list__name {
	display: block;
	color: var(--ssp-heading);
	font-weight: 600;
	font-size: 15px;
	line-height: 1.3;
}

.ssp-list__country {
	display: block;
	color: var(--ssp-muted);
	font-size: 13px;
	line-height: 1.3;
	margin-top: 2px;
}

.ssp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------- Responsive (container queries: work in any Elementor column width) ---------- */

@container ssp (max-width: 1100px) {
	.ssp__inner {
		gap: min(var(--ssp-gap), 28px);
	}

	.ssp-card {
		--ssp-card-pad: 30px;
	}
}

@container ssp (max-width: 760px) {
	.ssp__inner {
		grid-template-columns: minmax(0, 1fr);
		gap: min(var(--ssp-gap), 20px);
	}

	.ssp__panel {
		width: 100%;
		max-width: 560px;
		margin: 0 auto;
	}

	.ssp-card {
		--ssp-card-pad: 26px;
	}

	.ssp .ssp-view--intro .ssp-title {
		font-size: 26px;
	}

	.ssp .ssp-view--intro .ssp-text {
		font-size: 17px;
	}

	.ssp-hint {
		padding: 22px 20px 20px;
		margin-bottom: 24px;
	}

	.ssp-hint__dot {
		width: 18px;
		height: 18px;
		margin-bottom: 12px;
	}

	.ssp-hint__text {
		font-size: 17px;
	}
}

/* Touch screens: bigger tap targets, more spacing between dots. */
@media (pointer: coarse) {
	.ssp {
		--ssp-min-gap: 30px;
		--ssp-dot-size: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ssp,
	.ssp * {
		--ssp-speed: 1ms;
		transition-duration: 1ms !important;
	}
}