/* ==========================================================================
   Rise With Teagan — recipe listing card

   The single badge on a card · Figma 1437-5350, inside card 1437-5407.
   Rendered by [rwt_recipe_card_tag] in mu-plugin rwt-recipe-card.php.

   Same pill as the hero tag row, but duplicated here rather than shared with
   recipe.css on purpose: recipe.css only loads on a recipe single, and cards
   also appear on archives and term pages. Same tokens, so they can't drift
   apart in colour or type.
   ========================================================================== */

/* 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-tint:       var(--e-global-color-ec00e88, #F0D5CF);
}

.rwt-card-tag {
	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 );
	/* "Family Favourite" and "Member Favourite" read badly broken mid-pill, and
	   the card is only 261px wide. */
	white-space: nowrap;
}

/* --- the details line · Figma 1515-3155 ---------------------------------
   "510 kcal · 32g protein · 30 min" at the foot of the card. Button Colour
   rather than the terracotta the tags use — the design separates them. */
.rwt-card-meta {
	margin: 0;
	color: var( --e-global-color-03edebf );
	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 );
}