/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Live Search Dropdown                                */
/*                                                     */
/* Compact override layer on top of search-results.css */
/* (enqueued site-wide for the dropdown). Mirrors the  */
/* pg-core-child live-search dropdown appearance.      */
/* BYU brand greys used as literals for exact parity:  */
/*   border / view-all hover : #e6e6e6                 */
/*   card hover / view-all bg : #f4f4f4                */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Anchor the dropdown to its form. */
.search-form,
.search-form-mobile {
	position: relative;
}

.live-search-results {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	box-sizing: border-box;
	width: 100%;
	flex-direction: column;
	overflow-x: hidden;
	background-color: #fff;
	border: 1px solid #e6e6e6;
	border-top: none;
	box-shadow: 0 4px 8px rgb(0 0 0 / 10%);
	overscroll-behavior: none;
}

/* Constrain height only for large result sets. */
.live-search-results.many-results {
	max-height: 80vh;
	overflow-y: auto;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Result cards — compact single column                */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

.live-search-results .live-search__card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	padding: 8px 12px;
	border: none;
	border-bottom: 1px solid #e6e6e6;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.live-search-results .live-search__card:hover {
	background-color: #f4f4f4;
	box-shadow: none;
}

/* Whole card is clickable via the overlay link. */
.live-search-results .live-search__card-link {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* No portrait thumbnails in the narrow dropdown: the card builder omits the
   image markup entirely rather than rendering and hiding it. */

/* Title is always a single line, ellipsis-truncated (matches pg-core-child). */
.live-search-results .live-search__card-title {
	width: 100%;
	margin: 0 0 2px;
	font-family: var(--f-ibm-plex-sans);
	font-size: 14px;
	line-height: 1.3;
	font-weight: 500;
	color: var(--c-navy);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Byline truncates to a single line with an ellipsis. Font and colour are
   declared here rather than inherited: this panel no longer shares the
   results page's card rules, and the speaker anchor below takes its
   colour from here. */
.live-search-results .live-search__card-bylines {
	display: block;
	width: 100%;
	margin: 0;
	font-family: var(--f-ibm-plex-sans);
	font-size: 12px;
	color: var(--c-gray-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Speaker name sits above the card overlay; grey by default, blue on hover, no underline. */
.live-search-results .live-search__card-speaker {
	position: relative;
	z-index: 2;
	color: inherit;
	font-weight: normal;
	text-decoration: none;
}

.live-search-results .live-search__card-speaker:hover {
	color: var(--c-blue-royal);
	text-decoration: none;
}

.live-search-results .live-search__card-excerpt {
	width: 100%;
	margin: 6px 0 0;
	font-family: var(--f-ibm-plex-sans);
	font-size: 12px;
	line-height: 1.4;
	max-height: 2.8em;
	color: var(--c-gray-dark);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	overflow-wrap: anywhere;
}

/* Highlight: plain yellow background, never italic or bold. */
.live-search-results .ep-highlight {
	background-color: rgb(255 253 205 / 100%);
	font-style: normal;
	font-weight: inherit;
	padding: 0;
	color: inherit;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Topic / speaker best-match cards — compact          */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

.live-search-results .search-results__topic-card,
.live-search-results .search-results__speaker-card {
	margin: 0;
	padding: 12px 10px;
	border: none;
	border-bottom: 1px solid #e6e6e6;
	border-radius: 0;
	gap: 0.75rem;
}

.live-search-results .search-results__topic-card-title,
.live-search-results .search-results__speaker-card-name {
	font-size: 15px;
	margin: 0 0 0.25rem;
}

.live-search-results .search-results__topic-card-count,
.live-search-results .search-results__speaker-card-count {
	font-size: 12px;
	margin: 0 0 0.5rem;
}

.live-search-results .search-results__speaker-card-portrait {
	width: 60px;
	height: 75px;
}

/* The dropdown keeps the speaker card horizontal at every width. The full
   results page stacks the portrait above the text under 40rem; the dropdown is
   too short for that, so cancel it here (unconditionally — this selector
   outranks the page rule at every width) instead of mirroring breakpoints.
   box-sizing/width match .search-results__card above: the dropdown is a flex
   column, so a stretched card with content-box padding would overflow it. */
.live-search-results .search-results__speaker-card {
	box-sizing: border-box;
	width: 100%;
	flex-direction: row;
	align-items: center;
}

.live-search-results .search-results__speaker-card-image {
	order: 0;
}

/* Both must be shrinkable or the uppercase button pushes the card wider than
   the dropdown at 320px. */
.live-search-results .search-results__speaker-card-content,
.live-search-results .search-results__speaker-card-btn {
	min-width: 0;
}

.live-search-results .search-results__speaker-card-actions {
	gap: 0.5rem;
}

.live-search-results .search-results__speaker-card-secondary {
	font-size: 12px;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* States                                              */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

.live-search-results .no-results,
.live-search-results .error,
.live-search-results .loading-indicator {
	padding: 20px;
	font-family: var(--f-ibm-plex-sans);
	color: var(--c-gray-dark);
	text-align: center;
}

/* Compact, centered no-results message inside the dropdown (the shared
   .search-results__no-results rule is roomier for the full results page). */
.live-search-results .search-results__no-results {
	padding: 20px;
	text-align: center;
}

.live-search-results .search-results__no-results p {
	margin: 0;
	display: flex;
	justify-content: center;
	align-items: baseline;
	min-width: 0;
	white-space: nowrap;
}

/* Only the search term truncates; the "No results found for" label and the
   surrounding quotes stay intact so the box keeps a uniform single-line height. */
.live-search-results .search-results__no-results-term {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Spinning wheel beside the "Searching…" text. */
.live-search-results .loading-indicator {
	position: relative;
	padding-left: 30px;
}

.live-search-results .loading-indicator::before {
	content: "";
	position: absolute;
	left: 10px;
	top: 50%;
	width: 15px;
	height: 15px;
	border: 2px solid var(--c-gray-medium);
	border-top: 2px solid var(--c-blue-royal);
	border-radius: 50%;
	transform: translateY(-50%);
	animation: live-search-spin 1s linear infinite;
}

@keyframes live-search-spin {
	0% {
		transform: translateY(-50%) rotate(0deg);
	}

	100% {
		transform: translateY(-50%) rotate(360deg);
	}
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* View all results                                    */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

.live-search-results .view-all-container {
	position: relative;
	width: 100%;
	margin-top: auto;
	background-color: #fff;
	border-top: 1px solid #e6e6e6;
	z-index: 5;
}

.live-search-results .view-all {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 12px 15px;
	font-family: var(--f-ibm-plex-sans);
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	text-decoration: none;
	color: var(--c-blue-royal);
	background-color: #f4f4f4;
}

.live-search-results .view-all:hover {
	background-color: #e6e6e6;
}

/* –––––––––––––––––––––––––––––––––––––––––––––––––– */
/* Responsive                                          */
/* –––––––––––––––––––––––––––––––––––––––––––––––––– */

/* Wider popup on desktop, nudged slightly right of the search box so the
   full-bleed hero banner doesn't peek out to the right of the dropdown.
   Breakpoint matches where the desktop search box appears (> 900px), so the
   dropdown never falls back to the narrow pill width. */
@media (min-width: 901px) {
	.search-form .live-search-results {
		top: calc(100% + 2px);
		width: 450px;
		left: auto;
		right: -2px;
	}
}

@media (max-width: 48rem) {
	.live-search-results {
		max-height: 300px;
		overflow-y: auto;
	}
}