/*
 * Search suggestions (assets/search-suggest.js): a list under the search field. Colours are the
 * theme's palette slugs (DEC-10), with fallbacks so the list stays readable under any theme.
 */
.ngheduoc-suggest-host {
	position: relative;
}

.ngheduoc-suggest {
	background: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--border, #d5e1e3);
	border-radius: var(--wp--custom--radius--card, 10px);
	box-shadow: 0 0.5rem 1.5rem -0.5rem color-mix(in srgb, var(--wp--preset--color--contrast, #16313d) 35%, transparent);
	box-sizing: border-box;
	font-family: var(--wp--preset--font-family--ui, inherit);
	left: 0;
	list-style: none;
	margin: 0.25rem 0 0;
	max-height: min(70vh, 32rem);
	min-width: 100%;
	overflow-y: auto;
	padding: 0.25rem 0;
	position: absolute;
	top: 100%;
	/* Wider than a narrow header field, but never past the screen's edge. */
	width: min(24rem, calc(100vw - 2rem));
	z-index: 1000;
}

/* The header field sits at the right end of the bar: open the list towards the left. */
.broadsheet-header .ngheduoc-suggest {
	left: auto;
	right: 0;
}

.ngheduoc-suggest[hidden] {
	display: none;
}

.ngheduoc-suggest__option {
	cursor: pointer;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	justify-content: center;
	margin: 0;
	padding: 0.5rem 0.75rem;
}

.ngheduoc-suggest__option[aria-selected="true"],
.ngheduoc-suggest__option:hover {
	background: var(--wp--preset--color--surface, #f2f7f7);
}

/* The active option also carries a bar, so it does not rely on the tint alone. */
.ngheduoc-suggest__option[aria-selected="true"] {
	box-shadow: inset 3px 0 0 var(--wp--preset--color--primary, #075985);
}

.ngheduoc-suggest__title {
	color: var(--wp--preset--color--contrast, #16313d);
	font-size: var(--wp--preset--font-size--small, 0.9375rem);
	font-weight: 600;
	line-height: 1.35;
}

.ngheduoc-suggest__type {
	color: var(--wp--preset--color--muted, #5b6b74);
	font-size: var(--wp--preset--font-size--x-small, 0.8125rem);
}

/* NFR-3: 44px rows on touch screens. */
@media (pointer: coarse) {
	.ngheduoc-suggest__option {
		box-sizing: border-box;
		min-height: 44px;
	}
}

/* Read by screen readers only. */
.ngheduoc-suggest-status {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}