/**
 * Fixes for the vendored Leaflet.SimpleLocate demo.css (vendor/leaflet-simple-locate/demo.css),
 * which is the library's own demo-page stylesheet, not a drop-in for an
 * embedded map:
 *
 * - `.leaflet-simple-locate.button-locate` absolutely positions the control
 *   at 50% of the *viewport* height (`calc(var(--vh, 1vh) * 50)`, and we
 *   never define `--vh`), not the map's own height. On a map shorter than
 *   the viewport that lands below the map entirely, clipped out of view by
 *   the map container's `overflow: hidden`. Put it back in Leaflet's normal
 *   top-left control stack instead.
 * - Every themed color (`border`, icon `fill`, focus ring) reads
 *   `rgba(var(--primary-rgb), ...)`, and `--primary-rgb` is never defined
 *   either, so they silently fall back to CSS initial values (black/none)
 *   instead of erroring. Define it so the control matches the plugin's red.
 */

.leaflet-simple-locate {
	--primary-rgb: 197, 32, 38;
}

.leaflet-simple-locate.button-locate {
	position: static !important;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	margin: 0 !important;
}

/* js/geolocate.js wraps the button in this so the out-of-bounds message
   (below) can be positioned relative to it. The wrap takes over the
   button's own corner-stack spacing, since the button itself is no longer
   a direct child of Leaflet's .leaflet-top.leaflet-left.
   float+clear: Leaflet stacks every .leaflet-control this same way
   (float:left; clear:both) specifically so each one drops below the
   previous regardless of how much horizontal room the corner has. Our wrap
   isn't a .leaflet-control, so without this it could sit beside the zoom
   control (to its right) instead of under it whenever there's width to
   spare, rather than always stacking underneath.
   flow-root: a plain block wouldn't contain a *floated* child's height
   (our own button is still `.leaflet-control`, so still floated), which
   collapsed this to 0px and threw off the message's absolute-position
   anchor below. flow-root establishes a block formatting context so the
   wrap sizes to the button properly. */
.cosi-map-locate-wrap {
	position: relative;
	display: flow-root;
	float: left;
	clear: both;
	margin: 10px 0 0 10px;
}

/* Shown instead of panning when a "find my location" result falls outside
   the map's own bounds. Anchored over the button itself (same top-left
   corner, same footprint at minimum) rather than stacked below it, so
   clicking the exact spot that triggered it dismisses it again. */
.cosi-map-locate-message {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	/* Leaflet sets pointer-events:none on the corner container and only
	   opts .leaflet-control elements back in; this div isn't one, so
	   without this a real click falls straight through to the map below. */
	pointer-events: auto;
	display: flex;
	align-items: center;
	width: max-content;
	max-width: 180px;
	min-height: 100%;
	box-sizing: border-box;
	padding: .5em .65em;
	background: #fff;
	border: 1px solid #c52026;
	color: #c52026;
	font-size: .75rem;
	line-height: 1.3;
	box-shadow: rgba(0, 0, 0, .2) 0 1px 4px;
	cursor: pointer;
}