/**
 * HD Interactive Map — front-end styles.
 *
 * One static stylesheet for every map instance. Per-instance values
 * (stroke, fill) are passed as CSS custom properties on the wrapper's
 * style attribute; the tooltip design tokens below can be overridden
 * by any theme:
 *
 *   .hdim-wrap { --hdim-tt-accent: #c00; --hdim-tt-font: Georgia, serif; }
 */

.hdim-wrap {
	/* Per-instance (set inline by the renderer) */
	--hdim-stroke: #909090;
	--hdim-stroke-width: 1px;
	--hdim-fill: #e9eef3;

	/* Tooltip design tokens (theme-overridable) */
	--hdim-tt-font: 'Lato', Arial, sans-serif;
	--hdim-tt-bg: rgba(255, 255, 255, 0.8);
	--hdim-tt-text: #252525;
	--hdim-tt-accent: #FABF17;
	--hdim-tt-name-bg: linear-gradient(0deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.2) 100%), #252525;
	--hdim-tt-radius: 0 20px 20px 20px;
	--hdim-tt-width: 337px;

	/* Mobile dropdown tokens */
	--hdim-ui-font: 'Lato', Arial, sans-serif;
	--hdim-ui-text: #0f172a;
	--hdim-ui-border: #cbd5e1;
	--hdim-ui-hover: #eef2ff;
	--hdim-ui-selected: #e2e8f0;

	position: relative;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
	overflow: hidden; /* clamp tooltip/SVG at edges */
}

/* SVG base */
.hdim-wrap .hdim-map {
	display: block;
	width: 100% !important;
	max-width: 100%;
	height: auto !important;
}
.hdim-wrap .hdim-map,
.hdim-wrap .hdim-map * {
	vector-effect: non-scaling-stroke;
}

/* Hover maps opt in to pointer events on region ids only. */
.hdim-wrap .hdim-map * {
	pointer-events: none;
}
.hdim-wrap.is-interactive .hdim-map [id],
.hdim-wrap.is-interactive .hdim-map [id] * {
	pointer-events: auto;
}

/* Global stroke + default fill */
.hdim-wrap .hdim-map path,
.hdim-wrap .hdim-map polygon,
.hdim-wrap .hdim-map rect,
.hdim-wrap .hdim-map polyline,
.hdim-wrap .hdim-map line,
.hdim-wrap .hdim-map use {
	stroke: var(--hdim-stroke);
	stroke-width: var(--hdim-stroke-width);
	stroke-linejoin: round;
}
.hdim-wrap .hdim-map path {
	fill: var(--hdim-fill);
	cursor: default;
	outline: none;
}
.hdim-wrap.is-interactive .hdim-map path {
	cursor: pointer;
}

/* 50-states mode: the shared US artwork draws DC; hide it. */
.hdim-wrap--us_50 .hdim-map [id="US-DC"] {
	display: none;
}

/* Tooltip container (transparent). Inner .hdim-tt-card defines visuals. */
.hdim-wrap .hdim-tooltip {
	position: absolute;
	z-index: 2;
	display: none;
	max-width: 420px;
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
	pointer-events: none;   /* never steal hover */
	will-change: left, top; /* smoother reposition */
}
.hdim-wrap .hdim-tooltip.is-visible {
	display: block;
}

/* Tooltip card */
.hdim-tt-card {
	all: initial;
	box-sizing: border-box;
	display: flex;
	width: var(--hdim-tt-width, 337px);
	max-width: min(var(--hdim-tt-width, 337px), calc(100vw - 32px));
	padding: 14px;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	border-radius: var(--hdim-tt-radius, 0 20px 20px 20px);
	background: var(--hdim-tt-bg, rgba(255, 255, 255, 0.8));
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
	color: var(--hdim-tt-text, #252525);
	font-family: var(--hdim-tt-font, 'Lato', Arial, sans-serif);
	font-size: 14px;
	line-height: 1.35;
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.hdim-tt-card .state {
	display: flex;
	width: 100%;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
}
.hdim-tt-card .state-name {
	margin: 0;
	width: 100%;
	box-sizing: border-box;
	padding: 12px 22px;
	border-radius: 20px;
	background: var(--hdim-tt-name-bg, #252525);
	color: var(--hdim-tt-accent, #FABF17);
	font-family: var(--hdim-tt-font, 'Lato', Arial, sans-serif);
	font-size: 20px;
	font-style: normal;
	font-weight: 800;
	line-height: normal;
	text-transform: uppercase;
}
.hdim-tt-card .state-name span {
	color: inherit;
	font: inherit;
	text-transform: inherit;
}
.hdim-tt-card .markets {
	margin: 0;
	padding: 0 22px;
	color: var(--hdim-tt-text, #252525);
	font-family: var(--hdim-tt-font, 'Lato', Arial, sans-serif);
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	text-transform: uppercase;
}
.hdim-tt-card .markets span {
	color: inherit;
	font: inherit;
	text-transform: inherit;
}

/* Legend (shared by shortcode legend="1" and the block) */
.hdim-legend {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 28px;
	list-style: none;
	padding: 0;
	margin: 1.25rem 0 1.75rem;
}
.hdim-legend-item {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-weight: 900;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	font-size: 1rem;
}
@media (min-width: 1024px) {
	.hdim-legend-item {
		font-size: 20px;
	}
}
.hdim-legend-swatch {
	width: 30px;
	height: 30px;
	border-radius: 999px;
	border: 1px solid rgba(0, 0, 0, 0.12);
	background-clip: padding-box;
	flex: 0 0 30px;
}

/* Mobile UI (centered) */
.hdim-wrap .hdim-mobile {
	display: none;
	margin-top: 8px;
	text-align: center;
}
.hdim-wrap .hdim-mobile label {
	display: block;
	margin: 0 0 8px;
	font-weight: 600;
	font-size: clamp(0.95rem, 0.9rem + 0.2vw, 1.1rem);
	text-align: center;
}
.hdim-wrap .hdim-mobile-control {
	width: 100%;
	max-width: 420px;
	margin: 0 auto;
	text-align: left;
	touch-action: manipulation;
}
.hdim-wrap .hdim-mobile-toggle {
	width: 100%;
	min-height: 54px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	border: 1px solid var(--hdim-ui-border);
	border-radius: 12px;
	background: #fff;
	color: var(--hdim-ui-text);
	padding: 12px 14px;
	text-align: left;
	font-family: var(--hdim-ui-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.hdim-wrap .hdim-mobile-toggle:focus-visible {
	outline: 2px solid var(--hdim-ui-text);
	outline-offset: 2px;
}
.hdim-wrap .hdim-mobile-caret {
	width: 11px;
	height: 11px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	flex: 0 0 11px;
	margin-right: 2px;
	transition: transform 0.16s ease;
}
.hdim-wrap .hdim-mobile-control.is-open .hdim-mobile-caret {
	transform: rotate(-135deg) translateY(-2px);
}
.hdim-wrap .hdim-mobile-menu {
	position: relative;
	margin-top: 0;
	background: #fff;
	border: 1px solid var(--hdim-ui-border);
	border-radius: 12px;
	box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16);
	max-height: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	transform: translateY(-4px);
	pointer-events: none;
	transition: max-height 0.22s ease, opacity 0.16s ease, transform 0.16s ease, margin-top 0.16s ease;
}
@media (prefers-reduced-motion: reduce) {
	.hdim-wrap .hdim-mobile-menu,
	.hdim-wrap .hdim-mobile-caret {
		transition: none;
	}
}
.hdim-wrap .hdim-mobile-control.is-open .hdim-mobile-menu {
	margin-top: 8px;
	max-height: min(55vh, 380px);
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.hdim-wrap .hdim-mobile-list {
	list-style: none;
	margin: 0;
	padding: 8px 0;
}
.hdim-wrap .hdim-mobile-group {
	margin: 4px 0 2px;
	padding: 6px 14px;
	font-family: var(--hdim-ui-font);
	font-size: 12px;
	font-weight: 800;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: #64748b;
}
.hdim-wrap .hdim-mobile-item {
	margin: 0;
	padding: 0;
}
.hdim-wrap .hdim-mobile-option {
	width: 100%;
	min-height: 46px;
	border: 0;
	border-radius: 0;
	margin: 0;
	padding: 11px 14px;
	background: transparent;
	color: var(--hdim-ui-text);
	text-align: left;
	font-family: var(--hdim-ui-font);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.hdim-wrap .hdim-mobile-option:hover,
.hdim-wrap .hdim-mobile-option:focus-visible {
	background: var(--hdim-ui-hover);
	outline: none;
}
.hdim-wrap .hdim-mobile-option.is-selected {
	background: var(--hdim-ui-selected);
}
.hdim-wrap .hdim-mobile-option.is-selected::before {
	content: "✓ ";
	color: var(--hdim-ui-text);
	font-weight: 900;
}
.hdim-wrap .hdim-mobile .hdim-mobile-output {
	margin: 10px auto 0;
	text-align: center;
	max-width: 640px;
}
.hdim-wrap .hdim-mobile .hdim-mobile-output .hdim-tt-card {
	margin: 0 auto;
	text-align: left;
}

/* Region list shortcode */
.hdim-list-wrap .hdim-list-grid {
	display: grid;
	grid-template-columns: repeat(var(--hdim-cols, 3), minmax(0, 1fr));
	gap: 22px 32px;
	align-items: start;
}
.hdim-list-wrap .hdim-list-section + .hdim-list-section {
	margin-top: 28px;
}
.hdim-list-wrap .hdim-list-heading {
	font-weight: 700;
	font-size: 1.1rem;
	margin: 0 0 12px;
}
.hdim-list-wrap .hdim-list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
}
.hdim-list-wrap .hdim-item {
	margin: 0 0 18px;
}
.hdim-list-wrap .hdim-name {
	display: block;
	font-weight: 700;
	margin: 0 0 4px;
}
.hdim-list-wrap .hdim-line {
	margin: 0;
	opacity: 0.9;
}