/*
 * RahkarTheme — shared empty-state component.
 *
 * One stylesheet, two surfaces:
 *   • 404 page (.rh-empty-state under main, via the rahkar/empty-state
 *     block in templates/404.html)
 *   • Product archive no-results (same .rh-empty-state inside the
 *     product-archive block's section wrapper)
 *
 * Loaded conditionally — rahkar_empty_state_ensure_assets() registers
 * + enqueues this file only when the renderer actually paints.
 */

.rh-empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 14px;
	padding: 72px 24px 64px;
	max-width: 480px;
	margin-inline: auto;
}

/* Icon — brand primary. Size lives on the container so the inner
   <svg> can stretch to fill via 100%, keeping the SVG markup itself
   viewport-agnostic (same path data drives any size). */
.rh-empty-state__icon {
	color: var(--wp--preset--color--primary, #0a66c2);
	width: 96px;
	height: 96px;
	opacity: 0.9;
	margin-block-end: 4px;
}
.rh-empty-state__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.rh-empty-state__title {
	font-size: clamp(1.2rem, 3.5vw, 1.6rem);
	font-weight: 700;
	color: var(--wp--preset--color--text, #1a1d23);
	margin: 0;
	line-height: 1.35;
}

.rh-empty-state__desc {
	font-size: 14px;
	color: var(--wp--preset--color--text-muted, #5b6271);
	margin: 0;
	line-height: 1.7;
	max-width: 360px;
}

/* CTA — solid primary button matching the rest of the theme's
   primary affordances (cart-bar, header account link). White text on
   brand blue, subtle press-state feedback. */
.rh-empty-state__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-block-start: 12px;
	padding: 12px 28px;
	background: var(--wp--preset--color--primary, #0a66c2);
	color: #fff;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	transition: background-color 120ms linear, transform 120ms linear;
	-webkit-tap-highlight-color: transparent;
}
.rh-empty-state__cta:hover,
.rh-empty-state__cta:focus-visible {
	background: var(--wp--preset--color--primary-dark, #074a8d);
	color: #fff;
	outline: none;
}
.rh-empty-state__cta:active {
	transform: translateY(1px);
}

@media (max-width: 600px) {
	.rh-empty-state {
		padding: 48px 16px 40px;
	}
	.rh-empty-state__icon {
		width: 80px;
		height: 80px;
	}
}