.fdc-dist-map {
	--fdc-dist-gold: #f2c752;
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	overflow: visible;
}

/*
 * On the homepage the map sits alone in a one-screen-tall section behind a fixed
 * header, and the row centres its content, so the figure has to be capped by the
 * available height and pushed down to clear the logo.
 */
@media (min-width: 1000px) {
	body.home .fdc-dist-map {
		max-width: calc((100vh - 300px) * 1.7771);
		margin-top: 200px;
	}
}

.fdc-dist-map__world {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

.fdc-dist-map__country {
	fill: #928a55;
	stroke: #140d01;
	stroke-width: 0.45;
	vector-effect: non-scaling-stroke;
}

.fdc-dist-map__country.is-active-market {
	fill: url("#fdc-map-gold");
	cursor: pointer;
	outline: none;
	transition: filter 160ms ease, opacity 160ms ease;
}

.fdc-dist-map__country.is-active-market:hover,
.fdc-dist-map__country.is-active-market:focus,
.fdc-dist-map__country.is-active-market.is-active {
	filter: brightness(1.16) drop-shadow(0 0 5px rgba(242, 199, 82, 0.32));
}

.fdc-dist-map__tooltip {
	position: absolute;
	z-index: 4;
	top: 0;
	left: 0;
	padding: 0.45rem 0.75rem;
	border: 1px solid rgba(242, 199, 82, 0.65);
	border-radius: 2px;
	background: rgba(14, 10, 2, 0.92);
	color: var(--fdc-dist-gold);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	line-height: 1.2;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	transform: translate(-50%, calc(-100% - 12px));
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}

.fdc-dist-map__tooltip::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -6px;
	width: 10px;
	height: 10px;
	border-right: 1px solid rgba(242, 199, 82, 0.65);
	border-bottom: 1px solid rgba(242, 199, 82, 0.65);
	background: rgba(14, 10, 2, 0.92);
	transform: translateX(-50%) rotate(45deg);
}

@media (max-width: 782px) {
	.fdc-dist-map__tooltip {
		font-size: 0.75rem;
		letter-spacing: 0.06em;
	}
}