/* =====================================================================
   BISMAY DASH & ASSOCIATES - WHOLE-SITE SEARCH
   assets/css/site-search.css - v4.9.268

   Styles for the site-wide search bar (header + results page) and for the
   result list. Namespaced .bd-search / .bd-search-result so nothing here can
   collide with the theme, with the per-article "Search this article" bar
   (assets/css/article-search.css, .bd-afind) or with imported article markup.

   Colours, type, radius, spacing and motion are the theme's own tokens only
   - --paper, --ivory, --gold, --gold-deep, --gold-faint, --gold-line, --ink,
   --body, --muted, --line, --line-dark, --radius, --radius-pill, --shadow,
   --dur, --ease - so the bar follows the site (and its dark mode) with no
   new palette and no warm or champagne tones.
   ===================================================================== */

.bd-search-toggle-wrap {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	margin-right: 0.15rem;
}

.site-navigation .bd-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.15rem;
	height: 2.15rem;
	padding: 0;
	gap: 0;
	color: var(--gold-deep);
	background: var(--paper);
	border: 1px solid var(--gold-line);
	border-radius: var(--radius-pill);
	cursor: pointer;
	text-decoration: none;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.site-navigation .bd-search-toggle:hover {
	border-color: var(--gold-deep);
}

.site-navigation .bd-search-toggle:focus-visible {
	outline: 2px solid var(--gold-deep);
	outline-offset: 2px;
}

.site-navigation .bd-search-toggle svg {
	display: block;
}

.site-navigation .bd-search-toggle[aria-expanded="true"] {
	background: var(--gold-faint);
	border-color: var(--gold);
}

/* The revealed panel. Absolutely positioned under the header so it never
   contributes to the header's height while it is closed. */
.bd-search-drop {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1200;
	background: var(--paper);
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	box-shadow: var(--shadow);
	padding-block: 0.7rem;
}

.bd-search-drop[hidden] {
	display: none;
}

.bd-search-drop__inner {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.bd-search-drop__inner .bd-search {
	flex: 1 1 auto;
	min-width: 0;
}

.bd-search-drop__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.15rem;
	height: 2.15rem;
	padding: 0;
	color: var(--gold-deep);
	background: var(--paper);
	border: 1px solid var(--gold-line);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}

.bd-search-drop__close:hover {
	border-color: var(--gold-deep);
}

.bd-search-drop__close:focus-visible {
	outline: 2px solid var(--gold-deep);
	outline-offset: 2px;
}

.bd-search-drop__close svg {
	display: block;
}

/* Dark mode: the same adaptation the accessibility control makes. */
html[data-bd-theme="dark"] .site-navigation .bd-search-toggle,
html[data-bd-theme="dark"] .bd-search-drop__close {
	background: var(--ivory);
	color: var(--gold-deep);
	border-color: var(--gold-line);
}

html[data-bd-theme="dark"] .bd-search-drop {
	background: var(--paper);
	border-color: var(--line);
}

/* ---------------------------------------------------------
   The bar
   --------------------------------------------------------- */
.bd-search {
	position: relative;
}

.bd-search__form {
	position: relative;
	margin: 0;
}

.bd-search--header .bd-search__form {
	max-width: 640px;
}

.bd-search--results {
	margin-bottom: var(--space-4);
}

.bd-search--results .bd-search__form {
	max-width: 640px;
}

.bd-search__field {
	display: flex;
	align-items: center;
	gap: 0.25rem;
	background: var(--paper);
	border: 1px solid var(--line-dark);
	border-radius: var(--radius-pill);
	padding: 0.2rem 0.2rem 0.2rem 0.9rem;
	transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.bd-search__field:focus-within {
	border-color: var(--gold);
	box-shadow: 0 0 0 3px var(--gold-faint);
}

.bd-search__icon {
	display: inline-flex;
	align-items: center;
	color: var(--gold-deep);
	flex: 0 0 auto;
}

.bd-search__icon svg {
	display: block;
}

.bd-search__input {
	flex: 1 1 auto;
	min-width: 0;
	margin: 0;
	padding: 0.55rem 0.4rem;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	line-height: 1.4;
	color: var(--body);
	background: transparent;
	border: 0;
	-webkit-appearance: none;
	appearance: none;
}

.bd-search__input:focus {
	outline: none;
}

.bd-search__input::placeholder {
	color: var(--muted);
	opacity: 1;
}

/* Do not let the native clear affordance double the visible controls. */
.bd-search__input::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}

.bd-search__submit {
	flex: 0 0 auto;
	margin: 0;
	padding: 0.5rem 1.1rem;
	font-family: var(--font-sans);
	font-size: var(--fs-sm);
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--paper);
	background: var(--gold);
	border: 1px solid var(--gold);
	border-radius: var(--radius-pill);
	cursor: pointer;
	transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}

.bd-search__submit:hover {
	background: var(--gold-deep);
	border-color: var(--gold-deep);
}

.bd-search__submit:focus-visible {
	outline: 2px solid var(--gold-deep);
	outline-offset: 2px;
}

/* ---------------------------------------------------------
   The live suggestion panel
   --------------------------------------------------------- */
.bd-search__panel {
	position: absolute;
	z-index: 1200;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--paper);
	border: 1px solid var(--line);
	border-top: 2px solid var(--gold);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 0.4rem;
	max-height: 62vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.bd-search__panel[hidden],
.bd-search__all[hidden],
.bd-search__list[hidden] {
	display: none;
}

.bd-search__status {
	margin: 0;
	padding: 0.5rem 0.7rem;
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}

.bd-search__status:empty {
	display: none;
}

.bd-search__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bd-search__option {
	margin: 0;
}

.bd-search__option-link {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.55rem 0.7rem;
	border-radius: var(--radius);
	color: var(--body);
	text-decoration: none;
}

.bd-search__option.is-active .bd-search__option-link,
.bd-search__option-link:hover,
.bd-search__option-link:focus-visible {
	background: var(--gold-faint);
	color: var(--gold-deep);
	outline: none;
}

.bd-search__option-title {
	font-size: var(--fs-sm);
	font-weight: 500;
}

.bd-search__option-type {
	flex: 0 0 auto;
	font-size: var(--fs-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--gold-deep);
	white-space: nowrap;
}

.bd-search__all {
	margin: 0;
	padding: 0.5rem 0.7rem 0.35rem;
	border-top: 1px solid var(--line);
}

.bd-search__all-link {
	font-size: var(--fs-sm);
	font-weight: 600;
	color: var(--gold-deep);
	text-decoration: none;
}

.bd-search__all-link:hover,
.bd-search__all-link:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------
   The results page
   --------------------------------------------------------- */
.bd-search-results {
	margin: 0;
	padding: 0;
}

.bd-search-results__count {
	margin: 0 0 var(--space-3);
	color: var(--muted);
}

.bd-search-result {
	display: block;
}

.bd-search-result__title {
	font-size: var(--fs-lg);
	margin-bottom: 0.3em;
}

.bd-search-result__title a {
	text-decoration: none;
	color: inherit;
}

.bd-search-result__title a:hover,
.bd-search-result__title a:focus-visible {
	color: var(--gold-deep);
}

.bd-search-result__excerpt {
	margin: 0.2em 0 0.4em;
	color: var(--muted);
}

.bd-search-mark {
	background: var(--gold-faint);
	color: inherit;
	padding: 0 0.12em;
	border-radius: 2px;
}

/* Tighter on small screens so the field keeps as much room as possible. */
@media (max-width: 560px) {
	.bd-search__field {
		padding-left: 0.7rem;
	}

	.bd-search__submit {
		padding: 0.5rem 0.85rem;
	}
}