/**
 * Recipe WP — recipe card styles.
 *
 * ---------------------------------------------------------------
 * RESTYLING WITH CUSTOM PROPERTIES
 * ---------------------------------------------------------------
 * Every color, font and size the card uses is a CSS custom property
 * (a "CSS variable") defined on .rwp-card (and the Jump bar) below.
 * :where() keeps that rule's specificity at zero, so ANY theme rule
 * targeting .rwp-card wins without needing !important. A theme can restyle
 * the whole card by overriding just these, e.g.:
 *
 *   .rwp-card {
 *       --rwp-bg: #f3e6c4;
 *       --rwp-accent: #8b2e16;
 *       --rwp-font-heading: "Special Elite", monospace;
 *   }
 *
 * No need to fight the plugin's selectors. The Pasta Posts theme
 * will do exactly this for its old-paper look.
 *
 * Defaults are deliberately neutral so the card fits any theme.
 */

:where(.rwp-card, .rwp-jump) {
	--rwp-bg: #ffffff;
	--rwp-text: inherit;
	--rwp-muted: #6b6b6b;
	--rwp-border: #e2e2e2;
	--rwp-accent: #b5401f;
	--rwp-accent-text: #ffffff;
	--rwp-tag-bg: #f4f1ec;
	--rwp-radius: 8px;
	--rwp-padding: clamp(16px, 4vw, 32px);
	--rwp-gap: 24px;
	--rwp-font-heading: inherit;
	--rwp-font-body: inherit;
	--rwp-heading-weight: 700;
	--rwp-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	--rwp-bg-image: none; /* e.g. url(paper.webp) */
	--rwp-star: #e2a51c;
	--rwp-star-empty: #d6d1c8;
}

/* Star colors are also used outside the card (reviews, review form). */
:where(.rwp-stars, .rwp-rate) {
	--rwp-star: #e2a51c;
	--rwp-star-empty: #d6d1c8;
}

.rwp-card {
	/* "Container" lets the layout respond to the card's own width,
	   not the screen's, so it works in narrow and wide content areas. */
	container-type: inline-size;
	container-name: rwp-card;

	box-sizing: border-box;
	margin: 2em 0;
	padding: var(--rwp-padding);
	color: var(--rwp-text);
	font-family: var(--rwp-font-body);
	background-color: var(--rwp-bg);
	background-image: var(--rwp-bg-image);
	border: 1px solid var(--rwp-border);
	border-radius: var(--rwp-radius);
	box-shadow: var(--rwp-shadow);
	scroll-margin-top: 2em; /* Leaves space above when "Jump to Recipe" scrolls here. */
}

.rwp-card:has(.rwp-stamp) {
	position: relative; /* The stamp is placed against the card's corner. */
}

/* ---------- Kitchen Tested stamp ----------
 * A rubber stamp pressed onto the card's top corner: double border,
 * a slight tilt, and ink that multiplies into the paper like real ink. */

.rwp-stamp {
	--rwp-stamp-color: #4d6a37;
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.35em 0.8em 0.3em;
	font-family: var(--rwp-font-label, inherit);
	font-weight: 700;
	line-height: 1.1;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--rwp-stamp-color);
	border: 3px double var(--rwp-stamp-color);
	border-radius: 6px;
	transform: rotate(-7deg);
	mix-blend-mode: multiply;
	opacity: 0.9;
	pointer-events: none;
}

.rwp-stamp__label {
	font-size: 0.85rem;
}

.rwp-stamp__date {
	font-size: 0.68rem;
	letter-spacing: 0.14em;
}

/* Narrow cards (phones): the stamp sits in line above the header, on the
   right, so it never squeezes the title. Wide cards: it's pressed into the
   top corner and the title keeps clear of it. */
@container rwp-card (max-width: 519px) {
	.rwp-stamp {
		position: static;
		width: fit-content;
		margin: 0 0.25rem 1rem auto;
	}
}

@container rwp-card (min-width: 520px) {
	.rwp-card:has(.rwp-stamp) .rwp-card__title {
		padding-right: 8.5rem;
	}
}

.rwp-card *,
.rwp-card *::before,
.rwp-card *::after {
	box-sizing: inherit;
}

/* ---------- Header ---------- */

.rwp-card__header {
	display: grid;
	gap: var(--rwp-gap);
}

.rwp-card__image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: calc(var(--rwp-radius) - 2px);
}

.rwp-card__title {
	margin: 0 0 0.4em;
	font-family: var(--rwp-font-heading);
	font-weight: var(--rwp-heading-weight);
	font-size: clamp(1.5rem, 4cqi, 2.1rem);
	line-height: 1.15;
}

/* "Recipe #63 in Pasta Posts Recipe Book" (Recipes → Collections). */
.rwp-card__collection {
	margin: -0.15em 0 0.8em;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--rwp-accent);
}

.rwp-card__collection a {
	color: inherit;
	text-decoration: none;
}

.rwp-card__collection a:hover,
.rwp-card__collection a:focus-visible {
	text-decoration: underline;
}

.rwp-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 1em;
}

.rwp-tag {
	padding: 2px 10px;
	font-size: 0.8em;
	background: var(--rwp-tag-bg);
	border-radius: 999px;
}

.rwp-card__description {
	margin: 0 0 1em;
	color: var(--rwp-muted);
}

/* ---------- Buttons (also used by the "Jump to Recipe" bar) ---------- */

.rwp-card__actions,
.rwp-jump {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 1.5em;
}

.rwp-card__actions {
	margin: 0;
}

.rwp-button,
.rwp-button:visited,
.rwp-button:hover {
	display: inline-block;
	padding: 8px 18px;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.3;
	color: var(--rwp-accent-text);
	text-decoration: none;
	background: var(--rwp-accent);
	border: 2px solid var(--rwp-accent);
	border-radius: 999px;
}

.rwp-button:hover,
.rwp-button:focus-visible {
	filter: brightness(0.9);
	color: var(--rwp-accent-text);
}

.rwp-button--ghost,
.rwp-button--ghost:visited,
.rwp-button--ghost:hover {
	color: var(--rwp-accent);
	background: transparent;
}

/* ---------- Times & yield ---------- */

.rwp-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 32px;
	margin: var(--rwp-gap) 0;
	padding: 14px 0;
	border-top: 1px solid var(--rwp-border);
	border-bottom: 1px solid var(--rwp-border);
}

.rwp-card__meta dt {
	font-size: 0.75em;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--rwp-muted);
}

.rwp-card__meta dd {
	margin: 0;
	font-weight: 600;
}

/* ---------- Ingredients & instructions ---------- */

.rwp-card__body {
	display: grid;
	gap: var(--rwp-gap);
}

.rwp-card__heading {
	margin: 0 0 0.6em;
	font-family: var(--rwp-font-heading);
	font-weight: var(--rwp-heading-weight);
	font-size: 1.25rem;
}

.rwp-card__group {
	margin: 1.2em 0 0.4em;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rwp-muted);
}

.rwp-ingredients {
	margin: 0;
	padding: 0;
	list-style: none;
}

.rwp-ingredient {
	padding: 7px 0;
	border-bottom: 1px dashed var(--rwp-border);
}

.rwp-ingredient__amount,
.rwp-ingredient__unit {
	font-weight: 700;
}

.rwp-ingredient__notes {
	color: var(--rwp-muted);
}

.rwp-steps {
	margin: 0;
	padding-left: 1.4em;
}

.rwp-step {
	margin: 0 0 0.9em;
	padding-left: 0.3em;
	line-height: 1.6;
}

.rwp-step::marker {
	font-weight: 700;
	color: var(--rwp-accent);
}

/* ---------- Notes & footer ---------- */

.rwp-card__notes {
	margin-top: var(--rwp-gap);
	padding: 16px 20px;
	background: var(--rwp-tag-bg);
	border-radius: calc(var(--rwp-radius) - 2px);
}

.rwp-card__notes p:last-child {
	margin-bottom: 0;
}

.rwp-card__footer {
	margin-top: var(--rwp-gap);
	font-size: 0.85em;
	color: var(--rwp-muted);
}

/* ---------- Servings control & US/Metric toggle ---------- */

/*
 * Without JavaScript, only the plain number shows. When recipe-card.js
 * runs it adds .rwp-js to the card, and these rules swap in the control.
 */
.rwp-servings-control {
	display: none;
}

.rwp-js .rwp-servings-static {
	display: none;
}

.rwp-js .rwp-servings-control {
	display: inline-flex;
	align-items: center;
	vertical-align: middle;
	margin-right: 4px;
	border: 1px solid var(--rwp-border);
	border-radius: 999px;
	overflow: hidden;
}

.rwp-servings-btn {
	width: 28px;
	height: 28px;
	padding: 0;
	font: inherit;
	font-size: 1rem;
	line-height: 1;
	color: var(--rwp-accent);
	background: transparent;
	border: 0;
	cursor: pointer;
}

.rwp-servings-btn:hover,
.rwp-servings-btn:focus-visible {
	background: var(--rwp-tag-bg);
}

.rwp-servings-input {
	width: 2.6em;
	height: 28px;
	padding: 0;
	font: inherit;
	font-weight: 600;
	text-align: center;
	color: inherit;
	background: transparent;
	border: 0;
	-moz-appearance: textfield; /* Hide the browser's own tiny arrows. */
	appearance: textfield;
}

.rwp-servings-input::-webkit-outer-spin-button,
.rwp-servings-input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

.rwp-card__ingredients-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin-bottom: 0.6em;
}

.rwp-card__ingredients-head .rwp-card__heading {
	margin: 0;
}

/* The [hidden] attribute must win over display:inline-flex below. */
.rwp-units[hidden] {
	display: none;
}

.rwp-units {
	display: inline-flex;
	padding: 2px;
	background: var(--rwp-tag-bg);
	border-radius: 999px;
}

.rwp-units button {
	padding: 3px 10px;
	font: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rwp-muted);
	background: transparent;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
}

.rwp-units button[aria-pressed="true"] {
	color: var(--rwp-accent-text);
	background: var(--rwp-accent);
}

/* ---------- Star ratings ---------- */

/*
 * Two layers of five stars: empty ones underneath, colored ones on top.
 * The top layer is cut to a width of rating × 20% (4.5 stars → 90%),
 * so partial stars need no images.
 */
.rwp-stars {
	position: relative;
	display: inline-block;
	font-size: 1.05em;
	line-height: 1;
	letter-spacing: 0.08em;
	white-space: nowrap;
	vertical-align: -0.1em;
}

.rwp-stars::before {
	content: "★★★★★";
	color: var(--rwp-star-empty);
}

.rwp-stars__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: calc(var(--rwp-rating, 0) * 20%);
	overflow: hidden;
}

.rwp-stars__fill::before {
	content: "★★★★★";
	color: var(--rwp-star);
}

.rwp-card__rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0 0 0.8em;
	font-size: 0.9em;
	color: var(--rwp-muted);
}

.rwp-card__rating a {
	color: inherit;
}

.rwp-card__rating .rwp-stars {
	font-size: 1.35em;
}

.rwp-review-rating {
	margin: 0 0 0.4em;
}

/* ---------- Review form star picker ---------- */

.rwp-rate {
	margin: 0 0 1em;
	padding: 0;
	border: 0;
}

.rwp-rate legend {
	margin-bottom: 4px;
	padding: 0;
	font-weight: 600;
}

.rwp-rate__stars {
	display: inline-flex;
	gap: 2px;
}

.rwp-rate__star {
	position: relative;
	padding: 0 2px;
	font-size: 2rem;
	line-height: 1;
	color: var(--rwp-star-empty);
	cursor: pointer;
	transition: color 0.1s, transform 0.1s;
}

/* Hide the radio circles but keep them usable by keyboard & screen readers. */
.rwp-rate__star input,
.rwp-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Light up the chosen star and every star before it.
   ":has(~ x)" means "has a later sibling that is x". */
.rwp-rate__star:has(input:checked),
.rwp-rate__star:has(~ .rwp-rate__star input:checked) {
	color: var(--rwp-star);
}

/* While hovering, preview instead: the hovered star and those before it. */
.rwp-rate__stars:hover .rwp-rate__star {
	color: var(--rwp-star-empty);
}

.rwp-rate__stars:hover .rwp-rate__star:hover,
.rwp-rate__stars:hover .rwp-rate__star:has(~ .rwp-rate__star:hover) {
	color: var(--rwp-star);
}

.rwp-rate__star:hover {
	transform: scale(1.12);
}

/* Keyboard focus ring. */
.rwp-rate__star:has(input:focus-visible) {
	outline: 2px solid currentColor;
	outline-offset: 2px;
	border-radius: 4px;
}

/* Replies don't carry ratings, so hide the picker when replying to a review. */
.comment .rwp-rate,
.wp-block-comment-template .rwp-rate {
	display: none;
}

/* ---------- Wider cards: side-by-side layouts ---------- */

@container rwp-card (min-width: 520px) {
	.rwp-card__header:has(.rwp-card__image) {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		align-items: center;
	}
}

@container rwp-card (min-width: 560px) {
	.rwp-card__body {
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: calc(var(--rwp-gap) * 1.5);
	}
}

/* ---------- Print ---------- */

@media print {
	.rwp-jump,
	.rwp-card__actions,
	.rwp-card__rating--empty,
	.rwp-units,
	.rwp-servings-control {
		display: none !important;
	}

	/* Paper gets the plain number (kept in sync with the control by the script). */
	.rwp-js .rwp-servings-static {
		display: inline;
	}

	.rwp-card {
		margin: 0;
		padding: 0;
		color: #000;
		background: none !important;
		border: 0;
		box-shadow: none;
	}

	.rwp-card__image img {
		max-height: 2.5in;
		width: auto;
	}

	.rwp-ingredient,
	.rwp-step {
		break-inside: avoid;
	}
}

/* Standalone print page (?rwp_print=ID) */
.rwp-print-page {
	max-width: 8in;
	margin: 0 auto;
	padding: 24px;
	font-family: Georgia, "Times New Roman", serif;
	color: #111;
}