/**
 * BG7BAG repeater map — page-specific styles (Phase 10).
 *
 * Enqueued ONLY on /repeater-map/ (see includes/repeater-map.php).
 * Shared typography stays in main.css; this file owns the toolbar,
 * the map frame, dot markers, popups and the fullscreen mode.
 * Rules from the site spec: inputs 18px, every tap target ≥ 48px,
 * no !important.
 */

/* ------------------------------------------------------------------ */
/* Frame                                                               */
/* ------------------------------------------------------------------ */

.bhi-mapwrap {
	border: 1px solid #dadce0;
	border-radius: 8px;
	overflow: hidden;
	background: #fff;
	display: flex;
	flex-direction: column;
	position: relative;
}

/* Fullscreen: native API state and the fixed-overlay fallback class
   (iPhone Safari cannot fullscreen an element). */
.bhi-mapwrap:fullscreen {
	border: 0;
	border-radius: 0;
}
.bhi-mapwrap--fs {
	position: fixed;
	inset: 0;
	z-index: 9999;
	border: 0;
	border-radius: 0;
}
.bhi-mapwrap:fullscreen .bhi-map,
.bhi-mapwrap--fs .bhi-map {
	flex: 1 1 auto;
	height: auto;
	min-height: 0;
}

/* Fullscreen A (Phase 50, owner decision 2026-10-21): pure-map
   fullscreen like production — all 4 .bhi-mapbar rows hide, the map
   and the status line stay (the status line is a sibling of the
   rows, not a row, so it survives on its own; at zoom 6 with no
   status line an empty map would have no explanation). The floating
   exit button is the only added chrome: display:none in normal view
   (normal layout unchanged) and shown only in fullscreen, because
   the row-1 toggle hides with its row and the iOS fallback has no
   ESC. Specificity (0,2,0) beats the base .bhi-mapbar flex rule
   (0,1,0), so no override flag is needed. */
.bhi-mapwrap:fullscreen .bhi-mapbar,
.bhi-mapwrap--fs .bhi-mapbar {
	display: none;
}
.bhi-map__fs-exit {
	display: none;
}
.bhi-mapwrap:fullscreen .bhi-map__fs-exit,
.bhi-mapwrap--fs .bhi-map__fs-exit {
	display: block;
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1100;
	min-height: 48px;
	padding: 8px 12px;
	border: 1px solid #dadce0;
	border-radius: 8px;
	background: #fff;
	font-size: 16px;
}

/* ------------------------------------------------------------------ */
/* Toolbar                                                             */
/* ------------------------------------------------------------------ */

.bhi-mapbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 12px;
	border-bottom: 1px solid #e8eaed;
	background: #f8f9fa;
}

.bhi-mapbar__search {
	display: flex;
	flex: 1 1 240px;
	gap: 8px;
	margin: 0;
}

.bhi-mapbar input[type="search"],
.bhi-mapbar input[type="text"],
.bhi-mapbar select {
	font-size: 18px;
	line-height: 1.4;
	min-height: 52px;
	padding: 8px 12px;
	border: 1px solid #bdc1c6;
	border-radius: 6px;
	background: #fff;
	color: #212121;
	box-sizing: border-box;
}

.bhi-mapbar__search input {
	flex: 1 1 auto;
	min-width: 0;
}

.bhi-mapbar select {
	max-width: 100%;
}

.bhi-mapbar button {
	font-size: 16px;
	min-height: 52px;
	min-width: 52px;
	padding: 8px 14px;
	border: 1px solid #bdc1c6;
	border-radius: 6px;
	background: #fff;
	color: #212121;
	cursor: pointer;
	white-space: nowrap;
}
.bhi-mapbar button:hover {
	background: #eef2fb;
}
.bhi-mapbar button.is-active {
	background: #1a56db;
	border-color: #1a56db;
	color: #fff;
}

.bhi-mapbar__check {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 52px;
	font-size: 16px;
	cursor: pointer;
}
.bhi-mapbar__check input[type="checkbox"] {
	width: 22px;
	height: 22px;
	margin: 0;
	accent-color: #1a56db;
}

.bhi-mapbar__lab {
	font-size: 16px;
	color: #5f6368;
}

/* Layer toggles (M4/M5): badges ride the same 52px-tall check row as
   the other toolbar controls, so the 48px tap-target rule is met by
   reuse, not by a second measurement. Badges and emoji are text, not
   images — the main.css global `html body .bhi-content img` rule
   (0,1,3) has nothing to compete with here. */
.bhi-map__badge {
	display: inline-block;
	min-width: 2.5em;
	text-align: center;
	padding: 2px 8px;
	border-radius: 10px;
	background: #eef2fb;
	color: #1a56db;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}
.bhi-mapemoji {
	display: block;
	font-size: 20px;
	line-height: 1;
	text-align: center;
}
.bhi-map__notice {
	font-size: 14px;
	color: #5f6368;
}

.bhi-map__legend {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 10px;
	font-size: 14px;
	color: #5f6368;
	margin-left: auto;
}
.bhi-map__legend .bhi-mapdot {
	position: relative;
	top: 2px;
	margin-right: 2px;
}

/* ------------------------------------------------------------------ */
/* Map + markers + popup                                               */
/* ------------------------------------------------------------------ */

.bhi-map {
	height: 68vh;
	min-height: 380px;
	width: 100%;
	background: #eef1f4;
	font: inherit;
	z-index: 0;
}

.bhi-map__loading {
	padding: 24px 16px;
	color: #5f6368;
}

.bhi-mapdot {
	display: block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.bhi-mapdot-wrap {
	background: transparent;
	border: 0;
}

.bhi-mappop {
	font-size: 15px;
	line-height: 1.5;
	min-width: 190px;
}
.bhi-mappop__band {
	display: inline-block;
	padding: 0 7px;
	border-radius: 9px;
	background: #eef2fb;
	color: #1a56db;
	font-size: 13px;
	font-weight: 500;
}
.bhi-mappop__lab {
	color: #5f6368;
}

/* ------------------------------------------------------------------ */
/* Status + callsign results                                           */
/* ------------------------------------------------------------------ */

.bhi-map__status {
	padding: 10px 12px;
	font-size: 15px;
	color: #3c4043;
	border-top: 1px solid #e8eaed;
	background: #fff;
	min-height: 24px;
}

.bhi-map__results {
	list-style: none;
	margin: 0;
	padding: 8px 12px 12px;
	background: #fff;
}
.bhi-map__results li {
	margin: 0 0 6px;
}
.bhi-map__resultbtn {
	width: 100%;
	text-align: left;
	font-size: 16px;
	min-height: 48px;
	padding: 10px 12px;
	border: 1px solid #dadce0;
	border-radius: 6px;
	background: #f8f9fa;
	color: #212121;
	cursor: pointer;
}
.bhi-map__resultbtn:hover {
	background: #eef2fb;
}

/* ------------------------------------------------------------------ */
/* Desktop                                                             */
/* ------------------------------------------------------------------ */

@media (min-width: 900px) {
	.bhi-map {
		height: 560px;
		min-height: 560px;
	}
}