/**
 * [bw_search_icon] — header global search, styled to mirror brentwood.ca.
 *
 * Clicking the magnifying-glass icon reveals a centred dropdown panel just
 * below the header — matching the Laravel site's "absolute, centred, w-full"
 * search overlay: a wide search bar with a large grey search icon on the left,
 * an italic "Search Brentwood…" placeholder, and an attached clear (×) cell on
 * the right, with live results listed below in the same white panel.
 *
 * Self-contained — no Tailwind/FontAwesome dependency (SVGs are inlined by the
 * shortcode). Interactive accents use Brentwood red (#c8272c, the Kadence
 * --global-palette1). Selectors are prefixed with .bw-search to win over the
 * theme/header's own input styling.
 */

.bw-search {
	position: relative;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

/* ---- Toggle icon (plain grey magnifying glass, like the Laravel header) ---- */
.bw-search .bw-search__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 .5rem;
	margin: 0;
	background: none !important;
	border: 0;
	box-shadow: none;
	cursor: pointer;
	color: #6b7280; /* gray-500 */
	transition: color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.bw-search .bw-search__toggle:hover,
.bw-search .bw-search__toggle:focus-visible,
.bw-search.is-open .bw-search__toggle {
	color: #374151; /* gray-700 */
}
.bw-search__toggle-icon {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
	fill: currentColor;
}

/* ---- Dropdown panel: centred below the header (top set by JS on open) ---- */
.bw-search__panel {
	position: fixed;
	left: 50%;
	top: 0; /* overridden inline by JS to sit just below the icon */
	transform: translateX(-50%);
	width: min(92vw, 44rem);
	z-index: 1000;
}
.bw-search__panel[hidden] {
	display: none;
}

.bw-search__inner {
	background: #fff;
	border-radius: .5rem;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .18), 0 3px 10px rgba(0, 0, 0, .08);
	overflow: hidden;
	max-height: 85vh;
	display: flex;
	flex-direction: column;
}

/* ---- Search bar: [ icon  input ][ × ] as one bordered control ---- */
.bw-search .bw-search__bar {
	position: relative;
	display: flex;
	align-items: stretch;
	margin: 0;
	padding: 1rem;
}
.bw-search__field {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	min-width: 0;
}
.bw-search__lead {
	position: absolute;
	left: .95rem;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	color: #d1d5db; /* gray-300 */
	pointer-events: none;
	z-index: 2;
}
.bw-search__lead svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
}
.bw-search .bw-search__input {
	flex: 1 1 auto;
	width: 100%;
	min-width: 0;
	border: 1px solid #e3e3e3;
	border-right: 0;
	border-radius: .4rem 0 0 .4rem;
	padding: .72rem .8rem .72rem 3rem;
	font-size: 1.05rem;
	font-style: normal;
	line-height: 1.4;
	color: #374151;
	outline: none;
	background: #fff;
	-webkit-appearance: none;
	appearance: none;
}
.bw-search .bw-search__input::placeholder {
	color: #9ca3af;
	font-style: italic;
	opacity: 1;
}
/* hide the native search clear (we provide our own) */
.bw-search .bw-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.bw-search .bw-search__clear {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	padding: 0 .85rem;
	border: 1px solid #e3e3e3;
	border-left: 0;
	border-radius: 0 .4rem .4rem 0;
	background: #fff;
	cursor: pointer;
	color: #9ca3af;
	transition: color .15s ease;
}
.bw-search .bw-search__clear:hover,
.bw-search .bw-search__clear:focus-visible {
	color: #6b7280;
}
.bw-search .bw-search__clear svg {
	width: 1.4rem;
	height: 1.4rem;
	fill: currentColor;
}

/* Brentwood-red focus on the whole control */
.bw-search .bw-search__bar:focus-within .bw-search__input,
.bw-search .bw-search__bar:focus-within .bw-search__clear {
	border-color: #c8272c;
}

/* ---- Results ---- */
.bw-search__results {
	overflow-y: auto;
}
.bw-search__results:not(.is-active) {
	display: none;
}
.bw-search__results.is-active {
	border-top: 1px solid #f0f0f0;
}
.bw-search__msg {
	padding: .9rem 1.25rem;
	color: #6b7280;
	font-size: .95rem;
}
.bw-search__result {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .75rem;
	padding: .75rem 1.25rem;
	color: #374151;
	text-decoration: none;
	border-bottom: 1px solid #f5f5f5;
}
.bw-search__result:last-child {
	border-bottom: 0;
}
.bw-search__result:hover,
.bw-search__result:focus-visible {
	background: #f8f6f3;
	color: #c8272c;
}
.bw-search__result-title {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: .98rem;
}
.bw-search__result-type {
	flex: 0 0 auto;
	font-size: .7rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #9ca3af;
	background: #f3f4f6;
	border-radius: .25rem;
	padding: .12rem .45rem;
}

/* ---- Mobile: near-full-width, kept centred ---- */
@media (max-width: 640px) {
	.bw-search__panel {
		width: 94vw;
	}
	.bw-search .bw-search__input {
		font-size: 1rem;
	}
}