/**
 * Contractors4Christ — Refine Search bar + "Filter More" collapsible
 * Used on the category/service results pages (templates/partials/
 * search-content.php). Same navy/gold palette as the homepage hero search
 * (assets/css/hero-search.css) but a smaller, single-row-ish layout meant
 * to sit compactly above results rather than fill a homepage hero section.
 * Deliberately its own set of classes (not reusing .c4c-hero-*) — kept
 * fully separate so changes to one never accidentally affect the other.
 */

.c4c-refine-search {
	--c4c-refine-navy: #0F2A4A;
	--c4c-refine-navy-dark: #0A1E38;
	--c4c-refine-gold: #C7962F;
	--c4c-refine-gold-dark: #B0842A;
	--c4c-refine-line: #E4DED2;
	--c4c-refine-ink: #1C1A16;
	--c4c-refine-stone: #6B6459;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	/* v2.16.22: was full-width (matched the results grid below) — sized
	   down to a standard, centered search-bar width instead, matching
	   how a search bar looks on most sites rather than stretching edge
	   to edge of the whole content area. */
	max-width: 640px;
	margin: 0 auto var(--c4c-space-3, 20px);
}
.c4c-refine-search * { box-sizing: border-box; }

.c4c-refine-toggle {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 9px;
	margin: 0 0 10px;
	cursor: pointer;
	user-select: none;
}
.c4c-refine-toggle input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}
.c4c-refine-toggle__track {
	width: 34px;
	height: 20px;
	border-radius: 999px;
	background: var(--c4c-refine-line);
	position: relative;
	flex: none;
	transition: background .15s ease;
}
.c4c-refine-toggle__thumb {
	position: absolute;
	top: 2px;
	left: 2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0,0,0,.25);
	transition: transform .15s ease;
}
.c4c-refine-toggle input:checked + .c4c-refine-toggle__track {
	background: var(--c4c-refine-navy);
}
.c4c-refine-toggle input:checked + .c4c-refine-toggle__track .c4c-refine-toggle__thumb {
	transform: translateX(14px);
}
.c4c-refine-toggle input:focus-visible + .c4c-refine-toggle__track {
	outline: 2px solid var(--c4c-refine-gold);
	outline-offset: 2px;
}
.c4c-refine-toggle__label {
	font-size: 13px;
	font-weight: 600;
	color: var(--c4c-refine-stone);
}

.c4c-refine-bar {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 8px;
	box-shadow: 0 1px 2px rgba(20,20,10,.04), 0 12px 28px -18px rgba(20,20,10,.28);
	border: 1px solid var(--c4c-refine-line);
	display: flex;
	gap: 6px;
	align-items: center;
	flex-wrap: wrap;
}

.c4c-refine-field {
	flex: 1 1 200px;
	position: relative;
	display: flex;
	align-items: center;
	padding: 4px 12px;
	min-width: 160px;
	color: var(--c4c-refine-stone);
}
.c4c-refine-field svg { flex: none; margin-right: 9px; width: 16px; height: 16px; }
.c4c-refine-field input {
	width: 100%;
	border: none;
	outline: none;
	font-size: 15px;
	color: var(--c4c-refine-ink);
	background: transparent;
	height: 24px;
	font-family: inherit;
}
.c4c-refine-field input::placeholder { color: #9C9585; }

.c4c-refine-divider { width: 1px; height: 26px; background: var(--c4c-refine-line); flex: none; }
.c4c-refine-divider[hidden] { display: none; }

.c4c-refine-field--zip { flex: 0 1 140px; min-width: 100px; }
.c4c-refine-field--zip[hidden] { display: none; }

.c4c-refine-submit {
	flex: none;
	background: var(--c4c-refine-navy);
	color: #fff;
	border: none;
	border-radius: 12px;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 7px;
	transition: background .15s ease, transform .1s ease;
	font-family: inherit;
}
.c4c-refine-submit:hover { background: var(--c4c-refine-navy-dark); }
.c4c-refine-submit:active { transform: scale(.98); }
.c4c-refine-submit svg { width: 13px; height: 13px; }

/* Live suggestions dropdown for the refine bar's keyword/company field —
   reuses .c4c-autocomplete-results' existing structure/JS (search.js),
   just skinned to match this bar instead of the plain sidebar look. */
.c4c-refine-field--keyword .c4c-autocomplete-results {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: -1px;
	background: #fff;
	border: 1px solid var(--c4c-refine-line);
	border-radius: 12px;
	box-shadow: 0 16px 36px -18px rgba(20,20,10,.35);
	padding: 5px;
	z-index: 40;
	text-align: left;
	max-height: 320px;
	overflow-y: auto;
}

@media (max-width: 640px) {
	.c4c-refine-bar { flex-direction: column; align-items: stretch; padding: 10px; }
	.c4c-refine-field { flex: 0 0 auto; width: 100%; }
	.c4c-refine-divider { display: none; }
	.c4c-refine-field--zip { border-top: 1px solid var(--c4c-refine-line); padding-top: 10px; }
	.c4c-refine-submit { justify-content: center; }
}

/* ---- "Filter More" collapsible (wraps the remaining sidebar: Radius,
   Rating, Years, Commercial/Residential, Sort) ---- */
.c4c-filter-more {
	/* .c4c-search-layout's own grid (search.css) positions this as the
	   280px sidebar column via direct-child order, same as when the
	   <aside> sat there directly — wrapping it in <details> doesn't
	   change that, since grid-column assignment here is by position,
	   not by class. */
}
.c4c-filter-more__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	cursor: pointer;
	list-style: none;
	padding: 12px 16px;
	border: 1px solid var(--c4c-border, #e4ded2);
	border-radius: var(--c4c-radius-lg, 12px);
	background: var(--c4c-surface, #fff);
	font: 600 14px/1.3 var(--c4c-font, inherit);
	color: var(--c4c-text, #1C1A16);
	user-select: none;
}
.c4c-filter-more__toggle::-webkit-details-marker { display: none; }
.c4c-filter-more__toggle:hover { border-color: #C7962F; }
.c4c-filter-more__chevron {
	width: 16px;
	height: 16px;
	flex: none;
	transition: transform .15s ease;
}
.c4c-filter-more[open] .c4c-filter-more__toggle {
	border-radius: var(--c4c-radius-lg, 12px) var(--c4c-radius-lg, 12px) 0 0;
	border-bottom-color: transparent;
	margin-bottom: 0;
}
.c4c-filter-more[open] .c4c-filter-more__chevron { transform: rotate(180deg); }
.c4c-filter-more[open] .c4c-search-filters {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	position: static; /* was position:sticky as a standalone sidebar — inside an on-demand collapsible that only opens briefly, sticky positioning fights the toggle instead of helping */
	top: auto;
}

@media (max-width: 800px) {
	.c4c-refine-search { margin-bottom: 12px; }
}

/* v2.16.45: typewriter ghost placeholder on the results search bar —
   mirrors .c4c-hero-ghost from hero-search.css (that file doesn't load on
   results pages, hence the local copy). Anchored past the search icon;
   pointer-events none so clicks land in the real input beneath. */
.c4c-search-ghost {
	position: absolute;
	left: 38px;
	right: 12px;
	top: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	font-size: inherit;
	color: #9C9585;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	z-index: 1;
}
.c4c-search-ghost.is-hidden { display: none; }
.c4c-search-ghost__caret {
	display: inline-block;
	width: 1px;
	height: 16px;
	background: #B9B19E;
	margin-left: 2px;
	animation: c4cSearchGhostBlink 1s step-end infinite;
	flex: none;
}
@keyframes c4cSearchGhostBlink { 50% { opacity: 0; } }