/* Vacancy map page — map chrome styled after the ei project, sidebar after Google Maps. */

body.page-template-page-map { overflow: hidden; }
body.page-template-page-map .vp-footer { display: none; }

.vp-mapwrap {
	position: relative;
	height: calc(100vh - var(--vp-header-h));
	height: calc(100dvh - var(--vp-header-h));
	overflow: hidden;
}
/* Logged-in admin bar shortens the visible area — without this the bottom of the map sits below the fold. */
body.admin-bar .vp-mapwrap {
	height: calc(100vh - var(--vp-header-h) - 32px);
	height: calc(100dvh - var(--vp-header-h) - 32px);
}

#vp-map { position: absolute; inset: 0; font-family: var(--vp-font-body); }

/* --- Leaflet chrome (from ei) --- */
.leaflet-container { width: 100%; height: 100%; }
.vp-marker { background: transparent; border: 0; box-shadow: none; }
.leaflet-left { right: 1.25rem !important; left: auto !important; }
.leaflet-top { top: 1.25rem; }
.leaflet-bar {
	border: none !important; margin: 0 !important;
	border-radius: 1rem; overflow: hidden;
	box-shadow: 0 2px 16px rgb(0 0 0 / 12%) !important;
}
.leaflet-touch .leaflet-bar a { width: 40px; height: 40px; line-height: 40px; }
.leaflet-bar a { color: var(--vp-ink); font-family: var(--vp-font-heading); }

/* --- Google-Maps-style sidebar --- */
.vp-mapside {
	position: absolute; top: 0; left: 0; bottom: 0; z-index: 1100;
	width: min(408px, 100%);
	background: #fff;
	box-shadow: 4px 0 24px rgb(0 0 0 / 18%);
	transform: translateX(-105%);
	transition: transform .25s ease;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.vp-mapside.is-open { transform: translateX(0); }

.vp-mapside__close {
	position: absolute; top: 12px; right: 12px; z-index: 2;
	width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
	background: rgb(0 0 0 / 55%); color: #fff; font-size: 22px; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.vp-mapside__close:hover { background: rgb(0 0 0 / 75%); }

.vp-mapside__photo { aspect-ratio: 4 / 3; background: var(--vp-bg-alt); }
.vp-mapside__photo img { width: 100%; height: 100%; object-fit: cover; }
.vp-mapside__photo.is-empty { display: none; }

.vp-mapside__body { padding: 20px 24px 32px; }
.vp-mapside__body h2 { font-size: 1.45rem; line-height: 1.3; }
.vp-mapside__type { margin-top: 6px; color: var(--vp-muted); font-size: .98rem; display: flex; align-items: center; gap: 8px; }
.vp-mapside__type .vp-chip__dot { flex: 0 0 auto; }

.vp-mapside__actions { margin: 18px 0 6px; }
.vp-mapside__actions .vp-btn { padding: 10px 24px; font-size: .95rem; }

.vp-mapside__facts { list-style: none; margin-top: 10px; border-top: 1px solid var(--vp-border); }
.vp-mapside__facts li {
	display: flex; gap: 16px; align-items: flex-start;
	padding: 13px 0; border-bottom: 1px solid var(--vp-border);
	font-size: .98rem;
}
.vp-mapside__facts .ico {
	flex: 0 0 22px; height: 22px; margin-top: 2px;
	color: var(--vp-green-dark);
}
.vp-mapside__facts .lbl { display: block; font-size: .78rem; font-weight: 600; color: var(--vp-muted); font-family: var(--vp-font-heading); text-transform: uppercase; letter-spacing: .05em; }

/* --- Legend --- */
.vp-maplegend {
	position: absolute; right: 20px; bottom: 48px; z-index: 1000;
	background: #fff; border-radius: 14px; box-shadow: var(--vp-shadow);
	font-size: .88rem; max-width: 240px;
}
.vp-maplegend__head {
	display: block; width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
	font-family: var(--vp-font-heading); font-weight: 600; font-size: .88rem; color: var(--vp-ink);
	padding: 12px 16px;
}
.vp-maplegend__head::after { content: " ▾"; color: var(--vp-muted); }
.vp-maplegend ul { list-style: none; margin: 0; padding: 0 16px 12px; display: none; }
.vp-maplegend.is-open ul { display: block; }
.vp-maplegend li { padding: 3px 0; cursor: help; position: relative; }
.vp-maplegend__row { display: flex; align-items: center; gap: 9px; }
.vp-maplegend .vp-chip__dot { flex: 0 0 auto; }
/* Definition appears as its own floating card to the left — never shifts the legend. */
.vp-maplegend__desc {
	display: none;
	position: absolute; right: calc(100% + 22px); top: 50%; transform: translateY(-50%);
	width: 250px;
	background: #fff; border-radius: 12px; box-shadow: var(--vp-shadow);
	padding: 12px 16px;
	font-size: .82rem; line-height: 1.5; color: var(--vp-body);
	pointer-events: none; z-index: 1300;
}
.vp-maplegend__desc::after {
	content: ""; position: absolute; left: 100%; top: 50%; transform: translateY(-50%);
	border: 7px solid transparent; border-left-color: #fff;
}
.vp-maplegend li:hover .vp-maplegend__desc,
.vp-maplegend li.is-open .vp-maplegend__desc { display: block; }
@media (max-width: 640px) {
	.vp-maplegend__desc { right: 0; top: auto; bottom: calc(100% + 8px); transform: none; }
	.vp-maplegend__desc::after { display: none; }
}

@media (max-width: 640px) {
	.vp-maplegend { max-width: calc(100% - 32px); }
}