/**
 * WP Recipe Maker — theme restyle
 *
 * File: wprm-theme.css
 * Theme: ballin-recipes ("Supper Club" — warm editorial)
 *
 * Restyles the WPRM recipe card to match the theme's design tokens
 * (theme.json custom properties). Only touches typography, color,
 * borders, and spacing — WPRM's own display/flex/grid layout is left
 * untouched so the card keeps functioning correctly.
 *
 * !important is used sparingly, only where WPRM's own stylesheet ships
 * higher-specificity typography/color rules that would otherwise win.
 * It is never applied to layout properties (display, flex, grid, etc).
 */

/* ------------------------------------------------------------------ */
/* Card container                                                      */
/* ------------------------------------------------------------------ */

.wprm-recipe-container {
	background: var(--wp--preset--color--paper, #F4EFE3);
	color: var(--wp--preset--color--contrast, #223A33);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast, #223A33) 16%, transparent);
	border-top: 4px solid var(--wp--preset--color--brick, #B5462F);
	border-radius: 10px;
	padding: clamp(1.5rem, 1.1rem + 2vw, 2.75rem);
	margin-block: 2.5rem;
	box-shadow: 0 24px 50px -34px rgba(34, 58, 51, 0.5);
	font-family: var(--wp--preset--font-family--body, sans-serif);
}
/* Inner wrapper stays transparent — the container is the visible card. */
.wprm-recipe-container .wprm-recipe {
	background: transparent;
	color: inherit;
	font-family: inherit;
}

/* ------------------------------------------------------------------ */
/* Recipe name                                                         */
/* ------------------------------------------------------------------ */

.wprm-recipe-name {
	font-family: var(--wp--preset--font-family--display, sans-serif) !important;
	font-style: normal;
	font-weight: 800;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast, #223A33) !important;
	font-size: clamp(1.6rem, 1.3rem + 1.5vw, 2.2rem);
	line-height: 1.1;
	margin-bottom: 0.75rem;
}

.wprm-recipe-summary {
	color: var(--wp--preset--color--contrast, #223A33);
	font-family: var(--wp--preset--font-family--body, sans-serif);
}

/* ------------------------------------------------------------------ */
/* Section headers — small uppercase brick labels                      */
/* ------------------------------------------------------------------ */

.wprm-recipe-header,
.wprm-recipe-ingredients-header,
.wprm-recipe-instructions-header,
.wprm-recipe-notes-header,
.wprm-recipe-equipment-header {
	font-family: var(--wp--preset--font-family--display, sans-serif) !important;
	color: var(--wp--preset--color--brick, #B5462F) !important;
	text-transform: uppercase !important;
	letter-spacing: 0.16em !important;
	font-weight: 800 !important;
	font-size: 12px !important;
	margin-top: 1.75rem;
	margin-bottom: 0.85rem;
	padding-bottom: 0.5rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--brick, #B5462F) 30%, transparent) !important;
}

/* Ingredient/instruction group names — WPRM ships them "faded"; make them read
   as real subheads. */
.wprm-recipe-container .wprm-recipe-group-name,
.wprm-recipe-container .wprm-recipe-ingredient-group-name,
.wprm-recipe-container .wprm-recipe-instruction-group-name {
	color: var(--wp--preset--color--contrast, #223A33) !important;
	opacity: 1 !important;
	font-family: var(--wp--preset--font-family--display, sans-serif) !important;
	font-style: normal !important;
	font-weight: 700 !important;
	font-size: 1.02rem !important;
	letter-spacing: -0.01em;
	margin: 1.15rem 0 0.4rem;
}

/* ------------------------------------------------------------------ */
/* Times / details meta                                                 */
/* ------------------------------------------------------------------ */

.wprm-recipe-details-label {
	color: var(--wp--preset--color--muted, #6E6552) !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 11px;
	font-family: var(--wp--preset--font-family--body, sans-serif);
}

.wprm-recipe-details-value,
.wprm-recipe-time,
.wprm-recipe-servings,
.wprm-recipe-course,
.wprm-recipe-cuisine {
	color: var(--wp--preset--color--contrast, #223A33);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ */
/* Ingredients                                                          */
/* ------------------------------------------------------------------ */

.wprm-recipe-ingredient {
	border-bottom: 1px dashed color-mix(in srgb, var(--wp--preset--color--contrast, #223A33) 15%, transparent);
	padding-block: 0.4rem;
	color: var(--wp--preset--color--contrast, #223A33);
}

.wprm-recipe-ingredient-amount,
.wprm-recipe-ingredient-unit {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast, #223A33);
}

.wprm-recipe-ingredient-name {
	color: var(--wp--preset--color--contrast, #223A33);
}

.wprm-recipe-group-name {
	font-family: var(--wp--preset--font-family--display, sans-serif) !important;
	font-style: normal;
	font-weight: 700;
	color: var(--wp--preset--color--contrast, #223A33);
}

/* ------------------------------------------------------------------ */
/* Instructions                                                         */
/* ------------------------------------------------------------------ */

.wprm-recipe-instruction {
	padding-block: 0.6rem;
}

.wprm-recipe-instruction-text {
	color: var(--wp--preset--color--contrast, #223A33);
	font-family: var(--wp--preset--font-family--body, sans-serif);
}

/* Recolor/re-font whatever numbering WPRM already outputs for a step,
   rather than layering a CSS counter on top (avoids double numbering). */
.wprm-recipe-instruction-number,
.wprm-recipe-instruction .wprm-recipe-block-text-normal:first-child,
.wprm-recipe-instructions-container .wprm-recipe-instruction > span:first-child {
	font-family: var(--wp--preset--font-family--display, sans-serif) !important;
	font-style: normal;
	color: var(--wp--preset--color--brick, #B5462F) !important;
	font-weight: 800;
}

/* ------------------------------------------------------------------ */
/* Notes                                                                */
/* ------------------------------------------------------------------ */

.wprm-recipe-notes-container {
	border-left: 2px solid var(--wp--preset--color--brick, #B5462F);
	padding-left: 1rem;
}

.wprm-recipe-notes {
	font-style: italic;
	color: var(--wp--preset--color--muted, #6E6552);
	font-family: var(--wp--preset--font-family--body, sans-serif);
}
.wprm-recipe-notes p {
	margin: 0 0 0.45rem;
}
.wprm-recipe-notes p:last-child {
	margin-bottom: 0;
}
.wprm-recipe-notes strong {
	color: var(--wp--preset--color--contrast, #223A33);
	font-style: normal;
	font-weight: 700;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                              */
/* ------------------------------------------------------------------ */

.wprm-recipe-print,
.wprm-recipe-jump,
.wprm-recipe-pin,
.wprm-button-primary,
.wprm-recipe-jump-video {
	background: var(--wp--preset--color--brick, #B5462F) !important;
	color: var(--wp--preset--color--paper, #F4EFE3) !important;
	font-family: var(--wp--preset--font-family--body, sans-serif);
	font-weight: 600;
	border-radius: 2px;
	padding: 0.5rem 1rem;
	text-decoration: none !important;
	border: none;
}

.wprm-recipe-print:hover,
.wprm-recipe-jump:hover,
.wprm-recipe-pin:hover,
.wprm-button-primary:hover,
.wprm-recipe-jump-video:hover {
	background: color-mix(in srgb, var(--wp--preset--color--brick, #B5462F) 85%, black) !important;
	color: var(--wp--preset--color--paper, #F4EFE3) !important;
}

/* ------------------------------------------------------------------ */
/* Rating stars                                                         */
/* ------------------------------------------------------------------ */

.wprm-recipe-rating-details {
	color: var(--wp--preset--color--muted, #6E6552);
	font-family: var(--wp--preset--font-family--body, sans-serif);
}

.wprm-recipe-rating-star.wprm-star-full,
.wprm-recipe-rating-star.wprm-star-full svg,
.wprm-recipe-rating-star.wprm-star-full path {
	color: var(--wp--preset--color--gold, #B08A3E) !important;
	fill: var(--wp--preset--color--gold, #B08A3E) !important;
}

.wprm-recipe-rating-star.wprm-star-empty,
.wprm-recipe-rating-star.wprm-star-empty svg,
.wprm-recipe-rating-star.wprm-star-empty path {
	color: color-mix(in srgb, var(--wp--preset--color--muted, #6E6552) 40%, transparent) !important;
	fill: color-mix(in srgb, var(--wp--preset--color--muted, #6E6552) 40%, transparent) !important;
}

/* ------------------------------------------------------------------ */
/* "Chic" template cleanups                                             */
/* ------------------------------------------------------------------ */

/* Kill WPRM's decorative gray icon dividers (camera / chef-hat / utensils /
   magnifier) — they read as clutter and break up the layout. */
.wprm-recipe-container .wprm-icon-shortcode,
.wprm-recipe-container .wprm-icon-decoration-line,
.wprm-recipe-container .wprm-decoration-line {
	display: none !important;
}

/* The template leaves an empty float container at the top — remove it. */
.wprm-recipe-container .wprm-container-float-right {
	display: none !important;
}

/* Collapse the template's stacked spacers into a calm, even rhythm. */
.wprm-recipe-container .wprm-spacer {
	height: 0.5rem !important;
}

/* Times + nutrition: centered stat columns instead of an offset table.
   (Prep/cook and calories are separate WPRM containers, so they stack as two
   tidy centered rows rather than one — both cleanly aligned.) */
/* WPRM splits stats across separate nested containers (times here, servings /
   calories inside a columns wrapper). Collapsing that wrapper with
   display:contents lets them all sit on ONE line as a single stat strip.
   Scoped with :not() so the print-button container is left alone. */
.wprm-recipe-container .wprm-container-columns-spaced:not(.wprm-container-columns-spaced-middle) {
	display: contents !important;
}
.wprm-recipe-meta-container {
	display: inline-flex !important;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 0.4rem 2.5rem;
	/* Equal vertical margin on every stat container — an asymmetric margin on
	   just one knocks the strip out of alignment. */
	margin: 1.1rem 2.5rem 1.1rem 0 !important;
	padding: 0 !important;
	vertical-align: top;
	float: none !important;
	width: auto !important;
}
.wprm-recipe-meta-container .wprm-recipe-block-container {
	display: flex !important;
	flex: 0 0 auto;
	width: auto !important;
	flex-direction: column;
	align-items: flex-start;
	text-align: left;
	gap: 0.15rem;
	border: none !important;
	padding: 0 !important;
	margin: 0 !important;
}
.wprm-recipe-meta-container .wprm-recipe-details-label {
	order: -1;
}
.wprm-recipe-time,
.wprm-recipe-details {
	font-size: 1.05rem;
}

/* Print button: a real pill button, not a full-width bar. */
.wprm-template-chic-buttons {
	justify-content: center !important;
}
.wprm-recipe-print-wide-button.wprm-recipe-print {
	width: auto !important;
	display: inline-flex !important;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.6rem !important;
	border-radius: 100px !important;
	margin: 0 auto;
}

/* Ingredient amount as an accent pop; crisper dashed separators. */
.wprm-recipe-ingredient {
	border-bottom-color: color-mix(in srgb, var(--wp--preset--color--contrast, #223A33) 18%, transparent);
	padding-block: 0.55rem;
}
.wprm-recipe-ingredient-amount {
	color: var(--wp--preset--color--brick, #B5462F) !important;
}

/* Notes: a warm inset callout instead of loose italic text. */
.wprm-recipe-notes-container {
	background: color-mix(in srgb, var(--wp--preset--color--gold, #B08A3E) 12%, var(--wp--preset--color--paper, #F4EFE3));
	border-left: 3px solid var(--wp--preset--color--brick, #B5462F);
	border-radius: 0 8px 8px 0;
	padding: 1rem 1.25rem !important;
	margin-top: 1.5rem;
}