/* ==========================================================================
   VOI Docs: search UI — suggest dropdown and results page.
   Ships alongside voi-docs-search.php as one feature module. Inherits every
   colour from the theme tokens defined on .voi-docs in voi-docs.css, so it
   follows light/dark automatically and defines no palette of its own.
   ========================================================================== */

/* Screen-reader-only live region announcing suggest result counts. */
.voi-docs__sr {
	position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* "/" affordance. Hidden once the box has focus, and on touch devices where
   there is no physical key to press. */
.voi-docs__search-kbd {
	position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
	pointer-events: none; font-family: var(--voi-font); font-size: 11px; line-height: 1;
	padding: 3px 5px; color: var(--ink-3);
	border: 1px solid var(--line); border-radius: 4px; background: var(--bg);
}
.voi-docs__search:focus-within .voi-docs__search-kbd { display: none; }
@media (hover: none) { .voi-docs__search-kbd { display: none; } }

/* ---------- Suggest dropdown ---------- */
/* position:relative anchors the absolutely-positioned panel to the form. */
.voi-docs__search { position: relative; }

.voi-docs__suggest {
	position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 6px);
	max-height: 60vh; overflow-y: auto;
	background: var(--bg); border: 1px solid var(--line);
	border-radius: var(--voi-radius); box-shadow: 0 10px 28px rgba(0,0,0,.14);
	padding: 5px;
}
.voi-docs__suggest-item {
	display: block; padding: 8px 10px; font-size: 13.5px; line-height: 1.35;
	color: var(--ink); text-decoration: none; border-radius: var(--voi-radius);
}
.voi-docs__suggest-item:hover,
.voi-docs__suggest-item.is-active { background: var(--accent-hint); color: var(--accent-text); }
.voi-docs__suggest-title { display: block; font-weight: 500; }
.voi-docs__suggest-section {
	display: block; margin-top: 2px;
	font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3);
}
.voi-docs__suggest-snippet {
	display: block; margin-top: 3px; font-size: 12px; line-height: 1.4; color: var(--ink-3);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.voi-docs__suggest-heading { display: block; margin-top: 3px; font-size: 11.5px; color: var(--ink-3); }
.voi-docs__suggest-item.is-active .voi-docs__suggest-section,
.voi-docs__suggest-item.is-active .voi-docs__suggest-snippet,
.voi-docs__suggest-item.is-active .voi-docs__suggest-heading { color: var(--accent-text); }
.voi-docs__suggest-empty { margin: 0; padding: 9px 10px; font-size: 13px; color: var(--ink-3); }
.voi-docs__suggest-note {
	margin: 0 0 3px; padding: 7px 10px; font-size: 12px; color: var(--ink-3);
	border-bottom: 1px solid var(--line);
}
.voi-docs__suggest-all {
	display: block; width: 100%; margin-top: 4px; padding: 8px 10px;
	font-family: var(--voi-font); font-size: 12.5px; text-align: left; cursor: pointer;
	color: var(--ink-3); background: none; border: none; border-top: 1px solid var(--line);
}
.voi-docs__suggest-all:hover { color: var(--accent-text); }

/* ---------- Matched-term highlighting ---------- */
/* font/line-height are pinned to inherit because the marketing theme ships a
   global `.mark, mark { font-size: 36px }` rule that otherwise blows matched
   terms up to heading size inside the dropdown and result snippets. */
.voi-docs__suggest-item mark,
.voi-docs__result-excerpt mark {
	background: var(--accent-hint); color: var(--accent-text);
	padding: 0 1px; border-radius: 2px;
	font-size: inherit; font-weight: inherit; font-family: inherit;
	line-height: inherit; vertical-align: baseline;
}

/* ---------- Results page ---------- */
.voi-docs__results { max-width: 780px; }
.voi-docs__corrected { margin: -6px 0 0; font-size: 13.5px; color: var(--ink-3); }
.voi-docs__corrected del { opacity: .7; }
.voi-docs__corrected strong { color: var(--accent-text); font-weight: 500; }

.voi-docs__resultlist { list-style: none; margin: 26px 0 0; padding: 0; }
.voi-docs__result { padding: 16px 0; border-top: 1px solid var(--line); }
.voi-docs__result-section {
	margin: 0 0 4px; font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase;
	color: var(--ink-3);
}
.voi-docs__result-title { margin: 0 0 6px; font-size: 17px; line-height: 1.3; }
.voi-docs__result-title a { color: var(--ink); text-decoration: none; }
.voi-docs__result-title a:hover { color: var(--accent-text); }
.voi-docs__result-excerpt { margin: 0; font-size: 14px; line-height: 1.55; color: var(--ink-2); }

/* Deep links straight to the matching headings inside a result. */
.voi-docs__result-jump {
	list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 9px 0 0; padding: 0;
}
.voi-docs__result-jump a {
	display: inline-block; padding: 3px 8px; font-size: 12px; line-height: 1.3;
	color: var(--ink-3); text-decoration: none;
	border: 1px solid var(--line); border-radius: 999px;
}
.voi-docs__result-jump a::before { content: "\2192\00a0"; }
.voi-docs__result-jump a:hover {
	color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-hint);
}

/* ---------- Empty state ---------- */
.voi-docs__empty { margin: 26px 0 0; font-size: 14.5px; color: var(--ink-3); }
.voi-docs__empty-label { margin: 20px 0 8px; font-size: 13px; color: var(--ink-3); }
.voi-docs__empty-sections { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.voi-docs__empty-sections a {
	display: inline-block; padding: 6px 11px; font-size: 13px; color: var(--ink);
	text-decoration: none; border: 1px solid var(--line); border-radius: var(--voi-radius);
}
.voi-docs__empty-sections a:hover {
	color: var(--accent-text); border-color: var(--accent-line); background: var(--accent-hint);
}