/**
 * Beard | MET — parcel map.
 *
 * Loaded only where [bm_parcel_map] renders. Uses the theme's own tokens
 * (style.css :root) so the map reads as part of the site rather than an
 * embedded widget.
 */

.bm-parcel-map-wrap {
	position: relative;
}

/* The map normally renders inside .entry-content, which is sized for reading.
   A map is not read, it is scanned — it wants the full container. These break
   out with margin arithmetic rather than a transform: a transformed ancestor
   becomes the containing block for Leaflet's absolutely positioned panes, and
   that is a class of bug worth not inviting. */
.bm-parcel-map-wrap--container {
	--bm-map-w: min(100vw - (2 * var(--gutter, 24px)), var(--container-wide, 1400px));
	width: var(--bm-map-w);
	max-width: none;
	margin-left: calc((100% - var(--bm-map-w)) / 2);
	margin-right: calc((100% - var(--bm-map-w)) / 2);
}

.bm-parcel-map-wrap--full {
	width: 100vw;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.bm-parcel-map-wrap--full .bm-parcel-map {
	border-left: 0;
	border-right: 0;
}

/* Inside an Elementor container the parent is already full-bleed, so the
   breakout would double up and overflow. */
.elementor .bm-parcel-map-wrap--container,
.elementor .bm-parcel-map-wrap--full {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.bm-parcel-map {
	width: 100%;
	min-height: 320px;
	background: var(--cream-2, #ECE9E1);
	border: 1px solid var(--line, #D8D6CE);
}

/* Leaflet tiles are <img> elements, absolutely positioned by transform.
   The theme's content styles hit them: `.entry-content img` sets
   margin-block:1.5em and a border-radius, and Elementor adds its own
   `.elementor img{height:auto;max-width:100%}`. A margin on an absolutely
   positioned tile MOVES it — every tile shifts ~24px down while the SVG
   overlay holding the parcels does not, so the imagery and the boundaries
   drift apart by a constant offset and the map reads as misregistered.
   The geometry was never wrong; the tiles were.

   Neutralise every inherited image style inside the map, and keep this rule
   after the theme stylesheet (it is, via the enqueue dependency on
   beard-met-style). */
.bm-parcel-map img,
.bm-parcel-map .leaflet-tile,
.bm-parcel-map .leaflet-marker-icon,
.bm-parcel-map .leaflet-image-layer {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	max-width: none !important;
	max-height: none !important;
	box-shadow: none !important;
	vertical-align: baseline !important;
}

/* Leaflet's own chrome, brought onto the brand. */
.bm-parcel-map .leaflet-container {
	font-family: var(--font-body, sans-serif);
}

.bm-parcel-map .leaflet-bar a {
	color: var(--ink, #4E3737);
	border-bottom-color: var(--line, #D8D6CE);
}

.bm-parcel-map .leaflet-bar a:hover,
.bm-parcel-map .leaflet-bar a:focus-visible {
	background: var(--cream, #F4F2EC);
	color: var(--accent, #C42032);
}

.bm-parcel-map .leaflet-bar a:focus-visible {
	outline: 2px solid var(--accent, #C42032);
	outline-offset: 1px;
}

.bm-parcel-map .leaflet-control-attribution {
	font-size: 10px;
	font-family: var(--font-body, sans-serif);
	background: rgba(255, 255, 255, .82);
}

.bm-reset a {
	font-size: 16px;
	line-height: 26px;
	text-align: center;
}

/* Leaflet's keyboard handler puts tabindex="0" on the map container so arrow
   keys can pan it. That means a CLICK focuses the map, and Safari paints its
   focus ring on pointer focus where Chrome does not — a bright blue rectangle
   sitting just outside the map's own 1px border, which reads as a doubled
   outline. Suppress the ring for pointer focus; restore a branded one for
   keyboard focus, which is the only case that needs to see it. */
.bm-parcel-map:focus,
.bm-parcel-map path:focus {
	outline: none;
}

.bm-parcel-map {
	-webkit-tap-highlight-color: transparent;
}

.bm-parcel-map:focus-visible {
	outline: 2px solid var(--accent, #C42032);
	outline-offset: 2px;
}

/* A parcel reached by keyboard. Stroke rather than outline: an outline on an
   SVG path is drawn around its bounding BOX, which for a diagonal parcel sits
   nowhere near the shape. */
.bm-parcel-map path:focus-visible {
	outline: none;
	stroke: var(--white, #fff);
	stroke-width: 4;
}

/* ---- legend ---- */

.bm-parcel-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1.2rem;
	margin-top: .9rem;
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--muted, #6B6B66);
}

.bm-parcel-legend span {
	display: flex;
	align-items: center;
	gap: .45rem;
}

.bm-swatch {
	width: 13px;
	height: 13px;
	flex: 0 0 13px;
	display: block;
	border: 1.5px solid currentColor;
}

.bm-swatch--available {
	/* Matches the map: brand green fill, lifted green rule. */
	color: #4E9E6B;
	background: rgba(27, 58, 40, .5);
}

.bm-swatch--holding {
	color: var(--muted, #6B6B66);
	background: rgba(27, 58, 40, .12);
	border-style: dashed;
}

.bm-swatch--other {
	color: var(--met-red, #C42032);
	background: rgba(196, 32, 50, .3);
}

.bm-swatch--met {
	/* Matches the map's MET Railroad orange. */
	color: #E8891C;
	background: rgba(232, 137, 28, .28);
}

/* ---- popup ---- */

.bm-pop-wrap .leaflet-popup-content-wrapper {
	border-radius: 0;
	background: var(--white, #fff);
	color: var(--ink, #4E3737);
	box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}

.bm-pop-wrap .leaflet-popup-content {
	/* Margin only. Leaflet sets the width inline from the min/maxWidth popup
	   options; overriding it here collapses the popup to its narrowest column. */
	margin: 0;
}

.bm-pop-wrap .leaflet-popup-tip {
	background: var(--white, #fff);
}

.bm-pop__apn {
	margin: 0;
	padding: .6rem .95rem .5rem;
	border-bottom: 1px solid var(--line, #D8D6CE);
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted, #6B6B66);
}

.bm-pop__item {
	padding: .8rem .95rem;
	display: flex;
	flex-direction: column;
	gap: .18rem;
}

.bm-pop__item + .bm-pop__item {
	border-top: 1px solid var(--line, #D8D6CE);
}

.bm-pop__state {
	font-size: .64rem;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted, #6B6B66);
}

.bm-pop__item--available .bm-pop__state {
	color: var(--beard-green, #1B3A28);
	font-weight: 700;
}

.bm-pop__item--met .bm-pop__state {
	/* A darker cut of the map orange — the polygon shade is too light on white. */
	color: #B5670E;
	font-weight: 700;
}

.bm-pop__title {
	font-family: var(--font-head, Georgia, serif);
	font-size: 1.12rem;
	line-height: 1.2;
	color: var(--ink, #4E3737);
	text-decoration: none;
}

.bm-pop__title:hover {
	color: var(--met-red, #C42032);
}

.bm-pop__addr,
.bm-pop__specs {
	font-size: .78rem;
	color: var(--muted, #6B6B66);
}

.bm-pop__cta {
	margin-top: .45rem;
	align-self: flex-start;
	font-size: .68rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--met-red, #C42032);
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}

.bm-pop__cta:hover {
	color: var(--ink, #4E3737);
}

/* ---- tooltip ---- */

.bm-tip {
	border: 0;
	border-radius: 0;
	background: var(--ink, #4E3737);
	color: #fff;
	font-size: .74rem;
	font-weight: 500;
	padding: .3rem .55rem;
	box-shadow: none;
}

.bm-tip::before {
	display: none;
}

.bm-map-empty {
	padding: 1rem 1.2rem;
	border-left: 3px solid var(--met-red, #C42032);
	background: var(--cream-2, #ECE9E1);
	font-size: .9rem;
}

@media (prefers-reduced-motion: reduce) {
	.bm-parcel-map .leaflet-fade-anim .leaflet-tile,
	.bm-parcel-map .leaflet-zoom-anim .leaflet-zoom-animated {
		transition: none !important;
	}
}