/**
 * Tribe Maps - title and button added to Interactive Geo Maps lightbox content.
 * Scoped to .igm-map-content so nothing leaks into the rest of the site.
 *
 * Further down: the map wide button that floats over the map itself.
 */

.igm-map-content .tribe-maps-modal-title {
	margin-bottom: 0.25em;
	/* Keep clear of the close button sitting in the top right of the modal. */
	padding-right: 2em;
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.2;
}

.igm-map-content .tribe-maps-modal-title > :first-child {
	margin-top: 0;
}

.igm-map-content .tribe-maps-modal-title > :last-child {
	margin-bottom: 0;
}

.igm-map-content .tribe-maps-modal-map-title {
	margin: 0 0 1em;
	padding-right: 2em;
	font-size: 0.9em;
	line-height: 1.3;
	opacity: 0.75;
}

.igm-map-content .tribe-maps-button-wrap {
	margin-top: 1.25em;
	padding-top: 1.25em;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	text-align: center;
}

.igm-map-content .tribe-maps-button {
	display: inline-block;
	padding: 0.7em 1.6em;
	border: 0;
	border-radius: 3px;
	background-color: #2ca25f;
	color: #fff;
	font-size: 1em;
	line-height: 1.2;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	transition: background-color 0.15s ease-in-out;
}

.igm-map-content .tribe-maps-button:hover,
.igm-map-content .tribe-maps-button:focus {
	background-color: #1f7444;
	color: #fff;
	text-decoration: none;
}

.igm-map-content .tribe-maps-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/**
 * The map wide button, floating over the top right corner of the map.
 *
 * It is rendered through igm_mapbox_before, so it sits inside .map_box just
 * before the aspect ratio box that holds the chart. .map_box is only as tall as
 * that chart, which makes it the right thing to position against. The one case
 * where that is not exactly the top right of the map is a map also using the
 * "display content above" click action, where the button overlaps that content.
 */
.map_box.tribe-maps-has-map-button {
	position: relative;
	/* Lets the stacking rules below measure the box rather than the screen. */
	container-type: inline-size;
}

.tribe-maps-map-button-wrap {
	position: absolute;
	top: 10px;
	right: 10px;
	/* Above the chart, below the amCharts tooltips and the lightbox. */
	z-index: 5;
	max-width: calc(100% - 20px);
	text-align: right;
}

/* right is reset as well as left set, to clear the rule above it. */
.tribe-maps-map-button-wrap--left {
	right: auto;
	left: 10px;
	text-align: left;
}

/**
 * On a narrow map box the button comes out of the corner and sits above the
 * map instead. The chart scales the map to fill the box, so past a certain
 * width there is no empty corner left for the button to float in: on an iPad
 * or a phone it lands squarely on the northern territories. Stacked, it keeps
 * its side of the box through the text-align set above, and the aspect ratio
 * box below it is untouched, so the chart is measured exactly as before.
 *
 * 900px is where a button of the size these maps use clears Canada's north
 * west; a container query so a map in a narrow column on a wide screen stacks
 * too, with the same rules under a viewport query for the older iPads and
 * iPhones that predate container queries.
 */
@container (max-width: 900px) {
	.tribe-maps-map-button-wrap {
		position: static;
		margin-bottom: 0.75em;
		max-width: 100%;
	}
}

@supports not (container-type: inline-size) {
	@media (max-width: 900px) {
		.tribe-maps-map-button-wrap {
			position: static;
			margin-bottom: 0.75em;
			max-width: 100%;
		}
	}
}

.tribe-maps-map-button {
	display: inline-block;
	margin: 0;
	padding: 0.6em 1.2em;
	border: 0;
	border-radius: 3px;
	/* Fallbacks only: the colours always arrive as custom properties on the
	   element, resolved from the map's settings. */
	background-color: var(--tribe-maps-map-button-fill, #99d8c9);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	color: var(--tribe-maps-map-button-text, #fff);
	font-family: inherit;
	/* The fallback is the size every button used before the field existed. */
	font-size: var(--tribe-maps-map-button-font-size, 0.9em);
	line-height: 1.2;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease-in-out;
}

.tribe-maps-map-button:hover,
.tribe-maps-map-button:focus {
	background-color: var(--tribe-maps-map-button-hover, #2ca25f);
	color: var(--tribe-maps-map-button-hover-text, #fff);
	text-decoration: none;
}

.tribe-maps-map-button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/**
 * The two SVG background styles, which swap the rectangle above for an uploaded
 * graphic. Both draw that graphic on a ::before layer rather than on the button
 * itself, because shape mode masks the layer and a mask on the button would
 * take the label with it. The label is always wrapped in its own span so it can
 * sit above that layer.
 *
 * Everything here is driven by custom properties set in Map_Button::get_markup().
 */
.tribe-maps-map-button--svg-image,
.tribe-maps-map-button--svg-shape {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--tribe-maps-map-button-width, auto);
	height: var(--tribe-maps-map-button-height, auto);
	max-width: 100%;
	border-radius: 0;
	background-color: transparent;
	box-shadow: none;
}

/* The rectangle's hover fill would otherwise show through the artwork. */
.tribe-maps-map-button--svg-image:hover,
.tribe-maps-map-button--svg-image:focus,
.tribe-maps-map-button--svg-shape:hover,
.tribe-maps-map-button--svg-shape:focus {
	background-color: transparent;
}

.tribe-maps-map-button--svg-image::before,
.tribe-maps-map-button--svg-shape::before {
	content: "";
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	background-position: center;
	transition: opacity 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* Image: the artwork keeps its own colours, stretched to the button box. */
.tribe-maps-map-button--svg-image::before {
	background-image: var(--tribe-maps-map-button-svg);
	background-size: 100% 100%;
}

/*
 * A hover graphic when one was uploaded, and a fade when one was not. Both
 * arrive through the same rule: get_markup() only sets the -svg-hover and
 * -hover-opacity properties together, so the fallbacks cover the other case.
 */
.tribe-maps-map-button--svg-image:hover::before,
.tribe-maps-map-button--svg-image:focus::before {
	background-image: var(--tribe-maps-map-button-svg-hover, var(--tribe-maps-map-button-svg));
	opacity: var(--tribe-maps-map-button-hover-opacity, 0.85);
}

/* Shape: the artwork is a silhouette, tinted with the map's own colours. */
.tribe-maps-map-button--svg-shape::before {
	background-color: var(--tribe-maps-map-button-fill, #99d8c9);
	-webkit-mask-image: var(--tribe-maps-map-button-svg);
	        mask-image: var(--tribe-maps-map-button-svg);
	-webkit-mask-size: 100% 100%;
	        mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
}

.tribe-maps-map-button--svg-shape:hover::before,
.tribe-maps-map-button--svg-shape:focus::before {
	background-color: var(--tribe-maps-map-button-hover, #2ca25f);
}

/* Above the background layer, in every mode. */
.tribe-maps-map-button-label {
	position: relative;
	z-index: 1;
}

/*
 * The optional plate behind the label, sitting on top of the artwork so the
 * text stays readable over a busy one. It reads the same two colours the button
 * itself would have used, so the plate and a solid button always match, and the
 * text colour PHP calculated from the fill is measuring the right thing again.
 */
.tribe-maps-map-button--text-plate .tribe-maps-map-button-label {
	padding: 0.35em 0.9em;
	border-radius: 3px;
	background-color: var(--tribe-maps-map-button-fill, #99d8c9);
	transition: background-color 0.15s ease-in-out;
}

.tribe-maps-map-button--text-plate:hover .tribe-maps-map-button-label,
.tribe-maps-map-button--text-plate:focus .tribe-maps-map-button-label {
	background-color: var(--tribe-maps-map-button-hover, #2ca25f);
}

/* Never on the page itself, only cloned into the lightbox by GLightbox. */
.tribe-maps-map-button-content {
	display: none;
}

/**
 * The lightbox close button. Interactive Geo Maps styles .igm_close identically
 * in its own action stylesheet; these rules repeat it so the button still looks
 * right on a page where that stylesheet was never enqueued.
 */
.tribe-maps-lightbox-close {
	position: absolute;
	top: 5px;
	right: 5px;
	z-index: 99;
	width: 20px;
	height: 20px;
	background: #2c2b2b;
	border-radius: 0;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: 12px;
	line-height: 22px;
	text-align: center;
	opacity: 0.5;
	cursor: pointer;
}

.tribe-maps-lightbox-close:hover,
.tribe-maps-lightbox-close:focus {
	opacity: 1;
}

/**
 * The legend, printed under the map box by Legend in place of the one
 * Interactive Geo Maps would draw inside the chart. It arrives through
 * igm_mapbox_after, so it sits inside .map_wrapper straight after .map_box.
 * The colours come inline: the swatch fill from each legend entry, the text
 * colour from the legend setting.
 */
.map_wrapper .tribe-maps-legend {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 0.25em 1.25em;
	/* The add-on's action stylesheet turns .map_wrapper into a wrapping flex
	   row, so the legend claims a whole line to be sure of landing under the
	   map box rather than beside it. */
	flex: 0 0 100%;
	width: 100%;
	margin: 0.75em 0 1em;
	padding: 0;
	list-style: none;
}

.map_wrapper .tribe-maps-legend--center {
	justify-content: center;
}

.map_wrapper .tribe-maps-legend--right {
	justify-content: flex-end;
}

.map_wrapper .tribe-maps-legend-entry {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 0;
	font-size: 0.9em;
	line-height: 1.3;
}

/* Themes that draw list bullets with a pseudo element, as this one does,
   would otherwise put one under every entry. */
.map_wrapper .tribe-maps-legend-entry::before,
.map_wrapper .tribe-maps-legend-entry::marker {
	content: none;
}

.map_wrapper .tribe-maps-legend-swatch {
	flex: 0 0 auto;
	width: 1.1em;
	height: 1.1em;
	margin-right: 0.45em;
	border-radius: 3px;
	/* Only ever seen when an entry was saved without a colour. */
	background-color: #ccc;
}