/* UnfoldCRO WPT — supplemental front-end + editor styles.
   Tokens + most styling come from theme.json; this file holds the
   bits theme.json can't express (icon sizing, focus ring, hero accent,
   eyebrow labels, small interactions). */

/* Focus ring — brand rule */
:where(a, button, input, select, textarea, .wp-block-button__link):focus-visible {
	outline: 2px solid var(--wp--preset--color--brand-green);
	outline-offset: 2px;
}

/* Lucide inline icon */
.ufc-icon {
	display: inline-block;
	vertical-align: middle;
	flex: 0 0 auto;
}

/* Hero: first line black, second line green (brand convention).
   Apply .ufc-hero-accent to the highlighted text span. */
.ufc-hero-accent {
	color: var(--wp--preset--color--brand-green);
}

/* Eyebrow label — "01 — SECTION NAME" */
.ufc-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600;
	font-size: 0.6875rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand-green);
}

/* Card — brand radius + border + hover lift */
.ufc-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	padding: 26px 24px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ufc-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.16);
}

/* Outline button variant (secondary CTA) */
.wp-block-button.is-style-ufc-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--brand-indigo);
	border: 1px solid var(--wp--preset--color--border-strong);
}
.wp-block-button.is-style-ufc-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--brand-green);
	color: var(--wp--preset--color--brand-green);
}

/* Sticky header chrome */
.wp-block-template-part.ufc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: saturate(180%) blur(10px);
	border-bottom: 1px solid var(--wp--preset--color--border);
}

@media (prefers-reduced-motion: reduce) {
	.ufc-card,
	.ufc-card:hover {
		transition: none;
		transform: none;
	}
}