/* ==========================================================================
   Bertha Accelerator Map — plugin styles.
   Self-contained: enqueued by the plugin itself (see bs_accel_enqueue_assets()
   in bertha-accelerator-map.php), not dependent on any page's own Custom CSS.
   Colors match the site's teal (#139487) / gold (#D29D2B) palette directly —
   hardcoded here rather than inherited, so the map looks right on any page
   it's dropped into without needing matching CSS pasted in elsewhere.
   ========================================================================== */
.bs-map-section {
	--bs-map-section-bg: #f5f5f5;
	--bs-map-land-fill: #d9d9d9;
	--bs-map-land-stroke: #8a8a8a;

	background: var(--bs-map-section-bg);
	padding: 64px 24px;
	border-radius: 1.5rem;
	text-align: center;
	/* Clips zoomed-in map content to the section's own bounds — the zoom
	   transform lives on .bs-map-wrap (a child), not here, so this box
	   itself never moves and reliably crops whatever scales past it. */
	overflow: hidden;
}

.bs-map-heading,
.bs-map-heading h1,
.bs-map-heading h2,
.bs-map-heading h3 {
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 44px;
	color: #139487;
	margin: 0 0 40px;
}

/* A scaled-up .bs-map-wrap doesn't respect sibling layout — it just paints
   visually larger from its transform-origin, which can cover the heading
   and controls bar above it even though they're earlier in the DOM (a
   transformed element still paints in its own stacking position, not
   necessarily "under" untransformed siblings). Explicit stacking contexts
   here keep both reliably on top regardless of how far the map scales. */
.bs-map-heading,
.bs-map-controls {
	position: relative;
	z-index: 40;
}

/* Controls bar — sits ABOVE .bs-map-wrap, outside it entirely, so it never
   moves, scales, or gets clipped when the map zooms (a control living
   *inside* the zoomed element would zoom and reposition right along with
   it — that's what made the old overlaid Reset button disappear off-screen
   once zoomed in). Always visible/rendered, with its own background so it
   reads as a distinct toolbar rather than floating controls on the map. */
.bs-map-controls {
	width: 90%;
	max-width: 1600px;
	margin: 0 auto 16px auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 8px;
	background-color: #ffffff;
	border-radius: 9999px;
	padding: 10px 14px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.bs-map-reset {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: 'Lato', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #139487;
	background-color: transparent;
	border: 2px solid #139487;
	border-radius: 9999px;
	padding: 8px 16px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.bs-map-reset:hover {
	background-color: #139487;
	color: #ffffff;
}
.bs-map-reset:disabled {
	color: #bcc9c6;
	border-color: #bcc9c6;
	cursor: default;
	opacity: 0.7;
}
.bs-map-reset svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
}

.bs-map-wrap {
	position: relative;
	/* 90% of this SECTION's own width — wider means taller too (the SVG
	   keeps its own aspect ratio), which is the point: bigger highlighted
	   shapes and markers are easier to make out. Capped so it doesn't get
	   absurd on very wide monitors. */
	width: 90%;
	max-width: 1600px;
	margin: 0 auto;
	line-height: 0;
	/* The JS's tx/ty math assumes scale happens around the top-left corner
	   (0,0) — CSS defaults transform-origin to the element's own center,
	   which without this override sends every zoom wildly off-target
	   (translate values computed for one origin, applied against another). */
	transform-origin: 0 0;
	transition: transform 0.5s ease;
}

/* Zoomed-in state invites dragging; actively dragging swaps the cursor and
   drops the transition so panning tracks the mouse with zero lag (a 0.5s
   ease would make every drag frame feel like it's chasing the cursor). */
.bs-map-wrap.bs-map-zoomed {
	cursor: grab;
}
.bs-map-wrap.bs-map-dragging {
	cursor: grabbing;
	transition: none;
}

.bs-map-wrap svg {
	width: 100%;
	height: auto;
	display: block;
}

/* Every real country shape gets .bs-map-country (added by the plugin
   regardless of highlight state), so unhighlighted land styles uniformly
   whether a country is a single <path> or a multi-part <g>. */
.bs-map-wrap svg .bs-map-country {
	fill: var(--bs-map-land-fill);
	stroke: var(--bs-map-land-stroke);
	stroke-width: 0.6px;
	transition: fill 0.2s ease;
}

/* Highlight color comes from --bs-map-highlight, set inline by the plugin —
   either the map's default or a per-location override, same rule either way.
   Gold border + drop-shadow lift the shape off the flat grey map, giving it
   a slightly elevated/3D feel without a real 3D transform (SVG shapes on a
   flat plane don't take perspective well). */
.bs-map-wrap svg .bs-map-highlight {
	fill: var(--bs-map-highlight, #139487);
	stroke: var(--bs-map-highlight-border, #D29D2B);
	stroke-width: 1.5px;
	filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
	transition: filter 0.2s ease;
}
.bs-map-wrap svg .bs-map-highlight:hover {
	filter: drop-shadow(0 5px 8px rgba(0, 0, 0, 0.4));
}

/* Pins */
.bs-map-pin {
	position: absolute;
	/* --bs-map-pin-scale is set by the JS to 1/zoom-scale on .bs-map-wrap
	   (which this inherits as a descendant) — it cancels the ambient zoom
	   transform back out, so the pin (and its tooltip, itself just a normal
	   child of the pin) stay a constant on-screen size at any zoom level
	   instead of ballooning to 10x at max zoom. */
	transform: translate(-50%, -100%) scale(var(--bs-map-pin-scale, 1));
	transform-origin: 50% 100%;
	width: 22px;
	height: 30px;
	padding: 0;
	border: none;
	background: none;
	cursor: pointer;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.25));
	transition: transform 0.15s ease;
}

.bs-map-pin:hover,
.bs-map-pin:focus-visible,
.bs-map-pin.bs-map-pin-active {
	transform: translate(-50%, -100%) scale(calc(var(--bs-map-pin-scale, 1) * 1.15));
}

.bs-map-pin:focus-visible {
	outline: 2px solid var(--bs-map-pin, #D29D2B);
	outline-offset: 2px;
	border-radius: 50%;
}

.bs-map-pin-icon {
	width: 100%;
	height: 100%;
	fill: var(--bs-map-pin, #D29D2B);
}

.bs-map-pin-icon .bs-map-pin-dot {
	fill: #fff;
}

.bs-map-tooltip {
	position: absolute;
	left: 50%;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	background: #1a2e2b;
	color: #fff;
	font-family: 'Lato', sans-serif;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
	padding: 6px 12px;
	border-radius: 0.5rem;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
	z-index: 2;
}

.bs-map-tooltip::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: 5px solid transparent;
	border-top-color: #1a2e2b;
}

.bs-map-pin:hover .bs-map-tooltip,
.bs-map-pin:focus-visible .bs-map-tooltip,
.bs-map-pin.bs-map-pin-active .bs-map-tooltip {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.bs-map-pin,
	.bs-map-tooltip,
	.bs-map-wrap svg .bs-map-country {
		transition: none;
	}
}

@media (max-width: 767px) {
	.bs-map-section {
		padding: 40px 16px;
	}

	.bs-map-heading,
	.bs-map-heading h1,
	.bs-map-heading h2,
	.bs-map-heading h3 {
		font-size: 24px;
		margin-bottom: 24px;
	}

	.bs-map-pin {
		width: 18px;
		height: 24px;
	}
}