/**
 * Contractors4Christ — Hero Search Widget
 * Used on the homepage [c4c_hero_search] shortcode, the Group archive
 * (/group/{slug}/), and the category/service results archive.
 *
 * v2.16.16: rebuilt to match the site owner's own custom "Find a Pro"
 * design (navy/gold palette, white rounded search card, typewriter
 * placeholder, category chips) instead of the shared .c4c-searchbar look
 * used by the dashboard/topbar search — this widget is the homepage's
 * most prominent element and is deliberately its own visual treatment.
 * Fully self-contained/scoped under .c4c-hero-search-wrap so none of this
 * affects the dashboard or topbar search bars elsewhere in the app.
 */

.c4c-hero-search-wrap {
	--c4c-hero-navy: #0F2A4A;
	--c4c-hero-navy-dark: #0A1E38;
	--c4c-hero-cream: #FBF8F3;
	--c4c-hero-stone: #6B6459;
	--c4c-hero-line: #E4DED2;
	--c4c-hero-gold: #C7962F;
	--c4c-hero-ink: #1C1A16;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	max-width: 780px;
	margin: 0 auto var(--c4c-space-4, 32px);
	padding: var(--c4c-space-4, 32px) var(--c4c-space-3, 24px);
	text-align: center;
	box-sizing: border-box;
}
.c4c-hero-search-wrap * { box-sizing: border-box; }

.c4c-hero-eyebrow {
	text-align: center;
	letter-spacing: .14em;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: 700;
	color: var(--c4c-hero-gold);
	margin-bottom: 10px;
}

.c4c-hero-heading {
	text-align: center;
	font-size: clamp(26px, 4vw, 40px);
	line-height: 1.15;
	color: var(--c4c-hero-ink);
	margin: 0 0 12px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.c4c-hero-subheading {
	text-align: center;
	color: var(--c4c-hero-stone);
	font-size: 16px;
	margin: 0 0 20px;
}

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

/* ---- Search card ---- */
.c4c-hero-search {
	position: relative;
	background: #fff;
	border-radius: 20px;
	padding: 10px;
	box-shadow: 0 1px 2px rgba(20,20,10,.04), 0 18px 40px -22px rgba(20,20,10,.28);
	border: 1px solid var(--c4c-hero-line);
	display: flex;
	gap: 8px;
	align-items: center;
	flex-wrap: wrap;
}

.c4c-hero-search-field {
	flex: 1 1 220px;
	position: relative;
	display: flex;
	align-items: center;
	padding: 6px 14px;
	min-width: 180px;
	color: var(--c4c-hero-stone);
}
.c4c-hero-search-field svg { flex: none; margin-right: 10px; width: 18px; height: 18px; }

.c4c-hero-input-wrap { position: relative; flex: 1; height: 26px; }
#c4c-hero-keyword {
	width: 100%;
	border: none;
	outline: none;
	font-size: 16px;
	color: var(--c4c-hero-ink);
	background: transparent;
	position: relative;
	z-index: 2;
	height: 26px;
	font-family: inherit;
}
.c4c-hero-ghost {
	position: absolute;
	left: 0;
	top: 0;
	height: 26px;
	display: flex;
	align-items: center;
	font-size: 16px;
	color: #9C9585;
	pointer-events: none;
	white-space: nowrap;
	overflow: hidden;
	z-index: 1;
}
.c4c-hero-ghost.is-hidden { display: none; }
.c4c-hero-caret {
	display: inline-block;
	width: 1px;
	height: 18px;
	background: #B9B19E;
	margin-left: 2px;
	animation: c4cHeroBlink 1s step-end infinite;
}
@keyframes c4cHeroBlink { 50% { opacity: 0; } }

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

.c4c-hero-search-field--zip { flex: 0 1 150px; min-width: 110px; }
.c4c-hero-search-field--zip[hidden] { display: none; }
#c4c-hero-zip {
	border: none;
	outline: none;
	background: transparent;
	font-size: 15px;
	color: var(--c4c-hero-ink);
	width: 100%;
	font-family: inherit;
}
#c4c-hero-zip::placeholder { color: #9C9585; }

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

/* Live suggestions dropdown — reuses .c4c-search-suggestions/.c4c-search-suggestion
   from assets/css/c4c-search.css for structure, positioned/skinned here to
   match this widget's card instead of the dashboard topbar's version. */
.c4c-hero-search-field--service .c4c-search-suggestions {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: -1px;
	background: #fff;
	border: 1px solid var(--c4c-hero-line);
	border-radius: 14px;
	box-shadow: 0 20px 45px -20px rgba(20,20,10,.35);
	padding: 6px;
	z-index: 40;
	text-align: left;
}
.c4c-hero-search-field--service .c4c-search-suggestion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	border: none;
	background: none;
	padding: 11px 12px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 15px;
	color: var(--c4c-hero-ink);
	text-align: left;
	font-family: inherit;
}
.c4c-hero-search-field--service .c4c-search-suggestion:hover,
.c4c-hero-search-field--service .c4c-search-suggestion.is-active {
	background: var(--c4c-hero-cream);
}
.c4c-hero-search-field--service .c4c-search-suggestion__type {
	font-size: 12px;
	color: var(--c4c-hero-stone);
	flex: none;
	margin-left: 12px;
}

/* ---- Trust line ---- */
.c4c-hero-trust {
	display: flex;
	justify-content: center;
	gap: 8px;
	align-items: center;
	margin: 18px 0 0;
	color: var(--c4c-hero-stone);
	font-size: 13px;
}
.c4c-hero-trust svg { width: 14px; height: 14px; color: var(--c4c-hero-gold); flex: none; }

/* ---- Popular chips ---- */
.c4c-hero-popular-wrap {
	margin-top: 18px;
}
.c4c-hero-popular-label {
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c4c-hero-stone);
	margin: 0 0 10px;
}
.c4c-hero-popular {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	justify-content: center;
}
.c4c-hero-popular[hidden] { display: none; }
.c4c-hero-popular__chip {
	/* v2.16.22: was 13px/8px 14px — sized down since these are meant to
	   be quick, low-emphasis shortcuts under the main search bar, not a
	   second row of equally-prominent buttons. */
	border: 1px solid var(--c4c-hero-line);
	background: #fff;
	color: var(--c4c-hero-ink);
	font-size: 11.5px;
	font-weight: 500;
	padding: 5px 11px;
	border-radius: 999px;
	text-decoration: none;
	transition: border-color .15s ease, background .15s ease;
	white-space: nowrap;
}
.c4c-hero-popular__chip:hover {
	border-color: var(--c4c-hero-navy);
	background: var(--c4c-hero-cream);
}

/* ---- Mobile ---- */
@media (max-width: 640px) {
	.c4c-hero-search { flex-direction: column; align-items: stretch; padding: 12px; }
	/* v2.16.21 FIX: .c4c-hero-search-field's flex: 1 1 220px (defined
	   above for the desktop horizontal layout) was being inherited
	   unchanged here — with flex-direction now column, that same
	   flex-grow: 1 makes each field stretch to fill the container's
	   full height instead of just wrapping its own content, which is
	   exactly the huge-gaps-between-fields bug this fixes. flex: 0 0 auto
	   keeps each field at its natural content height on mobile. */
	.c4c-hero-search-field { flex: 0 0 auto; width: 100%; }
	.c4c-hero-divider { display: none; }
	.c4c-hero-search-field--zip { border-top: 1px solid var(--c4c-hero-line); padding-top: 12px; }
	.c4c-hero-submit { justify-content: center; }
}

/* =========================================================================
   DARK MODE
   .c4c-dark is set on <html> by assets/js/pwa.js and assets/js/pwa/app-mode.js.
   ========================================================================= */
.c4c-dark .c4c-hero-search-wrap {
	--c4c-hero-cream: #1E2632;
	--c4c-hero-ink: #F0F1F3;
	--c4c-hero-stone: #9AA3AF;
	--c4c-hero-line: #2B3444;
}
.c4c-dark .c4c-hero-search { background: #151B26; }
.c4c-dark #c4c-hero-keyword,
.c4c-dark #c4c-hero-zip { color: var(--c4c-hero-ink); }
.c4c-dark .c4c-hero-search-field--service .c4c-search-suggestions { background: #151B26; }
.c4c-dark .c4c-hero-popular__chip { background: #151B26; }