/* ==========================================================================
   Rise With Teagan — recipe single
   "What you'll need" / "How to make it"  ·  Figma node 1437-3254

   Loaded only on a single recipe, from rwt-recipe-cooking.php.

   Measurements from the design: container 1120, left panel 400 with 32px
   padding, right column 656 starting at x=460 (so a 60px gutter). Step badge
   40x40, step text starting 64px in, 32px between steps.

   Colours bind to the Elementor kit globals, same as blocks.css and login.css.
   ========================================================================== */

/* Scoped to body, NOT :root — Elementor defines its --e-global-* vars on
   body.elementor-kit-8, so a var() reference resolved at :root silently falls
   back to the hardcoded hex and stops tracking the kit. */
body {
	--rwt-terracotta: var(--e-global-color-primary,   #BC5F50);
	--rwt-sienna:     var(--e-global-color-f220437,   #A14A3A);
	--rwt-espresso:   var(--e-global-color-text,      #3D322B);
	--rwt-taupe:      var(--e-global-color-c2248c7,   #887D78);
	--rwt-warm-cream: var(--e-global-color-accent,    #F5E9E2);
	--rwt-warm-white: var(--e-global-color-secondary, #FFFBF8);
	--rwt-button:     var(--e-global-color-03edebf,   #C46A5A);
	--rwt-tint:       var(--e-global-color-ec00e88,   #F0D5CF);

	--rwt-serif: var(--e-global-typography-3906c6f-font-family, "Fraunces"), Georgia, serif;
	--rwt-sans:  var(--e-global-typography-primary-font-family, "DM Sans"), -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	--rwt-rule: rgba(188, 95, 80, 0.22);
}

/* ----------------------------------------------------------- the tag row -- */

/* The taxonomy pills under the recipe title · Figma node 1437:3213.
   Rendered by [rwt_recipe_tags] in mu-plugin rwt-recipe-tags.php.

   Everything is scoped under .rwt-tags on purpose: the Elementor kit styles
   `ul` and `li` as `.elementor-kit-8 ul`, which is (0,1,1) and outranks a lone
   class. Two classes deep puts these at (0,2,0) and settles it regardless of
   which stylesheet loads last.

   No top margin — the gap to the title belongs to the Elementor container this
   widget sits in, so setting it here would stack on top of the builder's. */
.rwt-tags {
	margin: 0;
}

.rwt-tags .rwt-tags__list {
	display: flex;
	flex-wrap: wrap;   /* several diet terms will run past one line on a phone */
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rwt-tags .rwt-tags__list > li {
	display: flex;
	margin: 0;
	padding: 0;
}

/* 26px tall with 14px/1 text centred in it, so the pill height holds whatever
   the Meta Label global resolves to rather than depending on line-height. */
.rwt-tags .rwt-tags__item {
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 10px;
	border-radius: 999px;
	background: var(--rwt-tint);
	color: var( --e-global-color-primary );
	font-family: var( --e-global-typography-f5fb1d1-font-family ), Sans-serif;
	font-size: var( --e-global-typography-f5fb1d1-font-size );
	font-weight: var( --e-global-typography-f5fb1d1-font-weight );
	line-height: var( --e-global-typography-f5fb1d1-line-height );
	letter-spacing: var( --e-global-typography-f5fb1d1-letter-spacing );
	text-decoration: none;
	/* "30-45 min" and "Family Favourite" read badly broken mid-pill */
	white-space: nowrap;
}

/* Only under link="yes" — a plain span has no state to offer, so these are
   deliberately hung off the element type rather than the class. */
.rwt-tags a.rwt-tags__item:hover,
.rwt-tags a.rwt-tags__item:focus {
	background: var( --e-global-color-primary );
	color: var( --e-global-color-secondary );
}

.rwt-tags a.rwt-tags__item:focus-visible {
	outline: 2px solid var( --e-global-color-primary );
	outline-offset: 2px;
}

/* ----------------------------------------------------------- the heading -- */

.rwt-cook__intro {
	margin: 0 0 40px;
}

/* Both bind straight to the kit globals Steve nominated, rather than the
   --rwt-* aliases used elsewhere in this file — these two need to track the
   same globals the rest of the page's headings use.
   `margin` is still set explicitly because they're now h2/h3 and the browser
   defaults would otherwise reintroduce spacing. */
.rwt-cook .rwt-cook__eyebrow {
	margin: 0 0 6px;
	font-family: var( --e-global-typography-2b41e17-font-family ), Sans-serif;
	font-size: var( --e-global-typography-2b41e17-font-size );
	font-weight: var( --e-global-typography-2b41e17-font-weight );
	line-height: var( --e-global-typography-2b41e17-line-height );
	color: var( --e-global-color-c2248c7 );
}

.rwt-cook .rwt-cook__title {
	margin: 0;
	font-family: var( --e-global-typography-5193019-font-family ), Sans-serif;
	font-size: var( --e-global-typography-5193019-font-size );
	font-weight: var( --e-global-typography-5193019-font-weight );
	font-style: var( --e-global-typography-5193019-font-style );
	line-height: var( --e-global-typography-5193019-line-height );
	letter-spacing: var( --e-global-typography-5193019-letter-spacing );
	color: var( --e-global-color-text );
}

/* ------------------------------------------------------------ the columns -- */

/* `align-items: start` is load-bearing, not cosmetic — it keeps the panel at
   its content height instead of stretching to the row, which is what gives
   position:sticky room to travel. Remove it and the sticky silently stops. */
.rwt-cook__cols {
	display: grid;
	grid-template-columns: 400px minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* --------------------------------------------------- what you'll need panel -- */

/* Sticky within the grid area, so the ingredients stay in view while you scroll
   the method and stop at the bottom of the section.
   Requires: no `overflow: hidden/auto` on any ancestor — that kills sticky
   with no error. Verified on the live page after deploy. */
.rwt-cook__need {
	box-sizing: border-box;
	position: sticky;
	top: 120px;
	padding: 30px 32px 32px;
	background: var(--rwt-warm-cream);
	border-radius: 10px;
}

/* The panel is a <details>. On desktop it's always open and the summary is
   purely a heading — the default marker and pointer are removed so it doesn't
   invite a click that would collapse it. */
.rwt-cook__need-summary {
	display: block;
	list-style: none;
	cursor: default;
	/* Genuinely inert on desktop, not just styled to look it — without this a
	   click on the heading still collapses the panel, and there's no affordance
	   to tell the user how to get it back. Re-enabled at the mobile breakpoint. */
	pointer-events: none;
}

.rwt-cook__need-summary::-webkit-details-marker,
.rwt-cook__need-summary::marker {
	display: none;
	content: "";
}

.rwt-cook .rwt-cook__need-title {
	margin: 0 0 18px;
	padding: 0 0 16px;
	border-bottom: 1px solid var(--rwt-rule);
	font-family: var( --e-global-typography-9e9beda-font-family ), Sans-serif;
	font-size: var( --e-global-typography-9e9beda-font-size );
	font-weight: var( --e-global-typography-9e9beda-font-weight );
	line-height: var( --e-global-typography-9e9beda-line-height );
	color: var( --e-global-color-text );
}

.rwt-cook__group + .rwt-cook__group {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid var(--rwt-rule);
}

/* Closing rule under the last group, as in the design. */
.rwt-cook__group:last-child {
	padding-bottom: 20px;
	border-bottom: 1px solid var(--rwt-rule);
}

.rwt-cook .rwt-cook__group-title {
	margin: 0 0 14px;
	font-family: var( --e-global-typography-2b41e17-font-family ), Sans-serif;
	font-size: var( --e-global-typography-2b41e17-font-size );
	font-weight: var( --e-global-typography-2b41e17-font-weight );
	line-height: var( --e-global-typography-2b41e17-line-height );
	color: var( --e-global-color-f220437 );
}

.rwt-cook__items {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rwt-cook__items li {
	position: relative;
	margin: 0 0 9px;
	padding-left: 16px;
	font-family: var( --e-global-typography-600d3c5-font-family ), Sans-serif;
	font-size: var( --e-global-typography-600d3c5-font-size );
	font-weight: var( --e-global-typography-600d3c5-font-weight );
	line-height: var( --e-global-typography-600d3c5-line-height );
	color: var( --e-global-color-text );
}

.rwt-cook__items li:last-child {
	margin-bottom: 0;
}

/* Custom bullet — a browser default marker can't be coloured or positioned
   reliably across the wrapped two-line items in this list.
   Positioned with `0.5lh` so it centres on the first line box whatever the
   global's font-size and line-height resolve to; a fixed px offset would drift
   the moment that typography is edited in Elementor. */
.rwt-cook__items li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 10px;          /* fallback for engines without the lh unit */
	top: 0.5lh;
	transform: translateY(-50%);
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var( --e-global-color-text );
}

/* ------------------------------------------------------- how to make it -- */

.rwt-cook .rwt-cook__method-title {
	margin: 0 0 26px;
	font-family: var( --e-global-typography-7012fab-font-family ), Sans-serif;
	font-size: var( --e-global-typography-7012fab-font-size );
	font-weight: var( --e-global-typography-7012fab-font-weight );
	line-height: var( --e-global-typography-7012fab-line-height );
	letter-spacing: var( --e-global-typography-7012fab-letter-spacing );
	color: var( --e-global-color-primary );
}

/* counter-reset on the list, incremented per item — the numbers are generated
   rather than authored, so reordering steps can't desynchronise them. */
.rwt-cook__steps {
	counter-reset: rwt-step;
	margin: 0;
	padding: 0;
	list-style: none;
}

.rwt-cook__steps li {
	counter-increment: rwt-step;
	position: relative;
	min-height: 40px;
	margin: 0 0 32px;
	padding-left: 64px;
	font-family: var( --e-global-typography-text-font-family ), Sans-serif;
	font-size: var( --e-global-typography-text-font-size );
	font-weight: var( --e-global-typography-text-font-weight );
	line-height: var( --e-global-typography-text-line-height );
	color: var( --e-global-color-text );
}

.rwt-cook__steps li:last-child {
	margin-bottom: 0;
}

/* The circle is a fixed 40px and flex-centres its number, so the global's
   line-height can't knock the digit off centre. */
.rwt-cook__steps li::before {
	content: counter(rwt-step);
	position: absolute;
	left: 0;
	top: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	font-family: var( --e-global-typography-a87c18e-font-family ), Sans-serif;
	font-size: var( --e-global-typography-a87c18e-font-size );
	font-weight: var( --e-global-typography-a87c18e-font-weight );
	line-height: var( --e-global-typography-a87c18e-line-height );
	color: var( --e-global-color-secondary );
	background: var( --e-global-color-primary );
	/* keeps two-digit numbers from nudging the circle out of round */
	font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------- tablet -- */

@media (max-width: 1200px) {
	.rwt-cook__cols {
		grid-template-columns: 340px minmax(0, 1fr);
		gap: 24px;
	}
}

/* ---------------------------------------------------------------- mobile -- */

@media (max-width: 800px) {
	.rwt-cook__cols {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Sticky is switched off in one column — otherwise the panel would pin
	   itself over the method steps you're trying to read. */
	.rwt-cook__need {
		position: static;
		top: auto;
		padding: 22px;
		/* The open/close sweep. The script sets an explicit start and end height
		   in pixels and this interpolates between them — a <details> can't be
		   transitioned on its own, and `height: auto` isn't an animatable value
		   in engines that haven't shipped interpolate-size. */
		transition: height 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
	}

	/* Clipping only while the height is being driven, never at rest — a
	   permanently hidden overflow would cut off focus rings, and it also
	   disables position:sticky (off at this width, but the rule shouldn't
	   depend on that being true). */
	.rwt-cook__need.is-animating {
		overflow: hidden;
	}

	/* --- accordion --- */

	/* Now a real control: full-width tap target, pointer, and a chevron. */
	.rwt-cook__need-summary {
		pointer-events: auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 16px;
		cursor: pointer;
		/* keeps the tap target comfortably past the 44px minimum */
		min-height: 44px;
		-webkit-tap-highlight-color: transparent;
	}

	/* Collapsed, the title's rule and gap would float above nothing. */
	.rwt-cook .rwt-cook__need-title {
		margin: 0;
		padding: 0;
		border-bottom: 0;
	}

	.rwt-cook__need[open] .rwt-cook__need-title {
		margin: 0 0 18px;
		padding: 0 0 16px;
		border-bottom: 1px solid var(--rwt-rule);
	}

	.rwt-cook__need-summary::after {
		content: "";
		flex: 0 0 auto;
		width: 11px;
		height: 11px;
		border-right: 2px solid var( --e-global-color-primary );
		border-bottom: 2px solid var( --e-global-color-primary );
		transform: rotate(45deg) translateY(-2px);
		transition: transform 0.2s ease;
	}

	.rwt-cook__need[open] .rwt-cook__need-summary::after {
		transform: rotate(-135deg) translateY(-2px);
	}

	.rwt-cook__need-summary:focus-visible {
		outline: 2px solid var( --e-global-color-primary );
		outline-offset: 4px;
		border-radius: 4px;
	}

	/* No typography overrides here on purpose. Every text style in this file now
	   binds to a kit global, and four of those carry their own responsive sizes
	   (eyebrow 22/20/18, title 44/34/26, method-title 36/28/22, step text
	   18/16/16, badge 18/16). Hardcoding a mobile size would override the kit
	   and silently drift the moment the typography is edited in Elementor.
	   Only layout is adjusted below. */

	.rwt-cook__steps li {
		padding-left: 52px;
	}

	.rwt-cook__steps li::before {
		width: 34px;
		height: 34px;
	}
}

/* Someone who's asked for less motion still gets the state change, just not
   the sweep. The script checks the same query and hands the toggle back to the
   browser, so nothing here has to unwind a half-run transition. */
@media (prefers-reduced-motion: reduce) {
	.rwt-cook__need,
	.rwt-cook__need-summary::after {
		transition: none;
	}
}

/* ----------------------------------------------------------------- print -- */

/* People print recipes. Worth the six lines. */
@media print {
	.rwt-cook__cols {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.rwt-cook__need {
		margin-top: 0;
		background: none;
		border: 1px solid #ccc;
	}
	.rwt-cook__steps li {
		break-inside: avoid;
	}
}

/* ------------------------------------------------------------------
   "Why you'll love this one" — the single ingredients image (17/8, Teagan E1:
   the second "cooked" AI image was removed from every recipe hook). The
   source files are only 270×324, so it stays at natural size rather than
   being stretched across the column; framed so it reads as intentional. */
.rwt-wylto img.alignnone {
	display: block;
	max-width: 270px;
	width: 100%;
	height: auto;
	margin: 22px 0 0;
	border-radius: 14px;
	box-shadow: 0 8px 22px -16px rgba( 61, 50, 43, 0.4 );
}