/**
 * Search Page CSS
 *
 * Styles for search page components including:
 * - Quick search tags
 * - Search landing page layout
 *
 * @package WPBlogsAndPages
 * @since 1.0.0
 */

/* @critical-start context: home */
/* ==========================================================================
   Search Landing
   ========================================================================== */

.search-landing {
	text-align: center;
	padding: var(--spacing-8) 0;
}

.search-landing__intro {
	font-size: var(--font-size-lg);
	color: var(--color-neutral-600);
	max-width: 600px;
	margin: 0 auto var(--spacing-6);
}

/* ==========================================================================
   Search Tags (Quick Search Chips)
   ========================================================================== */

.search-tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spacing-2);
	margin-bottom: var(--spacing-8);
}

.search-tag {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	padding: var(--spacing-2) var(--spacing-4);
	background: var(--color-white);
	border: 1px solid var(--color-neutral-200);
	border-radius: var(--radius-full);
	font-size: var(--font-size-sm);
	font-weight: var(--weight-medium);
	color: var(--color-neutral-700);
	text-decoration: none;
	transition: all 0.15s ease;
}

.search-tag:hover {
	background: var(--color-brand-50);
	border-color: var(--color-brand-200);
	color: var(--color-brand-700);
}

.search-tag svg {
	width: 16px;
	height: 16px;
	color: var(--color-neutral-400);
}

.search-tag:hover svg {
	color: var(--color-brand-500);
}
/* @critical-end */