/*
 * dbi services · Neve Child Theme
 * assets/css/search.css — on-site search: header overlay stage and
 * the results page (markup and rationale in inc/search.php,
 * enhancements #41). Loaded site-wide (inc/enqueue.php): the overlay
 * is part of the header on every page. Consumes .dbi-scope tokens
 * and the filter-bar pill styles from dbi-blog.css §2.
 *
 * Corporate guideline (test.dbi-services.com/emotion/corporate-
 * guideline.html) applied: light canvas (dark sections are reserved
 * for the final CTA), left-aligned content in the 1160px container
 * ("centered-everything" is an anti-pattern), Instrument Serif for the
 * one display line, teal as the single accent, primary action as a
 * solid teal pill with a text label, visible teal focus rings, motion
 * on --t / --ease and off under prefers-reduced-motion.
 *
 * @package dbi-neve-child
 */

/* ════════════════════════════════════════════════
   1 · OVERLAY (Neve "Canvas" open behaviour)
   Markup: .menu-item-nav-search.canvas > .nv-nav-search
             > .form-wrap  > .dbi-search-stage (inc/search.php)
             > .close-container > button.close-responsive-search
   Neve centres the form-wrap in a fixed flex box; the
   stage takes the whole sheet instead and lays itself
   out like the page: brand row on top, content below.
   ════════════════════════════════════════════════ */
.menu-item-nav-search.canvas .nv-nav-search {
	align-items: flex-start;
	justify-content: flex-start;
	overflow-y: auto;
	padding: 0;
	background: var( --bg-pure, #fff );
	box-shadow: none;
	transition: opacity var( --t, 240ms ) var( --ease, ease );
}
.menu-item-nav-search.canvas .nv-nav-search .form-wrap.responsive-search {
	width: 100%;
	max-width: none;
	padding: 0;
	margin: 0;
}

.dbi-search-stage {
	width: 100%;
	min-height: 100%;
	font-family: var( --f-body );
	color: var( --text );
	transform: translateY( 6px );
	transition: transform var( --t ) var( --ease );
}
.menu-item-nav-search.active .dbi-search-stage {
	transform: none;
}

/* Brand row: same container and height as the site header, so the
   logo lands where the reader last saw it. The close button (Neve
   markup, next section) sits on the same row, right. */
.dbi-search-brand {
	/* Same box as the header row: Neve's container width (--container,
	   Customizer value) with its 15px side padding, and the rendered row
	   height of the seeded header layout (65.6px desktop, 57.6px phone),
	   so the logo stays put when the overlay opens (enhancements #66;
	   re-measure with cdp-eval if the header layout changes). */
	max-width: var( --container, 1170px );
	margin: 0 auto;
	padding: 18.4px 15px;
	min-height: 0;
	display: flex;
	align-items: center;
	border-bottom: 1px solid var( --divider );
}
.dbi-search-brand a {
	display: inline-flex;
	line-height: 0;
}
.dbi-search-brand img {
	display: block;
	width: var( --dbi-logo-w, 120px ); /* the header logo's max width, set inline by inc/search.php */
	height: auto;
}
.dbi-search-brand-text {
	font-family: var( --f-display );
	font-size: 1.4rem;
	color: var( --text );
	text-decoration: none;
	line-height: 1;
}

/* Content column: left-aligned, one reading width. Vertical position
   is fixed from the top (not centred) so it never jumps as the
   helper grows. */
.dbi-search-body {
	max-width: 1160px;
	margin: 0 auto;
	padding: clamp( 40px, 9vh, 96px ) 24px 64px;
}

.dbi-search-kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var( --teal-dark );
}
.dbi-search-kicker::before {
	content: "";
	width: 18px;
	height: 2px;
	background: var( --teal );
}

.dbi-search-title {
	margin: 0 0 12px;
	max-width: 24ch;
	font-family: var( --f-display );
	font-size: clamp( 2.2rem, 4.5vw, 3.4rem );
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -.01em;
	color: var( --text );
}
.dbi-search-lead {
	margin: 0 0 28px;
	max-width: 56ch;
	font-size: 1rem;
	line-height: 1.6;
	color: var( --muted );
}
.dbi-search-lead span {
	color: var( --text );
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ── The field ──
   One large input with the submit pill inside its right end. Neve's
   own .search-form rules (flex, joined borders, a 3px bridge
   pseudo-element) are reset so the pair reads as one control. */
.dbi-search-stage .search-form,
.dbi-search-refine .search-form {
	position: relative;
	display: block;
	max-width: 760px;
	line-height: normal;
}
.dbi-search-stage .search-form label,
.dbi-search-refine .search-form label {
	position: absolute;
	margin: 0;
}
.dbi-search-stage .search-field,
.dbi-search-refine .search-field {
	box-sizing: border-box;
	width: 100%;
	height: 64px;
	padding: 0 128px 0 22px;
	border: 1px solid var( --border );
	border-radius: 14px;
	background: var( --bg-pure );
	font-family: var( --f-body );
	font-size: 1.2rem;
	color: var( --text );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, .04 );
	transition: border-color var( --t ) var( --ease ), box-shadow var( --t ) var( --ease );
}
.dbi-search-stage .search-field::placeholder,
.dbi-search-refine .search-field::placeholder {
	color: var( --faint );
	opacity: 1;
}
.dbi-search-stage .search-field:focus,
.dbi-search-refine .search-field:focus {
	outline: none;
	border-color: var( --teal );
	box-shadow: 0 0 0 3px var( --teal-mid );
}
/* Chrome's native clear cross keeps the field's height */
.dbi-search-stage .search-field::-webkit-search-cancel-button,
.dbi-search-refine .search-field::-webkit-search-cancel-button {
	margin-right: 4px;
}

.dbi-search-submit.search-submit {
	position: absolute;
	top: 50%;
	right: 8px;
	transform: translateY( -50% ); /* Neve fixes the button height (and differently per page), so a bottom offset would not centre it */
	height: 40px;
	min-width: 0;
	padding: 0 22px;
	border: 1px solid var( --teal-dark );
	border-radius: 999px;
	background: var( --teal-dark );
	color: #fff;
	font-family: var( --f-body );
	font-size: .9rem;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: pointer;
	transition: background var( --t ) var( --ease ), border-color var( --t ) var( --ease ), box-shadow var( --t ) var( --ease );
}
.dbi-search-submit.search-submit::before {
	content: none;
}
.dbi-search-submit.search-submit:hover {
	background: var( --teal-deep );
	border-color: var( --teal-deep );
	box-shadow: 0 0 0 3px var( --teal-mid );
}
.dbi-search-submit.search-submit:focus-visible {
	outline: 2px solid var( --teal );
	outline-offset: 2px;
}

/* ── Browse helper ──
   The filter bar rendered by dbi_render_category_filter() (contract:
   one renderer everywhere). In the overlay it is a static, wrapping
   block, not a sticky scrolling strip; the branch sub-row (present
   when the overlay opens on a category page) stays hidden here. */
.dbi-search-browse {
	margin-top: 44px;
	max-width: 760px;
}
.dbi-search-browse .dbi-search-kicker {
	color: var( --muted );
}
.dbi-search-browse .dbi-search-kicker::before {
	background: var( --border );
}
.dbi-search-browse .dbi-filter-bar {
	position: static;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	border: 0;
	margin: 0;
	z-index: auto;
}
.dbi-search-browse .dbi-filter-bar .dbi-filter-scroll {
	max-width: none;
	margin: 0;
}
.dbi-search-browse .dbi-filter-bar .dbi-filter-inner {
	max-width: none;
	margin: 0;
	padding: 0;
	flex-wrap: wrap;
	gap: 8px;
	overflow: visible;
	-webkit-mask-image: none;
	mask-image: none;
}
.dbi-search-browse .dbi-filter-bar .dbi-filter-edge,
.dbi-search-browse .dbi-filter-bar .dbi-filter-sub {
	display: none;
}

/* ── Close ──
   Neve's button (icon only) gains its label from its aria-label, so
   the exit is named, not guessed (Esc works too, Neve JS). */
.menu-item-nav-search.canvas .nv-nav-search .close-container.responsive-search {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	max-width: var( --container, 1170px ); /* same box as .dbi-search-brand */
	margin: 0 auto;
	padding: 18.4px 15px;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	pointer-events: none;
}
.menu-item-nav-search.canvas .close-responsive-search {
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 6px 12px 6px 8px;
	border: 1px solid var( --border );
	border-radius: 999px;
	background: var( --bg-pure );
	font-family: var( --f-body );
	font-size: .8rem;
	font-weight: 500;
	color: var( --muted );
	cursor: pointer;
	transition: background var( --t ) var( --ease ), color var( --t ), border-color var( --t );
}
.menu-item-nav-search.canvas .close-responsive-search::after {
	content: attr( aria-label );
}
.menu-item-nav-search.canvas .close-responsive-search > svg {
	width: 18px;
	height: 18px;
	min-width: 0;
	min-height: 0;
	fill: currentColor;
}
.menu-item-nav-search.canvas .close-responsive-search:hover {
	background: var( --teal-light );
	border-color: rgba( 0, 170, 160, .30 );
	color: var( --teal-dark );
}
.menu-item-nav-search.canvas .close-responsive-search:focus-visible {
	outline: 2px solid var( --teal );
	outline-offset: 2px;
}

@media ( max-width: 599px ) {
	.dbi-search-brand {
		padding: 14.4px 15px;
	}
	.menu-item-nav-search.canvas .nv-nav-search .close-container.responsive-search {
		padding: 14.4px 15px;
	}
	.dbi-search-brand img {
		width: var( --dbi-logo-w-mobile, 120px );
	}
	.dbi-search-body {
		padding: 32px 16px 48px;
	}
	.dbi-search-stage .search-field,
	.dbi-search-refine .search-field {
		height: 56px;
		padding-right: 108px;
		font-size: 1.05rem;
	}
	.dbi-search-submit.search-submit {
		right: 6px;
		height: 36px;
		padding: 0 16px;
	}
	.dbi-search-browse {
		margin-top: 32px;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.menu-item-nav-search.canvas .nv-nav-search,
	.dbi-search-stage {
		transition: none;
		transform: none;
	}
}


/* ════════════════════════════════════════════════
   2 · RESULTS PAGE (body.search.dbi-scope)
   Markup: Neve page header (h1 + our meta line and
   refine form via neve_after_page_title), then our
   facet nav, then Neve's card grid (dbi-blog.css §3).
   ════════════════════════════════════════════════ */
body.search .dbi-search-meta {
	margin: 10px 0 0;
	font-family: var( --f-body );
	font-size: .95rem;
	line-height: 1.6;
	color: var( --muted );
}
body.search .dbi-search-refine {
	margin-top: 22px;
}
body.search .dbi-search-refine .search-field {
	height: 56px;
	padding-right: 116px;
	font-size: 1.05rem;
}
body.search .dbi-search-refine .dbi-search-submit.search-submit {
	padding: 0 18px;
}

/* Facet row: same pill language as the filter bar (dbi-blog.css §2),
   but it narrows the current results instead of leaving for an
   archive, so it is its own component. Wraps, no scrolling strip. */
body.search .dbi-search-facets {
	max-width: 1160px;
	margin: 18px 0 32px;
}
body.search .dbi-search-facets ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.search .dbi-search-facets li {
	margin: 0;
	padding: 0;
	list-style: none;
}
body.search .dbi-search-facets a {
	display: inline-flex;
	align-items: center;
	padding: 6px 16px;
	border: 1px solid var( --border );
	border-radius: 999px;
	font-family: var( --f-body );
	font-size: .78rem;
	font-weight: 500;
	white-space: nowrap;
	text-decoration: none !important;
	color: var( --muted );
	background: transparent;
	transition: background var( --t ) var( --ease ), color var( --t ), border-color var( --t );
}
body.search .dbi-search-facets a:hover {
	background: var( --teal-light );
	color: var( --teal-dark );
	border-color: rgba( 0, 170, 160, .30 );
}
body.search .dbi-search-facets .dbi-search-facet-current > a {
	background: var( --teal-dark );
	border-color: var( --teal-dark );
	color: #fff !important;
}
body.search .dbi-search-facets a:focus-visible {
	outline: 2px solid var( --teal );
	outline-offset: 2px;
}

/* No results: Neve repeats a bare form under its message; the refine
   field above already holds the query. */
body.search .nv-content-none-wrap .nv-seach-form-wrap {
	display: none;
}
body.search .nv-content-none-wrap {
	padding: 8px 0 64px;
	font-family: var( --f-body );
	color: var( --muted );
}