/**
 * Product search page.
 *
 * The catalog sheet provides the layout, filters and result cards. These
 * rules only add the empty state for a search without a term.
 */

.myc-search-empty-state {
	display: grid;
	gap: var(--ps-space-2);
	max-width: 720px;
	padding: var(--ps-space-6);
	border: 1px solid var(--ps-color-border);
	border-radius: var(--ps-radius-lg);
	background: var(--ps-color-surface-subtle);
	color: var(--ps-color-text-muted);
}

.myc-search-empty-state strong {
	color: var(--ps-color-text);
	font-size: 18px;
}

/**
 * WordPress search results (?s=), drawn by search.php.
 *
 * A different screen from the product search above: this one lists pages and
 * posts, so the result is a line of text rather than a card. Numbered, because
 * the order is the relevance WordPress ranked them in and a visitor scanning
 * for the right page benefits from seeing where they are in the list.
 */

/*
 * The shell. `.site-main` carries no base rule in this theme — each view sizes
 * it — so without this the results ran edge to edge with no gutter at all.
 * Modelled on pages/not-found.css, including the two layout modifiers, so a
 * shop switched to the full-width layout does not lose its margins here.
 */
.myc-app-body.search .site-main {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--ps-content-discovery);
	margin: 0 auto;
	padding-block: clamp(var(--ps-space-6), 5vw, 72px);
	padding-inline: var(--ps-space-5);
}

body.myc-layout-full.myc-app-body.search .site-main {
	max-width: none;
	padding-inline: var(--myc-full-width-padding, 56px);
}

@media (max-width: 1199px) {
	body.myc-layout-full.myc-app-body.search .site-main {
		padding-inline: clamp(20px, 3vw, 32px);
	}
}

.ps-search-heading {
	margin-bottom: clamp(var(--ps-space-6), 4vw, var(--ps-space-8));
}

.ps-search-heading h1 {
	margin: 0;
	color: var(--ps-color-ink);
	/* Smaller than the editorial band the catalogue and the static pages use:
	   this heading quotes back what the visitor typed, so a long query must not
	   take over the screen they came here to scan. */
	font-size: clamp(28px, 3.4vw, 40px);
	font-weight: 800;
	letter-spacing: -.03em;
	line-height: 1.1;
	overflow-wrap: anywhere;
}

.ps-search-heading__count {
	margin: var(--ps-space-3) 0 0;
	color: var(--ps-color-text-muted);
}

.ps-search-results {
	display: grid;
	gap: var(--ps-space-3);
	margin: 0 0 var(--ps-space-6);
	padding: 0;
	list-style: none;
	counter-reset: ps-search-result;
}

.ps-search-result {
	position: relative;
	padding: var(--ps-space-5) var(--ps-space-5) var(--ps-space-5) calc(var(--ps-space-5) * 2.4);
	border: 1px solid var(--ps-color-border);
	border-radius: var(--ps-radius-lg);
	background: var(--ps-color-surface);
	counter-increment: ps-search-result;
}

.ps-search-result::before {
	content: counter(ps-search-result, decimal-leading-zero);
	position: absolute;
	top: var(--ps-space-5);
	left: var(--ps-space-5);
	color: var(--ps-color-text-muted);
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.ps-search-result__title {
	margin: 0 0 var(--ps-space-2);
	font-size: 18px;
	line-height: 1.3;
}

.ps-search-result__title a {
	color: var(--ps-color-text);
	text-decoration: none;
}

/*
 * Hover only where there is a pointer that can hover. On a touch screen the
 * state sticks after the tap and the link stays underlined behind the visitor.
 */
@media (hover: hover) and (pointer: fine) {
	.ps-search-result__title a:hover {
		text-decoration: underline;
	}
}

.ps-search-result__excerpt {
	margin: 0 0 var(--ps-space-2);
	color: var(--ps-color-text-muted);
	line-height: 1.6;
}

.ps-search-result__url {
	color: var(--ps-color-text-muted);
	font-size: 13px;
	word-break: break-word;
}

.ps-search-empty__link {
	color: var(--ps-color-brand-600);
	font-weight: 600;
}

@media (max-width: 640px) {
	.ps-search-result {
		padding: var(--ps-space-4);
	}

	/* The counter would sit on top of the title at this width. */
	.ps-search-result::before {
		position: static;
		display: block;
		margin-bottom: var(--ps-space-2);
	}
}