/**
 * [claude:opus-4.7-1m][hurc:v0.7.0] Sitewide search widget styles.
 *
 * Two surfaces:
 *   .nllm-search          — wrapper around the <input data-nllm-search="...">
 *   .nllm-search__results — dropdown panel (scope=all only); positioned below
 *                           the input, scroll-clamped to viewport.
 *   .pc-faq__search       — FAQ accordion's inline search row (scope=faq);
 *                           the input filters <details> in-place, so no dropdown.
 *
 * Hits are anchors so keyboard nav works for free (tab through). Highlight
 * markup `<em>` comes server-side from Elasticsearch.
 */

.nllm-search {
	position: relative;
	display: block;
	width: 100%;
}

.nllm-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: 0.6rem 0.9rem;
	font: inherit;
	color: var(--template-text-color, #f5f5f5);
	background: color-mix(in srgb, var(--template-bg-color, #1a1a1a) 75%, #fff 8%);
	border: 1px solid color-mix(in srgb, var(--template-link-color, #7a5af8) 25%, transparent);
	border-radius: 8px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.nllm-search__input::placeholder {
	color: color-mix(in srgb, var(--template-text-color, #f5f5f5) 55%, transparent);
}

.nllm-search__input:focus {
	outline: none;
	border-color: var(--template-link-color, #7a5af8);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--template-link-color, #7a5af8) 20%, transparent);
}

/* ── Dropdown panel (scope=all) ─────────────────────────────────────────── */

.nllm-search__results {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	max-height: min(60vh, 480px);
	overflow-y: auto;
	z-index: 50;
	background: var(--template-bg-color, #1a1a1a);
	border: 1px solid color-mix(in srgb, var(--template-link-color, #7a5af8) 30%, transparent);
	border-radius: 10px;
	box-shadow: 0 12px 32px rgb(0 0 0 / 35%);
	padding: 0.35rem;
}

.nllm-search__hit {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.25rem 0.6rem;
	padding: 0.55rem 0.7rem;
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
	transition: background-color 0.12s ease;
}

.nllm-search__hit + .nllm-search__hit {
	margin-top: 2px;
}

.nllm-search__hit:hover,
.nllm-search__hit:focus-visible {
	background: color-mix(in srgb, var(--template-link-color, #7a5af8) 14%, transparent);
	outline: none;
}

.nllm-search__title {
	font-weight: 600;
	color: var(--template-text-color, #f5f5f5);
}

.nllm-search__tag {
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.1rem 0.45rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--template-link-color, #7a5af8) 22%, transparent);
	color: color-mix(in srgb, var(--template-link-color, #7a5af8) 80%, #fff);
	align-self: center;
	white-space: nowrap;
}

.nllm-search__snippet {
	grid-column: 1 / -1;
	font-size: 0.85rem;
	color: color-mix(in srgb, var(--template-text-color, #f5f5f5) 70%, transparent);
	line-height: 1.4;
}

.nllm-search__snippet em {
	font-style: normal;
	font-weight: 600;
	color: var(--template-text-color, #f5f5f5);
	background: color-mix(in srgb, var(--template-link-color, #7a5af8) 22%, transparent);
	padding: 0 2px;
	border-radius: 3px;
}

.nllm-search__empty {
	margin: 0;
	padding: 0.7rem 0.8rem;
	font-size: 0.9rem;
	color: color-mix(in srgb, var(--template-text-color, #f5f5f5) 65%, transparent);
}

/* ── FAQ inline search row ─────────────────────────────────────────────── */

.pc-faq__search {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0 0 1.25rem;
}

.pc-faq__search-status {
	font-size: 0.85rem;
	min-height: 1.2em;
	color: color-mix(in srgb, var(--template-text-color, #f5f5f5) 60%, transparent);
}

/* [claude:opus-4.7-1m][hurc:v0.7.0] FAQ page-level search section — lives outside .pc-section--faq-accordion
   so the JS scope walk falls through to <main> and filters every accordion on
   the page (Setup / Privacy / Billing) from one input. */

.pc-section--faq-search {
	padding-block: clamp(2rem, 4vw, 3rem) 0;
}

.pc-faq-search {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 720px;
	margin: 0 auto;
}

.pc-faq-search__label {
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--template-text-color, #f5f5f5);
}

.pc-faq-search__field {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.pc-faq-search__status {
	font-size: 0.85rem;
	min-height: 1.2em;
	margin: 0;
	color: color-mix(in srgb, var(--template-text-color, #f5f5f5) 60%, transparent);
}