/* Block: Neighborhood Map (acf/neighborhood-map)
   ---------------------------------------------------------------------------
   The layer bar, the live map and the places list. Phone first; the comp is
   the 1512 board only (Figma 9eBn6GzkM1aHMg59Ck62cP, 363:462), the phone and
   tablet layouts are extrapolated. Notes: docs/neighborhood-map-block.md.

   Comp at 1512 (the bar 4059:33, the map 363:572, the band 363:483):
     bar   Linen, 157px, shadow 0 4px 4px rgba(0,0,0,.15). Eyebrow line 30px
           down (ink 34), Ember 18px Tags style; pills 86 -> 133 (47 tall,
           20/20/0/20 corners, 1px outline in the layer's colour when on),
           24px of bar below them.
     map   x 68 -> 1442 (1374 wide), shadow 0 4px 4px rgba(0,0,0,.25). The
           raster runs 109px up under the bar; the live map starts at the
           bar's bottom edge instead, which shows exactly the same area (630px
           tall) and keeps none of the map hidden.
     band  the drawing ground (216, 209, 199), the Linen pinstripe from x 924
           (61.1%) to the right edge, at the comp's 14.54px pitch.

   Three modes:
     interactive  html.lwh-js (set before first paint by the head script in
                  functions.php): the pills and the map show, and the places
                  list is visually hidden (it stays the screen-reader route).
     static       no JS, no key / Map ID / building location (is-static-mod),
                  or Google refused to load (is-failed-mod, set by the
                  script): no pills, no map, the places as a visible list.
     editor       is-preview-mod: the pills and a placeholder where the map
                  goes; never a live map.

   Block stylesheets print BEFORE reset.min.css and style.css (header.md, "CSS
   order trap"), so every rule here wins on specificity, never on order. The
   global :root :where(h2/h3/p) styles are (0,1,0) and print later, hence the
   two-class selectors on the headings.
--------------------------------------------------------------------------- */

.neighborhood-map--section {
	--nmap-ink: var(--wp--preset--color--deep-sea, #1b2632);
	/* The bar's heading: the AA shade of Ember (2026-10-17, DR-5). */
	--nmap-accent: var(--lwh-ember-on-linen, #8a4530);
	/* The comp's band under the bar: the drawing ground acf/availability uses,
	   one level off Linen. */
	--nmap-ground: #d8d1c7;
	/* The map style's own ground (docs/google-maps.md), shown while it loads. */
	--nmap-map-ground: #f9f4ee;
	/* Map gutter, height and the space under it (phones first). */
	--nmap-gutter: 15px;
	--nmap-height: min(115vw, 500px);
	--nmap-tail: 60px;

	position: relative;
	/* Over the pinned short hero (hero.css), like the intro and the bands. */
	z-index: 1;
	background-color: var(--nmap-ground);
	color: var(--nmap-ink);
}

/* The intro panel before it is Linen, and so is the bar: one surface, as the
   comp draws it. The intro's eyebrow-led tail is trimmed so the bar's heading
   sits where the comp puts it: its ink 92px below the intro's last line of
   body ink at 1512 (1346 -> 1438). Where :has() is unsupported the gap is
   just larger. */
.intro--section:has(+ .neighborhood-map--section) {
	--intro-pad-bottom: 32px;
	--intro-lead-tail: 0px;
}

/* Layer colours: the pill's text and outline, and the layer's pins. */
.neighborhood-map--section .color-ember-mod,
.neighborhood-map--pin.color-ember-mod,
.neighborhood-map--dot.color-ember-mod {
	--nmap-layer: var(--wp--preset--color--ember, #a35139);
}

.neighborhood-map--section .color-keanes-green-mod,
.neighborhood-map--pin.color-keanes-green-mod,
.neighborhood-map--dot.color-keanes-green-mod {
	--nmap-layer: var(--wp--preset--color--keanes-green, #34534d);
}

.neighborhood-map--section .color-slate-mod,
.neighborhood-map--pin.color-slate-mod,
.neighborhood-map--dot.color-slate-mod {
	--nmap-layer: var(--wp--preset--color--slate, #81a5a2);
}

.neighborhood-map--section .color-deep-sea-mod,
.neighborhood-map--pin.color-deep-sea-mod,
.neighborhood-map--dot.color-deep-sea-mod {
	--nmap-layer: var(--wp--preset--color--deep-sea, #1b2632);
}

/* --- The bar ------------------------------------------------------------------- */

.neighborhood-map--bar {
	position: relative;
	z-index: 2; /* its shadow falls on the map */
	padding: 24px 0 20px;
	background-color: var(--wp--preset--color--linen, #d7d0c7);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15);
	text-align: center;
}

.neighborhood-map--bar .neighborhood-map--eyebrow,
.neighborhood-map--places .neighborhood-map--group-title {
	margin: 0;
	color: var(--nmap-accent);
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: var(--wp--preset--font-size--eyebrow, 18px);
	font-weight: 700;
	line-height: 22px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* The bar's heading stays on one line on narrow phones (2026-10-16, Phase 7
   audit NB-2's side note): "Get to know the neighborhood" is 369.8px at 18px
   with its 0.1em tracking, so it broke onto two lines below 400. Below that
   it shrinks with the window, tracking and all (14px at 320), so it keeps
   the comp's tracked-caps look; 20.55 is its width over its font size and
   31px the container's 15px padding a side plus 1 to spare. Retune 20.55
   if the Heading field gets longer text. */
.neighborhood-map--bar .neighborhood-map--eyebrow {
	font-size: min(var(--wp--preset--font-size--eyebrow, 18px), calc((100vw - 31px) / 20.55));
}

/* The pills: hidden unless the script can drive them (or in the editor).

   Below 768, two rows of two (2026-10-15, Phase 7 audit NB-2). Left to wrap,
   the four broke 1 + 1 + 2 at 320-380 (Transit and Points of Interest each
   alone) and 3 + 1 at 555-665. The list's ::after is a zero-height flex item
   a whole row wide, ordered after the second pill, so the first two always
   share a row and the rest start the next. It makes a line of its own, with
   a row gap either side of it, hence the 5px row gap (10px between the two
   rows, as before). From 768 the four run in one row. */
.neighborhood-map--layers {
	display: none;
	flex-wrap: wrap;
	justify-content: center;
	gap: 5px 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

/* With the Heading field cleared the pills open the bar, so they lose the
   gap under it at every tier (two classes, over the tiers' margin-top). */
.neighborhood-map--layers:first-child {
	margin-top: 0;
}

.neighborhood-map--layers::after {
	content: "";
	flex-basis: 100%;
	order: 1;
}

.neighborhood-map--layers > li:nth-child(n+3) {
	order: 2;
}

:is(html.lwh-js .neighborhood-map--section:not(.is-static-mod):not(.is-failed-mod), .neighborhood-map--section.is-preview-mod:not(.is-static-mod)) .neighborhood-map--layers {
	display: flex;
}

.neighborhood-map--layers > li {
	margin: 0;
	padding: 0;
}

/* A pill: the comp's Tags style in the layer's colour; on, a 1px outline in
   that colour with the brand's clipped corner (20/20/0/20). The comp's pills
   are 47px tall at 18px; tablets get 16px type, every pill 44px tall. The
   tracking's trailing 0.1em is taken off the right padding so the ink stays
   centred.

   Phones (below 576): 15px type and 12px a side, so Transit and Points of
   Interest share a row from about 350px wide. Their text is 17.25 times the
   font size together (276px at 16px), plus 4 x 12 padding, 4 of border and
   the 8px gap, so below that the type shrinks with the window to keep them
   in one row: 13.1px at 320. Retune the 17.25 if the first two labels
   change; anything longer simply wraps. */
.neighborhood-map--section .neighborhood-map--layer {
	display: block;
	margin: 0;
	padding: 11px calc(12px - 0.05em) 11px calc(12px + 0.05em);
	border: 1px solid transparent;
	border-radius: var(--lwh-clip-corner, 20px) var(--lwh-clip-corner, 20px) 0 var(--lwh-clip-corner, 20px);
	background: none;
	color: var(--nmap-pill, var(--nmap-layer));
	font-family: var(--wp--preset--font-family--sans, sans-serif);
	font-size: min(15px, calc((100vw - 94px) / 17.25));
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
	cursor: pointer;
}

.neighborhood-map--section .neighborhood-map--layer[aria-pressed="true"] {
	border-color: var(--nmap-pill, var(--nmap-layer));
}

/* The pills' labels, and the outline that says a layer is on, in the AA
   shades on Linen (2026-10-17, DR-5; style.css): Ember's "Transit" 3.62 ->
   4.62:1, Slate's "Restaurants" 1.75 -> 4.65:1 (much darker: it no longer
   reads as Slate). Keane's Green (5.5:1) and Deep Sea (10:1) already pass.
   A variable of the pill's own, so the layer's pins and dots keep the
   palette colours. */
.neighborhood-map--section .neighborhood-map--layer.color-ember-mod {
	--nmap-pill: var(--lwh-ember-on-linen, #8a4530);
}

.neighborhood-map--section .neighborhood-map--layer.color-slate-mod {
	--nmap-pill: var(--lwh-slate-on-linen, #435d5b);
}

/* Hover: an underline in the pill's colour (our call; the comp has no hover),
   the floor tabs' treatment on the Availability page. */
@media (hover: hover) {
	.neighborhood-map--section .neighborhood-map--layer:hover {
		text-decoration: underline;
		text-decoration-color: currentColor;
		text-decoration-thickness: 1px;
		text-underline-offset: 6px;
	}
}

/* Keyboard focus only: the site's 2px ring, Deep Sea on Linen, following the
   clipped corner. A mouse click draws none. */
.neighborhood-map--section .neighborhood-map--layer:focus-visible {
	outline: 2px solid var(--nmap-ink);
	outline-offset: 3px;
}

/* --- The body: the map, or the places list -------------------------------------- */

.neighborhood-map--body {
	position: relative;
	padding-bottom: var(--nmap-tail);
}

.neighborhood-map--frame {
	display: none;
	position: relative;
	z-index: 1;
	padding: 0 var(--nmap-gutter);
}

:is(html.lwh-js .neighborhood-map--section:not(.is-static-mod):not(.is-failed-mod), .neighborhood-map--section.is-preview-mod:not(.is-static-mod)) .neighborhood-map--frame {
	display: block;
}

.neighborhood-map--map {
	position: relative;
	max-width: 1374px;
	height: var(--nmap-height);
	margin: 0 auto;
	overflow: hidden;
	background-color: var(--nmap-map-ground);
	box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

/* Pins are measured here before Google adopts them (js/neighborhood-map.js
   frames the map around their boxes). */
.neighborhood-map--measure {
	position: absolute;
	top: 0;
	left: 0;
	width: max-content;
	visibility: hidden;
	pointer-events: none;
}

/* The editor's stand-in for the map: same box, no map load. */
.neighborhood-map--placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 100%;
	padding: 24px;
	text-align: center;
}

.neighborhood-map--placeholder p {
	margin: 0;
	font-size: 16px;
	line-height: 1.4;
}

/* An editor-only note (missing key, Map ID or location). */
.neighborhood-map--note {
	margin: 0;
	padding: 24px var(--nmap-gutter, 15px) 0;
	font-size: 16px;
	line-height: 1.4;
	text-align: center;
}

/* --- The places list ---------------------------------------------------------------
   Visible in the static modes; with the map it is the screen-reader copy of
   the pins (they are aria-hidden), hidden like .screen-reader-text. */

.neighborhood-map--places-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 36px 30px;
	padding-top: 40px;
	text-align: left;
}

.neighborhood-map--places .neighborhood-map--group-title {
	display: flex;
	align-items: center;
	gap: 10px;
	color: var(--nmap-ink);
}

/* A swatch of the layer's colour: Slate and Ember type would fall short of
   AA on this ground, so the colour rides on a square, not on the title. */
.neighborhood-map--places .neighborhood-map--group-title::before {
	content: "";
	flex: 0 0 auto;
	width: 12px;
	height: 12px;
	border-radius: 2px 6px 0 6px;
	background-color: var(--nmap-layer);
}

.neighborhood-map--places .neighborhood-map--list {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
	font-size: 18px;
	line-height: 26px;
}

.neighborhood-map--places .neighborhood-map--list > li {
	margin: 0;
	padding: 0;
}

:is(html.lwh-js .neighborhood-map--section:not(.is-static-mod):not(.is-failed-mod), .neighborhood-map--section.is-preview-mod:not(.is-static-mod)) .neighborhood-map--places {
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px);
	position: absolute !important;
	white-space: nowrap;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* --- Pins (the markers' content, built by js/neighborhood-map.js) ---------------
   Inside Google's .gm-style, which sets its own font: everything is explicit
   here. The marker is .neighborhood-map--pin, a box that includes the room the
   walk badge overhangs (so the collision engine sees the badge); the label
   pill inside it is centred on the place. The comp's shape: square bottom
   corners, one large top corner, the badge (if any) over the other. The comp
   draws the label at ~9.5px; it is 13px here (12 on phones) so it reads on a
   live map. */

.neighborhood-map--pin {
	--nmap-layer: var(--wp--preset--color--ember, #a35139);
	display: block;
	font-family: var(--wp--preset--font-family--sans, sans-serif);
}

/* Room for the badge: it overhangs the label's top-right corner by these. */
.neighborhood-map--pin.has-walk-mod {
	padding: 15px 12px 0 0;
}

.neighborhood-map--pin-label {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 7px 12px;
	border-radius: 2px 14px 0 0;
	background-color: var(--nmap-layer);
	color: #fff;
	font-size: 12px;
	font-weight: 300;
	line-height: 15px;
	letter-spacing: 0.02em;
	text-align: center;
	white-space: nowrap;
}

/* With a badge on the top-right corner the large radius moves to the left
   (Pike Place Market, Seattle Aquarium in the comp) and the text keeps clear
   of the badge. */
.neighborhood-map--pin.has-walk-mod .neighborhood-map--pin-label {
	padding-right: 32px;
	border-radius: 14px 2px 0 0;
}

/* White reads 2.7:1 on Slate; Deep Sea reads 5.7:1. */
.neighborhood-map--pin.is-dark-mod .neighborhood-map--pin-label {
	color: var(--wp--preset--color--deep-sea, #1b2632);
}

.neighborhood-map--pin-name {
	display: block;
}

/* Two lines, "10 min." over "walk", as the comp draws it. */
.neighborhood-map--pin-walk {
	position: absolute;
	top: -15px;
	right: -12px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 40px;
	height: 40px;
	padding: 0 3px;
	border-radius: 50%;
	background-color: var(--nmap-layer);
	box-shadow: 0 0 0 1.5px #fff;
	font-size: 9.5px;
	line-height: 10px;
	letter-spacing: 0;
	white-space: normal;
}

/* The dot under each label (always shown; the label covers it when there is
   room for the label). */
.neighborhood-map--dot {
	--nmap-layer: var(--wp--preset--color--ember, #a35139);
	box-sizing: border-box;
	width: 12px;
	height: 12px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: var(--nmap-layer);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* The building: a Deep Sea square turned to the street grid (downtown's
   avenues run about 32 degrees off north, so the comp's diamond sits square
   to its block), with the dome mark upright inside it. The element is the
   diamond's bounding box (side x 1.378), centred on the building. */
.neighborhood-map--building {
	--nmap-side: 46px;
	position: relative;
	width: calc(var(--nmap-side) * 1.378);
	height: calc(var(--nmap-side) * 1.378);
}

.neighborhood-map--building::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--nmap-side);
	height: var(--nmap-side);
	margin: calc(var(--nmap-side) / -2) 0 0 calc(var(--nmap-side) / -2);
	background-color: var(--wp--preset--color--deep-sea, #1b2632);
	transform: rotate(-32deg);
}

.neighborhood-map--building .neighborhood-map--building-mark {
	position: absolute;
	top: 50%;
	left: 50%;
	width: calc(var(--nmap-side) * 0.7);
	max-width: none;
	height: auto;
	transform: translate(-50%, -50%);
}

/* --- Tablet ------------------------------------------------------------------------ */

@media (min-width: 576px) {
	.neighborhood-map--section .neighborhood-map--layer {
		padding: 11px calc(16px - 0.05em) 11px calc(16px + 0.05em);
		font-size: 16px;
	}
}

@media (min-width: 768px) {
	.neighborhood-map--section {
		--nmap-gutter: 30px;
		--nmap-height: 480px;
	}

	/* One row from here on the front end (the four pills need 682px at 768).
	   They still wrap, rather than overflow, in the block editor, where every
	   block is boxed to 900px while the desktop rules apply. */
	.neighborhood-map--layers {
		gap: 24px;
	}

	.neighborhood-map--layers::after {
		content: none;
	}

	.neighborhood-map--layers > li:nth-child(n+3) {
		order: 0;
	}

	.neighborhood-map--places-container {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.neighborhood-map--pin-label {
		padding: 8px 14px;
		font-size: 13px;
		line-height: 16px;
	}

	.neighborhood-map--pin.has-walk-mod .neighborhood-map--pin-label {
		padding-right: 34px;
	}
}

/* --- Desktop ----------------------------------------------------------------------- */

@media (min-width: 992px) {
	.neighborhood-map--section {
		/* 68px at 1512 (4.5vw), never under 30. */
		--nmap-gutter: max(30px, 4.5vw);
		/* 630px at 1512, the comp's visible map. */
		--nmap-height: clamp(480px, 41.667vw, 630px);
		--nmap-tail: 90px;
	}

	.intro--section:has(+ .neighborhood-map--section) {
		--intro-pad-bottom: 55px;
	}

	/* The comp's bar: 157px, the eyebrow line 30px down, the pills 34px under
	   it and 24px above the bar's edge. */
	.neighborhood-map--bar {
		padding: 30px 0 24px;
	}

	.neighborhood-map--layers {
		gap: 40px;
		margin-top: 34px;
	}

	.neighborhood-map--section .neighborhood-map--layer {
		padding: 11.5px calc(28px - 0.05em) 11.5px calc(28px + 0.05em);
		font-size: var(--wp--preset--font-size--eyebrow, 18px);
		line-height: 22px;
	}

	.neighborhood-map--places-container {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	/* The band's pinstripe, from 61.1% of the width to the right edge, behind
	   the map. Phones get the plain ground, as acf/feature's pinstripe does. */
	.neighborhood-map--body::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 0;
		left: 61.1%;
		right: 0;
		z-index: 0;
		background-image: url(../../images/pattern-linen-pinstripe.webp);
		background-repeat: repeat;
		background-size: 14.54px 4px;
		background-position: left top;
		pointer-events: none;
	}

	.neighborhood-map--places {
		position: relative;
		z-index: 1;
	}

	.neighborhood-map--building {
		--nmap-side: 60px;
	}
}

@media (min-width: 1200px) {
	/* The comp spreads the four pills over 956px; an even 66px gap gives the
	   same span. */
	.neighborhood-map--layers {
		gap: 66px;
	}
}