/*
 * bos-reel-filters.css
 * Sticky settings/filter bar for the BOS reel (species explorer).
 * Reusable: also intended for the taxon page's "Species" section reel.
 * Depends on: bos-common.css (CSS variables)
 */

.reel-filter-bar {
	position: sticky;
	/* --site-header-h is set by header-tabs.php's lockHeaderHeight() from the
	   navbar's real on-load height — the header no longer shrinks on scroll
	   (that JS also locks its height), so this can't be a stale hardcoded
	   guess anymore or the bar sticks too high and hides under the header. */
	top: var(--site-header-h, 62px);
	z-index: 150;
	/* Was var(--navy) — safely dark before (that variable was undefined on
	   every page this loaded on), but now bright #5b8dee on the homepage
	   (body.btt-header-page, header-tabs.php) since this is a full-width
	   sticky bar, not a button/badge. --cream-dark is the actual dark
	   "elevated surface" tone used for cards/panels elsewhere. */
	background: var(--cream-dark, #0F2340);
	border-bottom: 1px solid rgba(255,255,255,0.08);
}

.reel-filter-bar__row1 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 10px 16px;
	min-height: 48px;
}

.reel-toggle {
	display: flex;
	align-items: center;
	gap: 6px;
	color: rgba(255,255,255,0.75);
	font-size: var(--fs-sm, 14px);
	cursor: pointer;
	white-space: nowrap;
}
.reel-toggle input { cursor: pointer; }

.reel-sort-group {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.reel-sort-group label {
	display: flex;
	align-items: center;
	gap: 5px;
	color: rgba(255,255,255,0.65);
	font-size: var(--fs-sm, 14px);
	cursor: pointer;
	white-space: nowrap;
}
.reel-sort-group input { cursor: pointer; }

.reel-filter-toggle-btn {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 20px;
	color: rgba(255,255,255,0.85);
	font-size: var(--fs-sm, 14px);
	padding: 5px 14px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease;
}
.reel-filter-toggle-btn:hover,
.reel-filter-toggle-btn[aria-expanded="true"] {
	background: rgba(255,255,255,0.1);
	border-color: rgba(255,255,255,0.4);
}
.reel-filter-toggle-btn .reel-filter-count {
	background: var(--gold, #C4933F);
	color: #1a1a18;
	border-radius: 10px;
	padding: 0 6px;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
}

.reel-filter-panel {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 28px;
	padding: 12px 16px 16px;
	border-top: 1px solid rgba(255,255,255,0.08);
}
.reel-filter-panel[hidden] { display: none; }

.reel-filter-cat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 140px;
}
.reel-filter-cat-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: rgba(255,255,255,0.4);
	white-space: nowrap;
}
.reel-filter-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}
.reel-filter-chip {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	border-radius: 20px;
	border: 1px solid rgba(255,255,255,0.2);
	background: transparent;
	color: rgba(255,255,255,0.65);
	font-size: 12px;
	cursor: pointer;
	transition: background 0.1s, color 0.1s, border-color 0.1s;
	white-space: nowrap;
}
.reel-filter-chip:hover { background: rgba(255,255,255,0.1); color: #fff; }
.reel-filter-chip.active {
	background: var(--gold, #C4933F);
	border-color: var(--gold, #C4933F);
	color: #1a1a18;
}

/* Client-only "Hide Names" toggle */
.bos-reel--hide-names .photo-grid__item figcaption { display: none; }

@media (max-width: 700px) {
	.reel-filter-bar__row1 { gap: 10px; }
	.reel-sort-group { width: 100%; order: 3; }
	.reel-filter-panel { gap: 12px 20px; }
}