/**
 * Contractors4Christ — Search & Results (v2.0)
 *
 * Built on top of design-tokens.css + components.css (.c4c-badge, .c4c-chip,
 * .c4c-btn, .c4c-empty) — this file only adds the search-page-specific
 * layout (filter rail, result card grid), not one-off colors/badges, so it
 * stays visually identical to the rest of the product.
 */
.c4c-search-app {
	/* v2.16.26 FIX: the site's actual layout is full-width, not boxed —
	   1280px (matched to site-chrome.css's header/footer container in
	   v2.16.24) was still a hard cap, just a wider one. Removed the cap
	   entirely so this stretches the same way the rest of the site does. */
	max-width: 100%;
	margin: 0 auto;
	padding: var(--c4c-space-3) 32px var(--c4c-space-6);
	background: var(--c4c-bg) !important;
}

.c4c-search-header h1 {
	margin: 0 0 4px;
	font: var(--c4c-h2);
	color: var(--c4c-text);
	text-align: center;
}

.c4c-breadcrumbs {
	font: var(--c4c-secondary);
	color: var(--c4c-text-secondary);
	margin-bottom: var(--c4c-space-2);
}

.c4c-breadcrumbs a { color: var(--c4c-text-secondary); text-decoration: none; }
.c4c-breadcrumbs a:hover { color: var(--c4c-brand-gold-strong); }
.c4c-breadcrumb-sep { color: var(--c4c-text-tertiary); margin: 0 4px; }

.c4c-search-subtitle {
	color: var(--c4c-text-secondary);
	margin: 0 0 var(--c4c-space-3);
	text-align: center;
}

/* ---- Filter chip row — Verified / Licensed / Insured / Faith Based /
   Emergency / Near Me / Open Now / Top Rated. Sits above the results,
   full-width, horizontally scrollable on mobile. Wraps the same
   [data-filter] checkbox inputs search.js already listens for — see
   templates/archive-search.php for markup, styled here as pill toggles
   instead of literal checkboxes. ---- */
.c4c-filter-chip-row {
	display: flex;
	justify-content: center;
	gap: 8px;
	overflow-x: auto;
	padding-bottom: 4px;
	margin-bottom: var(--c4c-space-3);
	-webkit-overflow-scrolling: touch;
}
.c4c-filter-chip-row::-webkit-scrollbar { display: none; }
.c4c-filter-chip-row label { display: contents; }
.c4c-filter-chip-row input[type="checkbox"] { position: absolute; opacity: 0; pointer-events: none; }

/**
 * v2.5.8 FIX — mobile PWA horizontal-scroll / off-center Search page.
 *
 * Grid items default to `min-width: auto`, not 0 — meaning a grid track
 * won't shrink below the min-content width of whatever's inside it, even
 * if that's wider than the column the grid template asked for. The outer
 * app shell grid (.c4c-app / .c4c-main / .c4c-content, shared by every
 * page including Dashboard) already has this same fix in dashboard.css
 * ("min-width:0 prevents grid-child blowout"). This grid is a second,
 * separate one — unique to the Search page — that never got it, which is
 * exactly why Dashboard was unaffected and only Search shifted right with
 * a few px of horizontal scroll: its filter/results columns were free to
 * expand past the viewport instead of shrinking to fit it.
 */
.c4c-search-layout > * {
	min-width: 0;
}

.c4c-search-layout {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: var(--c4c-space-3);
}

@media (max-width: 800px) {
	.c4c-search-layout {
		grid-template-columns: 1fr;
	}
}

.c4c-search-filters {
	border: 1px solid var(--c4c-border) !important;
	border-radius: var(--c4c-radius-lg);
	background: var(--c4c-surface) !important;
	box-shadow: var(--c4c-shadow-sm);
	padding: var(--c4c-space-3);
	align-self: start;
	position: sticky;
	top: calc(var(--c4c-header-h, 72px) + 16px);
}

.c4c-filter-group {
	margin-bottom: var(--c4c-space-2);
	position: relative;
}

.c4c-filter-group label {
	display: block;
	font: 600 14px/1.35 var(--c4c-font);
	color: var(--c4c-text) !important;
	margin-bottom: 6px;
}

.c4c-filter-group input[type="text"],
.c4c-filter-group select {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid var(--c4c-border-strong) !important;
	border-radius: var(--c4c-radius-sm);
	/* Explicit surface/ink, hardened with !important (v2.5.3): this rule
	   was confirmed correct in the shipped code yet the live site kept
	   showing plain white boxes, so specificity is no longer left to
	   chance against whatever else touches these elements. */
	background: var(--c4c-surface) !important;
	color: var(--c4c-text) !important;
	font-size: 16px;
	min-height: 46px;
}

.c4c-filter-checkboxes label {
	display: flex;
	align-items: center;
	gap: 8px;
	font: 400 15px/1.35 var(--c4c-font);
	color: var(--c4c-text) !important;
	margin-bottom: 9px;
}

.c4c-autocomplete-results {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-sm);
	box-shadow: var(--c4c-shadow-md);
	z-index: 100;
	max-height: 200px;
	overflow-y: auto;
}

.c4c-autocomplete-item {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 8px 12px;
	text-decoration: none;
	color: var(--c4c-text);
	font-size: 15px;
	font-weight: 400;
	background: none;
	border: none;
	font-family: inherit;
	text-align: left;
	cursor: pointer;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: normal;
}

.c4c-autocomplete-item:hover { background: var(--c4c-surface-2); }

.c4c-search-meta {
	margin-bottom: var(--c4c-space-2);
	color: var(--c4c-text-secondary);
	font: var(--c4c-secondary);
}

.c4c-search-results {
	display: flex;
	flex-direction: column;
	gap: var(--c4c-space-2);
}

/**
 * Modern listing card — large logo, name + save, trust badges, ratings/
 * meta row, service tags, description, and two actions (View Profile /
 * Request Quote). Built on .c4c-ui-card conventions (surface/border/radius/
 * shadow tokens) though it isn't literally that class, since it needs a
 * horizontal flex layout the generic card doesn't assume.
 */
.c4c-result-card {
	display: flex;
	align-items: flex-start;
	gap: var(--c4c-space-4);
	background: var(--c4c-surface);
	border: 1px solid var(--c4c-border);
	border-radius: var(--c4c-radius-lg);
	padding: var(--c4c-space-4);
	box-shadow: var(--c4c-shadow-sm);
	transition: box-shadow var(--c4c-dur-base) var(--c4c-ease), transform var(--c4c-dur-base) var(--c4c-ease), border-color var(--c4c-dur-base) var(--c4c-ease);
}

.c4c-result-card:hover {
	box-shadow: var(--c4c-shadow-md);
	transform: translateY(-2px);
	border-color: var(--c4c-brand-gold);
}

.c4c-result-card--featured { border-color: var(--c4c-brand-gold); }

.c4c-result-logo {
	flex: 0 0 auto;
	width: 128px;
	height: 128px;
	border-radius: var(--c4c-radius-lg);
	object-fit: cover;
	background: var(--c4c-surface-2);
}

.c4c-result-logo--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 40px;
	font-weight: 800;
	color: var(--c4c-text-tertiary);
	background: var(--c4c-surface-2);
}

.c4c-result-body { flex: 1 1 auto; min-width: 0; }

.c4c-result-name-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}

.c4c-result-name {
	margin: 0 0 8px;
	font-size: 21.5px;
	font-weight: 800;
	letter-spacing: -0.2px;
	color: var(--c4c-text);
}

.c4c-save-btn { color: var(--c4c-text-tertiary); }
.c4c-save-btn:hover { color: var(--c4c-danger); }

.c4c-result-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 10px;
}

.c4c-result-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--c4c-space-2);
	font-size: 15px;
	color: var(--c4c-text-secondary);
	margin-bottom: 10px;
}

.c4c-result-meta-item { color: var(--c4c-text-secondary); }

.c4c-rating { display:inline-flex;align-items:center;gap:5px;color: var(--c4c-brand-gold-strong); font-weight: 700;font-size:16px; }
.c4c-rating-count { color: var(--c4c-text-tertiary); font-weight: 400; }
.c4c-stars { position:relative;display:inline-flex;gap:1px;font-size:15px;line-height:1; }
.c4c-star { position:relative;display:inline-block;color:var(--c4c-border-strong,#d1d5db); }

.c4c-star::before {
	content:'★';position:absolute;left:0;top:0;width:var(--c4c-star-fill,0%);
	overflow:hidden;white-space:nowrap;color:var(--c4c-brand-gold-strong);
}

.c4c-result-services {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-bottom: 10px;
}

.c4c-result-service-tag {
	font-size: 13.5px;font-weight: 600;
	color: var(--c4c-text-secondary);
	background: var(--c4c-surface-2);
	padding: 4px 12px;
	border-radius: var(--c4c-radius-full);
}

.c4c-result-desc {
	font-size: 15.5px;line-height: 1.55;
	color: var(--c4c-text-secondary);
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.c4c-result-action {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 180px;
	align-self: stretch;
	justify-content: center;
}
.c4c-result-action .c4c-btn { justify-content: center;text-align: center; }

@media (max-width: 640px) {
	.c4c-result-card { flex-wrap: wrap; }
	.c4c-result-logo { width: 96px;height: 96px; }
	.c4c-result-action { width: 100%; flex-direction: row; min-width: 0; }
	.c4c-result-action .c4c-btn { flex: 1; }
}

.c4c-search-pagination {
	display: flex;
	gap: 6px;
	margin-top: var(--c4c-space-3);
	flex-wrap: wrap;
}

.c4c-page-btn {
	padding: 9px 15px;
	border: 1px solid var(--c4c-border-strong);
	background: var(--c4c-surface);
	color: var(--c4c-text);
	border-radius: var(--c4c-radius-sm);
	cursor: pointer;
	font: 600 15px/1 var(--c4c-font);
	min-height: 42px;
}

/* Same white-on-white failure as the filter chips: the active page
   button paints itself with --c4c-text, so its label has to be the
   inverse ink, not a hardcoded white. */
/* Same root-cause fix as the chip components (v2.5.4): painting this with
   --c4c-text made the current-page button a bright white blob in dark
   mode, since --c4c-text flips near-white there. --c4c-active-bg is a
   dedicated pair that renders as the gold accent in dark mode instead. */
.c4c-page-btn--active {
	background: var(--c4c-active-bg);
	color: var(--c4c-active-ink, #fff);
	border-color: var(--c4c-active-bg);
}

/* Force autocomplete items to never inherit uppercase from theme button styles */
.c4c-autocomplete-results .c4c-autocomplete-item,
.c4c-autocomplete-results .c4c-autocomplete-item * {
	text-transform: none !important;
	font-weight: 400 !important;
	font-size: 15px !important;
	letter-spacing: normal !important;
}