/*
 * EJF Canopy: project map styles. Loaded together with Leaflet, and only on
 * pages that show a map (Impact, single project).
 */

.ejf-map { margin-block: 0 2.5rem; }

/* Hidden until modules/map.js has real data to show (and always without JS). */
.ejf-map:not(.is-ready) .ejf-map__canvas { display: none; }

.ejf-map__canvas {
	position: relative;
	z-index: 0;
	isolation: isolate; /* keep Leaflet's z-indexes below the sticky header */
	height: clamp(22rem, 55vh, 34rem);
	border: 1px solid var(--ejf-line);
	border-radius: var(--ejf-radius);
	background: var(--ejf-paper-deep);
	font-family: var(--ejf-font-sans);
}
.ejf-map__canvas:focus-visible { outline: 3px solid var(--ejf-focus); outline-offset: 3px; }

.ejf-map__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 2rem; margin-top: .75rem; font-size: var(--ejf-fs-small); }
.ejf-map__legend { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.ejf-map__legend li { display: inline-flex; align-items: center; gap: .5rem; }
.ejf-map__key { width: .9rem; height: .9rem; border: 2px solid var(--ejf-white); border-radius: 50%; box-shadow: 0 0 0 1px var(--ejf-ink); }
.ejf-map__key--active { background: var(--ejf-green); }
.ejf-map__key--completed { background: var(--ejf-blue); }
.ejf-map__key--upcoming { background: var(--ejf-yellow); }
.ejf-map__hint { margin: 0; }

/* Pins: teardrop built from a rotated square. Colour by status (brief §7.5). */
.ejf-pin { background: none; border: 0; }
.ejf-pin__dot {
	display: block;
	width: 26px;
	height: 26px;
	margin: 3px 2px 0;
	border: 3px solid var(--ejf-white);
	border-radius: 50% 50% 50% 0;
	background: var(--ejf-green);
	box-shadow: 0 0 0 1px var(--ejf-ink);
	transform: rotate(-45deg);
	transition: transform .15s;
}
.ejf-pin--completed .ejf-pin__dot { background: var(--ejf-blue); }
.ejf-pin--upcoming .ejf-pin__dot { background: var(--ejf-yellow); border-color: var(--ejf-ink); box-shadow: none; }
.ejf-pin:hover .ejf-pin__dot { transform: rotate(-45deg) scale(1.12); }
.ejf-pin:focus-visible { outline: 3px solid var(--ejf-focus); outline-offset: 2px; border-radius: 50%; }

/* Popups */
.ejf-map .leaflet-popup-content-wrapper { border-radius: var(--ejf-radius); color: var(--ejf-ink); }
.ejf-map .leaflet-popup-content { margin: 14px 16px; line-height: 1.4; }
.ejf-popup { display: grid; gap: .45rem; justify-items: start; }
.ejf-popup__title { margin: 0; font-size: 1rem; font-weight: 600; }
.ejf-popup__meta { margin: 0; color: var(--ejf-fg-muted); font-size: var(--ejf-fs-xs); }
.ejf-popup__link { color: var(--ejf-blue); font-weight: 500; }
.ejf-map .leaflet-container a.leaflet-popup-close-button { width: 2.25rem; height: 2.25rem; padding: .35rem 0 0; font-size: 1.5rem; }
.ejf-map .leaflet-control-attribution { font-size: .6875rem; }
.ejf-map .leaflet-control-attribution a { color: var(--ejf-blue); }