/*
 * Heller Properties — front-end styles.
 * Brand colors are CSS custom properties; override --hp-* in the theme
 * to re-skin without touching the plugin.
 */
.heller-properties {
	--hp-primary: #1c3f94;
	--hp-primary-dark: #142e6e;
	--hp-available: #1f6feb;
	--hp-leased: #7b8794;
	--hp-border: #e2e6ee;
	--hp-bg-soft: #f6f8fb;
	--hp-text: #1f2733;
	--hp-radius: 8px;

	color: var(--hp-text);
	font-size: 16px;
	line-height: 1.5;
}

.heller-properties *,
.heller-properties *::before,
.heller-properties *::after { box-sizing: border-box; }

.hp-sr {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- Toolbar ---------- */
/* Sits between the map and the table, styled as a distinct control band so
   the state filter is easier to find than it was above the map. */
.hp-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin: 16px 0 0;
	padding: 14px 16px;
	background: var(--hp-bg-soft);
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
}
.hp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hp-chip {
	appearance: none;
	border: 1px solid #d7dce6;
	background: #fff;
	color: var(--hp-text);
	border-radius: 999px;
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.hp-chip:hover { border-color: var(--hp-primary); color: var(--hp-primary); }
.hp-chip-active,
.hp-chip-active:hover {
	background: var(--hp-primary);
	border-color: var(--hp-primary);
	color: #fff;
}
.hp-chip-count { opacity: 0.65; font-weight: 400; margin-left: 2px; }

.hp-toolbar-right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hp-search,
.hp-state-select {
	border: 1px solid #d7dce6;
	border-radius: var(--hp-radius);
	padding: 9px 12px;
	font-size: 14px;
	background: #fff;
	color: var(--hp-text);
}
.hp-search { min-width: 260px; }
.hp-search:focus,
.hp-state-select:focus {
	outline: 2px solid var(--hp-primary);
	outline-offset: 1px;
}

/* ---------- Map ---------- */
.hp-map {
	height: 55vh;
	min-height: 380px;
	border-radius: var(--hp-radius);
	border: 1px solid var(--hp-border);
	z-index: 0; /* keep Leaflet panes under sticky site headers */
}

.hp-pin-wrap { background: none; border: none; }
.hp-pin { filter: drop-shadow(0 2px 3px rgba(15, 25, 60, 0.35)); transition: transform 0.15s; transform-origin: bottom center; }
.hp-pin-wrap:hover .hp-pin,
.hp-pin-selected .hp-pin { transform: scale(1.18); }
.hp-pin-selected { z-index: 1000 !important; }

.hp-cluster-wrap { background: none; border: none; }
.hp-cluster {
	background: var(--hp-primary, #1c3f94);
	color: #fff;
	border: 3px solid rgba(255, 255, 255, 0.85);
	border-radius: 50%;
	text-align: center;
	font-weight: 700;
	font-size: 13px;
	box-shadow: 0 2px 6px rgba(15, 25, 60, 0.3);
}

.hp-legend {
	background: rgba(255, 255, 255, 0.92);
	border-radius: 6px;
	padding: 6px 10px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
	font-size: 12px;
	display: flex;
	gap: 10px;
}
.hp-legend-item { display: inline-flex; align-items: center; gap: 4px; }
.hp-legend-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }

/* Popup: hover previews fade out, pinned popups stay until dismissed. */
.leaflet-popup { transition: opacity 160ms ease; }
/* While fading out, the popup must not swallow clicks aimed at the pin under it. */
.leaflet-popup.hp-popup-fading { opacity: 0; pointer-events: none; }
/* A pinned popup reads as deliberate, so give it a slightly stronger frame. */
.leaflet-popup.hp-popup-pinned .leaflet-popup-content-wrapper {
	box-shadow: 0 3px 16px rgba(15, 25, 60, 0.28);
}
.hp-popup { font-size: 14px; line-height: 1.45; min-width: 210px; }
.hp-popup-header { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 15px; }
.hp-popup-address { color: #4a5261; margin-bottom: 4px; }
.hp-popup-sqft { font-weight: 600; margin-bottom: 8px; }
.hp-popup-availsf {
	font-weight: 700;
	color: var(--hp-available, #1f6feb);
	margin: -4px 0 8px;
}
.hp-popup-links { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.hp-popup-links a { color: var(--hp-primary, #1c3f94); font-weight: 600; text-decoration: underline; }

/* ---------- Meta row ---------- */
.hp-meta-row { display: flex; justify-content: flex-end; margin: 10px 2px 6px; }
.hp-count { font-size: 13px; color: #5a6372; }

/* ---------- Table ---------- */
.hp-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--hp-border);
	border-radius: var(--hp-radius);
}
.hp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14.5px;
	margin: 0;
}
.hp-table thead th {
	background: var(--hp-primary);
	color: #fff;
	text-align: left;
	padding: 0;
	white-space: nowrap;
	border: none;
}
.hp-table thead th:last-child { padding: 12px 16px; font-weight: 700; }
.hp-sort {
	appearance: none;
	background: none;
	border: none;
	color: inherit;
	font: inherit;
	font-weight: 700;
	padding: 12px 16px;
	width: 100%;
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 6px;
}
.hp-sort:hover { background: var(--hp-primary-dark); }
.hp-sort-arrow { font-size: 10px; }

.hp-table tbody tr {
	border-top: 1px solid var(--hp-border);
	cursor: pointer;
	transition: background 0.12s;
}
.hp-table tbody tr:nth-child(even) { background: var(--hp-bg-soft); }
.hp-table tbody tr:hover { background: #eaf0fb; }
.hp-table tbody tr.hp-row-selected { background: #dde8fb; box-shadow: inset 3px 0 0 var(--hp-primary); }
.hp-table td { padding: 11px 16px; vertical-align: middle; border: none; }
.hp-td-sqft { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hp-td-cutsheet a { color: var(--hp-primary); font-weight: 600; }
.hp-muted { color: #9aa2b1; }
.hp-no-map {
	font-size: 11px;
	color: #b45309;
	background: #fef3c7;
	border-radius: 4px;
	padding: 1px 6px;
	white-space: nowrap;
	vertical-align: middle;
}

/* Status badges */
.hp-badge {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	padding: 5px 9px;
	border-radius: 999px;
	white-space: nowrap;
}
.hp-badge-available { background: #dbeafe; color: #1548b8; }
/* Safety alias: same look as available if the old slug ever resurfaces. */
.hp-badge-unit_available { background: #dbeafe; color: #1548b8; }
.hp-badge-leased { background: #e8ebf0; color: #57606d; }
/* Unrecognized status from the source data — visible, but never marketed. */
.hp-badge-unknown { background: #fef3c7; color: #92400e; }

/* ---------- Mobile: table collapses to cards ---------- */
@media (max-width: 700px) {
	.hp-toolbar { flex-direction: column; align-items: stretch; padding: 12px; }
	.hp-search { min-width: 0; width: 100%; }
	.hp-map { height: 46vh; min-height: 300px; }

	.hp-table thead { display: none; }
	.hp-table, .hp-table tbody, .hp-table tr, .hp-table td { display: block; width: 100%; }
	.hp-table tbody tr {
		border: 1px solid var(--hp-border);
		border-radius: var(--hp-radius);
		margin: 10px;
		padding: 6px 0;
		background: #fff !important;
	}
	.hp-table tbody tr.hp-row-selected { box-shadow: inset 0 0 0 2px var(--hp-primary); }
	.hp-table td {
		display: flex;
		justify-content: space-between;
		gap: 12px;
		padding: 6px 14px;
	}
	.hp-table td::before {
		content: attr(data-label);
		font-weight: 600;
		color: #5a6372;
		flex-shrink: 0;
	}
}