/**
 * Peebles Group maps — Leaflet presentation layer.
 *
 * The theme's own rules still set the map heights (#page .featured-map #map,
 * #page #map, #archive #map, #location #map), so this file only handles what
 * changes when Leaflet replaces Google.
 */

/* The theme paints a loader.gif behind the map. Leaflet fills the container, so
   the spinner is only ever visible through the gaps while tiles arrive. */
.peebles-map {
	background-image: none;
	background-color: #e8e8e8;
}

/* The theme's 400px is tight for a city-wide map carrying 39 pins, and leaves a
   popup barely any room to open. The theme's own rule is `#page .featured-map
   #map`, so this has to carry the id as well to outrank it. */
#page .featured-map #map.peebles-map {
	height: 500px;
}

/* Leaflet needs unconstrained tile images. The theme already sets this for
   #map, but not for maps rendered anywhere else. */
.peebles-map img.leaflet-tile,
.peebles-map .leaflet-marker-icon,
.peebles-map .leaflet-marker-shadow {
	max-width: none !important;
}

/* Collapse rather than leaving a screen-height hole when there is nothing to
   plot. Also covers the case where the JS never runs at all. */
.peebles-map-empty,
.peebles-map:empty {
	display: none !important;
}

/*-----------------------------------------------------------------------------------*/
/* Clusters */
/*-----------------------------------------------------------------------------------*/

/*
 * MarkerCluster ships translucent green circles, which disappear against the
 * parks and farmland on an OSM basemap and look like a different system from the
 * theme's dark teardrop pins. These match the pin artwork (#414c52 with a white
 * icon), so a cluster reads as "several of those pins" rather than as scenery.
 * Specificity beats MarkerCluster.Default.css without needing !important.
 */
.peebles-map .marker-cluster {
	background-color: rgba( 65, 76, 82, 0.28 );
}

.peebles-map .marker-cluster div {
	width: 32px;
	height: 32px;
	margin-left: 4px;
	margin-top: 4px;
	background-color: #414c52;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.45 );
	color: #fff;
	font-family: inherit;
	font-weight: 700;
}

.peebles-map .marker-cluster span {
	line-height: 30px;
	font-size: 13px;
}

.peebles-map .marker-cluster:hover div {
	background-color: #262e32;
}

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

.peebles-map-popup {
	width: 100%;
}

.peebles-map-popup-image {
	display: block;
	margin-bottom: 6px;
}

/*
 * A fixed height matters more than it looks. Leaflet measures the popup to work
 * out how far to auto-pan the map, and it measures before the thumbnail has
 * loaded. Leaving the height to the image means it measures a short popup, pans
 * for that, then the image arrives and pushes the top out through the map's
 * overflow:hidden edge.
 */
.peebles-map-popup-image img {
	display: block;
	width: 100%;
	height: 90px;
	object-fit: cover;
	max-width: 100% !important;
}

.peebles-map-popup-body h3 {
	margin: 0 0 3px;
	font-size: 14px;
	line-height: 1.25;
}

.peebles-map-popup-body p {
	margin: 0 0 3px;
	font-size: 12px;
	line-height: 1.35;
}

.peebles-map-popup-price strong {
	font-size: 14px;
}

.peebles-map-popup-agent {
	color: #777;
}

.peebles-map-popup-link {
	display: inline-block;
	margin-top: 6px;
}

/*-----------------------------------------------------------------------------------*/
/* Directions */
/*-----------------------------------------------------------------------------------*/

.peebles-map-directions {
	margin: 12px 0 40px;
}

.peebles-map-directions a {
	display: inline-block;
}

/*-----------------------------------------------------------------------------------*/
/* Print */
/*-----------------------------------------------------------------------------------*/

@media print {

	/* The theme's listing-print.css hides #location outright, a fair call when
	   the map was a Google canvas that printed as a blank box. Leaflet tiles are
	   ordinary <img> elements and print properly, so the location is worth
	   keeping on a printed listing sheet. Specificity has to beat the theme's
	   own `#location { display: none !important; }`. */
	body #location {
		display: block !important;
		page-break-inside: avoid;
	}

	body #location h4 {
		display: block !important;
	}

	/* Zoom buttons and any open popup are screen furniture, and the directions
	   button is useless on paper. The attribution stays: it is the condition of
	   using the tiles. */
	.peebles-map .leaflet-control-zoom,
	.peebles-map .leaflet-popup,
	.peebles-map-directions {
		display: none !important;
	}

	/*
	 * The theme's map heights live in a screen-only stylesheet, so without this
	 * the container collapses to zero and nothing prints. peebles-maps.js writes
	 * --peebles-map-height with the height Leaflet actually laid out against;
	 * matching it exactly avoids clipping the bottom row of tiles.
	 */
	body .peebles-map {
		height: var( --peebles-map-height, 300px ) !important;
		border: 1px solid #ccc;
		page-break-inside: avoid;
	}

	/* Chrome drops tile images unless backgrounds are allowed through. */
	.peebles-map .leaflet-tile-container img {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}