/*
 * Homepage Search Bar
 *
 * Floating card that overlaps the Hero/next-section boundary.
 * Measurements below are pixel-measured from the Figma reference at
 * 1440px width, not estimated.
 */

.qehs-search-bar {
	position: relative;
	/* Pulls the card up so its top ~84px sits inside the Hero's
	   existing 120px bottom padding (hero.css) — no changes needed
	   there, that space was already reserved for this. */
	margin-top: -84px;
	padding-bottom: 32px;
}

.qehs-search-bar__card {
	/* Inset an additional 24px beyond .qehs-container's own 96px page
	   margin (96 + 24 = 120px from the viewport edge at 1440px,
	   matching the measured card width of 1200px) — not a new
	   container system, just this card's own narrower max-width
	   nested inside the existing .qehs-container. */
	max-width: 1000px;
	margin-inline: auto;
	background-color: var(--qehs-background);
	border-radius: var(--qehs-radius-lg);
	box-shadow: 0 20px 40px rgba(2, 30, 64, 0.18);
	padding: var(--qehs-space-lg) var(--qehs-space-xl);
}

.qehs-search-bar__form {
	display: flex;
	align-items: center;
	gap: var(--qehs-space-sm);
	padding-bottom: var(--qehs-space-lg);
	border: 1px solid var(--qehs-border);
	margin-bottom: var(--qehs-space-lg);
	padding: 4px;
	border-radius: 999px;
}

.qehs-search-bar__icon {
	display: flex;
	flex-shrink: 0;
	color: var(--qehs-text-muted);
	padding: 2px;
}

.qehs-search-bar__input {
	flex: 1 1 auto;
	min-width: 0;
	border: none;
	outline: none;
	font-family: inherit;
	font-size: 1rem;
	color: var(--qehs-text);
	background: transparent;
}

.qehs-search-bar__input::placeholder {
	color: var(--qehs-text-muted);
}

.qehs-search-bar__input:focus-visible {
	outline-offset: 8px;
	border-radius: var(--qehs-radius-sm);
}

/* Reuses .qehs-btn / .qehs-btn--secondary — only shape/size scoped here. */
.qehs-search-bar__submit {
	flex-shrink: 0;
	border-radius: 999px;
	padding: var(--qehs-space-sm) var(--qehs-space-lg);
	transition: filter 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.qehs-search-bar__popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap: var(--qehs-space-md);
	row-gap: var(--qehs-space-sm);
}

.qehs-search-bar__popular-label {
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--qehs-text);
	white-space: nowrap;
}

.qehs-search-bar__chips {
	display: flex;
	flex-wrap: wrap;
	column-gap: var(--qehs-space-sm);
	row-gap: var(--qehs-space-sm);
}

.qehs-search-bar__chip {
	border: 1px solid var(--qehs-border);
	border-radius: 999px;
	padding: var(--qehs-space-xs) var(--qehs-space-md);
	background-color: transparent;
	color: var(--qehs-text);
	font-family: inherit;
	font-size: 0.9rem;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.qehs-search-bar__chip:hover,
.qehs-search-bar__chip:focus-visible {
	background-color: var(--qehs-background-alt);
	border-color: var(--qehs-secondary);
	color: var(--qehs-secondary);
}

.qehs-search-bar__chip:focus-visible {
	outline: 2px solid var(--qehs-secondary);
	outline-offset: 2px;
}

/* --- Tablet / mobile: drop the overlap (the stacked Hero is much
   taller here, so a fixed negative margin would risk the card
   crashing into hero content), stack the search button under the
   input, and let popular-search chips wrap naturally. Matches the
   site's existing 1024px breakpoint. --- */
@media (max-width: 1024px) {
	.qehs-search-bar {
		margin-top: var(--qehs-space-xl);
		padding-bottom: 0;
	}

	.qehs-search-bar__card {
		padding: var(--qehs-space-lg);
	}

	.qehs-search-bar__form {
		flex-wrap: wrap;
	}

	.qehs-search-bar__input {
		flex-basis: 100%;
		order: 1;
	}

	.qehs-search-bar__icon {
		order: 0;
	}

	.qehs-search-bar__submit {
		order: 2;
		width: 100%;
		justify-content: center;
	}

	.qehs-search-bar__popular-label {
		flex-basis: 100%;
	}
}

@media (max-width: 480px) {
	.qehs-search-bar {
		margin-top: var(--qehs-space-lg);
	}

	.qehs-search-bar__card {
		padding: var(--qehs-space-md);
		border-radius: var(--qehs-radius-md);
	}

	.qehs-search-bar__popular-label {
		font-size: 1.1rem;
	}
}