/**
 * Durham Pre-K Site Locator — map enhancement styles.
 *
 * Loaded only when the supplementary map is present. Inherit-first like
 * locator.css (no font-family); every themeable value reuses the same --dpk-*
 * tokens defined on .dpk-locator (custom properties inherit into the Leaflet
 * panes, which live inside the locator section).
 */

/* No margin-top. In a narrow container the map REPLACES the list rather than following it,
   so a gap here read as an inconsistency: the list started 10px under the view
   switch and the map started 27px under it (the 16px --dpk-gap plus the shared
   spacing). In a wide container the two-panel rule in locator.css already zeroes this
   margin so the map aligns with the sidebar, and with no JS the map never renders
   — which left mobile Map View as the only place this margin was ever visible,
   and the only place it was wrong. */
.dpk-map {
	position: relative; /* Positioning context for map-relative UI. */
	border: 1px solid var( --dpk-color-divider );
	overflow: hidden;
	/* Contain Leaflet's z-index scale. Leaflet numbers its panes and controls up to
	   1000 (`.leaflet-bottom`), and with `z-index: auto` here those numbers competed
	   in the ROOT stacking context — so the attribution chip painted over a sibling
	   that follows the map in the DOM. Measured symptom: the mobile card's wedge
	   disappeared behind the attribution bar. `0` makes this element a stacking
	   context, so the whole map stacks as one box in DOM order and its internals keep
	   their order relative to each other. */
	z-index: 0;
}

/* Leaflet needs an explicit height on its container. */
.dpk-map-canvas {
	height: 420px;
	width: 100%;
}

/* Keep Leaflet's controls/text readable against the theme; don't fight fonts.

   The white background is load-bearing, not decorative: Leaflet's default is #ddd,
   and the RASTER tiles below are faded with `opacity( 70% )`, so part of what you
   see on every tile is whatever the pane behind it is — the gray was mixing into
   the whole map and dulling it (designer's call, 2026-07-24). White lets the tint
   read clean. Change one and re-check the other. (The fade started at 50% and was
   lifted to 70% the same day; the rule itself is ~30 lines down, so keep the two in
   step.) Scoped to `.dpk-map` rather than a bare `.leaflet-container` so we don't
   restyle any other Leaflet map on the page. */
.dpk-map .leaflet-container {
	font: inherit;
	background: #fff;
}

/* ------------------------------------------------------------------ Tiles */

/* Muted tiles to match the mockups. Applied to the tiles ONLY so pins and controls
   keep their full color. Designer's stack (2026-07-23): desaturated and faded to a
   pale blue tint — full grayscale read as too detached from the surrounding brand
   colors, and the fade keeps plenty of contrast under the markers.

   The two functions do separate jobs, which is what makes this tunable:
   `opacity()` is the CONTRAST knob (the tiles paint over the white pane, so the
   lower it goes the more white mixes into everything) and `saturate()` is the
   COLOR knob. They move independently — 50% → 70% here lifted measured contrast
   by about a third while colorfulness barely moved (2026-07-24, option C of seven
   shown to the designer).
   Don't reach for `contrast()` to firm this up: these tiles are predominantly
   light, so it pushes the majority toward white and reads as a brightness control
   (measured: mean luminance 235 → 246, separation flat). Move the fade instead.
   The `opacity()` here is a filter function, not the `opacity` property: it fades each
   tile against the map pane's background rather than the page, and it does not create
   a stacking context on the tile the way the property would.

   SCOPE (2026-07-24): this now applies to the RASTER FALLBACK ONLY. The default
   basemap is the vendored Liberty vector style, which is muted at the style level
   instead — see the `--dpk-map-*` tokens in locator.css. That distinction matters:
   `opacity()` is a whole-pixel operation, so on raster tiles it fades the label
   text by exactly as much as it fades the terrain, which is what made the highways
   around Durham unreadable in the first place. The vector path mutes the geometry
   and leaves labels and route shields at full contrast. Don't "unify" these two
   treatments — they are different because the media are different. */
.dpk-map.is-raster-basemap .leaflet-tile {
	filter: saturate( 0.2 ) opacity( 70% ) hue-rotate( 80deg );
}

/* MapLibre paints into a canvas that Leaflet positions; it must not intercept the
   pointer events Leaflet's own handlers rely on, and it sits below every marker. */
.dpk-map .maplibregl-canvas-container,
.dpk-map .maplibregl-canvas {
	outline: none;
}

/* -------------------------------------------------------------- Attribution */

/* Smaller, quieter attribution than Leaflet's default: 10px muted text on a
   translucent white chip. Kept legible and AA — muted (#5c6470 ≈ 5.98:1) for the
   text and primary blue for the OSM link, both over the near-white background. */
.dpk-map .leaflet-control-attribution {
	padding: 0 5px;
	background: rgba( 255, 255, 255, 0.85 );
	color: var( --dpk-color-muted );
	font-size: 10px;
	line-height: 1.6;
}

.dpk-map .leaflet-control-attribution a {
	color: var( --dpk-color-primary );
}

/* ------------------------------------------------------------------- Pins */

/* Custom SVG pin (location-dot): accent by default, primary when its site is the
   active/selected one. The divIcon container carries no default box/border. */
.dpk-pin-icon {
	background: none;
	border: 0;
}

.dpk-pin-icon .dpk-pin-svg {
	display: block;
	width: 26px;
	height: 34px;
	fill: var( --dpk-color-accent );
	filter: drop-shadow( 0 1px 1px rgba( 0, 0, 0, 0.35 ) );
}

/* The dot at the pin's heart. Font Awesome draws it as a HOLE in the teardrop, so
   the basemap used to show through every pin — visual noise anywhere pins overlap,
   and around Durham they overlap heavily. The <circle> that fills it is added in
   locator-map.js (pinMarkup); it needs its own fill because .dpk-pin-svg's is what
   colours the teardrop accent/primary. Opaque white, so it stays the same dot
   whatever is underneath. */
.dpk-pin-icon .dpk-pin-core {
	fill: #fff;
}

.dpk-pin-icon--active .dpk-pin-svg {
	fill: var( --dpk-color-primary );
}

/* "Your searched location" dot: a heavy black ring around a small white center —
   deliberately NOT a teardrop site pin and in no palette color at all, so it
   never reads as one of the results. Black + white also stays legible over every
   tile tone, which the old yellow dot did not. The border is what you see; the
   8px white core is the "hole" marking the exact point. Sized by border-box
   (.dpk-locator * sets it), so the dot is 18px overall and iconAnchor in
   searchDivIcon() centers on it. */
.dpk-search-marker {
	background: none;
	border: 0;
}

.dpk-search-marker .dpk-search-dot {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	border: 5px solid #000;
	box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.4 );
}

/* ---------------------------------------------------------------- Popups */

/* Minimal card: primary-blue background, white text, name + compact link row. */
.dpk-map .leaflet-popup-content-wrapper {
	background: var( --dpk-color-primary );
	color: var( --dpk-color-on-color );
	border-radius: var( --dpk-radius );
}

.dpk-map .leaflet-popup-tip {
	background: var( --dpk-color-primary );
}

.dpk-map .leaflet-popup-content {
	margin: 0.9rem 1.1rem;
}

.dpk-popup-name {
	display: block;
	/* Clear the top-right close button so a long name wraps instead of running
	   under the "X". */
	padding-right: 1.25rem;
	font-size: var( --dpk-fs-h3 );
	font-weight: var( --dpk-fw-bold );
	color: var( --dpk-color-on-color );
	margin-bottom: 0.45rem;
}

/* Keep the action row on ONE line (the popup has a min-width in JS to fit it), so
   "Website | Directions" never wraps. */
.dpk-popup-actions {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	white-space: nowrap;
	font-size: var( --dpk-fs-small );
}

/* The leading glyph before each popup link (earth-americas / directions) inherits
   the link color and gets trailing space to the label. Sizing, position and fade
   mirror the list's action links (see locator.css "Leading link icons") — the
   popup only ever carried its own copy of those numbers in order to match, so it
   follows the 2026-07-23 designer call back to 1em / no nudge / 40%.
   One difference worth knowing: these links are NOT flex, so the icon is an inline
   box riding on `.dpk-icon`'s `vertical-align: -0.125em` rather than being
   flex-centred on the line box. Both paths sit right at 1em with no transform.
   NOTE the fade lands differently here — the popup inverts the card, so this is
   40% WHITE on primary blue rather than 40% dark on white. Decorative + labelled
   either way, but it is the one place the designer has not seen. */
.dpk-map a.dpk-popup-link .dpk-icon {
	fill: currentColor;
	margin-right: 0.3em;
	width: 1em;
	height: 1em;
	transform: translateY( 0 );
	opacity: 0.4;
}

/* Scoped through `.dpk-map a.…` (specificity 0,2,1) so the white popup-link color
   wins over the theme's block link color, which otherwise tinted these the same
   blue as the popup background (the popup name is a <strong>, so it stayed white). */
.dpk-map a.dpk-popup-link {
	color: var( --dpk-color-on-color );
	font-weight: var( --dpk-fw-bold );
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-decoration: none;
}

.dpk-map a.dpk-popup-link:hover {
	text-decoration: underline;
}

/* A drawn rule, not a "|" glyph — same reasoning as the list's separator. Here the
   link is inline rather than a flex row, so no absolute positioning is needed: an
   EMPTY inline-block takes its baseline from its bottom margin edge, so a 0.76em
   box on `vertical-align: baseline` spans exactly baseline → cap height with no
   nudge at all. */
.dpk-map a.dpk-popup-link:not( :first-child )::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 0.76em;
	margin: 0 0.55em;
	vertical-align: baseline;
	background: var( --dpk-color-divider );
}

/* Close "X": our xmark icon (injected on popupopen). White, small, inset with
   padding so it clears the popup text. The selector must out-specify Leaflet's own
   `.leaflet-container a.leaflet-popup-close-button` (0,2,1) — hence the extra
   `.leaflet-popup a` qualifiers (0,3,1) — otherwise Leaflet's gray 16px default
   wins and none of this applies. */
.dpk-map .leaflet-popup a.leaflet-popup-close-button {
	top: 0.25rem;
	right: 0.25rem;
	width: 1.5rem;
	height: 1.5rem;
	padding: 0.35rem;
	box-sizing: border-box;
	color: var( --dpk-color-on-color );
	display: flex;
	align-items: center;
	justify-content: center;
}

.dpk-map .leaflet-popup a.leaflet-popup-close-button .dpk-icon {
	width: 0.7rem;
	height: 0.7rem;
	fill: currentColor;
}

/* --------------------------------------------------------------- Controls */

/* Zoom + locate as accent square blocks with white 14px icons (34px desktop,
   26px mobile). Overrides Leaflet's default 26px white buttons — including its
   rounded `.leaflet-bar` corners, so the blocks are truly square. */
.dpk-map .leaflet-bar {
	border-radius: 0;
}

/* Square the first/last button too: Leaflet rounds those outer corners via
   `.leaflet-touch .leaflet-bar a:first-child` (0,3,1), which outranks the plain
   `.dpk-map .leaflet-bar a` below — so match its specificity here. */
.dpk-map .leaflet-bar a:first-child,
.dpk-map .leaflet-bar a:last-child {
	border-radius: 0;
}

.dpk-map .leaflet-bar a {
	width: 34px;
	height: 34px;
	line-height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var( --dpk-color-accent );
	color: var( --dpk-color-on-color );
	border-bottom: 1px solid rgba( 255, 255, 255, 0.35 );
	border-radius: 0;
	font-size: 14px;
}

.dpk-map .leaflet-bar a:hover {
	background: var( --dpk-color-primary );
	color: var( --dpk-color-on-color );
}

.dpk-map .leaflet-bar a .dpk-icon {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

@container dpk-locator ( width < 750px ) {
	.dpk-map .leaflet-bar a {
		width: 26px;
		height: 26px;
		line-height: 26px;
	}
}

/* --------------------------------------------------- List ↔ map sync cues */

/* A list item highlighted because its marker (or the card itself) was selected.
   The full-bleed light selected-bg fill + blue name/links (locator.css) are the
   colour cue; this inset bar adds a structural (non-colour) cue. The card now
   carries a left padding (--dpk-pad-results), so the 4px bar sits in that gutter
   and no longer overlaps the card text. */
.dpk-site--active {
	box-shadow: inset 4px 0 0 0 var( --dpk-color-primary );
}

/* ------------------------------------------------- Mobile map-view card */

/* Fuller detail card shown at the bottom of the map in mobile Map View, where the
   list is off-screen. Reuses the .dpk-site card markup. Never shown on desktop
   (the minimal Leaflet popup is used there instead). */
/* Sits BELOW the map, in flow — not over it. As an overlay this covered up to 70%
   of an already-short mobile map, hiding the very pins it describes, including the
   selected one. Beneath it, the map stays whole and the blue
   `.dpk-pin-icon--active` pin is what ties the card to a place on the map. */
/* Flush against the map's bottom edge, not floating 16px below it (Jennifer,
   2026-07-28): the card is a detail panel FOR the pin above it, and a gap read as
   two unrelated blocks. The wedge below is the rest of that job. */
.dpk-map-mobile-card {
	position: relative; /* Containing block for the absolutely-positioned wedge. */
	margin-top: 0;
	/* Even inset on both sides (Jennifer, 2026-08-12). It was asymmetric — a wide
	   right gutter to clear the round close button, a narrow left one to pull the
	   icon column toward the edge — but the close button is gone (see below), so the
	   right gutter has nothing to keep clear and the tight left one read as cramped.
	   1rem is the middle ground: more air than the 0.5rem it had, well short of the
	   ~46px this started at (the card's own 16px plus the 30px `.dpk-site` inset that
	   used to stack on it), which is what drew the "less padding" note. */
	padding: 1rem 1rem 1.3rem;
	background: var( --dpk-color-selected-bg );
	border: 1px solid var( --dpk-color-divider );
	/* Thicker top edge in the primary color, echoing the selected pin. */
	border-top: 2px solid var( --dpk-color-primary );
	/* Where the wedge points. JS (positionWedge) sets it to the selected pin's own x
	   and keeps it there as the map moves; this fallback centres it if the card is
	   ever shown without a marker to aim at. */
	--dpk-wedge-x: 50%;
}

/* A small notch on the card's top edge, poking up over the map's bottom border —
   just far enough to read as "these details belong to that pin", not far enough to
   cover any of the map. Drawn in the same primary blue as the card's top border so
   the two read as one edge, and clipped from a box rather than built from border
   tricks so it can carry that colour from one token. Decorative: the tie between
   card and pin is also carried by the blue `.dpk-pin-icon--active` pin and by the
   card's own accessible name (the site name), so nothing depends on seeing it. */
.dpk-map-mobile-card::before {
	content: "";
	position: absolute;
	top: -8px;
	left: var( --dpk-wedge-x );
	width: 18px;
	height: 9px;
	margin-left: -9px;
	background: var( --dpk-color-primary );
	clip-path: polygon( 50% 0, 100% 100%, 0 100% );
	pointer-events: none;
}

@container dpk-locator ( width >= 750px ) {
	.dpk-map-mobile-card {
		display: none;
	}
}

.dpk-map-card-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* The card reuses the results-list `.dpk-site` markup, which brings its own
   `--dpk-pad-card`/`--dpk-pad-results` (30px each on mobile). Inside this card that
   would stack on the card's padding above, so the visible inset would be the sum of
   the two rather than the value set there — zero it and let the card own the inset.
   Safe from the `.dpk-site--active` 4px bar, which needs a left gutter to sit in:
   the card is built by renderItem() and never carries that class (the active state
   lives on the list copy of the record, off-screen in Map View). */
.dpk-map-card-list .dpk-site {
	padding: 0;
}

/* No close button on this card (Jennifer, 2026-08-12). It is mobile-only and sits
   in FLOW below the map rather than over it, so it hides nothing that needs
   dismissing: tapping another pin replaces its contents, and leaving Map View
   clears it. The button is not hidden but never built (locator-map.js), so no
   phantom control is left in the a11y tree. Keyboard/screen-reader users keep a
   dismissal — the card takes focus when it opens and Escape closes it, returning
   focus to the pin — which is why it needs a ring of its own below. The DESKTOP
   popup keeps its close button: that one is an overlay. */

/* Focus ring for the card itself: a plain <div> is not covered by the FOCUS
   section's a/button/input/select rule, and the UA default blue belongs to no part
   of this palette. Negative offset by the border width so the ring lands ON the
   card's own edge instead of floating outside it as a second box.
   `:focus-visible`, NOT the `:focus` its desktop cousin `.dpk-card-popup` uses —
   the two differ because the popup is a dialog that takes focus away from the page,
   while this card only ever takes focus in place of the close button that used to.
   The focus is programmatic either way, so the modality heuristic follows the input
   that opened the card: tapping a pin paints nothing (as tapping the old close
   button painted nothing), pressing Enter on one rings the card. A dark ring around
   the whole card on every tap is not a state a pointer user needs to see.
   The leading `.dpk-locator` is load-bearing: without it this TIES the FOCUS
   section's `.dpk-locator :focus{outline:none}` reset at 0-2-0 and loses on source
   order. Engines without `:focus-visible` fall outside that reset's `@supports`
   gate and keep the theme's own ring, so focus stays visible there (2.4.7). */
.dpk-locator .dpk-map-mobile-card:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: -1px;
}

/* Per-item "Show on map" control, injected by JS only when the map exists. The
   whole record is now the mouse click target (see locator.js/-map.js), so this
   button is visually hidden and serves as the keyboard/screen-reader affordance —
   it reveals itself when it receives keyboard focus. On mobile the List/Map toggle
   is the map affordance, so the button is fully hidden there (and would otherwise
   drive an off-screen map). */
@container dpk-locator ( width < 750px ) {
	.dpk-show-on-map {
		display: none;
	}
}

/* Same reasoning in list view: the map is hidden there, so this would send focus
   to a control that moves something nobody can see. The two class selectors outrank
   the `:focus`/`:focus-visible` reveal below (0-2-0 beats 0-1-1), so the button stays
   hidden even while tabbing. */
@container dpk-locator ( width >= 750px ) {
	.dpk-locator[data-dpk-view-style="list"] .dpk-show-on-map {
		display: none;
	}
}

.dpk-show-on-map {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
}

/* Reveal for keyboard users when focused. Styled as a plain accent text link (like
   the More Details / Directions action links), not a boxed button. It is a block-
   level sibling after .dpk-actions, so as an inline-block it lands on its own line
   and its focus ring hugs the text. The :focus-visible outline below is its cue. */
.dpk-show-on-map:focus,
.dpk-show-on-map:focus-visible {
	position: static;
	display: inline-block;
	width: auto;
	height: auto;
	margin: var( --dpk-gap-results-details ) 0 0;
	overflow: visible;
	clip: auto;
	white-space: normal;
	text-align: left;
	border: none;
	background: none;
	padding: 0;
	color: var( --dpk-color-accent );
	font-weight: var( --dpk-fw-bold );
	font-size: var( --dpk-fs-small );
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
}

.dpk-show-on-map:hover {
	text-decoration: underline;
}

/* On an active card the action links take the primary color; keep this in step. */
.dpk-site--active .dpk-show-on-map:focus,
.dpk-site--active .dpk-show-on-map:focus-visible {
	color: var( --dpk-color-primary );
}

/* Visible focus for the injected control, the map markers, and every Leaflet
   control button — matching locator.css's focus treatment (§8, 2.4.7): a hairline
   ring in the control's own text color. */
.dpk-show-on-map:focus-visible,
.dpk-map .leaflet-bar a:focus-visible,
.dpk-map .leaflet-popup-close-button:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}

/* Markers keep a 2px ACCENT ring, and deliberately so. `currentColor` there is the
   inherited body text color, and the ring lands on map tiles — an uncontrolled,
   photographic-ish backdrop where a thin dark line can fall below 3:1 against
   whatever is under it (1.4.11). The accent at 2px is the one focus indicator here
   whose contrast we can actually reason about. */
.dpk-map .leaflet-marker-icon:focus-visible {
	outline: 2px solid var( --dpk-focus );
	outline-offset: 2px;
}