/*
 * Nexus Service Area — the /quote/ "Our {town} service area" card (build
 * spec block 8; quote-page-mockup-desktop/mobile-2026-10-01). Soft green
 * card: pin chip + title, lead, two columns of checked towns, "and more",
 * and the brand's service area (inline SVG from the theme's shared
 * nexus_theme_service_area_map_svg(), the program pages' "Where we serve" map)
 * on the right. Phones: one column, the map full width under the list.
 */

.nexus-service-area {
	--nsa-ink: #0f3528;
	--nsa-green: #1e5340;
	--nsa-check: #1f8f4c;
	--nsa-orange: #e68640;
	--nsa-text: #2b2a26;
	--nsa-muted: #6b6558;
	--nsa-panel: #e8f0ea;
	--nsa-rule: #c3dbcb;
	--nsa-paper: #fcfaf3;
	--nsa-display: var(--wp--preset--font-family--nexus-display, "Poppins", system-ui, sans-serif);
	--nsa-body: var(--wp--preset--font-family--nexus-body, "Mulish", system-ui, sans-serif);

	box-sizing: border-box;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 8px 20px 64px;
	background: var(--nsa-paper);
	color: var(--nsa-ink);
}

.nexus-service-area *,
.nexus-service-area *::before,
.nexus-service-area *::after {
	box-sizing: border-box;
}

.nexus-service-area__inner {
	max-width: 760px;
	margin: 0 auto;
}

.nexus-service-area__card {
	padding: 30px 30px 26px;
	background: var(--nsa-panel);
	border: 1.5px solid var(--nsa-rule);
	border-radius: 18px;
}

.nexus-service-area__title {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
	font-family: var(--nsa-display);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--nsa-ink);
}

.nexus-service-area__ico {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 9px;
	background: var(--nsa-check);
	color: #fff;
}

.nexus-service-area__ico svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: currentColor;
}

.nexus-service-area__ico svg[fill="currentColor"],
.nexus-service-area__ico svg path[fill="currentColor"] {
	fill: currentColor;
	stroke: none;
}

.nexus-service-area__body {
	display: flex;
	gap: 28px;
	align-items: flex-start;
	margin-top: 16px;
}

.nexus-service-area__list {
	flex: 1 1 auto;
	min-width: 0;
}

.nexus-service-area__lead {
	margin: 0;
	font-family: var(--nsa-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--nsa-muted);
}

.nexus-service-area__towns {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, max-content));
	gap: 2px 26px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.nexus-service-area__towns li {
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 44px;
	margin: 0;
	font-family: var(--nsa-body);
	font-size: 17px;
	color: var(--nsa-text);
}

.nexus-service-area__towns svg {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--nsa-check);
}

.nexus-service-area__towns a {
	color: inherit;
	text-decoration: none;
}

.nexus-service-area__towns a:hover,
.nexus-service-area__towns a:focus-visible {
	text-decoration: underline;
}

.nexus-service-area__more {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 2px;
	font-family: var(--nsa-body);
	font-size: 17px;
	font-weight: 700;
	color: var(--nsa-green);
	text-decoration: none;
}

.nexus-service-area__more:hover,
.nexus-service-area__more:focus-visible {
	text-decoration: underline;
}

.nexus-service-area__map {
	flex: none;
	width: 280px;
	margin-top: 4px;
}

/* The theme's shared service-area map (nexus_theme_service_area_map_svg,
   class nexus-area-map); its colours are set in the SVG itself. */
.nexus-service-area .nexus-area-map {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

@media (max-width: 899px) {
	.nexus-service-area {
		padding: 4px 16px 48px;
	}

	.nexus-service-area__card {
		padding: 22px 18px 20px;
	}

	.nexus-service-area__title {
		gap: 12px;
		font-size: 20px;
	}

	.nexus-service-area__ico {
		width: 38px;
		height: 38px;
	}

	.nexus-service-area__body {
		flex-direction: column;
		gap: 12px;
	}

	.nexus-service-area__towns {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 14px;
	}

	.nexus-service-area__towns li {
		font-size: 16px;
	}

	.nexus-service-area__map {
		width: 100%;
		margin-top: 0;
	}
}