/* ==========================================================================
   Rise With Teagan — FunnelKit step pages, ground-truth parity

   Loaded on every FunnelKit step by rwt-funnel-bridge.php. Carries the
   handful of treatments the coded lead-magnet pages get from
   lead-magnet.css/confirm.css that Elementor widget controls can't express:
   the full-bleed hero photo, height-capped benefit icons, the recipe-card
   image ratio and macro line, the portrait "why" crop, and the confirmation
   skip link. Values verbatim from lead-magnet.css.
   ========================================================================== */

body {
	--rwt-terracotta: var( --e-global-color-primary,   #BC5F50 );
	--rwt-espresso:   var( --e-global-color-text,      #3D322B );
	--rwt-taupe:      var( --e-global-color-c2248c7,   #887D78 );
}

/* Hero photo fills its half of the split, cropping from centre — the hero's
   600px height decides, never the photo's own shape. Explicit heights: a
   height:100% chain through Elementor's widget wrappers resolves to auto and
   the photo floats at its own ratio instead of filling the column. */
body.rwt-funnel .rwt-fp-heroimg,
body.rwt-funnel .rwt-fp-heroimg .elementor-widget-container {
	height: 100%;
	min-height: 600px;
}

body.rwt-funnel .rwt-fp-heroimg img {
	width: 100%;
	height: 600px;
	object-fit: cover;
	display: block;
}

@media ( max-width: 800px ) {
	body.rwt-funnel .rwt-fp-heroimg,
	body.rwt-funnel .rwt-fp-heroimg .elementor-widget-container {
		min-height: 0;
	}

	body.rwt-funnel .rwt-fp-heroimg img {
		aspect-ratio: 4 / 3;
		height: auto;
	}
}

/* Hero copy column: the coded page's .rwt-lm__hero-copy treatment. Every
   child caps at 504px — including the h1, which decides where the headline
   wraps — and the left gutter tracks the centred 1200px grid, not a fixed
   number. Spacing is the coded page's margin rhythm (the column's gap is 0):
   16 above / 26 below the intro, 10 above the microcopy. */
@media ( min-width: 1025px ) {
	body.rwt-funnel .rwt-fp-herocopy {
		padding-left: max( 24px, calc( 50vw - 600px ) ) !important;
	}
}

/* !important: Elementor's ".elementor.elementor .e-con > .elementor-widget"
   caps widgets at 100% with (0,4,0) specificity, which outranks these. */
body.rwt-funnel .rwt-fp-herocopy > .elementor-element {
	max-width: 504px !important;
}

body.rwt-funnel .rwt-fp-intro {
	margin: 16px 0 26px !important;
	max-width: min( 46ch, 504px ) !important;
}

body.rwt-funnel .rwt-fp-micro {
	margin: 10px 0 0 !important;
}

body.rwt-funnel .rwt-fp-intro p,
body.rwt-funnel .rwt-fp-micro p {
	margin: 0;
}

/* Benefit icons: capped by HEIGHT, not width — the three glyphs are
   different widths but near-identical heights, which balances the row. */
body.rwt-funnel .rwt-fp-ic img {
	height: 56px;
	width: auto;
}

/* Recipe card cover: the coded card's 1.17 ratio. */
body.rwt-funnel .rwt-fp-cardimg img {
	width: 100%;
	aspect-ratio: 1.17;
	object-fit: cover;
	display: block;
}

/* The card hook's paragraph: the theme gives every p a 0.9rem bottom margin;
   the coded card's hook has none, and the body's 8px gap does the spacing. */
body.rwt-funnel .rwt-fp-hook p {
	margin: 0 !important;
}

/* Macro line rendered by [rwt_recipe_details] — its own stylesheet only
   loads on archive/account pages. */
body.rwt-funnel .rwt-fp-meta .rwt-card-meta {
	margin: 0;
	font-size: 0.82rem;
	color: var( --rwt-terracotta );
}

/* The "why" portrait: landscape source cropped to 3/4 here, so any photo
   drops into the same shape. */
body.rwt-funnel .rwt-fp-why img {
	width: 100%;
	max-width: 340px;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	object-position: center;
	border-radius: 14px;
	display: block;
	margin: 0 auto;
}

/* Closing band's flatlay: Elementor lazy-loads container backgrounds behind
   an .e-lazyloaded scroll gate — ":not(.e-lazyloaded) { background-image:
   none !important }" at (0,4,0) — so the photo can miss first paint
   entirely. The coded page paints it as plain CSS; out-rank the gate. */
body.rwt-funnel .e-con.e-parent.rwt-fp-closing {
	background-image: url( "/wp-content/uploads/2026/07/rwt-lm-closing-flatlay.jpg" ) !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
	background-size: cover !important;
}

/* Section leads: the coded page's .rwt-lm__lead measure. */
body.rwt-funnel .rwt-fp-lead {
	margin: 12px auto 0 !important;
	max-width: 52ch !important;
}

body.rwt-funnel .rwt-fp-lead p {
	margin: 0 !important;
}

/* Confirmation page's quiet skip link. */
body.rwt-funnel .rwt-fp-skip a {
	color: var( --rwt-taupe );
	text-decoration: none;
}

body.rwt-funnel .rwt-fp-skip a:hover,
body.rwt-funnel .rwt-fp-skip a:focus {
	text-decoration: underline;
	text-underline-offset: 2px;
}