/*
 * Stirred By Grace - single post header + sidebar polish.
 * Enqueued on singular views by novamira-sandbox/sbg-recipe-post.php.
 */

/* ---------- recipe post header ---------- */

/* Meal labels stay assigned (home page, archives, search) but are not shown
   above the title of a recipe post. */
.sbg-recipe-post .entry-header .entry-taxonomies {
	display: none;
}

/* Gold stars + average under the title. */
.sbg-title-rating {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 4px 0 10px 0;
	text-decoration: none !important;
	color: #5C5648;
	cursor: pointer;
}

.sbg-tr-stars {
	position: relative;
	display: inline-block;
	line-height: 0;
	white-space: nowrap;
}

.sbg-tr-stars svg {
	width: 17px;
	height: 17px;
	margin-right: 1px;
	fill: currentColor;
}

.sbg-tr-base {
	color: #D9D2C1;
}

.sbg-tr-fill {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: #C9962E;
}

.sbg-tr-avg {
	font-family: "Bricolage Grotesque", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	color: #211E19;
	font-variant-numeric: tabular-nums;
}

.sbg-title-rating.is-empty .sbg-tr-avg {
	font-size: 13px;
	font-weight: 500;
	color: #5C5648;
	transition: color .15s ease;
}

.sbg-title-rating.is-empty:hover .sbg-tr-avg,
.sbg-title-rating.is-empty:focus-visible .sbg-tr-avg {
	color: #4B5A2E;
}

/* The swash under the title sits below the stars, not between. */
.sbg-recipe-post h1.entry-title + .sbg-title-rating {
	margin-top: 2px;
}

/* ---------- sidebar ---------- */

/* Recent Recipes: photo and title are both links, with a hand cursor and a
   colour change on hover. */
#secondary .wp-block-latest-posts__featured-image a,
#secondary .wp-block-latest-posts__post-title {
	cursor: pointer;
}

#secondary .wp-block-latest-posts__featured-image img {
	transition: transform .35s ease, opacity .2s ease;
}

#secondary .wp-block-latest-posts__featured-image {
	overflow: hidden;
	border-radius: 12px;
}

#secondary .wp-block-latest-posts li:hover .wp-block-latest-posts__featured-image img {
	transform: scale(1.05);
}

#secondary .wp-block-latest-posts__post-title,
#secondary .wp-block-kadence-posts .entry-title a {
	text-decoration: none !important;
	transition: color .15s ease;
}

#secondary .wp-block-latest-posts li:hover .wp-block-latest-posts__post-title,
#secondary .wp-block-latest-posts__post-title:focus-visible,
#secondary .wp-block-kadence-posts .entry-title a:hover,
#secondary .wp-block-kadence-posts .entry-title a:focus-visible {
	color: #6B7550 !important;
	text-decoration: none !important;
}

/* For the Soul, Too: colour change only, never an underline. */
#secondary .wp-block-kadence-posts a,
#secondary .wp-block-kadence-posts a:hover {
	text-decoration: none !important;
}

/* Browse by Category chips: same hover as the recipe card's Share button
   (olive deepening to #303520). The background is inline on each chip, so
   the hover needs !important. */
#secondary .wp-block-button__link {
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

#secondary .wp-block-button__link:hover,
#secondary .wp-block-button__link:focus-visible {
	background-color: #303520 !important;
	color: #F1EDE3 !important;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	#secondary .wp-block-latest-posts__featured-image img,
	#secondary .wp-block-button__link,
	#secondary .wp-block-latest-posts__post-title,
	#secondary .wp-block-kadence-posts .entry-title a {
		transition: none;
	}

	#secondary .wp-block-latest-posts li:hover .wp-block-latest-posts__featured-image img {
		transform: none;
	}
}

/* ---------- 2026-10-21 round 2 ---------- */

/* Recent Recipes: two equal 4:5 cards, photo centred over its title.
   core/latest-posts floats an aligncenter figure, which pushed the photo
   off to the right of its column. */
#secondary .wp-block-latest-posts.is-grid {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}
#secondary .wp-block-latest-posts.is-grid > li {
	width: auto !important;
	margin: 0 !important;
	text-align: center;
}
#secondary .wp-block-latest-posts__featured-image,
#secondary .wp-block-latest-posts__featured-image.aligncenter {
	display: block !important;
	float: none !important;
	width: 100% !important;
	margin: 0 0 10px 0 !important;
}
#secondary .wp-block-latest-posts__featured-image a {
	display: block;
}
#secondary .wp-block-latest-posts__featured-image img {
	display: block;
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	margin: 0 !important;
}
#secondary .wp-block-latest-posts__post-title {
	display: block;
	line-height: 1.3;
}

/* More {Meal} Recipes under the card. */
.sbg-related-card {
	display: block;
	transition: transform .3s cubic-bezier(.34, 1.2, .5, 1);
}
.sbg-related-thumb {
	display: block;
	overflow: hidden;
	border-radius: 10px;
}
.sbg-related-thumb img {
	transition: transform .5s ease;
}
.sbg-related-title {
	transition: color .15s ease;
}
.sbg-related-card:hover,
.sbg-related-card:focus-visible {
	transform: translateY(-4px);
}
.sbg-related-card:hover .sbg-related-thumb img,
.sbg-related-card:focus-visible .sbg-related-thumb img {
	transform: scale(1.06);
}
.sbg-related-card:hover .sbg-related-title,
.sbg-related-card:focus-visible .sbg-related-title {
	color: #4B5A2E !important;
}

/* Cards rise in as the row scrolls into view, one after another. Browsers
   without scroll-driven animation simply show them in place. */
@supports (animation-timeline: view()) {
	@keyframes sbg-rise {
		from { opacity: 0; translate: 0 18px; }
		to   { opacity: 1; translate: 0 0; }
	}
	.sbg-related-card {
		animation: sbg-rise linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 70%;
	}
	.sbg-related-card:nth-child(2) { animation-range: entry 10% entry 80%; }
	.sbg-related-card:nth-child(3) { animation-range: entry 20% entry 90%; }
}

@media (prefers-reduced-motion: reduce) {
	.sbg-related-card,
	.sbg-related-thumb img,
	.sbg-related-title {
		transition: none;
		animation: none !important;
	}
	.sbg-related-card:hover,
	.sbg-related-card:hover .sbg-related-thumb img {
		transform: none;
	}
}
/* Kadence builds the grid figure as a 3:2 padding-bottom box with the photo
   pinned inside it; release that so the 4:5 photo sets the height. */
#secondary .wp-block-latest-posts.is-grid .wp-block-latest-posts__featured-image { height: auto !important; padding-bottom: 0 !important; border-radius: 12px; }
#secondary .wp-block-latest-posts.is-grid .wp-block-latest-posts__featured-image img { position: static !important; }