/* ==========================================================================
   FundMyMusic — Events & Locations map styling
   Scope: presentation only. All selectors below already exist in the
   deployed markup/JS; no new classes or DOM structure are introduced.
   Design intent: elegant, restrained, contemporary — "music is happening."
   ========================================================================== */

/* Design tokens, scoped to our own containers only (never :root, never a
   global selector) so nothing here can leak into the rest of the site. */
.fmm-campaign-map-section,
.fmm-global-map-wrap {
	--fmm-teal: #159590;
	--fmm-teal-dark: #0f716d;
	--fmm-teal-wash: rgba(21, 149, 144, 0.08);
	--fmm-teal-wash-strong: rgba(21, 149, 144, 0.14);
	--fmm-ink: #22262a;
	--fmm-ink-soft: #52585d;
	--fmm-ink-faint: #82888c;
	--fmm-line: #e2e2dc;
	--fmm-line-strong: #c7c7bf;
	--fmm-surface: #ffffff;
	--fmm-surface-warm: #faf9f6;
	--fmm-amber: #9c6b16;
	--fmm-amber-wash: rgba(184, 132, 25, 0.12);
	--fmm-stone: #6b6b63;
	--fmm-stone-wash: #eeede7;
	--fmm-radius: 12px;
	--fmm-radius-sm: 8px;
	--fmm-shadow: 0 6px 20px rgba(20, 24, 22, 0.08), 0 1px 3px rgba(20, 24, 22, 0.06);
	--fmm-shadow-soft: 0 2px 10px rgba(20, 24, 22, 0.06);
}

/* --------------------------------------------------------------------------
   Map canvas
   -------------------------------------------------------------------------- */

.fmm-map {
	width: 100%;
	max-width: 100%;
	height: 420px;
	border-radius: var(--fmm-radius);
	border: 1px solid var(--fmm-line);
	box-shadow: var(--fmm-shadow-soft);
	z-index: 0;
	background: var(--fmm-surface-warm);
}

.fmm-campaign-map-section {
	margin-top: 32px;
}

/* Breaks the global map out of the Divi module's fixed-width row so it
   spans the full browser viewport, leaving the site header/menu untouched
   above it. Pure CSS full-bleed technique (margin-based) -- no change to
   the Divi module, its settings, or any markup/class. Only works if no
   ancestor row/section has "Overflow: Hidden" set in the Divi builder,
   which would clip the negative margins; if that's the case, that's a
   one-click Divi setting to change, not something fixable from this file. */
.fmm-global-map-wrap {
	max-width: 100vw;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	overflow-x: hidden;
	background: var(--fmm-surface);
	border: 1px solid var(--fmm-line);
	border-radius: 0;
	padding: 20px;
	box-shadow: var(--fmm-shadow-soft);
}

/* Leaflet's own zoom control, restyled to feel native to FundMyMusic
   rather than a default third-party widget. Functionality untouched. */
.fmm-map .leaflet-control-zoom {
	border: 1px solid var(--fmm-line-strong);
	border-radius: var(--fmm-radius-sm);
	box-shadow: var(--fmm-shadow-soft);
	overflow: hidden;
}

.fmm-map .leaflet-control-zoom a,
.fmm-map .leaflet-control-zoom a:link {
	width: 30px;
	height: 30px;
	line-height: 30px;
	background: var(--fmm-surface);
	color: var(--fmm-ink-soft);
	font-weight: 600;
	border: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.fmm-map .leaflet-control-zoom a:hover {
	background: var(--fmm-teal-wash);
	color: var(--fmm-teal-dark);
}

.fmm-map .leaflet-control-zoom-in {
	border-bottom: 1px solid var(--fmm-line);
}

/* Leaflet's built-in attribution chip (bottom-right of the map itself) */
.fmm-map .leaflet-control-attribution {
	background: rgba(255, 255, 255, 0.85);
	color: var(--fmm-ink-faint);
	font-size: 10.5px;
	padding: 2px 7px;
	border-radius: 4px 0 0 0;
}

.fmm-map .leaflet-control-attribution a {
	color: var(--fmm-ink-faint) !important;
}

/* --------------------------------------------------------------------------
   Filters
   -------------------------------------------------------------------------- */

.fmm-map-filters {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	margin-bottom: 16px;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: 2px;
}

.fmm-map-filters::-webkit-scrollbar {
	display: none;
}

.fmm-map-filter-btn {
	flex: 0 0 auto;
	padding: 8px 18px;
	border: 1px solid var(--fmm-teal);
	border-radius: 20px;
	background: var(--fmm-teal);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.fmm-map-filter-btn:hover {
	background: var(--fmm-teal-dark);
	border-color: var(--fmm-teal-dark);
	color: #fff;
}

.fmm-map-filter-btn:focus-visible {
	outline: 2px solid var(--fmm-teal-dark);
	outline-offset: 2px;
}

.fmm-map-filter-btn.is-active {
	background: var(--fmm-teal-dark);
	border-color: var(--fmm-teal-dark);
	color: #fff;
	box-shadow: 0 2px 8px rgba(15, 113, 109, 0.35);
}

.fmm-map-filter-btn.is-active:hover {
	background: #0a5450;
	border-color: #0a5450;
	color: #fff;
}

/* --------------------------------------------------------------------------
   Attribution note (static text rendered alongside the map, separate from
   Leaflet's own in-map control above)
   -------------------------------------------------------------------------- */

.fmm-map-attribution-note {
	font-size: 11.5px;
	color: var(--fmm-ink-faint);
	margin-top: 10px;
	letter-spacing: 0.01em;
}

.fmm-map-attribution-note a {
	color: var(--fmm-ink-faint) !important;
	text-decoration: underline;
	text-decoration-color: var(--fmm-line-strong);
	text-underline-offset: 2px;
}

.fmm-map-attribution-note a:hover {
	color: var(--fmm-teal-dark) !important;
	text-decoration-color: var(--fmm-teal);
}

/* --------------------------------------------------------------------------
   Empty / error state
   -------------------------------------------------------------------------- */

.fmm-map-error {
	padding: 40px 24px;
	text-align: center;
	color: var(--fmm-ink-faint);
	font-size: 14px;
	background: var(--fmm-surface-warm);
	border: 1px dashed var(--fmm-line-strong);
	border-radius: var(--fmm-radius);
}

/* --------------------------------------------------------------------------
   Markers
   -------------------------------------------------------------------------- */

/* Leaflet's default marker pin is a fixed PNG sprite supplied by the JS
   (no per-campaign class exists on it — see limitations in the final
   report). A hue/saturation shift is the only lever CSS has to bring the
   default blue pin in line with the FundMyMusic teal, applied only to
   individual (non-clustered) markers, never to cluster icons. */
.fmm-map img.leaflet-marker-icon {
	filter: hue-rotate(-52deg) saturate(1.35) brightness(0.97);
}

.fmm-map .leaflet-marker-shadow {
	opacity: 0.35;
}

/* --------------------------------------------------------------------------
   Cluster markers (Leaflet.markercluster) — restyled to read as a
   deliberate, branded device rather than the plugin's default orange/
   yellow rings, while keeping the size tiers the library already assigns.
   -------------------------------------------------------------------------- */

.fmm-map .marker-cluster {
	background: rgba(21, 149, 144, 0.16);
}

.fmm-map .marker-cluster div {
	background: var(--fmm-teal);
	color: #fff;
	font-weight: 700;
	font-family: inherit;
	box-shadow: 0 2px 8px rgba(15, 113, 109, 0.35);
	display: flex;
	align-items: center;
	justify-content: center;
}

.fmm-map .marker-cluster span {
	font-family: inherit;
}

.fmm-map .marker-cluster-small {
	width: 34px !important;
	height: 34px !important;
	margin-left: -17px !important;
	margin-top: -17px !important;
}

.fmm-map .marker-cluster-small div {
	width: 28px;
	height: 28px;
	margin-left: 3px;
	margin-top: 3px;
	font-size: 12px;
}

.fmm-map .marker-cluster-medium {
	width: 40px !important;
	height: 40px !important;
	margin-left: -20px !important;
	margin-top: -20px !important;
}

.fmm-map .marker-cluster-medium div {
	width: 33px;
	height: 33px;
	margin-left: 3.5px;
	margin-top: 3.5px;
	font-size: 13px;
	background: var(--fmm-teal-dark);
}

.fmm-map .marker-cluster-large {
	width: 48px !important;
	height: 48px !important;
	margin-left: -24px !important;
	margin-top: -24px !important;
}

.fmm-map .marker-cluster-large div {
	width: 40px;
	height: 40px;
	margin-left: 4px;
	margin-top: 4px;
	font-size: 14.5px;
	background: #0a5450;
}

/* --------------------------------------------------------------------------
   Popup — styled as a small FundMyMusic campaign card
   -------------------------------------------------------------------------- */

.leaflet-popup-content-wrapper {
	padding: 0;
	overflow: hidden;
	border-radius: var(--fmm-radius);
	box-shadow: var(--fmm-shadow);
	border: 1px solid var(--fmm-line);
}

.leaflet-popup-content {
	margin: 0;
	width: auto !important;
}

.leaflet-popup-tip {
	box-shadow: var(--fmm-shadow-soft);
}

.leaflet-container a.leaflet-popup-close-button {
	width: 30px;
	height: 30px;
	font-size: 18px;
	line-height: 30px;
	color: var(--fmm-ink-faint) !important;
	font-weight: 400;
	transition: color 0.15s ease;
}

.leaflet-container a.leaflet-popup-close-button:hover {
	color: var(--fmm-teal-dark) !important;
	background: transparent;
}

.fmm-map-popup {
	width: 240px;
	max-width: min(72vw, 280px);
	font-family: inherit;
}

.fmm-map-popup-image {
	width: 100%;
	height: 128px;
	object-fit: cover;
	display: block;
}

.fmm-map-popup-body {
	padding: 14px 16px 16px;
}

.fmm-map-popup-campaign {
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--fmm-teal-dark);
	font-weight: 700;
	margin-bottom: 4px;
}

.fmm-map-popup-event {
	font-size: 16px;
	font-weight: 700;
	color: var(--fmm-ink);
	margin-bottom: 6px;
	line-height: 1.28;
	letter-spacing: -0.005em;
}

.fmm-map-popup-meta {
	font-size: 12.5px;
	color: var(--fmm-ink-soft);
	margin-bottom: 5px;
	line-height: 1.4;
}

.fmm-map-popup-date {
	font-size: 12px;
	color: var(--fmm-ink-faint);
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
}

.fmm-map-popup-provisional {
	color: var(--fmm-amber);
	background: var(--fmm-amber-wash);
	font-weight: 600;
	font-size: 10.5px;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 7px;
	border-radius: 10px;
}

/* Styled now so it is ready the moment completed events also appear in
   the default "All" view (a JS change outside this task's scope). */
.fmm-map-popup-completed {
	display: inline-block;
	background: var(--fmm-stone-wash);
	color: var(--fmm-stone);
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	padding: 2px 8px;
	border-radius: 10px;
	margin-left: 0;
}

.fmm-map-popup-description {
	font-size: 13px;
	color: var(--fmm-ink-soft);
	margin-bottom: 12px;
	line-height: 1.5;
}

.fmm-map-popup-link {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: var(--fmm-teal-dark) !important;
	background: var(--fmm-teal-wash);
	padding: 7px 13px;
	border-radius: 18px;
	text-decoration: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.fmm-map-popup-link:hover {
	background: var(--fmm-teal);
	color: #fff !important;
	text-decoration: none !important;
}

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 600px) {
	.fmm-global-map-wrap {
		padding: 14px;
	}

	.fmm-map {
		height: 340px !important;
		border-radius: var(--fmm-radius-sm);
	}

	.fmm-map-filters {
		gap: 6px;
		margin-bottom: 12px;
	}

	.fmm-map-filter-btn {
		padding: 7px 14px;
		font-size: 12.5px;
	}

	.fmm-map .leaflet-control-zoom a {
		width: 34px;
		height: 34px;
		line-height: 34px;
	}

	.fmm-map-popup {
		width: 210px;
		max-width: 78vw;
	}

	.fmm-map-popup-image {
		height: 100px;
	}

	.fmm-map-popup-body {
		padding: 11px 13px 13px;
	}

	.fmm-map-popup-event {
		font-size: 14.5px;
	}

	.fmm-map-popup-description {
		font-size: 12.5px;
	}

	.fmm-map-popup-link {
		padding: 8px 14px;
		font-size: 13px;
	}

	.leaflet-container a.leaflet-popup-close-button {
		width: 32px;
		height: 32px;
		font-size: 20px;
		line-height: 32px;
	}
}

@media (max-width: 380px) {
	.fmm-map-popup {
		width: 180px;
	}

	.fmm-map-popup-image {
		height: 88px;
	}
}