/* Pills for ticked filters + the "no recipes" message. Lifted from the theme filters.css (never enqueued); the drop-down rules there are left out on purpose. */
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-tint:       var(--e-global-color-ec00e88,   #F0D5CF);
}

/* ------------------------------------------------------- the chips row -- */

/* Three classes deep on purpose. JetSmartFilters styles these as
   `.jet-smart-filters-active-tags .jet-active-tag…` — also (0,2,0) — so a
   two-class selector here only wins if this stylesheet happens to load later.
   Going one deeper settles it on specificity instead of luck. */

.jet-smart-filters-active-tags .jet-active-tags__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 15px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	box-sizing: border-box;
	min-height: 42px;
	padding: 0 18px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--rwt-tint);
	color: var(--rwt-terracotta);
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-primary-font-size );
	line-height: var( --e-global-typography-primary-line-height );
}

/* The taxonomy prefix ("Meal Type: Breakfast") isn't in the design — the chip
   carries the term alone. */
.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag__label,
.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag__label-separator {
	display: none;
}

/* ⚠️ The plugin pins this `position: absolute; top: 0; right: 0`, which parks
   the × in the chip's top-right corner like a superscript — 12px above centre.
   Putting it back in the flex row is what actually fixes the alignment; the
   size and colour below are cosmetic on top of that. */
.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag__remove {
	position: static;
	top: auto;
	right: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 20px;
	height: 20px;
	color: currentColor;
	line-height: 1;
	cursor: pointer;
	opacity: 0.8;
}

.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag__remove:hover {
	opacity: 1;
	color: var(--rwt-sienna);
}

/* "Clear all" — outlined rather than filled, and pushed to the far end.
   It's the FIRST child in the markup, so `order` is what moves it visually
   last; `margin-left: auto` alone would shove the whole row right. */
.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag--clear {
	order: 99;
	margin-left: auto;
	background: transparent;
	border-color: var(--rwt-terracotta);
}

.jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag--clear:hover {
	background: var(--rwt-tint);
	border-color: transparent;
}


/* ==========================================================================
   The active-tag bar

   Steve moved this widget into the grid section, positioned it absolutely and
   gave it .rwt-recipe-tags, so the row can appear without shoving the grid
   down the page.
   ========================================================================== */

.rwt-recipe-tags .jet-smart-filters-active-tags.jet-active-tags.jet-filter {
	align-items: center;
	justify-content: center;
	padding: 16px 40px 12px 40px;
	box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.10);
	/* Opaque on purpose — the bar floats over the top of the grid, so without a
	   fill the cards would read straight through it while it slides. */
	background: var(--rwt-warm-white);
}

.rwt-recipe-tags .jet-active-tags__list {
	max-width: 1300px;
	width: 100%;
}

/* --- the slide ---------------------------------------------------------
   The bar sits at top:0 of the grid section, and the filter section directly
   above it is position:relative with z-index 3 and a cream fill. So moving the
   bar up by its own height parks it entirely inside that section's area, behind
   it — and bringing it back to 0 reads as sliding out from underneath.

   `hide-widget` is Elementor's own display:none, applied by JetSmartFilters when
   nothing is selected. display:none can't be transitioned, so it's overridden —
   which needs to out-specify
   `body:not(.elementor-editor-active) .elementor-widget.hide-widget` (0,3,1). */

.rwt-recipe-tags {
	width: 100%;
	transform: translateY(0);
	opacity: 1;
	transition: transform 0.35s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.25s ease;
}

body:not(.elementor-editor-active) .elementor-widget.rwt-recipe-tags.hide-widget {
	display: block;   /* kept in the render tree so it has something to animate from */
	transform: translateY(-100%);
	opacity: 0;
	pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
	.rwt-recipe-tags {
		transition: none;
	}
}

/* ⚠️ The × glyph size is ALSO a widget control — Elementor > Style > Tags >
   Remove > Size — and Elementor emits it at
   `.elementor-{page} .elementor-element.elementor-element-{id} .jet-active-tag__remove`,
   which is (0,4,0) and beat the structural rule above. It's currently set to
   12px there, which is why the × looked tiny inside its 20px box.

   Overridden here so it's right now, but that does make the widget control
   inert: changing the size in Elementor will appear to do nothing until this
   rule is removed. Say the word and I'll drop it and you can own it in the
   builder instead. */
.rwt-recipe-tags .jet-smart-filters-active-tags .jet-active-tags__list .jet-active-tag .jet-active-tag__remove {
	font-size: 21px;
}

@media (max-width: 1000px) {
	.rwt-recipe-tags .jet-smart-filters-active-tags.jet-active-tags.jet-filter {
		padding: 14px 24px 10px 24px;
	}
}

@media (max-width: 800px) {
	.rwt-recipe-tags .jet-smart-filters-active-tags.jet-active-tags.jet-filter {
		padding: 12px 16px 10px 16px;
	}

	/* The row wraps on a phone, so a right-pushed Clear all would strand itself
	   alone on the last line. */
	.rwt-recipe-tags .jet-active-tags__list .jet-active-tag--clear {
		order: 99;
		margin-left: 0;
	}

	.rwt-recipe-tags .jet-active-tags__list {
		gap: 10px;
	}
}

/* ==========================================================================
   Empty state

   Two layers: `.jet-listing-not-found` is JetEngine's own wrapper, so even the
   stock "No data was found" text lands on brand. `.rwt-empty` is the richer
   version from [rwt_no_recipes].
   ========================================================================== */

.jet-listing-not-found {
	margin: 0 auto;
	padding: 48px 24px;
	max-width: 560px;
	color: var(--rwt-taupe);
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-primary-font-size );
	line-height: var( --e-global-typography-primary-line-height );
	text-align: center;
}

.rwt-empty {
	margin: 0 auto;
	max-width: 460px;
	text-align: center;
}

/* Drawn as a mask because JetEngine passes the message through wp_kses_post(),
   which strips inline SVG. */
.rwt-empty .rwt-empty__icon {
	width: 44px;
	height: 44px;
	margin: 0 auto 18px;
	background: var(--rwt-tint);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M8.5 11h5'/%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' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5M8.5 11h5'/%3E%3C/svg%3E") center / contain no-repeat;
}

.rwt-empty .rwt-empty__title {
	margin: 0 0 10px;
	font-family: var( --e-global-typography-5193019-font-family ), Sans-serif;
	font-size: 26px;
	font-weight: var( --e-global-typography-5193019-font-weight );
	font-style: var( --e-global-typography-5193019-font-style );
	line-height: 1.25;
	color: var(--rwt-terracotta);
}

.rwt-empty .rwt-empty__text {
	margin: 0 0 24px;
	font-family: var( --e-global-typography-primary-font-family ), Sans-serif;
	font-size: var( --e-global-typography-primary-font-size );
	line-height: 1.45;
	color: var(--rwt-taupe);
}

.rwt-empty .rwt-empty__action {
	margin: 0;
}

.rwt-empty .rwt-empty__reset {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 26px;
	border: 1px solid var(--rwt-terracotta);
	border-radius: 999px;
	background: transparent;
	color: var(--rwt-terracotta);
	font-family: var( --e-global-typography-bf13d5f-font-family ), Sans-serif;
	font-size: var( --e-global-typography-bf13d5f-font-size );
	font-weight: var( --e-global-typography-bf13d5f-font-weight );
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.rwt-empty .rwt-empty__reset:hover,
.rwt-empty .rwt-empty__reset:focus-visible {
	background: var(--rwt-tint);
	border-color: transparent;
	color: var(--rwt-terracotta);
}

@media (max-width: 800px) {
	.jet-listing-not-found {
		padding: 36px 16px;
	}

	.rwt-empty .rwt-empty__title {
		font-size: 22px;
	}
}

/* --- mobile: the tag bar rejoins the flow ------------------------------
   Absolute positioning keeps the desktop grid from jumping, but on a phone the
   bar wraps to two rows (~126px) against only 60px of section padding, so it
   sat on top of the first card. In one column the reflow after tapping a filter
   is unremarkable — the grid is reloading anyway — whereas covering a card is
   not. `body` prefix out-specifies Elementor's `.elementor-absolute`. */
@media (max-width: 800px) {
	/* Needs `.elementor-absolute` in the chain: Elementor sets the absolute
	   positioning from a rule carrying that class plus the widget id, so two
	   classes and a `body` prefix still lose to it. Verified empirically —
	   three classes wins, two doesn't. */
	body .elementor-element.elementor-absolute.rwt-recipe-tags {
		position: static;
		transform: none;
		transition: none;
	}

	/* And with it back in the flow, hidden must mean gone rather than
	   transparent-but-occupying-space. No slide on mobile. */
	body:not(.elementor-editor-active) .elementor-widget.rwt-recipe-tags.hide-widget {
		display: none;
		transform: none;
	}
}