/*  Rise With Teagan — Gutenberg block styling
 *  ------------------------------------------------------------------
 *  Styles blog post content written in the block editor and rendered
 *  through Elementor's Post Content widget.
 *
 *  Everything binds to the Elementor kit's global variables, so if Teagan
 *  changes a global colour or font the blog follows automatically.
 *
 *  Tuning knobs live in :root below — adjust there, not throughout.
 *
 *  Acceptance test: /blog/meal-prep/meal-prep-for-people-who-hate-meal-prep/
 *  Every block in that post must render correctly.
 */

/* 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 {
	/* Brand — mapped from the Elementor kit */
	--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-warm-white-bg:   var(--e-global-color-fbfe285,   #F0E7DE);
	--rwt-tint:            var(--e-global-color-ec00e88,   #F0D5CF);
	--rwt-button:          var(--e-global-color-03edebf,   #C46A5A);
	--rwt-rule:            rgba(161, 74, 58, 0.16);

	/* Fonts */
	--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, "Segoe UI", Helvetica, Arial, sans-serif;

	/* Blog content scale — measured from the Figma blog single (1437:3656).
	   Body 16, in-post headings 24 (the kit's "Blog Headings" token). */
	--rwt-body-size:  16px;
	--rwt-body-lh:    1.25;   /* design spec is 16/20 — the kit sets this on <p> too */
	--rwt-h2-size:    24px;
	--rwt-h3-size:    20px;
	--rwt-h4-size:    18px;
	--rwt-block-gap:  1.6em;
	--rwt-radius:     12px;

	/* Design: "Main Content" column = 1000px */
	--rwt-measure:    1000px;
}

/*  Article column width
 *  --------------------------------------------------------------
 *  The design specifies a 1000px content column; Elementor's global
 *  content width is 1140px, so the containers inherit that.
 *
 *  STOPGAP — the cleaner fix is setting width 1000px directly on the
 *  two article containers in Elementor. Delete this block if you do.
 */
body.single-post .e-con-inner:has(> .elementor-widget-theme-post-content),
body.single-post .e-con-inner:has(> .elementor-widget-woocommerce-breadcrumb) {
	max-width: var(--rwt-measure);
}

/* Scope: Elementor's Post Content widget, plus a plain fallback.
 * Elementor renders this widget WITHOUT an .elementor-widget-container in
 * current versions, so both shapes are covered. */
.elementor-widget-theme-post-content,
.elementor-widget-theme-post-content > .elementor-widget-container,
.rwt-blog-content {
	font-family: var(--rwt-sans);
	font-size: var(--rwt-body-size);
	line-height: var(--rwt-body-lh);
	color: var(--rwt-espresso);
}

/* Consistent vertical rhythm between every top-level block */
.elementor-widget-theme-post-content > *,
.elementor-widget-theme-post-content > .elementor-widget-container > *,
.rwt-blog-content > * {
	margin-block: 0 var(--rwt-block-gap);
}
.elementor-widget-theme-post-content > *:last-child,
.elementor-widget-theme-post-content > .elementor-widget-container > *:last-child,
.rwt-blog-content > *:last-child { margin-bottom: 0; }

/* Unaligned content images span the column, as the design does */
.elementor-widget-theme-post-content > .wp-block-image:not([class*="align"]) img,
.elementor-widget-theme-post-content > .elementor-widget-container > .wp-block-image:not([class*="align"]) img,
.rwt-blog-content > .wp-block-image:not([class*="align"]) img {
	width: 100%;
}


/* ---------------------------------------------------------- typography -- */

.elementor-widget-theme-post-content h2,
.rwt-blog-content h2 {
	font-family: var(--rwt-serif);
	font-weight: 400;
	font-size: var(--rwt-h2-size);
	line-height: 1.25;
	color: var(--rwt-terracotta);
	margin-top: 2.2em;
	letter-spacing: -0.01em;
}

.elementor-widget-theme-post-content h3,
.rwt-blog-content h3 {
	font-family: var(--rwt-serif);
	font-weight: 400;
	font-size: var(--rwt-h3-size);
	line-height: 1.3;
	color: var(--rwt-sienna);
	margin-top: 1.9em;
}

.elementor-widget-theme-post-content h4,
.rwt-blog-content h4 {
	font-family: var(--rwt-serif);
	font-weight: 400;
	font-size: var(--rwt-h4-size);
	line-height: 1.35;
	color: var(--rwt-espresso);
	margin-top: 1.7em;
}

/* First heading shouldn't push away from the intro */
.elementor-widget-theme-post-content > :is(h2,h3,h4):first-child,
.elementor-widget-theme-post-content > .elementor-widget-container > :is(h2,h3,h4):first-child,
.rwt-blog-content > :is(h2,h3,h4):first-child { margin-top: 0; }

.elementor-widget-theme-post-content p a,
.rwt-blog-content p a,
.elementor-widget-theme-post-content li a,
.rwt-blog-content li a {
	color: var(--rwt-terracotta);
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color .15s ease;
}
.elementor-widget-theme-post-content p a:hover,
.rwt-blog-content p a:hover { color: var(--rwt-sienna); }

.elementor-widget-theme-post-content strong,
.rwt-blog-content strong { font-weight: 600; color: var(--rwt-espresso); }


/* --------------------------------------------------------------- lists -- */

.elementor-widget-theme-post-content :is(ul,ol).wp-block-list,
.rwt-blog-content :is(ul,ol).wp-block-list {
	padding-left: 1.35em;
}
.elementor-widget-theme-post-content .wp-block-list li,
.rwt-blog-content .wp-block-list li { margin-bottom: .6em; }

.elementor-widget-theme-post-content ul.wp-block-list,
.rwt-blog-content ul.wp-block-list { list-style: none; padding-left: 0; }

.elementor-widget-theme-post-content ul.wp-block-list > li,
.rwt-blog-content ul.wp-block-list > li {
	position: relative;
	padding-left: 1.5em;
}
.elementor-widget-theme-post-content ul.wp-block-list > li::before,
.rwt-blog-content ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: .25em;
	top: .62em;
	width: .42em;
	height: .42em;
	border-radius: 50%;
	background: var(--rwt-terracotta);
}

.elementor-widget-theme-post-content ol.wp-block-list > li::marker,
.rwt-blog-content ol.wp-block-list > li::marker {
	color: var(--rwt-terracotta);
	font-family: var(--rwt-serif);
	font-size: 1.05em;
}


/* -------------------------------------------------------------- quotes -- */

.elementor-widget-theme-post-content .wp-block-quote,
.rwt-blog-content .wp-block-quote {
	border-left: 3px solid var(--rwt-terracotta);
	padding: .3em 0 .3em 1.4em;
	margin-left: 0;
	font-family: var(--rwt-serif);
	font-size: 1.22em;
	line-height: 1.5;
	color: var(--rwt-sienna);
}
.elementor-widget-theme-post-content .wp-block-quote p,
.rwt-blog-content .wp-block-quote p { margin-bottom: .5em; }

.elementor-widget-theme-post-content .wp-block-quote cite,
.rwt-blog-content .wp-block-quote cite,
.elementor-widget-theme-post-content .wp-block-pullquote cite,
.rwt-blog-content .wp-block-pullquote cite {
	display: block;
	font-family: var(--rwt-sans);
	font-style: normal;
	font-size: .78em;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rwt-taupe);
	margin-top: .7em;
}

.elementor-widget-theme-post-content .wp-block-pullquote,
.rwt-blog-content .wp-block-pullquote {
	background: var(--rwt-warm-cream);
	border: 0;
	border-radius: var(--rwt-radius);
	padding: 2.2em 2em;
	text-align: center;
}
.elementor-widget-theme-post-content .wp-block-pullquote p,
.rwt-blog-content .wp-block-pullquote p {
	font-family: var(--rwt-serif);
	font-size: 1.4em;
	line-height: 1.4;
	color: var(--rwt-sienna);
	margin: 0;
}


/* ------------------------------------------------------ images & media -- */

.elementor-widget-theme-post-content .wp-block-image img,
.rwt-blog-content .wp-block-image img {
	border-radius: var(--rwt-radius);
	display: block;
	height: auto;
	max-width: 100%;
}

.elementor-widget-theme-post-content figcaption,
.rwt-blog-content figcaption {
	font-family: var(--rwt-sans);
	font-size: 14px;
	line-height: 1.5;
	color: var(--rwt-taupe);
	text-align: center;
	margin-top: .85em;
}

.elementor-widget-theme-post-content .wp-block-gallery,
.rwt-blog-content .wp-block-gallery { gap: 12px; }
.elementor-widget-theme-post-content .wp-block-gallery img,
.rwt-blog-content .wp-block-gallery img { border-radius: 10px; }

.elementor-widget-theme-post-content .wp-block-media-text,
.rwt-blog-content .wp-block-media-text { gap: 2em; align-items: center; }
.elementor-widget-theme-post-content .wp-block-media-text img,
.rwt-blog-content .wp-block-media-text img {
	border-radius: var(--rwt-radius);
	/* core defaults to object-fit:fill here, which distorts anything
	   that isn't already the right shape */
	object-fit: cover;
	width: 100%;
	height: 100%;
}
.elementor-widget-theme-post-content .wp-block-media-text__media,
.rwt-blog-content .wp-block-media-text__media {
	aspect-ratio: 5 / 4;
	overflow: hidden;
	border-radius: var(--rwt-radius);
}
.elementor-widget-theme-post-content .wp-block-media-text__content,
.rwt-blog-content .wp-block-media-text__content { padding: 0; }
.elementor-widget-theme-post-content .wp-block-media-text__content > :is(h2,h3,h4):first-child,
.rwt-blog-content .wp-block-media-text__content > :is(h2,h3,h4):first-child { margin-top: 0; }

.elementor-widget-theme-post-content .wp-block-embed__wrapper,
.rwt-blog-content .wp-block-embed__wrapper { border-radius: var(--rwt-radius); overflow: hidden; }


/* -------------------------------------------------------------- tables -- */

.elementor-widget-theme-post-content .wp-block-table,
.rwt-blog-content .wp-block-table {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* fades the right edge while there's more table to scroll to, so it
	   doesn't just look cut off on a phone */
	background:
		linear-gradient(to right, var(--rwt-warm-white) 30%, rgba(255,251,248,0)) left / 34px 100% no-repeat,
		linear-gradient(to left,  var(--rwt-warm-white) 30%, rgba(255,251,248,0)) right / 34px 100% no-repeat,
		radial-gradient(farthest-side at 0 50%, rgba(61,50,43,.14), transparent) left / 14px 100% no-repeat,
		radial-gradient(farthest-side at 100% 50%, rgba(61,50,43,.14), transparent) right / 14px 100% no-repeat;
	background-attachment: local, local, scroll, scroll;
}

.elementor-widget-theme-post-content .wp-block-table table,
.rwt-blog-content .wp-block-table table {
	border-collapse: collapse;
	width: 100%;
	font-size: .92em;
	min-width: 460px;          /* forces horizontal scroll rather than squashing */
}
.elementor-widget-theme-post-content .wp-block-table th,
.rwt-blog-content .wp-block-table th {
	background: var(--rwt-warm-cream);
	font-family: var(--rwt-sans);
	font-weight: 500;
	text-align: left;
	color: var(--rwt-sienna);
	padding: .85em 1em;
	border: 0 !important;   /* theme adds a heavy rule under the header row */
}
.elementor-widget-theme-post-content .wp-block-table td,
.rwt-blog-content .wp-block-table td {
	padding: .85em 1em;
	border: 0;
	border-bottom: 1px solid var(--rwt-rule);
}
.elementor-widget-theme-post-content .wp-block-table tbody tr:last-child td,
.rwt-blog-content .wp-block-table tbody tr:last-child td { border-bottom: 0; }
.elementor-widget-theme-post-content .wp-block-table th:first-child,
.rwt-blog-content .wp-block-table th:first-child { border-radius: 8px 0 0 8px; }
.elementor-widget-theme-post-content .wp-block-table th:last-child,
.rwt-blog-content .wp-block-table th:last-child { border-radius: 0 8px 8px 0; }


/* ------------------------------------------------ groups (callout box) -- */

.elementor-widget-theme-post-content .wp-block-group.has-background,
.rwt-blog-content .wp-block-group.has-background {
	border-radius: var(--rwt-radius);
	padding: 1.9em 2em;
}
.elementor-widget-theme-post-content .wp-block-group.has-background > :is(h2,h3,h4):first-child,
.rwt-blog-content .wp-block-group.has-background > :is(h2,h3,h4):first-child {
	margin-top: 0;
	color: var(--rwt-sienna);
}
.elementor-widget-theme-post-content .wp-block-group.has-background > *:last-child,
.rwt-blog-content .wp-block-group.has-background > *:last-child { margin-bottom: 0; }


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

.elementor-widget-theme-post-content .wp-block-columns,
.rwt-blog-content .wp-block-columns { gap: 2em; }
.elementor-widget-theme-post-content .wp-block-column > :is(h2,h3,h4):first-child,
.rwt-blog-content .wp-block-column > :is(h2,h3,h4):first-child { margin-top: 0; }


/* ----------------------------------------------------------- separator -- */

.elementor-widget-theme-post-content .wp-block-separator,
.rwt-blog-content .wp-block-separator {
	border: 0;
	height: 1px;
	background: var(--rwt-rule);
	max-width: 100%;
	margin-block: 2.6em;
	opacity: 1;
}


/* ------------------------------------------------- details / accordion -- */

.elementor-widget-theme-post-content .wp-block-details,
.rwt-blog-content .wp-block-details {
	border-bottom: 1px solid var(--rwt-rule);
	padding: 0 0 .2em;
	margin-bottom: 0;
}
.elementor-widget-theme-post-content .wp-block-details + .wp-block-details,
.rwt-blog-content .wp-block-details + .wp-block-details { margin-top: 0; }

.elementor-widget-theme-post-content .wp-block-details summary,
.rwt-blog-content .wp-block-details summary {
	cursor: pointer;
	list-style: none;
	font-family: var(--rwt-serif);
	font-size: 1.15em;
	color: var(--rwt-terracotta);
	padding: 1em 2.2em 1em 0;
	position: relative;
	transition: color .15s ease;
}
.elementor-widget-theme-post-content .wp-block-details summary::-webkit-details-marker,
.rwt-blog-content .wp-block-details summary::-webkit-details-marker { display: none; }

.elementor-widget-theme-post-content .wp-block-details summary::after,
.rwt-blog-content .wp-block-details summary::after {
	content: "";
	position: absolute;
	right: .3em;
	top: 50%;
	width: 10px;
	height: 10px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s ease;
}
.elementor-widget-theme-post-content .wp-block-details[open] summary::after,
.rwt-blog-content .wp-block-details[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}
.elementor-widget-theme-post-content .wp-block-details[open] summary,
.rwt-blog-content .wp-block-details[open] summary { color: var(--rwt-sienna); }

.elementor-widget-theme-post-content .wp-block-details > *:not(summary),
.rwt-blog-content .wp-block-details > *:not(summary) {
	padding-bottom: 1.1em;
	margin-bottom: 0;
	font-size: .96em;
}


/* ------------------------------------------------------------- buttons -- */

.elementor-widget-theme-post-content .wp-block-buttons,
.rwt-blog-content .wp-block-buttons { gap: 12px; }

.elementor-widget-theme-post-content .wp-block-button__link,
.rwt-blog-content .wp-block-button__link {
	background-color: var(--rwt-button);
	color: var(--rwt-warm-white);
	font-family: var(--rwt-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	padding: 15px 30px;
	border-radius: 999px;
	text-decoration: none;
	border: 1px solid var(--rwt-button);
	transition: background-color .15s ease, color .15s ease;
}
.elementor-widget-theme-post-content .wp-block-button__link:hover,
.rwt-blog-content .wp-block-button__link:hover {
	background-color: var(--rwt-sienna);
	border-color: var(--rwt-sienna);
	color: var(--rwt-warm-white);
}

.elementor-widget-theme-post-content .wp-block-button.is-style-outline .wp-block-button__link,
.rwt-blog-content .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--rwt-terracotta);
	border: 1px solid var(--rwt-terracotta);
}
.elementor-widget-theme-post-content .wp-block-button.is-style-outline .wp-block-button__link:hover,
.rwt-blog-content .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--rwt-terracotta);
	color: var(--rwt-warm-white);
}


/* ---------------------------------------------------------- responsive -- */

/* 800px, not 767 — matches the Elementor kit's mobile breakpoint
   (viewport_mobile: 800 / viewport_md: 801). Keep these in sync: if the kit
   breakpoint ever changes, this value and the overrides at the foot of this
   file have to change with it. */
@media (max-width: 800px) {
	:root {
		--rwt-body-size: 16px;
		--rwt-h2-size:   22px;
		--rwt-h3-size:   19px;
		--rwt-h4-size:   17px;
		--rwt-block-gap: 1.45em;
	}

	/* The kit's responsive body setting drops to 14px on mobile. That's fine
	   for UI text but too small for long-form reading, so article copy is
	   pinned to 16px with looser leading. Remove this block if Teagan
	   prefers the kit value. */
	.elementor-widget-theme-post-content :is(p, li),
	.rwt-blog-content :is(p, li) {
		font-size: 16px;
		line-height: 1.6;
	}
	.elementor-widget-theme-post-content figcaption,
	.rwt-blog-content figcaption { font-size: 13px; }

	/* stacked media & text shouldn't force a crop */
	.elementor-widget-theme-post-content .wp-block-media-text__media,
	.rwt-blog-content .wp-block-media-text__media { aspect-ratio: 16 / 10; }

	.elementor-widget-theme-post-content .wp-block-pullquote,
	.rwt-blog-content .wp-block-pullquote { padding: 1.7em 1.3em; }

	.elementor-widget-theme-post-content .wp-block-group.has-background,
	.rwt-blog-content .wp-block-group.has-background { padding: 1.5em 1.3em; }

	.elementor-widget-theme-post-content .wp-block-columns,
	.rwt-blog-content .wp-block-columns { gap: 1.2em; }

	.elementor-widget-theme-post-content .wp-block-media-text,
	.rwt-blog-content .wp-block-media-text { gap: 1.3em; }

	/* full-width buttons are easier to hit */
	.elementor-widget-theme-post-content .wp-block-button,
	.rwt-blog-content .wp-block-button { width: 100%; }
	.elementor-widget-theme-post-content .wp-block-button__link,
	.rwt-blog-content .wp-block-button__link { display: block; text-align: center; }
}


/* ------------------------------------------ 768–800px breakpoint patch -- */
/*
   The kit's mobile breakpoint is 800px, but three third-party stylesheets
   hardcode 767px and ignore it. That leaves a 33px dead zone (768–800) where
   Elementor's per-device mobile settings have fired but these rules haven't,
   so the layout sits half-way between tablet and mobile.

   Each block below re-declares the vendor rule for the gap only. Nothing here
   applies at 767px or under — the vendor CSS already handles that — so these
   are additive, not overrides, and can't fight the originals.

   Deliberately NOT patched, because they don't apply to this build:
     - WPForms  .wpforms-camera-modal (x2)   — no camera field in use
     - Hello    table table font-size        — no nested tables
     - Hello    #comments layout             — comments aren't in the design
     - Elementor lightbox padding (x2)       — cosmetic, 33px window only
     - Elementor apple-webkit social icons   — Apple WebKit only, footer icons
     - JetEngine .brxe-* (x2)                — Bricks builder, not installed
   JetEngine's gallery grid, scroll slider and profile menu already ship
   `body[data-elementor-device-mode=mobile]` fallbacks, so they honour the
   800px kit breakpoint on their own and need nothing here.

   If the kit breakpoint changes, update this range AND the media query above.
*/
@media (min-width: 768px) and (max-width: 800px) {

	/* Elementor core — containers never switched to their mobile flex-wrap.
	   Source: uploads/elementor/css/custom-frontend.min.css */
	.e-con.e-flex {
		--width: 100%;
		--flex-wrap: var(--flex-wrap-mobile);
	}
	.e-con.e-flex .elementor-widget-archive-posts { width: 100%; }

	/* JetEngine — listing grids kept their tablet column count. This is the
	   blog archive. JetEngine provides no device-mode fallback for these.
	   Source: plugins/jet-engine/assets/css/frontend.css */
	.jet-listing-grid__items.grid-col-mobile-1  { --columns: 1; }
	.jet-listing-grid__items.grid-col-mobile-2  { --columns: 2; }
	.jet-listing-grid__items.grid-col-mobile-3  { --columns: 3; }
	.jet-listing-grid__items.grid-col-mobile-4  { --columns: 4; }
	.jet-listing-grid__items.grid-col-mobile-5  { --columns: 5; }
	.jet-listing-grid__items.grid-col-mobile-6  { --columns: 6; }
	.jet-listing-grid__items.grid-col-mobile-7  { --columns: 7; }
	.jet-listing-grid__items.grid-col-mobile-8  { --columns: 8; }
	.jet-listing-grid__items.grid-col-mobile-9  { --columns: 9; }
	.jet-listing-grid__items.grid-col-mobile-10 { --columns: 10; }
	.jet-listing-grid__items.grid-col-mobile-11 { --columns: 11; }
	.jet-listing-grid__items.grid-col-mobile-12 { --columns: 12; }

	.jet-listing-grid__items.inline-mobile-css:not(.jet-listing-grid__scroll-slider-wrap-mobile) {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(var(--jet-column-mobile-min-width), 1fr));
	}
	.jet-listing-grid__items.inline-mobile-css:not(.jet-listing-grid__scroll-slider-wrap-mobile).slick-slider .slick-slide {
		width: var(--jet-column-mobile-min-width);
	}

	/* MemberPress — paywall kept desktop side padding. Matters for gated posts.
	   Source: plugins/memberpress/css/ui/theme.css */
	.mepr-paywall-container {
		padding-left: 40px;
		padding-right: 40px;
	}
}


/* ------------------------------------------------------- article hero -- */
/*
   Add the CSS class `rwt-post-hero` to the Image widget in the Single Post
   template (Advanced → CSS Classes), with its source set to the dynamic tag
   "Hero image (Rise With Teagan)".

   Locks the design's 1000x343 band whatever shape gets uploaded, so a
   wrong-ratio image degrades gracefully instead of blowing the page out. With
   a correctly wide image it crops essentially nothing.

   This lives outside the Post Content widget, which is the whole point — it
   still renders on gated posts, where MemberPress replaces the content.
*/
.rwt-post-hero img {
	display: block;
	width: 100%;
	aspect-ratio: 1000 / 343;
	object-fit: cover;
	object-position: center;
	border-radius: var(--rwt-radius);
}

@media (max-width: 800px) {
	/* 2.91:1 across a 343px phone is a 118px slit — open it up so the image
	   still reads as a photograph. */
	.rwt-post-hero img {
		aspect-ratio: 16 / 10;
		border-radius: calc(var(--rwt-radius) - 4px);
	}
}


/* ------------------------------------------------ members-only paywall -- */
/*
   What MemberPress 1.12 renders inside the Post Content widget when a reader
   doesn't have access:

     <div class="mp_wrapper">
       <div class="mepr-unauthorized-excerpt">…first 450 chars…</div>
       <div class="mepr-unauthorized-message">
         <div class="rwt-paywall"> … our card … </div>
       </div>
     </div>

   `.mepr_error` is a second MemberPress code path (shortcode-protected
   content) that wraps the same message, so both are covered below.

   Everything else on the page (breadcrumb, title, meta, standfirst, hero,
   related posts) is a separate Elementor widget and renders normally, so the
   post still reads as a real article and stays indexable.

   Card selectors are doubled up (.rwt-paywall .rwt-paywall__x) purely for
   specificity — the article rules above are (0,1,1) and would otherwise win.
*/

/* The article's block-spacing rules stop at .mp_wrapper, so re-apply the
   rhythm to what's inside it. */
.elementor-widget-theme-post-content .mp_wrapper > *,
.elementor-widget-theme-post-content .mepr-unauthorized-excerpt > *,
.rwt-blog-content .mp_wrapper > *,
.rwt-blog-content .mepr-unauthorized-excerpt > * {
	margin-block: 0 var(--rwt-block-gap);
}

/* MemberPress ships .mepr_error as a red error box. Strip it back to nothing. */
.elementor-widget-theme-post-content .mepr_error,
.elementor-widget-theme-post-content > .elementor-widget-container .mepr_error,
.rwt-blog-content .mepr_error {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	margin: 0;
	color: inherit;
}

/* The teaser stops mid-sentence, so fade it rather than cutting it dead.
   Sits above the card and is pulled back over the tail of the excerpt.
   The gradient fades to a same-hue zero-alpha, never `transparent` — that
   goes through black in some engines and greys the text out. */
.elementor-widget-theme-post-content .mepr-unauthorized-message::before,
.elementor-widget-theme-post-content .mepr_error::before,
.rwt-blog-content .mepr-unauthorized-message::before,
.rwt-blog-content .mepr_error::before {
	content: "";
	display: block;
	position: relative;
	height: 8rem;
	margin-top: -8rem;
	margin-bottom: 2.75rem;
	pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(255, 251, 248, 0) 0%,
		rgba(255, 251, 248, 0.92) 78%,
		var(--rwt-warm-white) 100%);
}

/* `unauth_login: hide` suppresses MemberPress's login *form* but still emits a
   bare "Login" link under the message. The card has its own, so drop it.
   Scoped to gated single posts so the real /login/ page is untouched. */
body.rwt-gated .elementor-widget-theme-post-content .mepr-login-form-wrap,
body.rwt-gated .rwt-blog-content .mepr-login-form-wrap {
	display: none;
}

.rwt-paywall {
	max-width: 620px;
	margin-inline: auto;
	padding: 2.75rem 2.25rem 2.5rem;
	background: var(--rwt-warm-cream);
	border: 1px solid rgba(188, 95, 80, 0.18);
	border-radius: var(--rwt-radius);
	text-align: center;
}

/* Crown drawn with a mask so the fill comes from the brand token — it follows
   the Elementor global if the palette ever changes. Matches the crown badge
   already used on the archive cards. */
.rwt-paywall .rwt-paywall__crown {
	width: 42px;
	height: 42px;
	margin: 0 auto 1.15rem;
	background: var(--rwt-terracotta);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 8l4.6 3.3L12 4l5.4 7.3L22 8v9.5a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 17.5V8z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 8l4.6 3.3L12 4l5.4 7.3L22 8v9.5a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 17.5V8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rwt-paywall .rwt-paywall__title {
	font-family: var(--rwt-serif);
	font-size: 26px;
	line-height: 1.25;
	font-weight: 500;
	color: var(--rwt-sienna);
	margin: 0 0 0.8rem;
}

.rwt-paywall .rwt-paywall__lead {
	font-family: var(--rwt-sans);
	font-size: 15px;
	line-height: 1.55;
	color: var(--rwt-espresso);
	margin: 0 auto 1.6rem;
	max-width: 46ch;
}

/* Centred block, left-aligned text — a centred list is hard to scan. */
.rwt-paywall .rwt-paywall__list {
	list-style: none;
	display: inline-block;
	text-align: left;
	margin: 0 0 1.9rem;
	padding: 0;
}

.rwt-paywall .rwt-paywall__list li {
	position: relative;
	margin: 0 0 0.6rem;
	padding-left: 1.75rem;
	font-family: var(--rwt-sans);
	font-size: 15px;
	line-height: 1.45;
	color: var(--rwt-espresso);
}

.rwt-paywall .rwt-paywall__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1.05rem;
	height: 1.05rem;
	background: var(--rwt-terracotta);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rwt-paywall .rwt-paywall__cta {
	margin: 0 0 1rem;
}

.rwt-paywall .rwt-paywall__button {
	display: inline-block;
	padding: 0.85em 2.1em;
	background: var(--rwt-button);
	color: var(--rwt-warm-white);
	font-family: var(--rwt-sans);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.2;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.rwt-paywall .rwt-paywall__button:hover,
.rwt-paywall .rwt-paywall__button:focus {
	background: var(--rwt-sienna);
	color: var(--rwt-warm-white);
}

.rwt-paywall .rwt-paywall__login {
	margin: 0;
	font-family: var(--rwt-sans);
	font-size: 14px;
	color: var(--rwt-taupe);
}

.rwt-paywall .rwt-paywall__login a {
	color: var(--rwt-sienna);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* A logged-in visitor without a membership still gets the paywall (verified —
   they get the upgrade CTA, not a login form). Telling them "Already a member?
   Log in" is nonsense in that state, so drop the line once they're logged in. */
body.logged-in .rwt-paywall .rwt-paywall__login {
	display: none;
}

@media (max-width: 800px) {
	.rwt-paywall {
		padding: 2.1rem 1.4rem 1.9rem;
	}
	.rwt-paywall .rwt-paywall__title { font-size: 22px; }
	.rwt-paywall .rwt-paywall__crown { width: 36px; height: 36px; }
	.rwt-paywall .rwt-paywall__button { display: block; }

	.elementor-widget-theme-post-content .mepr-unauthorized-message::before,
	.elementor-widget-theme-post-content .mepr_error::before,
	.rwt-blog-content .mepr-unauthorized-message::before,
	.rwt-blog-content .mepr_error::before {
		height: 6rem;
		margin-top: -6rem;
		margin-bottom: 2rem;
	}
}

/* ==========================================================================
   The members gate on a recipe

   Container class set in Elementor and honoured by mu-plugin
   rwt-recipe-gate.php: `.rwt-gate-message` renders only for non-members and
   holds [rwt_recipe_paywall].

   The card itself is the blog's, unchanged — only its surroundings differ,
   because the context does. On the blog it sits inside the 1000px article
   column, after a fade, on white. On a recipe it stands where a full-width
   section used to be, so it needs to read as a section rather than a box
   adrift between the hero and "More like this one".
   ========================================================================== */

/* Vertical rhythm picked to sit with the section below it, which runs 72/120. */
.rwt-gate-message {
	padding: 88px 20px 96px;
	background: var(--rwt-warm-cream);
}

/* Cream on cream would erase the card, so within the band it goes white and
   lifts on a soft shadow. The shadow is espresso-tinted rather than black —
   a neutral grey shadow reads cold against these warm tones. */
.rwt-gate-message .rwt-paywall {
	background: #fff;
	border-color: rgba(188, 95, 80, 0.14);
	box-shadow: 0 20px 44px rgba(61, 50, 43, 0.09);
}

/* A hairline of brand colour across the top of the card — enough to stop it
   reading as a plain white rectangle, without adding another element. */
.rwt-gate-message .rwt-paywall {
	position: relative;
	overflow: hidden;
}

.rwt-gate-message .rwt-paywall::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 4px;
	background: linear-gradient(
		90deg,
		var(--rwt-terracotta),
		var(--rwt-button) 55%,
		var(--rwt-tint)
	);
}

/* NOTE: no disc behind the crown. The crown is a CSS mask whose fill IS its
   `background`, so setting a background colour here repaints the glyph rather
   than sitting behind it — and the mask clips it to the crown shape, so no disc
   ever appears. It would need a wrapper element to do properly. */

@media (max-width: 800px) {
	.rwt-gate-message {
		padding: 56px 16px 64px;
	}
}