/* Faith Funnels — Homepage hero
 * ---------------------------------
 * Scoped under .ff-hero. Loaded only on the front page via child theme.
 * Translates ReachRight's Tailwind-based hero into plain CSS, wired to
 * Faith Funnels' brand palette (warm orange primary #E47652).
 */

.ff-hero {
	--ff-primary: var(--e-global-color-primary, #E47652);
	--ff-primary-soft: rgba(228, 118, 82, 0.10);
	--ff-primary-border: rgba(228, 118, 82, 0.20);
	--ff-primary-glow-a: rgba(228, 118, 82, 0.10);
	--ff-primary-glow-b: rgba(228, 118, 82, 0.04);
	--ff-accent-glow-a: rgba(0, 154, 206, 0.08);
	--ff-accent-glow-b: rgba(0, 154, 206, 0.03);
	--ff-ink: #0F172B;
	--ff-ink-soft: #2A3135;
	--ff-muted: #6B7480;
	--ff-muted-2: #94A0AE;
	--ff-panel: #FFFFFF;
	--ff-panel-alt: #F8FAFC;
	--ff-hairline: #E2E8F0;
	--ff-star: #F5B301;
	--ff-display: 'Bricolage Grotesque', system-ui, -apple-system, Segoe UI, sans-serif;
	--ff-body: 'Bricolage Grotesque', system-ui, -apple-system, Segoe UI, sans-serif;
	/* Approximate rendered height of the sticky site header. Tweak this one
	   value if the header changes; every viewport calculation below uses it. */
	--ff-header-h: 110px;
	position: relative;
	height: calc(100svh - var(--ff-header-h));
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	padding-top: clamp(1rem, 3vh, 7.5rem);
	padding-bottom: clamp(1rem, 3vh, 7.5rem);
	background: linear-gradient(180deg, #FFFFFF 0%, rgba(248, 250, 252, 0.7) 60%, rgba(228, 118, 82, 0.04) 100%);
	color: var(--ff-ink);
	font-family: var(--ff-body);
}

/* Layered decorative background */
.ff-hero__bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}
.ff-hero__dots {
	position: absolute;
	inset: 0;
	opacity: 0.035;
	background-image: radial-gradient(circle, var(--ff-primary) 0.8px, transparent 0.8px);
	background-size: 28px 28px;
}
.ff-hero__ghost {
	display: none;
	position: absolute;
	right: -6rem;
	top: 50%;
	transform: translateY(-50%);
	font-family: var(--ff-display);
	font-weight: 900;
	font-style: italic;
	line-height: 1;
	color: rgba(15, 23, 43, 0.04);
	font-size: clamp(30rem, 45vw, 50rem);
	user-select: none;
	pointer-events: none;
}
.ff-hero__orb {
	position: absolute;
	border-radius: 999px;
	filter: blur(120px);
}
.ff-hero__orb--a {
	top: -10%;
	left: -8%;
	width: 320px;
	height: 320px;
	background: radial-gradient(circle, var(--ff-primary-glow-a) 0%, var(--ff-primary-glow-b) 50%, transparent 70%);
}
.ff-hero__orb--b {
	bottom: 0%;
	right: -6%;
	width: 260px;
	height: 260px;
	background: radial-gradient(circle, var(--ff-accent-glow-a) 0%, var(--ff-accent-glow-b) 50%, transparent 70%);
}

/* Container */
.ff-hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 64rem;
	margin: 0 auto;
	padding: clamp(0.75rem, 2vh, 1.5rem) 1rem;
	text-align: center;
}

/* Eyebrow */
.ff-hero__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem 1rem;
	border-radius: 999px;
	background: var(--ff-primary-soft);
	border: 1px solid var(--ff-primary-border);
	margin: 0 0 1.25rem;
	font-family: var(--ff-body);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--ff-primary);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}
.ff-hero__eyebrow-dot {
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 999px;
	background: var(--ff-primary);
	animation: ff-hero-pulse 2.4s ease-in-out infinite;
}
.ff-hero__eyebrow-text {
	line-height: 1.2;
}

/* Setup line */
.ff-hero__setup {
	font-family: var(--ff-display);
	font-weight: 900;
	font-style: italic;
	line-height: 0.95;
	color: var(--ff-ink);
	font-size: clamp(1.5rem, min(5vw, 5.5vh), 2.75rem);
	margin: 0;
}

/* Search card (decorative) */
.ff-hero__search {
	max-width: 36rem;
	margin: clamp(0.75rem, 2vh, 1.5rem) auto 0.5rem;
	font-family: var(--ff-body);
}
.ff-hero__card {
	display: block;
	background: var(--ff-panel);
	border-radius: 1.25rem;
	text-align: left;
	box-shadow: 0 25px 60px -20px rgba(15, 23, 43, 0.15), 0 8px 20px -8px rgba(15, 23, 43, 0.08);
	overflow: hidden;
}
.ff-hero__query {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.85rem 1.25rem;
}
.ff-hero__icon {
	flex-shrink: 0;
	color: var(--ff-primary);
}
.ff-hero__query-input {
	flex: 1;
	min-width: 0;
	display: flex;
	align-items: center;
	font-family: var(--ff-body);
	font-size: 1.25rem;
	color: var(--ff-ink-soft);
	white-space: nowrap;
	overflow: hidden;
}
.ff-hero__mic {
	flex-shrink: 0;
	color: #CBD5E1;
}
.ff-hero__caret {
	display: inline-block;
	width: 2px;
	height: 1.25em;
	background: var(--ff-ink-soft);
	margin-left: 2px;
	vertical-align: middle;
	animation: ff-hero-caret 1s steps(1) infinite;
}
.ff-hero__results {
	border-top: 1px solid #F1F5F9;
}
.ff-hero__row {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 1.25rem;
}
.ff-hero__row--top {
	background: rgba(228, 118, 82, 0.06);
}
.ff-hero__row-icon {
	flex-shrink: 0;
}
.ff-hero__row-icon--live {
	color: var(--ff-primary);
}
.ff-hero__row-icon--dim {
	color: #CBD5E1;
}
.ff-hero__row-body {
	flex: 1;
	min-width: 0;
}
.ff-hero__row-title {
	display: block;
	font-family: var(--ff-body);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--ff-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ff-hero__row-title--dim {
	color: #94A0AE;
	font-weight: 600;
}
.ff-hero__row-meta {
	display: flex;
	align-items: center;
	gap: 0.35rem;
	font-family: var(--ff-body);
	font-size: 0.8rem;
	color: var(--ff-muted);
}
.ff-hero__row-meta--dim {
	display: block;
	color: var(--ff-muted-2);
}
.ff-hero__stars {
	color: var(--ff-star);
	letter-spacing: -0.02em;
}
.ff-hero__channels {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-top: 0.4rem;
	color: rgba(228, 118, 82, 0.75);
}
.ff-hero__channels svg {
	width: 0.95rem;
	height: 0.95rem;
}
.ff-hero__rank {
	flex-shrink: 0;
	font-family: var(--ff-display);
	font-weight: 900;
	font-style: italic;
	font-size: 0.85rem;
	color: #FFFFFF;
	background: var(--ff-primary);
	border-radius: 999px;
	padding: 0.25rem 0.65rem;
}
.ff-hero__annotation {
	display: block;
	margin: 0.75rem auto 0;
	font-family: var(--ff-body);
	font-size: 0.9rem;
	color: var(--ff-muted);
	font-style: italic;
}

/* Punch H1 */
.ff-hero__punch {
	margin: clamp(0.5rem, 1.5vh, 1rem) 0 0;
	font-family: var(--ff-display);
	font-weight: 900;
	font-style: italic;
	line-height: 0.95;
	font-size: clamp(2rem, min(8vw, 9vh), 5rem);
	background: linear-gradient(135deg, var(--ff-primary) 0%, #C15938 100%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	padding-bottom: 0.25rem;
}

/* Subhead */
.ff-hero__sub {
	margin: clamp(0.5rem, 1.5vh, 1rem) auto;
	max-width: 46rem;
	font-family: var(--ff-body);
	font-size: 1.15rem;
	line-height: 1.55;
	color: var(--ff-ink-soft);
	text-wrap: balance;
}
.ff-hero__sub strong {
	color: var(--ff-ink);
	font-weight: 700;
}

/* Founder line (replaces the ReachRight stat block) */
.ff-hero__founder {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.65rem 1.15rem;
	border-radius: 999px;
	background: rgba(15, 23, 43, 0.04);
	color: var(--ff-ink-soft);
	font-family: var(--ff-body);
	font-size: 0.95rem;
	margin: 0 auto 1.5rem;
}
.ff-hero__founder-avatar {
	width: 1.75rem;
	height: 1.75rem;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--ff-primary), #C15938);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-family: var(--ff-display);
	font-size: 0.85rem;
	font-style: italic;
}
.ff-hero__founder strong {
	font-weight: 700;
	color: var(--ff-ink);
}

/* CTAs */
.ff-hero__ctas {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	margin-top: 0.5rem;
}
.ff-hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.9rem 1.5rem;
	border-radius: 8px;
	font-family: var(--ff-body);
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	width: 100%;
	max-width: 22rem;
	white-space: nowrap;
	line-height: 1.15;
}

/* Small phones: shrink padding + icon so "Free Church Marketing Scorecard"
 * fits on a single line at 360-393px viewports without ellipsis or wrap. */
@media (max-width: 480px) {
	.ff-hero__cta {
		padding: 0.85rem 0.85rem;
		font-size: 0.95rem;
		gap: 0.4rem;
		letter-spacing: -0.005em;
	}
	.ff-hero__cta svg {
		width: 16px;
		height: 16px;
	}
}
@media (max-width: 359px) {
	.ff-hero__cta {
		font-size: 0.9rem;
		padding: 0.8rem 0.65rem;
	}
}
.ff-hero__cta--primary {
	background: linear-gradient(135deg, var(--ff-primary) 0%, #C15938 100%);
	color: #FFFFFF;
	box-shadow: 0 15px 30px -10px rgba(228, 118, 82, 0.55);
}
.ff-hero__cta--primary:hover,
.ff-hero__cta--primary:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 20px 40px -10px rgba(228, 118, 82, 0.65);
	color: #FFFFFF;
	text-decoration: none;
}
.ff-hero__cta--secondary {
	background: transparent;
	color: var(--ff-ink);
	border: 1.5px solid rgba(15, 23, 43, 0.15);
}
.ff-hero__cta--secondary:hover,
.ff-hero__cta--secondary:focus-visible {
	border-color: var(--ff-primary);
	color: var(--ff-primary);
	text-decoration: none;
}
.ff-hero__cta svg {
	flex-shrink: 0;
}
.ff-hero__trust {
	margin: clamp(0.5rem, 1.5vh, 1rem) 0 0;
	font-family: var(--ff-body);
	font-size: 0.85rem;
	color: var(--ff-muted-2);
}

/* SR-only helper (also declared globally in style.css but scoped fallback) */
.ff-hero__sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0,0,0,0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Animations */
@keyframes ff-hero-pulse {
	0%, 100% { transform: scale(1);   opacity: 1; }
	50%      { transform: scale(1.4); opacity: 0.6; }
}
@keyframes ff-hero-caret {
	0%, 50%  { opacity: 1; }
	51%, 100% { opacity: 0; }
}

/* Reduced-motion: skip animations, jump to final state */
@media (prefers-reduced-motion: reduce) {
	.ff-hero__eyebrow-dot,
	.ff-hero__caret {
		animation: none;
	}
	.ff-hero__results,
	.ff-hero__channels svg {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Breakpoints */
@media (max-width: 639px) {
	.ff-hero {
		height: auto;
		min-height: auto;
		align-items: flex-start;
	}
}

@media (min-width: 640px) {
	.ff-hero__inner {
		padding: 3.5rem 1.5rem;
	}
	.ff-hero__query {
		padding: 1rem 1.5rem;
		gap: 1rem;
	}
	.ff-hero__row {
		padding: 0.8rem 1.5rem;
		gap: 1rem;
	}
	.ff-hero__query-input {
		font-size: 1.5rem;
	}
	.ff-hero__row-title {
		font-size: 1rem;
	}
	.ff-hero__row-meta,
	.ff-hero__row-meta--dim {
		font-size: 0.875rem;
	}
	.ff-hero__ctas {
		flex-direction: row;
		gap: 1rem;
	}
	.ff-hero__cta {
		width: auto;
	}
	.ff-hero__annotation {
		font-size: 0.95rem;
	}
}

@media (min-width: 1024px) {
	.ff-hero__ghost {
		display: block;
	}
	.ff-hero__orb--a {
		width: 620px;
		height: 620px;
		filter: blur(200px);
	}
	.ff-hero__orb--b {
		width: 480px;
		height: 480px;
		filter: blur(170px);
	}
	.ff-hero__inner {
		padding: 2.5rem 2rem;
	}
	.ff-hero__setup {
		font-size: 3rem;
	}
}