/**
 * Contractors4Christ — Shared Search Suggestions Dropdown (Part 1 of the
 * Unified Search System)
 *
 * Before this file existed, the hero widget (hero-search.css) and the
 * topbar search (dashboard.css) each declared their own near-identical
 * dropdown styling by hand, under different class names — a change to
 * "how suggestions look" had to be made twice. This is the one styling
 * source for every search suggestion dropdown in the product: hero
 * widget, dashboard topbar, contractor/category page topbar, and the
 * mobile home search all render the exact same markup (see
 * assets/js/c4c-search-core.js) and are styled from here alone.
 *
 * Uses the global design tokens (design-tokens.css) directly rather than
 * a local alias set, so a brand color change reaches every search box
 * automatically.
 */

.c4c-search-suggestions {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	right: 0;
	background: var(--c4c-surface, #fff);
	border: 1px solid var(--c4c-border, #e5e7eb);
	border-radius: var(--c4c-radius-md, 12px);
	box-shadow: var(--c4c-shadow-md, 0 6px 20px rgba(17,24,39,.08));
	z-index: 200;
	overflow: hidden;
	padding: 4px;
	text-align: left;
}

.c4c-search-suggestion {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	gap: 10px;
	padding: 10px 12px;
	border: 0;
	border-radius: var(--c4c-radius-sm, 8px);
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	color: var(--c4c-text, #111827);
	text-align: left;
	transition: background .1s ease;
}

.c4c-search-suggestion:hover,
.c4c-search-suggestion.is-active {
	background: var(--c4c-brand-gold-soft, rgba(201,155,63,.12));
}

.c4c-search-suggestion__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.c4c-search-suggestion__type {
	flex: none;
	font-size: 12px;
	font-weight: 700;
	color: var(--c4c-text-tertiary, #9ca3af);
	text-transform: uppercase;
	letter-spacing: .03em;
}

/**
 * ═══════════════════════════════════════════════════════════════════════
 * SHARED SEARCH BAR CHROME (Part 4 — Layout & Navigation Consistency)
 * ═══════════════════════════════════════════════════════════════════════
 * One visual component for every search bar in the product. Before this,
 * the hero widget (homepage, category/group/search archive headers) and
 * the topbar search (dashboard, contractor profile, search results,
 * category pages) were two completely different-looking components that
 * happened to share the same autocomplete engine underneath (Part 1) —
 * emoji icons vs SVG, rectangular vs pill-shaped, a custom shadow vs the
 * token-based one, text-only button vs icon+text. Since the hero widget
 * and the topbar search often appear on the SAME page at the same time
 * (every category/group/search archive page shows both), the visual
 * mismatch was especially obvious.
 *
 * This is based on the topbar's existing look (already token-driven,
 * already the more-used of the two) with two size variants:
 * .c4c-searchbar--compact (topbar, unchanged from before) and
 * .c4c-searchbar--hero (the widget, now matching the same style language
 * at a larger size appropriate for a page focal point).
 *
 * The old class names (.c4c-topbar__search, .c4c-hero-search, etc.) are
 * kept in the markup alongside these — JS selects elements by those names,
 * so removing them would mean also rewriting topbar-search.js and
 * hero-search.js for no visual benefit. Only the CSS rules that used to
 * style them have moved here.
 */
.c4c-searchbar {
	display: flex;
	align-items: stretch;
	min-width: 0;
	background: var(--c4c-surface, #fff);
	border: 1px solid var(--c4c-border, #e5e7eb);
	border-radius: var(--c4c-radius-full, 999px);
	box-shadow: var(--c4c-shadow-xs, 0 1px 2px rgba(16,24,40,.04));
	overflow: hidden;
	transition: box-shadow .15s ease, border-color .15s ease;
}
.c4c-searchbar:focus-within {
	border-color: var(--c4c-brand-gold, #c99b3f);
	box-shadow: 0 0 0 3px var(--c4c-brand-gold-soft, rgba(201,155,63,.14));
}
.c4c-searchbar__field {
	position: relative;
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 1 1 auto;
	min-width: 0;
}
.c4c-searchbar__field--zip { flex: 0 0 auto; }
.c4c-searchbar__divider { flex: none; width: 1px; background: var(--c4c-border, #e5e7eb); }
.c4c-searchbar__field svg {
	flex: none;
	color: var(--c4c-text-tertiary, #9ca3af);
	/* Baseline size — NOT just in the --compact/--hero modifiers below.
	   An SVG with only a viewBox and no explicit width/height can render
	   at an uncontrolled, huge size if nothing constrains it (this exact
	   failure mode broke a different icon earlier in this project). The
	   size modifiers adjust from this baseline; they are not the only
	   thing giving it a size at all. */
	width: 16px;
	height: 16px;
}
.c4c-searchbar__zip-label { flex: none; font-weight: 600; color: var(--c4c-text-tertiary, #9ca3af); }
.c4c-searchbar input {
	border: 0; background: transparent; outline: none;
	font-family: inherit; color: var(--c4c-text, #111827);
	width: 100%; min-width: 0; padding: 0;
}
.c4c-searchbar input::placeholder { color: var(--c4c-placeholder, #9aa2b1); }
.c4c-searchbar__submit {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	border: 0;
	border-radius: var(--c4c-radius-full, 999px);
	cursor: pointer;
	background: var(--c4c-brand-gold, #c99b3f);
	color: #fff;
	font-family: inherit;
	font-weight: 700;
	transition: background .15s ease, transform .1s ease;
}
.c4c-searchbar__submit svg { color: #fff; width: 15px; height: 15px; }
.c4c-searchbar__submit:hover { background: var(--c4c-brand-gold-strong, #b0842a); }
.c4c-searchbar__submit:active { transform: scale(.96); }

/* ── Compact size: the persistent topbar (dashboard, contractor profile,
   search results, category pages) — exact same dimensions as before. ── */
.c4c-searchbar--compact { max-width: 640px; height: 48px; }
.c4c-searchbar--compact .c4c-searchbar__field,
.c4c-searchbar--compact .c4c-searchbar__field--zip { padding: 0 20px; }
.c4c-searchbar--compact .c4c-searchbar__field--zip { flex-basis: 150px; }
.c4c-searchbar--compact .c4c-searchbar__divider { align-self: center; height: 24px; }
.c4c-searchbar--compact .c4c-searchbar__field svg { width: 16px; height: 16px; }
/* 16px on the inputs specifically: anything smaller makes iOS Safari
   zoom the viewport the moment the field is focused. */
.c4c-searchbar--compact input { font-size: 16px; }
.c4c-searchbar--compact .c4c-searchbar__zip-label { font-size: 14px; }
.c4c-searchbar--compact .c4c-searchbar__submit { padding: 0 20px; margin: 4px; font-size: 15px; }
.c4c-searchbar--compact .c4c-searchbar__submit svg { width: 15px; height: 15px; }
@media (max-width: 768px) {
	.c4c-searchbar--compact { height: 44px; }
	.c4c-searchbar--compact .c4c-searchbar__submit { padding: 0; width: 36px; height: 36px; margin: 4px; }
	.c4c-searchbar--compact .c4c-searchbar__submit-text { display: none; }
}

/* ── Hero size: the homepage / category / group / search archive page
   widget — a page focal point, so larger, but now the same style
   language as the compact version instead of a different one. ── */
.c4c-searchbar--hero {
	max-width: 780px;
	margin: 0 auto;
	padding: 6px;
	box-shadow: 0 4px 12px rgba(16,22,35,.06), 0 20px 48px rgba(16,22,35,.10);
	flex-wrap: wrap;
}
.c4c-searchbar--hero .c4c-searchbar__field { flex: 2 1 320px; padding: 0 6px 0 14px; }
.c4c-searchbar--hero .c4c-searchbar__field--zip { flex: 1 1 140px; padding: 0 6px; }
.c4c-searchbar--hero .c4c-searchbar__divider { align-self: stretch; margin: 6px 0; }
.c4c-searchbar--hero .c4c-searchbar__field svg { width: 18px; height: 18px; }
.c4c-searchbar--hero input { font-size: 16.5px; padding: 15px 6px; }
/* The pin icon + "ZIP Code" placeholder already read clearly at this
   size, so the extra "Near" label the compact version needs isn't
   necessary here — an intentional, contextual difference, not a
   leftover inconsistency. */
.c4c-searchbar--hero .c4c-searchbar__zip-label { display: none; }
.c4c-searchbar--hero .c4c-searchbar__submit { padding: 0 24px; margin: 5px; font-size: 16px; }
.c4c-searchbar--hero .c4c-searchbar__submit svg { width: 16px; height: 16px; }
@media (max-width: 640px) {
	.c4c-searchbar--hero .c4c-searchbar__field--zip { flex-basis: 100%; }
	.c4c-searchbar--hero .c4c-searchbar__divider { display: none; }
	.c4c-searchbar--hero .c4c-searchbar__submit { width: 100%; margin: 5px 0 0; }
}