/**
 * Members world map styling.
 * Adjust the variables below to match your brand — everything else
 * should just work.
 */

.world-map {
	--map-land: #BDB3AD;
	--map-border: #dfdad7;
	--map-pin: #b08d57;
	--map-pin-active: #1a1a1a;
	--map-focus: #1a73e8;

	position: relative;
	width: 100%;
	margin-inline: auto;
}

.world-map__svg {
	display: block;
	width: 100%;
	height: auto;
}

.world-map__countries .country {
	fill: var(--map-land);
	stroke: var(--map-border);
	stroke-width: 0.6;
}

.world-map__point {
	cursor: pointer;
	outline: none;
}

.world-map__point .world-map__pin-hit {
	fill: transparent;
}

.world-map__point .world-map__pin {
	fill: var(--map-pin);
	stroke: #fff;
	stroke-width: 1.2;
	transition: r 150ms ease, fill 150ms ease;
}

.world-map__point:hover .world-map__pin,
.world-map__point:focus-visible .world-map__pin,
.world-map__point.is-open .world-map__pin {
	r: 6.5;
	fill: var(--map-pin-active);
}

.world-map__point:focus-visible .world-map__pin {
	stroke: var(--map-focus);
	stroke-width: 2;
}

.world-map__tooltip {
	position: fixed;
	z-index: 60;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.35rem;
	max-width: 300px;
	padding: 1rem 1.25rem;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
	font-size: 0.85rem;
	line-height: 1.25;
	pointer-events: none;
}

.world-map__tooltip[hidden] {
	display: none;
}

.world-map__tooltip img {
	width: 200px;
	max-width: 100%;
	height: 96px;
	object-fit: contain;
	flex: none;
	margin-bottom: 0.25rem;
}

.world-map__tooltip-name {
	font-family: var(--serif-display);
	font-size: 1rem;
	line-height: 1.3;
}

.world-map__tooltip-country {
	margin: 0;
	color: var(--offblack-80);
}

/*
 * Members list — sits over the empty ocean at the bottom left of the map
 * (lg and up); on medium screens it drops below the map as a wrapping row.
 * Hovering a name opens that member's pin tooltip (members-map.js).
 */
.world-map__list {
	position: absolute;
	left: 0;
	bottom: 0;
	z-index: 2;
	max-width: 24%;
}

.world-map__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.world-map__list li {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.4;
}

.world-map__list li + li {
	margin-top: 0.4rem;
}

.world-map__list-link,
.world-map__list-link:visited {
	display: inline-flex;
	align-items: flex-start;
	gap: 0.4em;
	color: var(--offblack-80);
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 0.2em;
	transition: color 150ms ease, text-decoration-color 150ms ease;
}

/* Chevron bullet — drawn with a mask so it follows the link colour. */
.world-map__list-link::before {
	content: "";
	flex: none;
	width: 0.6em;
	height: 0.6em;
	margin-top: 0.4em; /* centre on the first line */
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 1.5 7 5l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M3.5 1.5 7 5l-3.5 3.5' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform 150ms ease;
}

.world-map__list-link:hover,
.world-map__list-link:focus-visible,
.world-map__list-link.is-active {
	color: var(--map-pin-active);
	text-decoration-color: currentColor;
}

.world-map__list-link:hover::before,
.world-map__list-link:focus-visible::before,
.world-map__list-link.is-active::before {
	transform: translateX(2px);
}

/* Medium screens: below the map, horizontal and wrapping. */
@media (max-width: 991.98px) {
	.world-map__list {
		position: static;
		max-width: none;
		margin-top: 1.5rem;
	}

	.world-map__list ul {
		display: flex;
		flex-wrap: wrap;
		gap: 0.6rem 1.75rem;
	}

	.world-map__list li + li {
		margin-top: 0;
	}
}

/*
 * Because the pins are native SVG elements, they (intentionally) scale
 * down with the map — that's what keeps them perfectly aligned at any
 * width with zero JS repositioning. The trade-off is that on a very
 * narrow map they'd become too small to comfortably tap. Rather than
 * shrink the map indefinitely, give it a floor width and let a small
 * screen scroll it horizontally instead.
 */
@media (max-width: 700px) {
	.world-map {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.world-map__svg {
		width: 700px;
		max-width: none;
	}
}