/**
 * Public map styling for the [prayermap] shortcode.
 */

/* Wrapper positions the filter panel as an overlay on top of the map. */
.pmd-wrap {
	position: relative;
	width: 100%;
	max-width: 100%;
}

.pmd-map {
	width: 100%;
	/* Height comes from an inline custom property set by the shortcode, so the
	   admin setting controls it. Falls back to 600px if unset. */
	height: var(--pmd-map-h, 600px);
	max-width: 100%;
	z-index: 0;
}

/* Filter / list panel (desktop: overlay top-left of the map). */
.pmd-panel {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1000;
	width: 320px;
	max-width: calc(100% - 24px);
	max-height: calc(var(--pmd-map-h, 600px) - 24px);
	display: flex;
	flex-direction: column;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.22);
	overflow: hidden;
}

/* Collapse toggle: hidden on desktop, shown as a bar on mobile. */
.pmd-toggle {
	display: none;
}

.pmd-panel__head {
	padding: 12px;
	border-bottom: 1px solid #eee;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 0 auto;
}

.pmd-search {
	flex: 1 1 auto;
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ccc;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.3;
}

.pmd-panel__count {
	font-size: 12px;
	color: #666;
	white-space: nowrap;
}

.pmd-list {
	list-style: none;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	flex: 1 1 auto;
}

.pmd-list__item {
	padding: 10px 12px;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	transition: background 0.12s ease;
}

.pmd-list__item:hover {
	background: #f4f9fe;
}

.pmd-list__item.is-active {
	background: #e8f1fb;
	box-shadow: inset 3px 0 0 #185FA5;
}

.pmd-list__title {
	display: block;
	font-weight: 600;
	color: #1a1a1a;
}

.pmd-list__meta {
	font-size: 12px;
	color: #555;
	margin-top: 2px;
}

.pmd-list__empty {
	padding: 14px 12px;
	color: #666;
	font-size: 14px;
}

/* Mobile: stack the panel below the map, both full viewport width. */
@media (max-width: 767px) {
	.pmd-wrap {
		width: 100vw;
		max-width: 100vw;
		/* Break out of a constrained content container to reach the edges. */
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
	}

	.pmd-map {
		height: var(--pmd-map-h-mobile, 400px);
	}

	.pmd-panel {
		/* Reset the desktop overlay positioning: otherwise left:12px shifts the
		   whole panel to the right (gap on the left, overflow on the right). */
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
		max-width: 100%;
		max-height: none;
		border-radius: 0;
		box-shadow: none;
		border-top: 1px solid #ddd;
	}

	/* Tighter inner padding on mobile so the search bar and list sit close to
	   the screen edge (less empty margin inside the panel). */
	.pmd-panel__head {
		padding: 8px;
	}

	/* Search bar stays visible; below it a subtle underlined text link
	   reveals the list. */
	.pmd-toggle {
		display: block;
		width: 100%;
		padding: 4px 8px 8px;
		background: none;
		border: none;
		color: #185FA5;
		font-size: 13px;
		text-align: left;
		text-decoration: underline;
		cursor: pointer;
	}

	/* List hidden until the visitor taps "Toon lijst". */
	.pmd-list {
		display: none;
	}

	.pmd-panel.is-open .pmd-list {
		display: block;
		/* Height chosen so ~2.6 items show: the 3rd peeks in to signal scroll
		   (the zebra striping reinforces it). */
		max-height: 138px;
	}

	/* Compact list items on mobile so more fit and the next one peeks. */
	.pmd-list__item {
		padding: 6px 8px;
	}

	.pmd-list__meta {
		margin-top: 1px;
	}

	/* Zebra striping (mobile only): light blue-grey rows, starting coloured so
	   the list doesn't open on a plain white row. The .is-even class is set
	   from JS on visible rows, so striping stays correct while filtering. */
	.pmd-list__item.is-even {
		background: #f1f6fb;
	}
}

/* Remove the browser's default focus outline that Leaflet shows as a black
   rectangle around a polygon after it is clicked / its popup opens. */
.pmd-map .leaflet-interactive:focus {
	outline: none;
}

/* Popup content. */
.pmd-popup {
	font-size: 14px;
	line-height: 1.4;
	max-width: 240px;
}

.pmd-popup__title {
	display: block;
	font-size: 15px;
	margin-bottom: 6px;
}

.pmd-popup__desc {
	margin-bottom: 8px;
	/* Preserve line breaks from the textarea without allowing HTML. */
	white-space: pre-line;
}

.pmd-popup__row {
	margin-bottom: 4px;
	color: #333;
}

.pmd-popup__label {
	text-decoration: underline;
}

.pmd-share {
	margin-top: 10px;
	display: inline-block;
	padding: 6px 12px;
	background: #185FA5;
	color: #fff;
	border: none;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s ease;
}

.pmd-share:hover {
	background: #124a80;
}

.pmd-share.is-copied {
	background: #2e7d32;
}

/* Hover tooltip showing the area title. */
.pmd-tooltip {
	font-size: 13px;
	font-weight: 600;
	padding: 4px 8px;
	color: #fff;
	background: #185FA5;
	border: none;
	border-radius: 4px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

.pmd-tooltip.leaflet-tooltip-top::before {
	border-top-color: #185FA5;
}

.pmd-error {
	padding: 12px 16px;
	background: #fdecea;
	color: #a1231a;
	border: 1px solid #f5c6c0;
	border-radius: 4px;
	margin-top: 8px;
	font-size: 14px;
}