/**
 * WP Recipe Maker card styling.
 *
 * The live site runs WPRM's stock "Chic" template: system font stack, 1px grey
 * border, no relationship to the brand. This sheet restyles the card in place -
 * it targets WPRM's own class names, so it survives template switches and does
 * not require re-entering any recipe data.
 *
 * Two things learned from the running site, which shape every selector below:
 *
 * 1. WPRM prints TWO .wprm-recipe elements per post: the real card, and a
 *    `.wprm-recipe-snippet` button row near the top. Styling `.wprm-recipe`
 *    bare turns that button row into a giant empty card, so every card rule is
 *    scoped with :not(.wprm-recipe-snippet).
 *
 * 2. WPRM generates its template CSS scoped to `html body .wprm-recipe-container`,
 *    which out-specifies a plain `.wprm-recipe .x` selector even with
 *    !important. Inner-element rules therefore carry the same prefix.
 *
 * Loaded only on posts that contain a recipe card.
 */

/* Specificity-matching prefix, used throughout: HG */
/* html body .wprm-recipe-container */

/* =========================================================================
   1. CARD SHELL
   ========================================================================= */

.wprm-recipe-container {
	max-width: var(--hg-container-narrow);
	margin: clamp(2.5rem, 5vw, 3.5rem) auto;
	scroll-margin-top: calc(var(--hg-header-h) + 1.5rem);
}
.hg-single__layout.has-sidebar .wprm-recipe-container { margin-inline: 0; max-width: none; }

html body .wprm-recipe-container .wprm-recipe:not(.wprm-recipe-snippet) {
	padding: clamp(1.5rem, 4vw, 2.5rem) !important;
	border: 1px solid var(--hg-rule-soft) !important;
	border-top: 6px solid var(--hg-green-800) !important;
	border-radius: var(--hg-radius-lg) !important;
	background: var(--hg-cream-200) !important;
	font-family: var(--hg-font-body) !important;
	color: var(--hg-body) !important;
	box-shadow: var(--hg-shadow-sm);
}

/*
 * The snippet is a button row, not a card. Strip any card treatment off it and
 * lay the buttons out inline.
 */
html body .wprm-recipe.wprm-recipe-snippet {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	margin: 0 0 1.5rem !important;
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
	box-shadow: none !important;
}

/* =========================================================================
   2. HEADER
   ========================================================================= */

html body .wprm-recipe-container .wprm-recipe-name {
	margin: 0 0 .5rem !important;
	font-family: var(--hg-font-display) !important;
	font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem) !important;
	font-weight: 700 !important;
	line-height: 1.22 !important;
	color: var(--hg-green-900) !important;
}

html body .wprm-recipe-container .wprm-recipe-summary {
	margin-bottom: 1.25rem !important;
	font-size: 1rem !important;
	font-style: italic;
	color: var(--hg-muted) !important;
}

html body .wprm-recipe-container .wprm-recipe-image img {
	border-radius: var(--hg-radius) !important;
	box-shadow: var(--hg-shadow-sm);
}

html body .wprm-recipe-container .wprm-recipe-rating .wprm-rating-star svg * {
	fill: var(--hg-tan-600) !important;
	stroke: var(--hg-tan-600) !important;
}
html body .wprm-recipe-container .wprm-recipe-rating-details { font-size: .8125rem; color: var(--hg-muted); }

/* =========================================================================
   3. META ROW (prep / cook / servings / calories)
   ========================================================================= */

html body .wprm-recipe-container .wprm-recipe-meta-container,
html body .wprm-recipe-container .wprm-recipe-details-container {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem;
	margin: 0 0 1.5rem;
	padding: 1rem 0;
	border-top: 1px solid rgba(45, 79, 60, .12);
	border-bottom: 1px solid rgba(45, 79, 60, .12);
}

html body .wprm-recipe-container .wprm-recipe-meta-container > *,
html body .wprm-recipe-container .wprm-recipe-details-container > *,
html body .wprm-recipe-container .wprm-recipe-block-container-inline {
	flex: 1 1 7rem;
	min-width: 6rem;
}

html body .wprm-recipe-container .wprm-recipe-details-label,
html body .wprm-recipe-container .wprm-recipe-time-label,
html body .wprm-recipe-container .wprm-recipe-details-name {
	display: block;
	font-family: var(--hg-font-body) !important;
	font-size: .6875rem !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--hg-green-700) !important;
}

html body .wprm-recipe-container .wprm-recipe-details,
html body .wprm-recipe-container .wprm-recipe-time,
html body .wprm-recipe-container .wprm-recipe-servings,
html body .wprm-recipe-container .wprm-recipe-calories {
	font-family: var(--hg-font-display) !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	color: var(--hg-green-900) !important;
}

/* =========================================================================
   4. ACTION BUTTONS (print / pin / jump)
   ========================================================================= */

html body .wprm-recipe-container .wprm-recipe-print,
html body .wprm-recipe-container .wprm-recipe-pin,
html body .wprm-recipe .wprm-recipe-print,
html body .wprm-recipe .wprm-recipe-pin,
html body a.wprm-recipe-print,
html body a.wprm-recipe-pin,
html body a.wprm-jump-to-recipe-shortcode,
html body a.wprm-print-recipe-shortcode {
	display: inline-flex !important;
	align-items: center;
	gap: .45em;
	padding: .5em 1.1em !important;
	border: 2px solid var(--hg-green-800) !important;
	border-radius: var(--hg-radius) !important;
	background: var(--hg-green-800) !important;
	color: var(--hg-cream) !important;
	font-family: var(--hg-font-body) !important;
	font-size: .875rem !important;
	font-weight: 700 !important;
	letter-spacing: .03em;
	text-decoration: none !important;
	text-transform: uppercase;
	white-space: nowrap;
	transition: background var(--hg-transition), border-color var(--hg-transition);
}
html body .wprm-recipe-print:hover,
html body a.wprm-recipe-print:hover,
html body a.wprm-jump-to-recipe-shortcode:hover,
html body a.wprm-print-recipe-shortcode:hover {
	background: var(--hg-green-700) !important;
	border-color: var(--hg-green-700) !important;
	color: var(--hg-white) !important;
}
html body .wprm-recipe-pin,
html body a.wprm-recipe-pin {
	background: transparent !important;
	color: var(--hg-green-800) !important;
}
html body .wprm-recipe-pin:hover,
html body a.wprm-recipe-pin:hover {
	background: var(--hg-green-800) !important;
	color: var(--hg-cream) !important;
}

html body .wprm-recipe-container .wprm-recipe-icon svg * { fill: currentColor !important; }

/* The theme's own jump/print row above the post content */
.hg-recipe-jump {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	justify-content: center;
	margin-top: 1.35rem;
}
/*
 * Without these the buttons are treated as shrinkable flex items inside the
 * centred entry header and the label breaks across three lines.
 */
.hg-recipe-jump .hg-btn {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* =========================================================================
   5. SECTION HEADINGS (Ingredients / Instructions / Nutrition)
   ========================================================================= */

html body .wprm-recipe-container .wprm-recipe-header,
html body .wprm-recipe-container h3.wprm-recipe-header,
html body .wprm-recipe-container h4.wprm-recipe-header,
html body .wprm-recipe-container .wprm-recipe-ingredients-header,
html body .wprm-recipe-container .wprm-recipe-instructions-header,
html body .wprm-recipe-container .wprm-recipe-notes-header {
	margin: 1.9rem 0 .9rem !important;
	padding-bottom: .5rem;
	border-bottom: 2px solid var(--hg-tan) !important;
	font-family: var(--hg-font-body) !important;
	font-size: .875rem !important;
	font-weight: 700 !important;
	letter-spacing: .14em !important;
	text-transform: uppercase !important;
	color: var(--hg-green-800) !important;
}

html body .wprm-recipe-container .wprm-recipe-ingredient-group-name,
html body .wprm-recipe-container .wprm-recipe-instruction-group-name {
	margin: 1.25rem 0 .6rem !important;
	font-family: var(--hg-font-display) !important;
	font-size: 1.0625rem !important;
	font-weight: 700 !important;
	color: var(--hg-green-900) !important;
}

/* =========================================================================
   6. INGREDIENTS
   ========================================================================= */

html body .wprm-recipe-container .wprm-recipe-ingredients {
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
}

html body .wprm-recipe-container .wprm-recipe-ingredient {
	position: relative;
	margin: 0 !important;
	padding: .6rem 0 .6rem 1.9rem !important;
	border-bottom: 1px solid rgba(45, 79, 60, .09);
	font-size: 1rem !important;
	line-height: 1.5;
	list-style: none !important;
}
html body .wprm-recipe-container .wprm-recipe-ingredient:last-child { border-bottom: 0; }

/* Leaf bullet, unless WPRM's own checkbox mode is on. */
html body .wprm-recipe-container .wprm-recipe-ingredient::before {
	content: "";
	position: absolute;
	left: .35rem;
	top: 1.05em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--hg-green-500);
}
html body .wprm-recipe-container .wprm-recipe-ingredient:has(.wprm-checkbox-container)::before { display: none; }
html body .wprm-recipe-container .wprm-recipe-ingredient:has(.wprm-checkbox-container) { padding-left: 0 !important; }

html body .wprm-recipe-container .wprm-recipe-ingredient-amount,
html body .wprm-recipe-container .wprm-recipe-ingredient-unit {
	font-weight: 700 !important;
	color: var(--hg-green-900) !important;
}
html body .wprm-recipe-container .wprm-recipe-ingredient-notes {
	color: var(--hg-muted) !important;
	font-style: italic;
}

/* 1x / 2x / 3x scaler and unit conversion */
html body .wprm-recipe-container .wprm-recipe-adjustable-servings-container,
html body .wprm-recipe-container .wprm-unit-conversion-container {
	display: flex;
	gap: .35rem;
	align-items: center;
	margin: .75rem 0 1rem;
}
html body .wprm-recipe-container .wprm-recipe-servings-adjustable-tooltip,
html body .wprm-recipe-container .wprm-unit-conversion {
	padding: .3em .8em !important;
	border: 1px solid var(--hg-green-800) !important;
	border-radius: 999px !important;
	background: transparent !important;
	color: var(--hg-green-800) !important;
	font-size: .8125rem !important;
	font-weight: 700 !important;
	cursor: pointer;
}
html body .wprm-recipe-container .wprm-recipe-servings-adjustable-tooltip.wprmp-checked,
html body .wprm-recipe-container .wprm-unit-conversion.wprmpuc-active {
	background: var(--hg-green-800) !important;
	color: var(--hg-cream) !important;
}

/* =========================================================================
   7. INSTRUCTIONS
   ========================================================================= */

html body .wprm-recipe-container .wprm-recipe-instructions {
	margin: 0 !important;
	padding: 0 !important;
	counter-reset: hg-step;
	list-style: none !important;
}

html body .wprm-recipe-container .wprm-recipe-instruction {
	position: relative;
	margin: 0 0 1.15rem !important;
	padding: 0 0 0 2.75rem !important;
	font-size: 1rem !important;
	line-height: 1.65;
	list-style: none !important;
	counter-increment: hg-step;
}
html body .wprm-recipe-container .wprm-recipe-instruction::before {
	content: counter(hg-step);
	position: absolute;
	left: 0;
	top: .05em;
	display: grid;
	place-items: center;
	width: 1.85rem;
	height: 1.85rem;
	border-radius: 50%;
	background: var(--hg-green-800);
	color: var(--hg-cream);
	font-family: var(--hg-font-body);
	font-size: .875rem;
	font-weight: 700;
}
html body .wprm-recipe-container .wprm-recipe-instruction-image img {
	margin-top: .75rem;
	border-radius: var(--hg-radius-sm);
}

/* =========================================================================
   8. NOTES + NUTRITION
   ========================================================================= */

html body .wprm-recipe-container .wprm-recipe-notes {
	padding: 1rem 1.25rem;
	border-left: 4px solid var(--hg-tan);
	border-radius: 0 var(--hg-radius-sm) var(--hg-radius-sm) 0;
	background: var(--hg-white);
	font-size: .9375rem !important;
	color: var(--hg-body) !important;
}
html body .wprm-recipe-container .wprm-recipe-notes p:last-child { margin-bottom: 0; }

html body .wprm-recipe-container .wprm-nutrition-label-container {
	padding: 1rem 1.25rem;
	border-radius: var(--hg-radius);
	background: var(--hg-white);
	font-size: .875rem !important;
	color: var(--hg-muted) !important;
	line-height: 1.7;
}
html body .wprm-recipe-container .wprm-nutrition-label-text-nutrition-container-label {
	color: var(--hg-green-900) !important;
	font-weight: 700 !important;
}

html body .wprm-recipe-container .wprm-recipe-tag-container,
html body .wprm-recipe-container .wprm-recipe-keyword-container {
	margin-top: 1.25rem;
	padding-top: 1rem;
	border-top: 1px solid rgba(45, 79, 60, .12);
	font-size: .8125rem;
	color: var(--hg-muted);
}

html body .wprm-recipe-container .wprm-call-to-action {
	margin-top: 1.5rem !important;
	padding: 1rem 1.25rem !important;
	border-radius: var(--hg-radius) !important;
	background: var(--hg-green-800) !important;
	color: var(--hg-cream) !important;
}
html body .wprm-recipe-container .wprm-call-to-action .wprm-call-to-action-header,
html body .wprm-recipe-container .wprm-call-to-action-text-container * { color: var(--hg-cream) !important; }
html body .wprm-recipe-container .wprm-call-to-action a { color: var(--hg-tan) !important; text-decoration: underline; }

/* =========================================================================
   9. SHOP CROSS-SELL
   Rendered under the recipe card by inc/wprm.php. Defined here, NOT in
   woocommerce.css: that sheet only loads on WooCommerce views, so a recipe
   post would render this band completely unstyled.
   ========================================================================= */

/*
 * Centred and stacked at every width. Beside the sidebar the column is too
 * narrow for text and button to share a row, so the old space-between layout
 * always wrapped into a left-aligned stack that looked unfinished on phones.
 */
.hg-recipe-cta {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 1.25rem;
	max-width: var(--hg-container-narrow);
	margin: 2.5rem auto;
	padding: clamp(1.35rem, 3vw, 2rem);
	background: var(--hg-green-800);
	border-radius: var(--hg-radius-lg);
	color: var(--hg-cream);
}
.hg-single__layout.has-sidebar .hg-recipe-cta { margin-inline: 0; max-width: none; }
.hg-recipe-cta h3 { margin: 0 0 .35rem; color: var(--hg-cream); font-size: 1.25rem; }
.hg-recipe-cta p { margin: 0 auto; font-size: .9375rem; color: rgba(240, 239, 227, .85); max-width: 34rem; }
.hg-recipe-cta .hg-btn {
	flex: 0 0 auto;
	/* .hg-prose underlines every link, including this button. */
	text-decoration: none !important;
	background: var(--hg-tan);
	border-color: var(--hg-tan);
	color: var(--hg-green-900);
}
.hg-recipe-cta .hg-btn:hover { background: var(--hg-tan-600); border-color: var(--hg-tan-600); }

/* =========================================================================
   10. RESPONSIVE + PRINT
   ========================================================================= */

@media (min-width: 700px) {
	/* Two columns for ingredients on wider cards, as the Chic template does. */
	html body .wprm-recipe-container .wprm-recipe-ingredients-container.wprm-recipe-ingredients-columns-2 .wprm-recipe-ingredients {
		columns: 2;
		column-gap: 2rem;
	}
	html body .wprm-recipe-container .wprm-recipe-ingredients-container.wprm-recipe-ingredients-columns-2 .wprm-recipe-ingredient {
		break-inside: avoid;
	}
}

@media print {
	html body .wprm-recipe-container .wprm-recipe:not(.wprm-recipe-snippet) {
		border: 1px solid #999 !important;
		border-top-width: 3px !important;
		background: #fff !important;
		box-shadow: none;
		padding: 0 !important;
	}
	html body .wprm-recipe-print,
	html body .wprm-recipe-pin,
	html body .wprm-recipe-container .wprm-call-to-action,
	html body .wprm-recipe-container .wprm-recipe-rating-details,
	.wprm-recipe-snippet,
	.hg-recipe-cta,
	.hg-recipe-jump { display: none !important; }
	html body .wprm-recipe-container .wprm-recipe-instruction::before {
		background: #fff !important;
		color: #000 !important;
		border: 1px solid #000;
	}
}