/**
 * Front-end styles for WP Location Map.
 *
 * Deliberately minimal and theme/style-agnostic: this file ships ONLY the rules that
 * are functionally required for the feature to work. All appearance (spacing, colors,
 * borders, backgrounds, focus styling) is left to the active theme.
 *
 *   1. `.wplm-map` height — Leaflet renders a 0px-tall (invisible) map without an
 *      explicit container height, so a height is functionally required.
 *   2. `.screen-reader-text` — the archive/taxonomy fallback list is markers-only, so
 *      it must stay visually hidden (but in the accessibility tree) without depending
 *      on the theme providing this utility.
 *   3. `.wplm-cluster-bubble` (FEAT-016) — the structural scaffold for the cluster
 *      bubble divIcon. The bubble's COLORS are applied inline per-cluster (dominant
 *      term color + contrast-picked label color), never here; these rules only make
 *      the bubble fill its icon box, read as a round marker (matching the circular
 *      Location markers it aggregates), and center the count label over the disk —
 *      without them the count renders as loose text at the icon's top-left corner,
 *      misaligned from the colored area. Class hooks for themes: `.wplm-cluster`
 *      (the divIcon root) and `.wplm-cluster-bubble`.
 *
 * FEAT-018 — REQUESTED styling (refined invariant B2: "no UNREQUESTED decorative
 * CSS"; Patrick explicitly requested the rules below, tracked per-ticket):
 *
 *   4. `.wplm-locate-button` — the icon-only locate control button, styled to match
 *      Leaflet's zoom controls. Leaflet's vendored control chrome targets
 *      `.leaflet-bar a` (ANCHORS only — gotcha A.25), so the real `<button>` needs
 *      the equivalent rules explicitly. Mirrored from leaflet.css 1.9.4:
 *      26×26px (30×30 under `.leaflet-touch`), #fff background, black glyph,
 *      #f4f4f4 hover/focus background, 4px radius (2px touch), and the
 *      `.leaflet-disabled` treatment mapped onto `[aria-disabled="true"]` (the
 *      control uses aria-disabled, not the disabled property, to keep keyboard
 *      focus). Flex centering replaces the anchors' line-height text centering
 *      because the glyph is an SVG, not a text character.
 *
 *   5. `.leaflet-control-attribution` font size — Patrick's verbatim request.
 *
 * FEAT-026 — the "Search as I move the map" viewport→loop sync control:
 *
 *   6. `.wplm-viewport-button` — the icon-only viewport control button, mirroring the
 *      FEAT-018 `.wplm-locate-button` chrome (26×26, 30×30 touch, #fff/#f4f4f4, black
 *      glyph) so the new control sits in the Leaflet bar consistently with the locate
 *      and zoom controls. No new decorative idiom is introduced.
 *   7. `.wplm-viewport-panel` / `.wplm-viewport-count` — MINIMAL structural rules only
 *      (the panel sits below the bar at a sane max-width, mirroring the locate-status
 *      layout). Appearance is left to the theme.
 *   8. `.wplm-loop-hidden` — the FUNCTIONALLY-REQUIRED display:none class the JS engine
 *      toggles on out-of-bounds loop items. THE single core loop-visibility authority
 *      (invariant 1): without this rule the class does nothing and the feature is inert.
 *
 * FEAT-027 — bidirectional loop<->marker hover highlighting:
 *
 *   9. `.wplm-loop-hover` / `.wplm-marker-hover` — the visible highlight the JS engine
 *      toggles when a loop item or its marker is hovered/focused. This styling IS the
 *      requested feature (a minimal visible default is in scope), but per the
 *      style-agnostic invariant it is deliberately RESTRAINED and theme-NEUTRAL: a
 *      currentColor outline + a subtle shadow + a raised z-index — NO opinionated colors
 *      that would fight a theme. Both classes are documented theme override hooks
 *      (docs/EXTENDING.md): a theme can restyle the highlight by targeting them.
 */

/* Required by Leaflet: the map container needs a non-zero height to render.
   Exposed as a custom property with a sensible default so a theme can override it. */
.wplm-map {
	height: var(--wplm-map-height, 400px);
}

/* FEAT-031: optional per-breakpoint heights. The nested var() fallbacks ARE the
   inheritance rule — an unset tablet height falls back to the desktop value, and an
   unset mobile height to the tablet value and then the desktop value — so a map that
   sets none of them keeps exactly the height above. Widths are Blocksy's breakpoints;
   the wplm_map_breakpoints filter re-emits these two rules when a site changes them. */
@media (max-width: 999.98px) {
	.wplm-map {
		height: var(--wplm-map-height-tablet, var(--wplm-map-height, 400px));
	}
}

@media (max-width: 689.98px) {
	.wplm-map {
		height: var(
			--wplm-map-height-mobile,
			var(--wplm-map-height-tablet, var(--wplm-map-height, 400px))
		);
	}
}

/* Canonical WordPress visually-hidden helper (matches core/themes' .screen-reader-text).
   Required so the markers-only fallback list stays hidden without relying on the theme. */
.wplm-map-wrap .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* FEAT-016 cluster bubble scaffold (structural only — see header note 3).
   Colors are intentionally ABSENT here: background + label color are set inline
   per-cluster from the dominant term color (style-agnostic invariant B2). */
.wplm-cluster .wplm-cluster-bubble {
	align-items: center;
	border-radius: 50%;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}

/* FEAT-018 item 1 (requested): icon-only locate button matching the zoom controls.
   Mirrors the vendored leaflet.css `.leaflet-bar a` chrome — which applies to anchors
   only (gotcha A.25) — onto our real <button>. A single-button bar matches the
   anchors' :first-child + :last-child treatment: all four corners rounded, no
   border-bottom. */
.wplm-locate-control .wplm-locate-button {
	align-items: center;
	background-color: #fff;
	border: 0;
	border-radius: 4px;
	color: black;
	cursor: pointer;
	display: flex;
	height: 26px;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 26px;
}

/* Mirrors `.leaflet-bar a:hover, .leaflet-bar a:focus`. The UA focus outline is NOT
   suppressed — keyboard focus stays visible. */
.wplm-locate-control .wplm-locate-button:hover,
.wplm-locate-control .wplm-locate-button:focus {
	background-color: #f4f4f4;
}

/* Mirrors `.leaflet-bar a.leaflet-disabled` for the locating state (the control sets
   aria-disabled, never the disabled property, to keep keyboard focus — FEAT-017). */
.wplm-locate-control .wplm-locate-button[aria-disabled='true'] {
	background-color: #f4f4f4;
	color: #bbb;
	cursor: default;
}

/* Mirrors `.leaflet-touch .leaflet-bar a` (30×30) + its 2px first/last-child radius. */
.leaflet-touch .wplm-locate-control .wplm-locate-button {
	border-radius: 2px;
	height: 30px;
	width: 30px;
}

/* FEAT-018 item 3 (requested, verbatim). */
.leaflet-container .leaflet-control-attribution { font-size: 8px; }

/* FIX-008 (requested): the locate status renders BELOW the icon bar, never
   inside it — the bar stays a compact square. Success messages are
   screen-reader-only (the dropped pin is the visual feedback); errors and
   the transient locating note show here, wrapping at a sane width. */
.wplm-locate-wrap .wplm-locate-status {
	margin: 4px 0 0;
	max-width: 220px;
}

/* FEAT-026 item 6: the viewport control button mirrors the locate button chrome
   (see item 4) so it reads as part of the same Leaflet bar. Same source values from
   leaflet.css 1.9.4: 26×26 (30×30 touch), #fff background, black glyph, #f4f4f4
   hover/focus background, 4px radius (2px touch). Flex-centered for the SVG glyph. */
.wplm-viewport-control .wplm-viewport-button {
	align-items: center;
	background-color: #fff;
	border: 0;
	border-radius: 4px;
	color: black;
	cursor: pointer;
	display: flex;
	height: 26px;
	justify-content: center;
	margin: 0;
	padding: 0;
	width: 26px;
}

.wplm-viewport-control .wplm-viewport-button:hover,
.wplm-viewport-control .wplm-viewport-button:focus {
	background-color: #f4f4f4;
}

.leaflet-touch .wplm-viewport-control .wplm-viewport-button {
	border-radius: 2px;
	height: 30px;
	width: 30px;
}

/* FEAT-026 item 7: the panel sits BELOW the icon bar (mirroring the locate status),
   never inside it, so the bar stays a compact square. Structural only — spacing and a
   sane wrap width; all other appearance is the theme's. */
.wplm-viewport-wrap .wplm-viewport-panel {
	margin: 4px 0 0;
	max-width: 220px;
}

.wplm-viewport-wrap .wplm-viewport-count {
	margin: 4px 0 0;
}

/* FEAT-026 item 8: THE functionally-required loop-visibility class. The viewport
   engine toggles this on out-of-bounds loop items; without the rule the feature is
   inert. The single core authority that hides a loop item (invariant 1). */
.wplm-loop-hidden {
	/* !important: themes render archive cards in a flex/grid container whose own
	   display rule outranks a bare `display: none`, leaving the class applied but
	   the card visible (the count updates, the loop doesn't). Mirrors the proven
	   WLM FEAT-007 fix (.wplm-listing-loop-hidden). FIX-013. */
	display: none !important;
}

/* FEAT-027 item 9: the bidirectional hover highlight. RESTRAINED and theme-neutral —
   a currentColor outline + subtle shadow so the correlation reads on any theme without
   imposing a brand color. Themes can override either class to restyle the highlight. */

/* A highlighted LOOP item (set when its marker is hovered). Outline (not border) so it
   never shifts layout; offset inward so it hugs the card. */
.wplm-loop-hover {
	outline: 2px solid currentColor;
	outline-offset: -2px;
}

/* A highlighted MARKER element (set when its loop item is hovered/focused). A subtle
   drop-shadow halo + raised stacking so the dot/pin/bubble stands out above its peers.
   Scoped under .wplm-map-wrap so it only ever targets this plugin's map markers. */
.wplm-map-wrap .wplm-marker-hover {
	filter: drop-shadow(0 0 4px currentColor);
	z-index: 1000;
}

/* The default single marker is an SVG circleMarker `<path>`, where the rule above
   is invisible: `z-index` does not apply to SVG elements (Leaflet's bringToFront
   re-appends the node for stacking) and a currentColor drop-shadow is imperceptible
   on a thin ring. Bump the stroke so a hovered single marker is clearly highlighted.
   Author CSS overrides Leaflet's `stroke-width` presentation attribute (default 2);
   HTML divIcon markers/clusters keep the drop-shadow rule above. FIX-014. */
.wplm-map-wrap path.wplm-marker-hover {
	stroke-width: 5px;
}