/* =========================================================
Campus Map — page-specific styles
Depends on Bootstrap 4 (loaded site-wide) + Leaflet CSS
========================================================= */

/* Layout wrapper: sidebar left, map right */
#campus-map-wrapper {
	display: flex;
	height: 70vh;
	min-height: 520px;
	border-top: 3px solid #CC0000;
}

/* Sidebar */
#map-sidebar {
	width: 320px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	background: #fff;
	border-right: 1px solid #dee2e6;
	overflow: hidden;
}

/* Search input wrapper — needed to position the clear button */
.map-search-wrap {
	position: relative;
}

.map-search-wrap #map-search {
	padding-right: 2rem;
	border-color: #888; /* #888 on #f8f9fa = 3.36:1 — passes 1.4.11 non-text contrast */
}

.map-search-clear {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: #666;  /* #666 on white = 5.74:1; white on #666 = 5.74:1 — passes AA */
	color: #fff;
	font-size: 0.8rem;
	line-height: 1;
	cursor: pointer;
	transition: background 0.12s;
}

.map-search-clear:hover {
	background: #888;
}

/* Page heading - kept out of interior-alt.xsl's hero (this page overrides
page-content entirely), styled compact so it doesn't eat into the sidebar's
limited vertical space the way a full hero-sized h1 would. */
#map-page-heading {
	margin: 0;
	padding: 10px 12px 0;
	font-size: 0.95rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	background: #f8f9fa;
	color: var(--pure-black, #000);
}

/* Search + filter controls */
#map-controls {
	padding: 12px;
	background: #f8f9fa;
	border-bottom: 1px solid #dee2e6;
	flex-shrink: 0;
}

/* Make filter buttons share equal width */
#map-filters {
	width: 100%;
}

#map-filters .btn {
	flex: 1;
	font-size: 0.75rem;
	padding: 0.25rem 0.35rem;
}

/* Override Bootstrap danger with TTUHSC red */
#map-filters .btn-outline-ttuhsc,
#map-filters .btn-outline-ttuhsc:focus {
	color: #CC0000;
	border-color: #CC0000;
}

#map-filters .btn-outline-ttuhsc:hover,
#map-filters .btn-outline-ttuhsc.active {
	background-color: #CC0000;
	border-color: #CC0000;
	color: #fff;
}

/* Override Bootstrap secondary with the partner-location marker color.
#5577AA itself only hits ~4.3:1 as text on this panel's #f8f9fa background
(it was validated elsewhere as a fill with white text on top, a different
pairing) - darkened here to #4A6C9B for ~5.1:1, AA-compliant as text/border. */
#map-filters .btn-outline-partner,
#map-filters .btn-outline-partner:focus {
	color: #4A6C9B;
	border-color: #4A6C9B;
}

#map-filters .btn-outline-partner:hover,
#map-filters .btn-outline-partner.active {
	background-color: #5577AA;
	border-color: #5577AA;
	color: #fff; /* 4.55:1 on #5577AA — passes AA, same as .map-category-header.partner */
}

/* Parking sub-filter checkboxes */
#map-parking-filters {
	margin: 0.5rem 0 0;
	padding: 0;
	border: 0;
}

#map-parking-filters legend {
	width: auto;
	margin: 0 0 4px;
	padding: 0;
	font-size: 0.7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #555;      /* 6.0:1 on #f8f9fa — passes AA */
}

#map-parking-filters .form-check {
	padding-left: 1.3rem;
	margin-right: 0.6rem;
}

#map-parking-filters .form-check-input {
	margin-top: 0.2rem;
	accent-color: #CC0000;
}

#map-parking-filters .form-check-label {
	font-size: 0.78rem;
	color: #333;
}

/* Scrollable location list */
#map-location-list {
	overflow-y: auto;
	flex: 1;
	-webkit-overflow-scrolling: touch;
}

/* Category section header
!important on color/margin/font overrides styles.css line 195:
"section.alert h1, h2, h3 ... { color: inherit !important }"
which applies globally due to CSS comma-selector parsing. */
h3.map-category-header {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 !important;
	padding: 7px 12px;
	background: #CC0000;
	color: #fff !important; /* 5.89:1 on #CC0000 — passes AA */
	font-size: 0.72rem !important;
	font-weight: 700;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	position: sticky;
	top: 0;
	z-index: 1;
}

h3.map-category-header.partner {
	background: #5577AA;   /* white on #5577AA ≈ 4.55:1 — passes AA */
}

h3.map-category-header.parking {
	background: #333;      /* white on #333 = 12.63:1 — passes AA */
}

/* Individual location row — implemented as a full-width button for keyboard access */
.map-location-btn {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 9px 12px;
	border: none;
	border-bottom: 1px solid #f0f0f0;
	background: transparent;
	text-align: left;
	cursor: pointer;
	transition: background 0.12s;
	line-height: 1;
}

/* Numbered badge — matches the map marker color */
.map-location-num {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border-radius: 5px;
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
}

.map-location-info {
	min-width: 0;
}

.map-location-btn:hover,
.map-location-btn.is-active {
	background: #fff5f5;
}

.map-location-btn:focus {
	outline: 3px solid #005fcc;
	outline-offset: -3px;
	background: #fff5f5;
}

.map-location-btn:last-child {
	border-bottom: none;
}

.map-location-name {
	display: block;
	color: #CC0000;
	font-size: 0.825rem;
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 2px;
}

.map-location-address {
	display: block;
	color: #666;        /* 5.74:1 on white — passes AA */
	font-size: 0.75rem;
	line-height: 1.3;
}

/* No-results message */
.map-no-results {
	padding: 20px 12px;
	color: #595959;     /* 7.0:1 on white — passes AA */
	font-size: 0.85rem;
	text-align: center;
}

/* Map container */
#campus-map {
	flex: 1;
	min-width: 0;
	z-index: 0;
}

/* Leaflet popup overrides */
.leaflet-popup-content-wrapper {
	border-radius: 4px;
	overflow: hidden; /* clips the close-button row to the rounded corners */
}

/* Full-width close button row above popup content */
.leaflet-popup-close-button {
	left: 0 !important;
	right: 0 !important;
	width: auto !important;
	height: 28px !important;
	line-height: 28px !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	text-align: right !important;
	padding: 0 8px 0 0 !important;
	background: #f0f0f0 !important;
	border-bottom: 1px solid #ddd !important;
	border-radius: 0 !important;
	color: #555 !important;
}

.leaflet-popup-close-button:hover {
	background: #e4e4e4 !important;
	color: #CC0000 !important;
}

.leaflet-popup-content {
	margin: 10px 12px; /* top margin pushed down by close-button row via padding-top on wrapper */
	text-align: center;
}

/* Reserve space at top of wrapper for the absolute close-button row */
.leaflet-popup-content-wrapper {
	padding-top: 28px !important;
}

.popup-img {
	display: block;
	width: 100%;
	height: 110px;
	object-fit: cover;
	border-radius: 3px;
	margin: 0 0 8px;
	box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

.popup-name {
	font-size: 0.85rem;
	font-weight: 700;
	color: #222;
	margin-bottom: 3px;
	line-height: 1.3;
}

.popup-address {
	font-size: 0.75rem;
	color: #666;
	margin-bottom: 10px;
	line-height: 1.3;
}

.popup-btn {
	display: block;
	width: 100%;
	padding: 4px 8px;
	font-size: 0.75rem;
	border-radius: 3px;
	text-align: center;
	cursor: pointer;
	text-decoration: none;
	margin-bottom: 5px;
	border: 1px solid;
	line-height: 1.5;
}

.popup-btn:last-child {
	margin-bottom: 0;
}

.popup-btn:focus-visible {
	outline: 3px solid #005fcc;
	outline-offset: 2px;
}

/* Scoped under .leaflet-popup-content (not just .popup-btn-maps alone) so this
   beats Leaflet's own "leaflet.css: .leaflet-container a { color: #0078A8; }" -
   one class + one type always wins over a single class, regardless of load order. */
.leaflet-popup-content .popup-btn-maps {
	color: #cc0000;
	border-color: #aaa;
	background: #fff;
}

.leaflet-popup-content .popup-btn-maps:hover {
	background: #f5f5f5;
	color: #333;
	text-decoration: none;
}

.leaflet-popup-content .popup-btn-website {
	color: #cc0000;
	border-color: #aaa;
	background: #fff;
}

.leaflet-popup-content .popup-btn-website:hover {
	background: #f5f5f5;
	color: #0d3349;
	text-decoration: none;
}

.popup-btn-details {
	color: #fff;
	background: #CC0000;
	border-color: #a80000;
	font-weight: 700;
}

.popup-btn-details:hover {
	background: #a80000;
	color: #fff;
}

/* Building detail modal — header accent */
#campus-map-modal .modal-header {
	background: #CC0000;
	color: #fff;
	border-radius: 0;
	position: relative;   /* contain the close button */
	padding-right: 2.75rem;
}

#campus-map-modal .modal-title {
	font-size: 1rem;
	/* styles.css sets "color: var(--pure-black)" directly on all h1-h6, which beats
	the inherited white from .modal-header above (a rule matching the element
	itself always wins over inheritance) - re-assert white here, 5.89:1 on #CC0000. */
	color: #fff;
}

#campus-map-modal .close {
	position: absolute;   /* pin inside the header regardless of site CSS */
	top: 50%;
	right: 0.75rem;
	transform: translateY(-50%);
	color: #fff;
	opacity: 0.85;
	text-shadow: none;
	margin: 0;
	padding: 0;
	line-height: 1;
	font-size: 1.75rem;
}

#campus-map-modal .close:hover {
	opacity: 1;
}


#campus-map-modal ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#campus-map-modal ul li {
	padding: 6px 0;
	border-bottom: 1px solid #eee;
	font-size: 0.875rem;
}

#campus-map-modal ul li:last-child {
	border-bottom: none;
}


/* Map legend (addresses color-only marker issue — WCAG 1.4.1) */
#map-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: 8px 12px;
	font-size: 0.8rem;
	color: #333;
	background: #f5f5f5;
	border-top: 1px solid #dee2e6;
}

.map-legend-item {
	display: flex;
	align-items: center;
	gap: 6px;
}

.map-legend-dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 3px;
	flex-shrink: 0;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.2);
}

/* View toggle: hidden on desktop, shown on mobile */
#map-view-toggle {
	display: none;
}

/* Mobile: Map / List toggle layout */
@media (max-width: 767px) {
	#campus-map-wrapper {
		flex-direction: column;
		height: auto;
		border-top: none;
	}

	#map-sidebar {
		width: 100%;
		max-height: none;
		border-right: none;
		border-top: 1px solid #dee2e6;
		flex-direction: column;
		overflow: hidden;
	}

	#campus-map {
		border-top: 3px solid #CC0000;
	}

	/* Toggle strip */
	#map-view-toggle {
		display: flex;
		flex-shrink: 0;
		margin: 8px 12px 0;
		border: 2px solid #CC0000;
		border-radius: 6px;
		overflow: hidden;
	}

	.map-toggle-btn {
		flex: 1;
		padding: 7px 0;
		font-size: 0.8rem;
		font-weight: 700;
		letter-spacing: 0.04em;
		border: none;
		background: #fff;
		color: #CC0000;   /* #CC0000 on white = 5.89:1 — passes AA */
		cursor: pointer;
		transition: background 0.15s, color 0.15s;
	}

	.map-toggle-btn + .map-toggle-btn {
		border-left: 2px solid #CC0000;
	}

	.map-toggle-btn.active {
		background: #CC0000;
		color: #fff;    /* white on #CC0000 = 5.89:1 — passes AA */
	}

	.map-toggle-btn:focus-visible {
		outline: 3px solid #005fcc;
		outline-offset: -3px;
	}

	/* List view: hide the map */
	#campus-map-wrapper.mobile-show-list #campus-map,
	#campus-map-wrapper.mobile-show-list #map-hint {
		display: none;
	}

	#campus-map-wrapper.mobile-show-list #map-location-list {
		max-height: calc(100vh - 195px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* Map view: hide the list, expand the map */
	#campus-map-wrapper.mobile-show-map #map-location-list {
		display: none;
	}

	#campus-map-wrapper.mobile-show-map #campus-map {
		height: calc(100vh - 160px);
		min-height: 300px;
	}
}