/*
 * Office map ([xpt_office_map], inc/offices.php). Loaded only where the map renders.
 * Colours follow the old MapSVG map: light grey states, darker grey where there is an office, green pins.
 */

.office-map {
	/* Copy of the theme file for the current (Elementor) site: the theme's font token does not exist there. */
	--xpt-font: "Trade Gothic", sans-serif;
	--office-map-base: #e3e3e2;
	--office-map-active: #acacac;
	--office-map-stroke: #fff;
	--office-map-ink: #000;
	--office-map-pin: var(--xpt-green-dark, #0e7c50);
	--office-map-link: var(--xpt-green-dark, #0e7c50);
	--office-map-ease: cubic-bezier(.32, .72, 0, 1);
	--zoom: 1;
	position: relative;
	margin: 24px 0;
	color: var(--office-map-ink);
	font-family: var(--xpt-font, sans-serif);
}

.office-map__stage {
	position: relative;
}

.office-map__viewport {
	position: relative;
	overflow: hidden;
	touch-action: none;
}

.office-map__canvas {
	position: relative;
	transform-origin: 0 0;
	transition: transform .5s var(--office-map-ease);
}

.office-map.is-zoomed .office-map__canvas { cursor: grab; }
.office-map.is-dragging .office-map__canvas { cursor: grabbing; transition: none; }

/* Theme and plugin button styles would otherwise apply to the map controls. */
.office-map .office-map__pin,
.office-map .office-map__zoom button,
.office-map .office-map__close {
	all: unset;
	box-sizing: border-box;
	cursor: pointer;
}

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

.office-map__states path {
	fill: var(--office-map-base);
	stroke: var(--office-map-stroke);
	stroke-width: .6;
	stroke-linejoin: round;
	vector-effect: non-scaling-stroke;
}

.office-map__labels text {
	font: 700 5px/1 var(--xpt-font, sans-serif);
	fill: #54595f;
	text-anchor: middle;
	dominant-baseline: middle;
	pointer-events: none;
}

/* Pins keep their on-screen size at any zoom level. */
.office-map .office-map__pin {
	position: absolute;
	z-index: 1;
	width: 24px;
	height: 32px;
	transform: translate(-50%, -100%) scale(calc(1 / var(--zoom)));
	transform-origin: 50% 100%;
	transition: transform .3s var(--office-map-ease);
}

.office-map__pin svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .35));
}

.office-map__pin path { fill: var(--office-map-pin); stroke: #fff; stroke-width: 1.5; }
.office-map__pin circle { fill: #fff; }

/* Remote employees: white pin with a green outline and centre (as the grey pins in the office map deck). */
.office-map__pin--remote path { fill: #fff; stroke: var(--office-map-pin); stroke-width: 2.5; }
.office-map__pin--remote circle { fill: var(--office-map-pin); }

.office-map__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: var(--xpt-text-size, 17px);
	line-height: 26px;
}

.office-map__legend li {
	display: flex;
	align-items: center;
	gap: 8px;
}

.office-map__swatch {
	width: 14px;
	height: 14px;
	border: 2px solid var(--office-map-pin);
	border-radius: 50% 50% 50% 0;
	background: var(--office-map-pin);
	transform: rotate(-45deg);
}

.office-map__swatch--remote {
	background: #fff;
}

.office-map .office-map__type {
	margin-bottom: 8px;
	color: var(--xpt-grey, #54595f);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.office-map .office-map__pin:hover,
.office-map .office-map__pin:focus-visible,
.office-map .office-map__pin[aria-expanded="true"] {
	z-index: 3;
	transform: translate(-50%, -100%) scale(calc(1.2 / var(--zoom)));
}

.office-map__pin[aria-expanded="true"] path { fill: #000; }

.office-map .office-map__pin:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
	border-radius: 4px;
}

.office-map__tip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 6px);
	padding: 4px 8px;
	background: #000;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transform: translateX(-50%);
	transition: opacity .2s var(--office-map-ease);
}

.office-map__pin:hover .office-map__tip,
.office-map__pin:focus-visible .office-map__tip { opacity: 1; }

.office-map__zoom {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 4;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.office-map .office-map__zoom button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border: 1px solid #9b9b9b;
	background: #fff;
	color: #000;
	font-size: 20px;
	line-height: 1;
	transition: background-color .3s var(--office-map-ease), color .3s var(--office-map-ease);
}

.office-map .office-map__zoom button:hover {
	border-color: var(--office-map-link);
	background: var(--office-map-link);
	color: #fff;
}

.office-map .office-map__zoom button:focus-visible,
.office-map .office-map__close:focus-visible {
	outline: 3px solid #000;
	outline-offset: 2px;
}

.office-map__details {
	position: absolute;
	z-index: 5;
	left: 8px;
	bottom: 8px;
	width: min(340px, calc(100% - 16px));
	max-height: calc(100% - 16px);
	overflow: auto;
	padding: 24px 24px 16px;
	border-top: 4px solid var(--xpt-green, #129a63);
	background: #fff;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

.office-map .office-map__close {
	position: absolute;
	top: 6px;
	right: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: #000;
	font-size: 26px;
	line-height: 1;
}

.office-map__office + .office-map__office {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--office-map-base);
}

.office-map .office-map__office :is(h3, h4) {
	margin: 0 0 8px;
	padding-right: 24px;
	color: #000;
	font: 700 20px/28px var(--xpt-font, sans-serif);
}

.office-map .office-map__office :is(p, address) {
	margin: 0 0 4px;
	color: var(--xpt-text, #333);
	font-size: var(--xpt-text-size, 17px);
	font-style: normal;
	line-height: 26px;
}

/* !important: the old site CSS forces .page-content a to #129a63, which fails contrast on the light cards. */
.office-map .office-map__office a {
	color: var(--office-map-link) !important;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.office-map .office-map__office a:hover {
	color: #000 !important;
}

.office-map__page {
	margin-top: 8px !important;
}

/* list="toggle" */
.office-map__list {
	margin-top: 16px;
}

.office-map__list summary {
	cursor: pointer;
	font-weight: 700;
}

.office-map__states-list {
	columns: 3 240px;
	column-gap: 32px;
	margin-top: 16px;
}

.office-map__states-list section {
	margin-bottom: 20px;
	break-inside: avoid;
}

/* list="open": every office as a card under the map. */
.office-map__list--open {
	margin-top: 64px;
}

.office-map .office-map__list-title {
	margin: 0 0 24px;
	color: #000;
	font: 700 30px/36px var(--xpt-font, sans-serif);
}

.office-map__cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.office-map__card {
	position: relative;
	margin: 0;
	padding: 24px 24px 20px;
	border-top: 4px solid var(--xpt-green, #129a63);
	background: #f4f6f5;
}

.office-map__state {
	position: absolute;
	top: 20px;
	right: 20px;
	padding: 2px 8px;
	background: #000;
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: .04em;
}

.office-map__card .office-map__office {
	padding-right: 40px;
}

/* Phones: the map is too small to hold the card, so it sits below the map. */
@media (max-width: 639px) {
	/* Smaller pin drawing, but the button keeps a 24px target (WCAG 2.5.8). */
	.office-map .office-map__pin {
		width: 24px;
		height: 24px;
	}

	.office-map__pin svg {
		width: 16px;
		height: 22px;
		margin: 2px auto 0;
	}

	.office-map__details {
		position: relative;
		left: auto;
		bottom: auto;
		width: 100%;
		max-height: none;
		margin-top: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.office-map__canvas,
	.office-map__tip,
	.office-map .office-map__pin {
		transition: none;
	}
}