/* wwh/geo-map-vector — frontend + editor */
.wwh-geomapv {
	--wwh-geomapv-h: 560px;
	position: relative;
	margin: 0 0 1.5rem;
	font-family: var( --wp--preset--font-family--body, system-ui, sans-serif );
}

/* Filter chips */
.wwh-geomapv__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}
.wwh-geomapv__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.35rem 0.85rem;
	background: rgba( 255, 255, 255, 0.85 );
	color: var( --wp--preset--color--ink, #241823 );
	border: 1px solid rgba( 36, 24, 35, 0.18 );
	border-radius: 999px;
	/* Never squeeze: in a nowrap strip a shrinking chip wrapped its label onto
	   three lines and stretched every chip to 67px tall. */
	flex: 0 0 auto;
	white-space: nowrap;
	font-size: var(--wp--preset--font-size--caption);
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}
.wwh-geomapv__chip:hover {
	background: #fff;
	border-color: rgba( 36, 24, 35, 0.35 );
}
.wwh-geomapv__chip.is-active {
	background: var( --wp--preset--color--ink, #241823 );
	color: #f2e6d8;
	border-color: var( --wp--preset--color--ink, #241823 );
}
.wwh-geomapv__chip-dot {
	width: 0.5rem; height: 0.5rem;
	border-radius: 50%;
	display: inline-block;
}

/* Canvas */
.wwh-geomapv__canvas {
	width: 100%;
	height: var( --wwh-geomapv-h );
	background: #f2e6d8;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba( 36, 24, 35, 0.08 ), 0 4px 12px rgba( 36, 24, 35, 0.05 );
	position: relative;
}

.wwh-geomapv__noscript,
.wwh-geomapv__error {
	padding: 2rem;
	text-align: center;
	color: var( --wp--preset--color--ink, #241823 );
	font-style: italic;
}

/* Pin markers (DOM elements created by view.js) */
.wwh-geomapv__pin {
	cursor: pointer;
	transition: transform 150ms ease;
}
.wwh-geomapv__pin:hover {
	transform: translateY( -2px ) scale( 1.06 );
}
.wwh-geomapv__pin.is-focused {
	animation: wwh-geomapv-pulse 2s ease;
}
@keyframes wwh-geomapv-pulse {
	0%, 100% { transform: scale( 1 ); }
	30% { transform: scale( 1.25 ); }
}

/* Today's wwh/pinned-today pick: a soft ring breathing out from the pin head.
   A pseudo-element, not a transform — MapLibre positions the marker with one. */
.wwh-geomapv__pin.is-pinned {
	z-index: 2;
}
.wwh-geomapv__pin.is-pinned::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 14px;
	width: 28px;
	height: 28px;
	margin: -14px 0 0 -14px;
	border-radius: 50%;
	box-shadow: 0 0 0 0 rgba( 255, 255, 255, 0.9 ), 0 0 0 0 rgba( 36, 24, 35, 0.35 );
	animation: wwh-geomapv-ring 2.4s ease-out infinite;
	pointer-events: none;
}
@keyframes wwh-geomapv-ring {
	0% { box-shadow: 0 0 0 0 rgba( 255, 255, 255, 0.9 ), 0 0 0 0 rgba( 36, 24, 35, 0.35 ); }
	70%, 100% { box-shadow: 0 0 0 14px rgba( 255, 255, 255, 0 ), 0 0 0 20px rgba( 36, 24, 35, 0 ); }
}
@media ( prefers-reduced-motion: reduce ) {
	.wwh-geomapv__pin.is-pinned::before {
		animation: none;
		box-shadow: 0 0 0 4px rgba( 255, 255, 255, 0.85 );
	}
}

/* Popup — sit above any page overlays (e.g. home Explore glass card). */
.wwh-geomapv .maplibregl-popup {
	z-index: 20;
}
.wwh-geomapv .maplibregl-popup-content,
.maplibregl-popup-content:has( .wwh-geomapv__popup ) {
	padding: 0.9rem 1.1rem;
	border-radius: 10px;
	box-shadow: 0 6px 24px rgba( 36, 24, 35, 0.18 ), 0 1px 3px rgba( 36, 24, 35, 0.08 );
	background: #fff;
	border: 1px solid rgba( 36, 24, 35, 0.08 );
}
.maplibregl-popup-close-button:has( ~ .wwh-geomapv__popup ),
.wwh-geomapv .maplibregl-popup-close-button {
	font-size: var(--wp--preset--font-size--display-h-3);
	/* F-6 (same sweep): a close control is a UI component, so the AA threshold
	   is 3:1 rather than 4.5:1 — but 0.55 alpha sat at 3.84:1 over a white popup
	   and only 3.35:1 over cream, i.e. failing on the background it actually
	   renders against. Use the caption token here too. */
	color: var( --wp--preset--color--ink-caption, #5A544D );
	padding: 0 0.4rem;
}
.wwh-geomapv__popup {
	font-family: inherit;
	max-width: 260px;
}
.wwh-geomapv__popup-link {
	display: block;
	font-weight: 600;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.25;
	color: var( --wp--preset--color--ink, #241823 );
	text-decoration: none;
	margin-bottom: 0.3rem;
	transition: color 120ms ease;
}
.wwh-geomapv__popup-link:hover,
.wwh-geomapv__popup-link:focus { text-decoration: underline; }
.wwh-geomapv__popup-name { font-weight: 600; font-size: var(--wp--preset--font-size--body); line-height: 1.25; }
.wwh-geomapv__popup-meta {
	margin: 0.2rem 0 0;
	font-size: var(--wp--preset--font-size--caption);
	text-transform: uppercase;
	color: rgba( 36, 24, 35, 0.6 );
	letter-spacing: 0.06em;
}
.wwh-geomapv__popup-note {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--caption);
	font-style: italic;
	line-height: 1.45;
	color: rgba( 36, 24, 35, 0.85 );
}

/* Legend */
.wwh-geomapv__legend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.75rem 0 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--caption);
	color: rgba( 36, 24, 35, 0.7 );
}
.wwh-geomapv__legend-row dt {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-weight: 400;
}

/*
 * Dark-band context. The legend inherits dark ink that measures 5.92:1 on the
 * cream surface but only 1.05:1 when the block sits inside a dark section —
 * i.e. invisible, which is what /attractions/ shipped. Re-colour the legend
 * (and the attribution below it) to the design system's inverse-ink token:
 * rgba(255,255,255,0.65) on #18140F measures 8.16:1.
 *
 * Scoped to the dark wrapper so light-surface usages keep the original ink.
 */
.has-warm-obsidian-background-color .wwh-geomapv__legend,
.has-nocturne-background-color .wwh-geomapv__legend,
.has-warm-obsidian-background-color .wwh-geomapv__attribution,
.has-nocturne-background-color .wwh-geomapv__attribution {
	color: var(--wp--preset--color--ink-muted-dark, rgba(255, 255, 255, 0.65));
}
.wwh-geomapv__legend-dot {
	width: 0.5rem; height: 0.5rem;
	border-radius: 50%;
	display: inline-block;
}

/* F-6: was rgba( 36, 24, 35, 0.55 ), which measures 3.68:1 — under the 4.5:1
   AA needs for normal text. This is the OpenFreeMap / OpenStreetMap credit that
   both licences contractually require, so "it is only small print" is not a
   defence: unreadable attribution is failed attribution. ink-caption is the
   theme's caption colour and gives 6.52:1 on cream, 7.47:1 on white tiles.

   Note this is the exact trap the shop-grid comment warns about — dimming with
   a lower opacity instead of choosing a real colour. */
.wwh-geomapv__attribution {
	margin: 0.5rem 0 0;
	font-size: var(--wp--preset--font-size--cap);
	color: var( --wp--preset--color--ink-caption, #5A544D );
	text-align: right;
}
.wwh-geomapv__attribution a { color: inherit; }

/* Site mode ("This is where we are"): a directions link under the map. */
.wwh-geomapv__footer {
	margin: 0.75rem 0 0;
	text-align: center;
	font-style: italic;
}
.wwh-geomapv__directions {
	color: var( --wp--preset--color--ink, #241823 );
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
}
.wwh-geomapv__directions:hover,
.wwh-geomapv__directions:focus-visible {
	opacity: 0.7;
}
.has-warm-obsidian-background-color .wwh-geomapv__directions,
.has-nocturne-background-color .wwh-geomapv__directions {
	color: var(--wp--preset--color--warm-cream, #f2e6d8);
}

/* Zoom controls — larger, scoped to our map block only. */
.wwh-geomapv .maplibregl-ctrl-group {
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba( 36, 24, 35, 0.18 );
	overflow: hidden;
	background: #fff;
}
.wwh-geomapv .maplibregl-ctrl-group button {
	width: 44px;
	height: 44px;
}
.wwh-geomapv .maplibregl-ctrl-group button + button {
	border-top: 1px solid rgba( 36, 24, 35, 0.12 );
}
.wwh-geomapv .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
	background-size: 22px 22px;
}
.wwh-geomapv .maplibregl-ctrl-bottom-right {
	margin: 0 1rem 1rem 0;
}

/* Keyboard focus ring — see accommodation-map/style.css. Targets MapLibre's
   marker wrapper, which carries role=button + tabindex, not .wwh-geomapv__pin. */
.maplibregl-marker:focus-visible {
	outline: 2px solid var( --wp--preset--color--ink-primary, #1A1613 );
	outline-offset: 2px;
	border-radius: 4px;
}

/* MapLibre's own attribution markup (not ours) renders its links with colour
   alone, which axe flags as link-in-text-block — links must be distinguishable
   without relying on colour (WCAG 1.4.1). Underline them. */
.maplibregl-ctrl-attrib .maplibregl-ctrl-attrib-inner a,
.maplibregl-ctrl-attrib a {
	text-decoration: underline;
}