/**
 * Focus Hero WPBakery Addon
 * Ports React hub focus-gradient hero section styles.
 */

.hero-section.focus-gradient {
	--copan-navy-800: #122a4a;
	--copan-navy-700: #1b3a63;

	color: #fff;
	padding: 1.5rem;
	border-radius: var(--copan-radius-xl, 18px);
	box-shadow: var(--copan-shadow-lg, 0 16px 40px rgba(11, 27, 51, 0.16));
	background: linear-gradient(
		120deg,
		var(--copan-navy-950, #061224) 0%,
		var(--copan-navy-800) 45%,
		var(--copan-navy-700) 100%
	);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.hero-section.focus-gradient::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			55% 90% at 100% 50%,
			rgba(125, 203, 232, 0.28),
			transparent 70%
		),
		radial-gradient(
			40% 60% at 0% 100%,
			rgba(27, 150, 211, 0.22),
			transparent 70%
		);
	pointer-events: none;
	z-index: 0;
}

.hero-section.focus-gradient::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(
			1.2px 1.2px at 20% 30%,
			rgba(255, 255, 255, 0.5),
			transparent 50%
		),
		radial-gradient(
			1px 1px at 70% 70%,
			rgba(255, 255, 255, 0.35),
			transparent 50%
		),
		radial-gradient(
			1px 1px at 85% 25%,
			rgba(125, 203, 232, 0.6),
			transparent 50%
		);
	pointer-events: none;
	z-index: 0;
	opacity: 0.7;
}

.hero-section.focus-gradient > * {
	position: relative;
	z-index: 1;
}

@media (min-width: 768px) {
	.hero-section.focus-gradient {
		padding: 2.5rem;
	}
}

.hero-section.focus-gradient p {
	padding-bottom: 0 !important;
	margin-bottom: 0;
}

/* Override app-shell main content text colors (body.copan-app-shell .copan-app-main p/h1). */
body.copan-app-shell .copan-app-main .hero-section.focus-gradient p,
body.copan-app-shell .copan-app-main .hero-section.focus-gradient h1,
html.theme-dark body.copan-app-shell .copan-app-main .hero-section.focus-gradient p,
html.theme-dark body.copan-app-shell .copan-app-main .hero-section.focus-gradient h1 {
	color: #fff;
}

.hero-eyebrow {
	margin: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--copan-cyan-200, #7dcbe8);
}

body.copan-app-shell .copan-app-main .hero-section.focus-gradient p.hero-eyebrow,
html.theme-dark body.copan-app-shell .copan-app-main .hero-section.focus-gradient p.hero-eyebrow {
	color: var(--copan-cyan-200, #7dcbe8) !important;
}

.hero-title {
	margin: 1rem 0 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.25rem;
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-weight: 400;
	color: #fff;
}

body.copan-app-shell .copan-app-main .hero-section.focus-gradient h1.hero-title,
html.theme-dark body.copan-app-shell .copan-app-main .hero-section.focus-gradient h1.hero-title {
	color: #fff !important;
}

@media (min-width: 768px) {
	.hero-title {
		font-size: 2.75rem;
	}
}

.hero-title-accent {
	color: var(--copan-cyan-200, #7dcbe8);
}

body.copan-app-shell .copan-app-main .hero-section.focus-gradient .hero-title-accent,
html.theme-dark body.copan-app-shell .copan-app-main .hero-section.focus-gradient .hero-title-accent {
	color: var(--copan-cyan-200, #7dcbe8) !important;
}

.hero-description {
	margin: 1rem 0 0;
	max-width: 42rem;
	font-size: 0.9375rem;
	line-height: 1.625;
	color: rgba(255, 255, 255, 0.85);
}

body.copan-app-shell .copan-app-main .hero-section.focus-gradient p.hero-description,
html.theme-dark body.copan-app-shell .copan-app-main .hero-section.focus-gradient p.hero-description {
	color: rgba(255, 255, 255, 0.85) !important;
}

@media (min-width: 768px) {
	.hero-description {
		font-size: 1rem;
	}
}

.hero-stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 2rem;
	row-gap: 1.25rem;
	margin: 2rem 0 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.hero-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.hero-stat {
	display: block;
	margin: 0;
}

.hero-stat-value {
	margin: 0;
	padding: 0;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 2.25rem;
	line-height: 1;
	font-weight: 400;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

body.copan-app-shell .copan-app-main .hero-section.focus-gradient p.hero-stat-value,
html.theme-dark body.copan-app-shell .copan-app-main .hero-section.focus-gradient p.hero-stat-value {
	color: #fff !important;
}

@media (min-width: 768px) {
	.hero-stat-value {
		font-size: 2.5rem;
	}
}

.hero-stat-label {
	margin: 0.5rem 0 0;
	padding: 0;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(125, 203, 232, 0.9);
}

body.copan-app-shell .copan-app-main .hero-section.focus-gradient p.hero-stat-label,
html.theme-dark body.copan-app-shell .copan-app-main .hero-section.focus-gradient p.hero-stat-label {
	color: rgba(125, 203, 232, 0.9) !important;
}

/* Preserve focus-gradient background in dark mode (theme-toggle sets bg transparent). */
html.theme-dark .hero-section.focus-gradient {
	background: linear-gradient(
		120deg,
		var(--copan-navy-950, #061224) 0%,
		var(--copan-navy-800, #122a4a) 45%,
		var(--copan-navy-700, #1b3a63) 100%
	) !important;
}

@keyframes copan-rise-in {
	from {
		opacity: 0;
		transform: translateY(8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.hero-section.rise-in {
	animation: copan-rise-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}