/*
 * Jersey Bulls FC — Search overlay (Typesense instant search).
 *
 * Command-palette-style modal: dark scrim + a centred panel with an input,
 * type facets, and live result rows. Token-driven so it flips for light mode.
 * Markup: header.php (gated on jersey_bulls_ts_searchable) · JS: js/typesense-search.js
 */

.bulls-search {
	position: fixed;
	inset: 0;
	z-index: var(--z-drawer);
	display: flex;
	justify-content: center;
	align-items: flex-start;
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--motion-base) var(--ease-out), visibility var(--motion-base) var(--ease-out);
}
.bulls-search[hidden] { display: none; }
body.bulls-search-open { overflow: hidden; }
body.bulls-search-open .bulls-search { opacity: 1; visibility: visible; }

.bulls-search__scrim {
	position: absolute;
	inset: 0;
	background: var(--overlay-ink);
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

.bulls-search__panel {
	position: relative;
	z-index: 1;
	width: min(92vw, 720px);
	margin-top: clamp(var(--space-8), 12vh, var(--space-20));
	max-height: 78vh;
	display: flex;
	flex-direction: column;
	background: var(--t-canvas);
	border: 1px solid var(--t-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-4);
	overflow: hidden;
	transform: translateY(-12px);
	transition: transform var(--motion-base) var(--ease-out);
}
body.bulls-search-open .bulls-search__panel { transform: translateY(0); }

/* ----- Search bar ----- */
.bulls-search__bar {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-4) var(--space-5);
	border-bottom: 1px solid var(--t-border);
}
.bulls-search__icon { color: var(--t-fg-muted); flex: none; }
/* Scoped to beat the FC United parent input skin (.scheme_default input). */
.bulls-search .bulls-search__input {
	flex: 1;
	min-width: 0;
	appearance: none;
	-webkit-appearance: none;
	background: none !important;   /* beat the FC United parent input skin + native search chrome */
	border: 0;
	outline: none;
	box-shadow: none;
	color: var(--t-fg) !important;   /* beat the FC United parent input colour */
	font-family: var(--ff-sans);
	font-size: var(--fs-300);
}
.bulls-search .bulls-search__input::-webkit-search-decoration,
.bulls-search .bulls-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.bulls-search .bulls-search__input::placeholder { color: var(--t-fg-faint); opacity: 1; }
.bulls-search__close {
	flex: none;
	width: 36px;
	height: 36px;
	border: 0;
	background: none !important;
	box-shadow: none !important;
	color: var(--t-fg-muted);
	font-family: var(--ff-sans);
	font-size: var(--fs-500);
	line-height: 1;
	cursor: pointer;
	border-radius: var(--radius-base);
}
.bulls-search__close:hover { color: var(--t-fg); }

/* ----- Facets ----- */
.bulls-search__facets {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	padding: var(--space-4) var(--space-5) 0;
}
.bulls-search__facet {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-1) var(--space-3);
	border: 1px solid var(--t-border-strong);
	border-radius: var(--radius-md);   /* follows the site-wide corner rule */
	background: none;
	color: var(--t-fg-muted);
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	cursor: pointer;
	transition: color var(--motion-fast) var(--ease-out), border-color var(--motion-fast) var(--ease-out);
}
.bulls-search__facet:hover { color: var(--t-fg); }
.bulls-search__facet[aria-pressed="true"] { color: var(--c-text-inverse); background: var(--c-bulls-red); border-color: var(--c-bulls-red); }
.bulls-search__facet-count { opacity: 0.7; }

/* ----- Results ----- */
.bulls-search__results {
	padding: var(--space-3) var(--space-3) var(--space-4);
	overflow-y: auto;
}
.bulls-search__result {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-3);
	border-radius: var(--radius-md);
	text-decoration: none;
	color: inherit;
	transition: background var(--motion-fast) var(--ease-out);
}
.bulls-search__result:hover,
.bulls-search__result:focus-visible { background: var(--t-panel); outline: none; }
.bulls-search__result-thumb {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: var(--radius-base);
	object-fit: cover;
	background: var(--t-panel);
}
.bulls-search__result-thumb--ph {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--t-fg-faint);
	font-family: var(--ff-display);
	font-size: var(--fs-200);
}
.bulls-search__result-body { min-width: 0; flex: 1; }
.bulls-search__result-type {
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-bulls-red);
}
.bulls-search__result-title {
	margin: 2px 0 0;
	font-family: var(--ff-display);
	font-size: var(--fs-200);
	line-height: var(--lh-snug);
	text-transform: uppercase;
	color: var(--t-fg);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.bulls-search__result-title mark { background: none; color: var(--c-bulls-red); }
.bulls-search__result-meta {
	margin-top: 2px;
	font-size: var(--fs-75);
	color: var(--t-fg-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
/* Crest thumbnails (matches) sit contained on the tile, not cropped. */
.bulls-search__result-thumb--crest {
	object-fit: contain;
	padding: var(--space-2);
	background: var(--t-panel);
}
/* Date pulled out into a right-aligned column — day emphasised, month/year under. */
.bulls-search__result-date {
	flex: none;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 52px;
	text-align: right;
	line-height: 1;
}
.bulls-search__result-date-day {
	font-family: var(--ff-display);
	font-size: var(--fs-400);
	color: var(--t-fg);
}
.bulls-search__result-date-rest {
	margin-top: 3px;
	font-family: var(--ff-mono);
	font-size: var(--fs-50);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--t-fg-muted);
}
.bulls-search__state {
	padding: var(--space-8) var(--space-5);
	text-align: center;
	color: var(--t-fg-muted);
	font-size: var(--fs-100);
}

@media (max-width: 600px) {
	.bulls-search__panel { width: 100vw; height: 100vh; max-height: none; margin-top: 0; border-radius: var(--radius-md); border: 0; }
}