/* 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); visibility: visible; }
/* Closed panel is off-screen: hide it from the tab order and screen readers
   (transform alone leaves its close button and link focusable). */
.vp-mapside { visibility: hidden; transition: transform .25s ease, visibility .25s; }

/* Keyboard focus ring for map markers (SVG paths). */
.leaflet-interactive:focus-visible { outline: 3px solid #10432a; outline-offset: 2px; }

.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__top { display: flex; align-items: center; gap: 9px; padding: 12px 16px 0; }
/* When collapsed there is no list below, so balance the header vertically. */
.vp-maplegend:not(.is-open) .vp-maplegend__top { padding-bottom: 12px; }
.vp-maplegend__head {
	flex: 1 1 auto; text-align: left; border: 0; background: none; cursor: pointer;
	font-family: var(--vp-font-heading); font-weight: 700; font-size: .9rem; color: var(--vp-ink);
	padding: 0;
}
.vp-maplegend__head::after { content: " ▾"; color: var(--vp-muted); }

/* Master circle: select / deselect all types */
.vp-maplegend__all {
	flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%;
	border: 2px solid var(--vp-grey-warm); background: #fff; cursor: pointer; padding: 0;
	display: inline-flex; align-items: center; justify-content: center;
	transition: background .12s ease, border-color .12s ease;
}
.vp-maplegend__all:hover { border-color: var(--vp-grey); }
.vp-maplegend__all:focus-visible { outline: 2px solid var(--vp-green); outline-offset: 2px; }
.vp-maplegend__all span { display: none; }
/* all selected: solid green fill with a slightly darker green border */
.vp-maplegend__all.is-all {
	background: var(--vp-green);
	border-color: color-mix(in srgb, var(--vp-green) 68%, #000);
}
/* some selected (mixed): grey dash */
.vp-maplegend__all:not(.is-all):not(.is-none) span {
	display: block; width: 8px; height: 2px; background: var(--vp-grey); border-radius: 2px;
}
.vp-maplegend__hint { padding: 0 16px 8px; margin: 0; font-size: .72rem; color: var(--vp-muted); display: none; }
.vp-maplegend.is-open .vp-maplegend__hint { display: block; }
.vp-maplegend ul { list-style: none; margin: 0; padding: 0 12px 12px; display: none; }
.vp-maplegend.is-open ul { display: block; }
.vp-maplegend li { position: relative; margin: 4px 0; }

/* Each type is a toggle pill: filled when shown, faded when hidden. */
.vp-maplegend__pill {
	display: flex; align-items: center; gap: 9px; width: 100%;
	border: 1px solid var(--vp-border); border-radius: 999px;
	background: #fff; cursor: pointer; text-align: left;
	padding: 6px 14px 6px 10px;
	font-family: var(--vp-font-body); font-size: .86rem; color: var(--vp-ink);
	transition: background .12s ease, border-color .12s ease, opacity .12s ease;
}
.vp-maplegend__pill .vp-chip__dot { flex: 0 0 auto; }
.vp-maplegend__name { flex: 1 1 auto; white-space: nowrap; }
.vp-maplegend__pill:hover { border-color: var(--vp-grey-warm); }
.vp-maplegend__pill:focus-visible { outline: 2px solid var(--vp-green); outline-offset: 2px; }

/* ON: tinted fill in the type's own color + bold label */
.vp-maplegend__pill.is-on {
	background: color-mix(in srgb, var(--dot) 14%, #fff);
	border-color: color-mix(in srgb, var(--dot) 45%, #fff);
	font-weight: 600;
}
/* OFF: faded, hollow dot */
.vp-maplegend__pill:not(.is-on) { opacity: .5; }
.vp-maplegend__pill:not(.is-on) .vp-chip__dot { background: transparent !important; border-color: var(--vp-grey-warm); }
/* 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); }
}

/* --- Text alternative to the map (see page-map.php) ---
   Hidden from sighted users because the map fills the viewport by design, but
   present in the DOM for screen readers and crawlers. Tabbing into it makes it
   a real panel, so keyboard users aren't stepping through invisible links. */
.vp-maplist {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%);
}
.vp-maplist:focus-within {
	position: fixed; left: 20px; top: calc(var(--vp-header-h) + 20px);
	width: min(340px, calc(100% - 40px)); height: auto; max-height: 70vh;
	overflow-y: auto; clip: auto; clip-path: none;
	background: #fff; border-radius: 14px; box-shadow: var(--vp-shadow-lift);
	padding: 16px 20px; z-index: 1400;
}
.vp-maplist h2 {
	font-family: var(--vp-font-heading); font-weight: 700;
	font-size: .95rem; color: var(--vp-ink); margin: 0 0 10px;
}
.vp-maplist ul { list-style: none; margin: 0; padding: 0; }
.vp-maplist li { padding: 6px 0; border-top: 1px solid var(--vp-border); }
.vp-maplist li:first-child { border-top: 0; }
.vp-maplist a { color: var(--vp-green-dark); font-weight: 600; text-decoration: none; }
.vp-maplist a:hover, .vp-maplist a:focus { text-decoration: underline; }
.vp-maplist__addr { display: block; font-size: .82rem; color: var(--vp-muted); }