/*
 * Dressing for the recipe plugin's blocks.
 *
 * The plugin ships structural CSS only — it deliberately knows nothing about
 * colour or type. Everything here is the theme's opinion, expressed through
 * theme.json's custom properties so changing the palette in the Site Editor
 * changes these too.
 */

/* ------------------------------------------------------------ recipe details */

.vn-recipe-meta {
	margin-block: var(--wp--preset--spacing--50);
	padding-block: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--rule);
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.vn-recipe-meta__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--50);
	margin: 0;
	text-align: center;
}

.vn-recipe-meta__label {
	font-size: 0.75rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-soft);
}

.vn-recipe-meta__value {
	margin: 0.15rem 0 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

/* ---------------------------------------------------------------- ingredients */

.vn-ingredients {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40)
		calc(var(--wp--preset--spacing--40) - 0.5rem);
	background: var(--wp--preset--color--parchment-deep);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 6px;
}

.vn-ingredients__title {
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: 1.375rem;
}

.vn-ingredients__group-heading {
	margin-top: var(--wp--preset--spacing--40);
	margin-bottom: var(--wp--preset--spacing--20);
	font-size: 0.8125rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
}

.vn-ingredients__item {
	border-bottom: 1px solid var(--wp--preset--color--rule);
}

.vn-ingredients__item:last-child {
	border-bottom: 0;
}

.vn-ingredients__qty,
.vn-ingredients__unit {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
}

.vn-ingredients__note {
	color: var(--wp--preset--color--ink-soft);
	font-style: italic;
}

/* --------------------------------------------------------------------- method */

.vn-method__title {
	margin-bottom: var(--wp--preset--spacing--30);
}

.vn-method__group-heading {
	margin-top: var(--wp--preset--spacing--50);
	margin-bottom: var(--wp--preset--spacing--30);
	font-size: 0.8125rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--green);
}

.vn-method__list {
	list-style: none;
	padding-left: 0;
	counter-reset: none;
}

.vn-method__step {
	position: relative;
	padding-left: 3rem;
	margin-bottom: var(--wp--preset--spacing--40);
}

/*
 * The step number comes from the list item's own value attribute, which the
 * plugin sets so numbering runs unbroken across method groups. Using the
 * attribute rather than a CSS counter is what preserves that: a counter would
 * restart at each group.
 */
.vn-method__step::before {
	content: attr(value);
	position: absolute;
	left: 0;
	top: -0.15rem;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--parchment);
	font-family: var(--wp--preset--font-family--display);
	font-size: 0.9375rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.vn-method__text {
	/* Method steps are typed in a textarea; honour the line breaks. */
	white-space: pre-line;
}

.vn-method__image {
	border-radius: 6px;
}

/* ---------------------------------------------------------------------- notes */

.vn-notes {
	margin-block: var(--wp--preset--spacing--50);
	padding: var(--wp--preset--spacing--40);
	background: var(--wp--preset--color--parchment-deep);
	border: 0;
	border-left: 3px solid var(--wp--preset--color--red);
	border-radius: 0 6px 6px 0;
}

.vn-notes__title {
	margin-top: 0;
	font-size: 1.125rem;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--red);
}

/* ------------------------------------------------------------------ furniture */

.wp-block-site-title a {
	text-decoration: none;
}

/* Recipe cards on the archive and front page. */
.wp-block-post-featured-image img {
	border-radius: 6px;
}

.wp-block-post-title a {
	text-decoration: none;
}

.wp-block-post-title a:hover {
	text-decoration: underline;
}

@media (min-width: 782px) {
	.vn-ingredients {
		padding: var(--wp--preset--spacing--50);
	}
}