/* Zipni custom styles — supplements theme.json */

/* Smooth scroll for anchor links */
html {
	scroll-behavior: smooth;
}

/* Sticky header backdrop */
.site-header {
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Button transitions */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* Link transitions */
a {
	transition: color 0.2s ease;
}

/* Image border radius in cards */
.wp-block-post-featured-image img {
	border-radius: 0.5rem;
}

/* Navigation link hover */
.wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--text-primary);
}

/* ───────────────────────────────────────────────
 * Landing utility classes
 * Applied via className on Gutenberg blocks.
 * Uses theme.json CSS custom properties.
 * ─────────────────────────────────────────────── */

/* Card hover — gentle lift + shadow on hover */
.card-hover {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(15, 23, 42, 0.10);
}

/* Featured card — accent border + larger shadow */
.card-featured {
	border-color: var(--wp--preset--color--accent) !important;
	border-width: 2px !important;
	box-shadow: 0 16px 40px rgba(214, 48, 49, 0.12);
}

/* Shadows */
.shadow-sm { box-shadow: 0 4px 12px rgba(15, 23, 42, 0.05); }
.shadow-md { box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08); }
.shadow-lg { box-shadow: 0 18px 50px rgba(15, 23, 42, 0.10); }

/* Icon box — container for emoji or SVG icon */
.icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 14px;
	background: rgba(214, 48, 49, 0.08);
	border: 1px solid rgba(214, 48, 49, 0.18);
	font-size: 1.25rem;
	line-height: 1;
	flex-shrink: 0;
}

/* Step circle — numbered step indicator */
.step-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: #fff;
	font-weight: 700;
	font-size: 0.875rem;
	flex-shrink: 0;
}

/* Badge accent — small pill on accent-light bg */
.badge-accent {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem;
	border-radius: 999px;
	background: rgba(214, 48, 49, 0.10);
	border: 1px solid rgba(214, 48, 49, 0.22);
	color: var(--wp--preset--color--accent-hover);
	font-weight: 700;
	font-size: 0.8125rem;
}

/* Badge outline — pill with subtle border */
.badge-outline {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0.75rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--text-secondary);
	font-weight: 600;
	font-size: 0.8125rem;
}

/* Trust pill — mini chip with checkmark */
.trust-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 0.625rem;
	border-radius: 999px;
	border: 1px solid var(--wp--preset--color--border);
	background: rgba(255, 255, 255, 0.70);
	color: var(--wp--preset--color--text-secondary);
	font-weight: 600;
	font-size: 0.8125rem;
}

/* Divider — subtle horizontal line */
.divider-subtle {
	border: none;
	border-top: 1px solid var(--wp--preset--color--border);
	margin: var(--wp--preset--spacing--50) 0;
}