/* WestCX Recipe Card — front-end styles
 *
 * Theming: every color below reads from CSS custom properties that are
 * set inline on .wrc-recipe-card by WRC_Render::color_style_attr().
 * Those variables come from Recipe Cards → Design & Colors (site-wide
 * default) or a per-recipe override in the block's Design panel. The
 * hex values after each var() are just the fallback if nothing is set.
 */

.wrc-recipe-card {
	--wrc-accent: #d9534f;
	--wrc-accent-contrast: #ffffff;
	--wrc-card-bg: #ffffff;
	--wrc-text: #222222;
	--wrc-muted: color-mix( in srgb, var( --wrc-text ) 55%, transparent );
	--wrc-border: color-mix( in srgb, var( --wrc-text ) 12%, transparent );
	--wrc-surface: color-mix( in srgb, var( --wrc-text ) 4%, var( --wrc-card-bg ) );
	--wrc-accent-soft: color-mix( in srgb, var( --wrc-accent ) 12%, var( --wrc-card-bg ) );
}

.wrc-jump-wrap { text-align: center; margin: 0 0 1.5em; }
.wrc-jump-to-recipe {
	display: inline-block;
	background: var( --wrc-accent, #d9534f );
	color: var( --wrc-accent-contrast, #fff );
	padding: 0.7em 1.4em;
	border-radius: 999px;
	font-weight: 600;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	box-shadow: 0 4px 14px color-mix( in srgb, var( --wrc-accent, #d9534f ) 35%, transparent );
}
.wrc-jump-to-recipe:hover { transform: translateY( -1px ); color: var( --wrc-accent-contrast, #fff ); }

.wrc-recipe-card {
	max-width: 780px;
	margin: 2em auto;
	padding: 2em;
	border: 1px solid var( --wrc-border );
	border-radius: 16px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.03), 0 12px 32px rgba(0,0,0,0.07);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	background: var( --wrc-card-bg, #fff );
	color: var( --wrc-text, #222 );
}

.wrc-card-image { position: relative; margin: -2em -2em 1.25em; }
.wrc-card-image img { width: 100%; height: auto; display: block; border-radius: 16px 16px 0 0; aspect-ratio: 16/10; object-fit: cover; }

.wrc-card-title { font-size: 1.9em; line-height: 1.2; font-weight: 800; margin: 0.2em 0 0.35em; letter-spacing: -0.01em; }
.wrc-card-description { color: var( --wrc-muted ); margin-bottom: 1.1em; line-height: 1.55; }

.wrc-dietary-badges { display: flex; gap: 0.5em; flex-wrap: wrap; margin-bottom: 0.9em; }
.wrc-badge {
	background: var( --wrc-accent-soft );
	color: var( --wrc-accent );
	border-radius: 999px;
	padding: 0.35em 0.95em;
	font-size: 0.8em;
	font-weight: 700;
	letter-spacing: 0.01em;
}

.wrc-rating { display: flex; align-items: center; gap: 0.6em; margin-bottom: 1.2em; flex-wrap: wrap; }
.wrc-stars { font-size: 1.35em; color: var( --wrc-border ); cursor: pointer; letter-spacing: 0.05em; }
.wrc-star { transition: color 0.15s; }
.wrc-star.is-filled { color: var( --wrc-accent ); }
.wrc-stars:hover .wrc-star { color: var( --wrc-accent ); }
.wrc-rating-count { color: var( --wrc-muted ); font-size: 0.9em; }
.wrc-rate-cta { font-size: 0.85em; color: var( --wrc-muted ); }

.wrc-meta-row {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 100px, 1fr ) );
	gap: 0;
	background: var( --wrc-surface );
	border: 1px solid var( --wrc-border );
	border-radius: 14px;
	padding: 1.1em 0.5em;
	margin-bottom: 1.2em;
}
.wrc-meta-item {
	display: flex; flex-direction: column; align-items: center; text-align: center;
	font-size: 0.9em; padding: 0 0.75em; border-left: 1px solid var( --wrc-border );
}
.wrc-meta-item:first-child { border-left: none; }
.wrc-meta-item strong {
	color: var( --wrc-muted ); text-transform: uppercase; font-size: 0.72em;
	letter-spacing: 0.06em; margin-bottom: 0.35em; font-weight: 700;
}
.wrc-meta-item span { font-weight: 700; font-size: 1.05em; }

.wrc-servings-stepper { display: flex; align-items: center; gap: 0.6em; }
.wrc-servings-stepper button {
	width: 26px; height: 26px; border-radius: 50%; border: 1px solid var( --wrc-border );
	background: var( --wrc-card-bg ); color: var( --wrc-text ); cursor: pointer; font-size: 1em; line-height: 1;
	transition: background 0.15s, color 0.15s;
}
.wrc-servings-stepper button:hover { background: var( --wrc-accent ); color: var( --wrc-accent-contrast ); border-color: var( --wrc-accent ); }
.wrc-servings-value { font-weight: 700; min-width: 1.5em; text-align: center; }

.wrc-actions-row, .wrc-share-row { display: flex; gap: 0.6em; flex-wrap: wrap; margin-bottom: 1em; align-items: center; }
.wrc-btn {
	background: var( --wrc-accent ); color: var( --wrc-accent-contrast ); border: none; padding: 0.65em 1.2em;
	border-radius: 999px; cursor: pointer; font-size: 0.9em; font-weight: 600;
	transition: filter 0.15s, transform 0.15s;
}
.wrc-btn:hover { filter: brightness( 0.92 ); transform: translateY( -1px ); }
.wrc-unit-toggle { display: flex; border: 1px solid var( --wrc-border ); border-radius: 999px; overflow: hidden; margin-left: auto; }
.wrc-unit-toggle button { border: none; background: var( --wrc-card-bg ); color: var( --wrc-text ); padding: 0.5em 1em; cursor: pointer; }
.wrc-unit-toggle button.is-active { background: var( --wrc-accent ); color: var( --wrc-accent-contrast ); }

.wrc-share-icon {
	font-size: 1.15em; text-decoration: none; cursor: pointer; background: var( --wrc-surface );
	border: 1px solid var( --wrc-border ); border-radius: 50%; width: 2.2em; height: 2.2em;
	display: inline-flex; align-items: center; justify-content: center; color: var( --wrc-text );
}

.wrc-columns { display: grid; grid-template-columns: 1fr 1.4fr; gap: 2.5em; margin-bottom: 1.5em; }
@media ( max-width: 640px ) { .wrc-columns { grid-template-columns: 1fr; gap: 1.5em; } }

.wrc-ingredients-col h3, .wrc-instructions-col h3 {
	font-size: 1.05em; text-transform: uppercase; letter-spacing: 0.04em;
	border-bottom: 2px solid var( --wrc-accent ); padding-bottom: 0.5em; margin-bottom: 0.75em;
}

.wrc-ingredients-list { list-style: none; margin: 0; padding: 0; }
.wrc-ingredient { padding: 0.55em 0; border-bottom: 1px dashed var( --wrc-border ); }
.wrc-ingredient label { display: flex; gap: 0.6em; align-items: baseline; cursor: pointer; }
.wrc-ingredient input[type="checkbox"] { accent-color: var( --wrc-accent ); width: 1.05em; height: 1.05em; }
.wrc-ingredient.is-checked .wrc-ing-name,
.wrc-ingredient.is-checked .wrc-ing-amount,
.wrc-ingredient.is-checked .wrc-ing-unit { text-decoration: line-through; color: var( --wrc-muted ); }
.wrc-ing-amount { font-weight: 700; min-width: 2.5em; color: var( --wrc-accent ); }

.wrc-instructions-list { padding-left: 1.4em; }
.wrc-step { margin-bottom: 1.1em; line-height: 1.6; }
.wrc-step-video { margin-top: 0.5em; }
.wrc-instructions-list::marker,
.wrc-step::marker { color: var( --wrc-accent ); font-weight: 700; }

.wrc-timer-btn {
	display: inline-block; margin-left: 0.6em; background: var( --wrc-accent-soft ); color: var( --wrc-accent );
	border: 1px solid color-mix( in srgb, var( --wrc-accent ) 35%, transparent ); border-radius: 999px;
	padding: 0.25em 0.85em; font-size: 0.85em; cursor: pointer; font-weight: 600;
}

.wrc-timer-tray {
	position: fixed; bottom: 1em; right: 1em; z-index: 9999;
	display: flex; flex-direction: column; gap: 0.5em; max-width: 260px;
}
.wrc-timer-row {
	background: var( --wrc-text, #2f2f2f ); color: var( --wrc-card-bg, #fff ); border-radius: 10px; padding: 0.6em 0.8em;
	display: flex; align-items: center; gap: 0.5em; font-size: 0.85em; box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.wrc-timer-row.is-done { background: var( --wrc-accent ); color: var( --wrc-accent-contrast ); animation: wrc-pulse 1s infinite; }
.wrc-timer-clock { font-weight: 700; min-width: 3em; }
.wrc-timer-row button { background: transparent; border: none; color: inherit; cursor: pointer; }
@keyframes wrc-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }

.wrc-nutrition ul, .wrc-notes { margin-top: 0.5em; }
.wrc-nutrition ul { list-style: none; display: flex; gap: 1.5em; padding: 0; flex-wrap: wrap; }
.wrc-notes { background: var( --wrc-surface ); border-radius: 10px; padding: 1em 1.2em; }

.wrc-cook-mode-overlay {
	position: fixed; inset: 0; background: rgba(20,20,20,0.97); color: #fff;
	z-index: 100000; display: flex; align-items: center; justify-content: center;
}
.wrc-cook-mode-inner { max-width: 700px; text-align: center; padding: 2em; }
.wrc-cook-mode-text { font-size: 2em; line-height: 1.4; margin: 1.5em 0; }
.wrc-cook-mode-progress { color: #aaa; letter-spacing: 0.05em; text-transform: uppercase; font-size: 0.85em; }
.wrc-cook-mode-nav { display: flex; gap: 1em; justify-content: center; }
.wrc-cook-mode-nav button {
	background: var( --wrc-accent, #fff ); color: var( --wrc-accent-contrast, #111 ); border: none;
	padding: 0.7em 1.3em; border-radius: 999px; cursor: pointer; font-size: 1em; font-weight: 600;
}
.wrc-cook-mode-close { position: absolute; top: 1.5em; right: 1.5em; background: transparent; color: #fff; border: 1px solid #666; padding: 0.6em 1.1em; border-radius: 999px; cursor: pointer; }

.wrc-related-recipes, .wrc-roundup-toc { margin-top: 2em; }
.wrc-related-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1em; }
@media ( max-width: 640px ) { .wrc-related-grid { grid-template-columns: repeat(2, 1fr); } }
.wrc-related-card { text-decoration: none; color: inherit; text-align: center; display: block; }
.wrc-related-card img { border-radius: 10px; width: 100%; aspect-ratio: 1; object-fit: cover; }
.wrc-related-card span { display: block; font-size: 0.85em; margin-top: 0.4em; font-weight: 600; }

.wrc-recipe-index .wrc-index-filters { display: flex; gap: 0.6em; margin-bottom: 1.5em; flex-wrap: wrap; }
.wrc-index-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2em; }
@media ( max-width: 640px ) { .wrc-index-grid { grid-template-columns: 1fr; } }
.wrc-index-card { text-decoration: none; color: inherit; border: 1px solid var( --wrc-border, #eee ); border-radius: 14px; padding: 0.9em; display: block; transition: box-shadow 0.15s, transform 0.15s; }
.wrc-index-card:hover { box-shadow: 0 8px 20px rgba(0,0,0,0.08); transform: translateY( -2px ); }
.wrc-index-card img { border-radius: 10px; width: 100%; aspect-ratio: 4/3; object-fit: cover; margin-bottom: 0.6em; }
.wrc-index-time { color: var( --wrc-muted, #888 ); font-size: 0.85em; }