/**
 * [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;
	/* Roomier hit area + left room for the magnifier icon so the control reads
	   as a primary "search the docs" action, not a faint field a visitor scrolls
	   past (the prior version was too easy to miss). Spacing/radius/colour all
	   come from --nllm-* tokens. */
	padding: var(--nllm-space-sm) var(--nllm-space-md);
	padding-left: calc(var(--nllm-space-md) + var(--nllm-space-lg));
	font: inherit;
	font-size: 1rem;
	color: var(--nllm-text, #f8fafc);
	/* A distinct surface (vs. the deeper page bg) + a more present brand-violet
	   border so it stands out on the dark docs sidebar. */
	background-color: var(--nllm-surface, #1e293b);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237c3aed' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left var(--nllm-space-sm) center;
	background-size: var(--nllm-space-md) var(--nllm-space-md);
	border: 1px solid color-mix(in srgb, var(--nllm-violet, #7c3aed) 50%, transparent);
	border-radius: var(--nllm-radius-md);
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.nllm-search__input::placeholder {
	/* Stronger placeholder so the prompt is readable at a glance. */
	color: color-mix(in srgb, var(--nllm-text, #f8fafc) 72%, transparent);
}

.nllm-search__input:hover {
	border-color: color-mix(in srgb, var(--nllm-violet, #7c3aed) 70%, 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);
}