/**
 * Find Haunts form.
 *
 * Aliases the canonical token layer (css/tsf-tokens.css) with var() fallbacks,
 * per the site convention. No brand colours hardcoded here.
 */

.tsf-haunt-search {
	--tsfhs-fg: var(--tsf-color-text, #1a1a1a);
	--tsfhs-border: var(--tsf-color-border, #d4d4d4);
	--tsfhs-bg: var(--tsf-color-surface, #fff);
	--tsfhs-accent: var(--tsf-color-primary, #b3121b);
	--tsfhs-radius: var(--tsf-radius-md, 6px);

	width: 100%;
	max-width: 44rem;
	margin-inline: auto;
}

.tsf-haunt-search__label {
	margin: 0 0 0.6rem;
	text-align: center;
}

.tsf-haunt-search__fields {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tsf-haunt-search__field {
	/* Both fields share the row and shrink together; the button keeps its
	   intrinsic width. flex-basis of 10rem is the point below which the two
	   stack rather than squeezing to unusable. */
	flex: 1 1 10rem;
	min-width: 0;
}

.tsf-haunt-search input[type="search"],
.tsf-haunt-search select {
	width: 100%;
	padding: 0.65rem 0.8rem;
	font: inherit;
	/* Stops iOS Safari zooming the viewport on focus at <16px. */
	font-size: max(1rem, 16px);
	color: var(--tsfhs-fg);
	background: var(--tsfhs-bg);
	border: 1px solid var(--tsfhs-border);
	border-radius: var(--tsfhs-radius);
	/* Safari gives search inputs a rounded, inset look otherwise. */
	-webkit-appearance: none;
	appearance: none;
}

.tsf-haunt-search select {
	/* Re-add a caret, since appearance:none removed the native one. */
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
		linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: right 1.05rem center, right 0.8rem center;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 2rem;
}

.tsf-haunt-search :is(input, select, button):focus-visible {
	outline: 2px solid var(--tsfhs-accent);
	outline-offset: 1px;
}

/*
 * Specific enough to beat the Elementor kit's bare-<button> rules without
 * !important — see the site-header notes for the kit's specificity numbers.
 */
.tsf-haunt-search .tsf-haunt-search__fields button.tsf-haunt-search__submit {
	flex: 0 0 auto;
	padding: 0.65rem 1.6rem;
	font: inherit;
	font-weight: 700;
	color: #fff;
	background: var(--tsfhs-accent);
	border: 0;
	border-radius: var(--tsfhs-radius);
	cursor: pointer;
}

.tsf-haunt-search .tsf-haunt-search__fields button.tsf-haunt-search__submit:hover {
	filter: brightness(1.1);
}

/* Below this the three controls each take a full row. */
@media (max-width: 480px) {
	.tsf-haunt-search__field {
		flex: 1 1 100%;
	}

	.tsf-haunt-search .tsf-haunt-search__fields button.tsf-haunt-search__submit {
		flex: 1 1 100%;
	}
}