/**
 * Interactive map — wrapper chrome only.
 *
 * The map itself renders into a shadow root, so its internals are styled in
 * assets/js/interactive-map.js and cannot be reached (or broken) from here.
 * This file is the direct descendant of the standalone build's
 * components/interactive-map/interactive-map.scss, with two changes:
 *
 *   1. BEM names are namespaced to the widget (.mma-map-widget__*) so they
 *      cannot collide with a theme that already ships .mma-* classes.
 *   2. Every design token carries a literal fallback, because the plugin has to
 *      look right on a theme that does not define the MMA token set.
 *
 * Values are the compiled output of the original SCSS — nothing was retuned.
 */

.mma-map-widget__inner {
	position: relative;
}

.mma-map-widget__header {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-32, 2rem);
	align-items: flex-end;
	justify-content: space-between;
	margin-block-end: var(--space-32, 2rem);
}

.mma-map-widget__heading-group {
	max-width: 62ch;
}

.mma-map-widget__title {
	margin: 0;
	font-family: var(--font-display, Fraunces, Georgia, serif);
	font-weight: 600;
	line-height: 1.15;
	color: var(--text-heading, #16211f);
}

.mma-map-widget__subtitle {
	margin: 0.5rem 0 0;
	font-family: var(--font-body, Inter, system-ui, sans-serif);
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--text-body, #4b5a57);
}

/* Pointer-specific instruction; wrong on touch, where the gestures differ. */
.mma-map-widget__hint {
	display: inline-flex;
	gap: var(--space-8, 0.5rem);
	align-items: center;
	margin: 0;
	padding: var(--space-8, 0.5rem) var(--space-16, 1rem);
	font-family: var(--font-body, Inter, system-ui, sans-serif);
	font-size: var(--fs-caption, 0.8125rem);
	font-weight: 600;
	color: var(--text-body, #4b5a57);
	background: var(--surface-page, #fff);
	border: 1px solid var(--border-default, #d7dedc);
	border-radius: var(--radius-pill, 999px);
}

@media (max-width: 47.99em) {
	.mma-map-widget__hint {
		display: none;
	}
}

/*
 * Host sizing. Reserving the box before the element upgrades stops the page
 * reflowing when d3 finishes loading and the SVG appears.
 *
 * The height is overridden per breakpoint by the widget's `map_height` control,
 * which writes an inline rule on {{WRAPPER}} mma-map — so these are the
 * fallbacks used before any editor value is set.
 */
.mma-map-widget mma-map {
	display: block;
	width: 100%;
	aspect-ratio: 12 / 7;
	min-height: 420px;
	border-radius: var(--radius-lg, 16px);
	box-shadow: var(--shadow-resting, 0 1px 3px rgb(22 33 31 / 8%));
}

@media (min-width: 64em) {
	.mma-map-widget mma-map {
		aspect-ratio: auto;
		height: 620px;
	}
}

/* Shown when JavaScript is unavailable. */
.mma-map-widget__fallback {
	padding: var(--space-48, 3rem) var(--space-32, 2rem);
	font-family: var(--font-body, Inter, system-ui, sans-serif);
	color: var(--text-body, #4b5a57);
	text-align: center;
	background: var(--surface-page, #fff);
	border: 1px solid var(--border-default, #d7dedc);
	border-radius: var(--radius-lg, 16px);
}

.mma-map-widget__fallback p {
	margin: 0;
}