/*
 * Relevanssi Live Ajax Search positions its suggestions box using
 * page-absolute coordinates (jQuery `.offset()`), which only lines up when
 * the box is a direct child of <body>. Our search form renders inside the
 * header search modal, which is `position: relative` *and* has a CSS
 * transform (translate-y) — both create a new positioning containing block —
 * so the plugin's absolute math is offset from the input, appearing
 * "disjointed."
 *
 * Fix: force the suggestions box into normal document flow directly under
 * the input, ignoring the plugin's (here, incorrect) inline top/left/width.
 * See inc/SEARCH-SETUP.md, "Suggestions box alignment."
 */
.nc-search__results .relevanssi-live-search-results {
	position: static !important;
	left: auto !important;
	top: auto !important;
	width: 100% !important;
	margin-top: 0.25rem;
	max-height: 320px;
	overflow-y: auto;
}

/*
 * Keyboard focus indicator for suggestion links (see inc/SEARCH-SETUP.md,
 * "Keyboard access to suggestions"). Explicit rather than relying on the
 * browser default outline, so the currently focused suggestion — reached by
 * Tab or by the plugin's own Up/Down arrow handling — is unmistakable.
 * Brand green (#006325), same as the search button and theme.json "primary".
 */
.nc-search__results .relevanssi-live-search-result a:focus {
	outline: 2px solid #006325;
	outline-offset: 2px;
}

/* Matches the highlight the plugin already applies on arrow-key navigation
 * (relevanssi-live-search-result--focused); kept in sync with real focus by
 * js/nc-search.js so Tab and arrow-key navigation look identical. */
.nc-search__results .relevanssi-live-search-result--focused {
	background: #d9e8e2;
}

/* Same background as the keyboard-active state above, for mouse hover — row
 * only, no focus outline (that's a keyboard-only affordance). */
.nc-search__results .relevanssi-live-search-result:hover {
	background: #d9e8e2;
}

/* The plugin's default CSS only pads this row horizontally (padding: 0 1em);
 * add top/bottom padding so the "N results found" status row isn't flush
 * against the input above and the first suggestion below. */
.nc-search__results .relevanssi-live-search-result-status p {
	padding-top: 0.75em;
	padding-bottom: 0.75em;
}

/*
 * Preview text (see inc/search.php, nc_tw_search_live_result_excerpt()) —
 * matches the excerpt shown on the /?s= results page. Muted and smaller than
 * the title so it reads as supporting text in the compact dropdown row.
 *
 * The plugin's own CSS applies padding + a border-bottom divider to every
 * <p> inside a result (.relevanssi-live-search-result p), since it normally
 * expects just one (the title). Adding a second <p> for the excerpt would
 * otherwise stack two dividers per result — so the title's divider is
 * removed here and moved to the excerpt, giving one clean divider per result.
 */
.nc-search__results .relevanssi-live-search-result p:not(.relevanssi-live-search-result-excerpt) {
	border-bottom: 0;
	padding-bottom: 0.25em;
}

.nc-search__results .relevanssi-live-search-result-excerpt {
	margin: 0;
	padding: 0 1em 0.75em;
	font-size: 0.8em;
	color: #595959;
	line-height: 1.4;
}

.nc-search__results .relevanssi-live-search-result:last-of-type .relevanssi-live-search-result-excerpt {
	border-bottom: 0;
}

/* The plugin's default CSS only pads this row horizontally (padding: 0 1em);
 * add top/bottom padding so the "No results found" message isn't flush
 * against the input above and the box edges below. */
.nc-search__results .relevanssi-live-search-no-results {
	padding-top: 0.75em;
	padding-bottom: 0.75em;
}