/**
 * Destination Search — grouped multi-taxonomy autocomplete.
 *
 * Companion to assets/js/destination-search.js. All classes are prefixed
 * `hrtk-dsearch-`. Every color/spacing token is a CSS custom property
 * declared on `.hrtk-dsearch`, so a host site can retheme the component by
 * overriding a handful of vars; inside the Destination Filter popup,
 * destination-filter.css remaps these tokens onto the popup's own palette.
 * Fonts are inherited from the site (no @import).
 *
 * BUILD: edit this file only. The committed .min.css/.debug.css are generated
 * (`npm run build:css`) and are what production/SCRIPT_DEBUG load. The build
 * raises every selector here to (2,x,0) via :not(#\9); see
 * scripts/postcss-hrtk-scope.js and scripts/css-manifest.js.
 */

/* =========================================================================
   Isolation boundary — see assets/css/searchbar-pro.css for the doctrine
   (`all: revert` + specificity armor; svg excluded via zero-specificity
   :where(); rule MUST STAY FIRST). BLEND-IN component: owns its palette via
   --hrtk-dsearch-* tokens but inherits host typography, so font-family and
   color are re-inherited AFTER `all: revert` (form controls do not inherit
   from the UA stylesheet without it).
   ========================================================================= */
.hrtk-dsearch:not(#\9):not(#\9),
.hrtk-dsearch:not(#\9):not(#\9)::before,
.hrtk-dsearch:not(#\9):not(#\9)::after,
.hrtk-dsearch:not(#\9):not(#\9) *:where(:not(svg, svg *)),
.hrtk-dsearch:not(#\9):not(#\9) *:where(:not(svg, svg *))::before,
.hrtk-dsearch:not(#\9):not(#\9) *:where(:not(svg, svg *))::after {
	all: revert;
	box-sizing: border-box;
	color: inherit;
	font-family: inherit;
}

/* Theming tokens — override these on the site to retheme. This rule sets
   ONLY public --hrtk-dsearch-* vars, so the build leaves it UNARMORED
   (postcss-hrtk-scope publicVarPrefixes): a site's plain single-class
   `.hrtk-dsearch { --hrtk-dsearch-accent: … }` override must keep winning.
   Do not add non-var declarations here. */
.hrtk-dsearch {
	--hrtk-dsearch-accent: #c9a959;
	--hrtk-dsearch-accent-hover: #b8963f;
	--hrtk-dsearch-accent-soft: #faf5e8;
	--hrtk-dsearch-heading-bg: #2c3e50;
	--hrtk-dsearch-heading-fg: #c9a959;
	--hrtk-dsearch-surface: #ffffff;
	--hrtk-dsearch-surface-alt: #f7f9fb;
	--hrtk-dsearch-text: #2c3e50;
	--hrtk-dsearch-text-muted: #8899aa;
	--hrtk-dsearch-border: #e8ecf0;
	--hrtk-dsearch-field-bg: #ffffff;
	--hrtk-dsearch-field-fg: #2c3e50;
	--hrtk-dsearch-field-border: #e8ecf0;
	--hrtk-dsearch-field-placeholder: #8899aa;
	--hrtk-dsearch-ring: #faf5e8;
	--hrtk-dsearch-radius: 12px;
}

.hrtk-dsearch:not(#\9):not(#\9) {
	position: relative;
	width: 100%;
	font-family: inherit;
	color: var(--hrtk-dsearch-text);
}

.hrtk-dsearch:not(#\9):not(#\9) svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Shortcode mount: reserve the field's height so hydration causes no
   layout shift. */
.hrtk-dsearch-mount:not(#\9):not(#\9) {
	min-height: 48px;
}

/* ---- Field ---- */

.hrtk-dsearch-field:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 14px;
	background: var(--hrtk-dsearch-field-bg);
	border: 1px solid var(--hrtk-dsearch-field-border);
	border-radius: var(--hrtk-dsearch-radius);
	transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}

.hrtk-dsearch-field:focus-within:not(#\9):not(#\9) {
	border-color: var(--hrtk-dsearch-accent);
	box-shadow: 0 0 0 3px var(--hrtk-dsearch-ring);
}

.hrtk-dsearch-icon:not(#\9):not(#\9) {
	width: 17px;
	height: 17px;
	flex-shrink: 0;
	color: var(--hrtk-dsearch-text-muted);
	transition: color 0.2s;
}

.hrtk-dsearch-field:focus-within:not(#\9):not(#\9) .hrtk-dsearch-icon {
	color: var(--hrtk-dsearch-accent);
}

.hrtk-dsearch-input:not(#\9):not(#\9) {
	flex: 1;
	min-width: 0;
	padding: 12px 0;
	border: none;
	background: transparent;
	font-family: inherit;
	font-size: 14px;
	color: var(--hrtk-dsearch-field-fg);
}

.hrtk-dsearch-input:not(#\9):not(#\9)::-moz-placeholder {
	color: var(--hrtk-dsearch-field-placeholder);
	opacity: 1;
}

.hrtk-dsearch-input:not(#\9):not(#\9)::placeholder {
	color: var(--hrtk-dsearch-field-placeholder);
	opacity: 1;
}

.hrtk-dsearch-input:focus:not(#\9):not(#\9) {
	outline: none;
}

.hrtk-dsearch-clear:not(#\9):not(#\9) {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	border: none;
	padding: 5px;
	background: transparent;
	border-radius: 50%;
	cursor: pointer;
	color: var(--hrtk-dsearch-text-muted);
	transition: background 0.15s, color 0.15s;
}

.hrtk-dsearch-clear:hover:not(#\9):not(#\9) {
	background: var(--hrtk-dsearch-accent-soft);
	color: var(--hrtk-dsearch-text);
}

/* ---- Results panel ---- */

.hrtk-dsearch-panel:not(#\9):not(#\9) {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 10;
	max-height: 340px;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	background: var(--hrtk-dsearch-surface);
	border: 1px solid var(--hrtk-dsearch-border);
	border-radius: var(--hrtk-dsearch-radius);
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.18), 0 4px 12px rgba(0, 0, 0, 0.08);
	animation: hrtk-dsearch-in 0.18s ease;
}

@keyframes hrtk-dsearch-in {
	from {
		opacity: 0;
		transform: translateY(-6px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

.hrtk-dsearch-panel:not(#\9):not(#\9)::-webkit-scrollbar {
	width: 5px;
}

.hrtk-dsearch-panel:not(#\9):not(#\9)::-webkit-scrollbar-track {
	background: transparent;
}

.hrtk-dsearch-panel:not(#\9):not(#\9)::-webkit-scrollbar-thumb {
	background: #d0d0d0;
	border-radius: 3px;
}

/* ---- Group headings: "HOMES ————" bands ---- */

.hrtk-dsearch-heading:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	padding: 7px 16px;
	background: var(--hrtk-dsearch-heading-bg);
	position: sticky;
	top: 0;
	z-index: 2;
}

.hrtk-dsearch-heading-label:not(#\9):not(#\9) {
	font-size: 10.5px;
	font-weight: 700;
	color: var(--hrtk-dsearch-heading-fg);
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

.hrtk-dsearch-heading-line:not(#\9):not(#\9) {
	flex: 1;
	height: 1px;
	background: rgba(255, 255, 255, 0.15);
	margin-left: 12px;
}

/* ---- Options ---- */

.hrtk-dsearch-option:not(#\9):not(#\9) {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 16px;
	cursor: pointer;
	font-size: 13.5px;
	transition: background 0.12s;
}

.hrtk-dsearch-option-icon:not(#\9):not(#\9) {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	color: var(--hrtk-dsearch-text-muted);
	transition: color 0.12s;
}

.hrtk-dsearch-option-label:not(#\9):not(#\9) {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--hrtk-dsearch-text);
}

/* Matched range: bold + accent underline (keeps text color for contrast —
   no highlighter-yellow). */
.hrtk-dsearch-hit:not(#\9):not(#\9) {
	background: transparent;
	color: inherit;
	font-weight: 700;
	text-decoration: underline;
	text-decoration-color: var(--hrtk-dsearch-accent);
	text-decoration-thickness: 2px;
	text-underline-offset: 2px;
}

.hrtk-dsearch-option-count:not(#\9):not(#\9) {
	flex-shrink: 0;
	font-size: 11px;
	color: var(--hrtk-dsearch-text-muted);
	background: var(--hrtk-dsearch-surface-alt);
	padding: 2px 8px;
	border-radius: 999px;
}

.hrtk-dsearch-option:hover:not(#\9):not(#\9),
.hrtk-dsearch-active:not(#\9):not(#\9) {
	background: var(--hrtk-dsearch-accent-soft);
	box-shadow: inset 3px 0 0 var(--hrtk-dsearch-accent);
}

.hrtk-dsearch-option:hover:not(#\9):not(#\9) .hrtk-dsearch-option-icon,
.hrtk-dsearch-active:not(#\9):not(#\9) .hrtk-dsearch-option-icon {
	color: var(--hrtk-dsearch-accent);
}

/* ---- "+N more" / empty ---- */

.hrtk-dsearch-more:not(#\9):not(#\9) {
	display: block;
	width: 100%;
	padding: 7px 16px 9px 42px;
	border: none;
	background: transparent;
	text-align: left;
	font-family: inherit;
	font-size: 12px;
	font-weight: 600;
	color: var(--hrtk-dsearch-accent-hover);
	cursor: pointer;
	transition: background 0.12s;
}

.hrtk-dsearch-more:hover:not(#\9):not(#\9) {
	background: var(--hrtk-dsearch-accent-soft);
}

.hrtk-dsearch-empty:not(#\9):not(#\9) {
	padding: 22px 16px;
	text-align: center;
	font-size: 13px;
	color: var(--hrtk-dsearch-text-muted);
}

.hrtk-dsearch-empty:not(#\9):not(#\9) b {
	font-weight: 600;
	color: var(--hrtk-dsearch-text);
}

/* ---- Live region (screen readers only) ---- */

.hrtk-dsearch-live:not(#\9):not(#\9) {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* ---- Focus visibility (a11y) ---- */

.hrtk-dsearch-clear:focus-visible:not(#\9):not(#\9),
.hrtk-dsearch-more:focus-visible:not(#\9):not(#\9) {
	outline: 2px solid var(--hrtk-dsearch-accent);
	outline-offset: -2px;
}

/* ---- Standalone (shortcode) variant ---- */

.hrtk-dsearch-standalone:not(#\9):not(#\9) .hrtk-dsearch-field {
	padding: 0 16px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.hrtk-dsearch-standalone:not(#\9):not(#\9) .hrtk-dsearch-input {
	padding: 14px 0;
	font-size: 15px;
}

.hrtk-dsearch-standalone:not(#\9):not(#\9) .hrtk-dsearch-icon {
	width: 19px;
	height: 19px;
}

@media (max-width: 768px) {
	.hrtk-dsearch-panel:not(#\9):not(#\9) {
		max-height: 50vh;
	}
}

@media (prefers-reduced-motion: reduce) {
	.hrtk-dsearch-panel:not(#\9):not(#\9) {
		animation: none;
	}

	.hrtk-dsearch-field:not(#\9):not(#\9),
	.hrtk-dsearch-icon:not(#\9):not(#\9),
	.hrtk-dsearch-clear:not(#\9):not(#\9),
	.hrtk-dsearch-option:not(#\9):not(#\9),
	.hrtk-dsearch-option-icon:not(#\9):not(#\9),
	.hrtk-dsearch-more:not(#\9):not(#\9) {
		transition: none;
	}
}