/*
 * assets/css/single-recipe.css
 * Template-specific styles for single-recipe.php only (header,
 * metadata strip, ingredients checklist, instructions, notes block,
 * sticky CTA bar, related recipes grid). Enqueued conditionally via
 * idia_enqueue_single_recipe_assets() (is_singular('recipe')).
 *
 * Pure CSS3 only. Consumes global.css variables exclusively.
 */

/* ==========================================================================
   Recipe header
   ========================================================================== */

.idia-recipe-header {
	padding-top: var(--space-lg);
	padding-bottom: var(--space-md);
}

.idia-recipe-header-top {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	margin-bottom: var(--space-xs);
}

.idia-article-category-link {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--idia-color-dark-blue);
}

.idia-recipe-title {
	font-size: 2.25rem;
	margin-bottom: var(--space-xs);
}

.idia-recipe-subtitle {
	font-size: 1.125rem;
	font-weight: var(--font-weight-regular);
	color: var(--idia-color-text-muted);
	text-transform: none;
}

/* ==========================================================================
   Difficulty pill (shared with archive-recipe.css conventions)
   ========================================================================== */

.idia-difficulty-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--space-xxs) var(--space-sm);
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: var(--font-weight-bold);
	text-transform: uppercase;
	letter-spacing: var(--letter-spacing-wide);
	color: var(--idia-color-dark-blue) !important;
}

.idia-difficulty-pill--easy { background-color: var(--idia-color-pastel-green); }
.idia-difficulty-pill--medium { background-color: var(--idia-color-pastel-yellow); }
.idia-difficulty-pill--hard { background-color: var(--idia-color-pastel-pink); }
.idia-difficulty-pill--default { background-color: var(--idia-color-pastel-blue); }

/* ==========================================================================
   Section dividers
   ========================================================================== */

.idia-section-divider {
	max-width: var(--idia-max-width);
	margin: var(--space-lg) auto;
	padding: 0 var(--space-sm);
}

.idia-section-divider img {
	width: 100%;
	max-height: 60px;
	object-fit: contain;
}

/* ==========================================================================
   Featured image
   ========================================================================== */

.idia-recipe-featured-image {
	margin-bottom: var(--space-lg);
}

.idia-recipe-featured-figure {
	max-height: 520px;
}

/* ==========================================================================
   Metadata strip
   ========================================================================== */

.idia-recipe-meta-strip {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
	padding: var(--space-md) 0;
	border-top: 1px solid var(--idia-color-pastel-blue);
	border-bottom: 1px solid var(--idia-color-pastel-blue);
	margin-bottom: var(--space-lg);
}

.idia-meta-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.idia-stat-label {
	color: var(--idia-color-text-muted);
	text-transform: uppercase;
	font-size: 0.75rem;
	letter-spacing: var(--letter-spacing-wide);
}

.idia-stat-value {
	color: var(--idia-color-dark-blue);
	font-weight: var(--font-weight-bold);
	font-size: 1rem;
}

.idia-meta-item-rating {
	flex-direction: row;
	align-items: center;
}

.idia-meta-item-rating .idia-icon-svg {
	width: 1.1rem;
	height: 1.1rem;
	color: var(--idia-color-dark-blue);
}

/* ==========================================================================
   Recipe section heading (shared)
   ========================================================================== */

.idia-recipe-section-heading {
	margin-bottom: var(--space-md);
}

/* ==========================================================================
   Ingredients checklist
   ==========================================================================
   Pure CSS3 checkbox styling: the native input is visually hidden but
   still focusable/operable, a custom box is drawn via the label's
   ::before, and the checked state fills with dark-blue (never pastel +
   light text, since the checkmark itself is white on a dark-blue fill).
   ========================================================================== */

.idia-recipe-ingredients {
	margin-bottom: var(--space-lg);
}

.idia-ingredients-checklist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

.idia-ingredient-item {
	margin: 0;
	position: relative;
}

.idia-ingredient-checkbox {
	position: absolute;
	opacity: 0;
	width: 1.5rem;
	height: 1.5rem;
	margin: 0;
	cursor: pointer;
}

.idia-ingredient-item label {
	display: flex;
	align-items: flex-start;
	gap: var(--space-sm);
	cursor: pointer;
	color: var(--idia-color-text);
	padding: var(--space-xs);
	border-radius: 4px;
}

.idia-ingredient-item label::before {
	content: "";
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	margin-top: 0.1rem;
	border: 2px solid var(--idia-color-dark-blue);
	border-radius: 4px;
	background-color: var(--idia-color-white);
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.idia-ingredient-checkbox:checked + label::before {
	background-color: var(--idia-color-dark-blue);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 0.85rem;
}

.idia-ingredient-checkbox:checked + label {
	color: var(--idia-color-text-muted);
	text-decoration: line-through;
}

.idia-ingredient-checkbox:focus-visible + label::before {
	outline: 2px solid var(--idia-color-focus-ring);
	outline-offset: 2px;
}

/* ==========================================================================
   Step-by-step instructions
   ==========================================================================
   Reuses .is-style-recipe-steps from the Gutenberg brand-integration
   sprint (numbered circular markers) so native recipe steps and any
   editor-authored "Recipe steps" list block look identical.
   ========================================================================== */

.idia-recipe-instructions {
	margin-bottom: var(--space-lg);
}

.idia-instructions-list li {
	color: var(--idia-color-text);
}

/* ==========================================================================
   Notes / tips block
   ========================================================================== */

.idia-recipe-notes {
	padding: var(--space-md);
	border-radius: 8px;
	margin-bottom: var(--space-lg);
}

.idia-recipe-notes .idia-recipe-section-heading {
	margin-bottom: var(--space-xs);
}

.idia-recipe-notes p {
	margin-bottom: 0;
}

/* ==========================================================================
   Sticky CTA bar
   ==========================================================================
   Fixed to the bottom on mobile/tablet only (matches the front-page/
   single-article breakpoint convention); reverts to normal static flow
   on desktop where the primary CTA is reachable without a sticky bar.
   ========================================================================== */

.idia-sticky-cta-bar {
	display: flex;
	gap: var(--space-xs);
	padding: var(--space-sm);
	background-color: var(--idia-color-white);
	box-shadow: var(--shadow-elevated);
	border-radius: 8px;
	margin-bottom: var(--space-lg);
}

.idia-sticky-cta-bar .idia-button {
	flex: 1;
	justify-content: center;
	font-size: 0.8125rem;
	padding: var(--space-xs) var(--space-sm);
}

@media (max-width: 1024px) {
	.idia-sticky-cta-bar {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100;
		border-radius: 0;
		margin-bottom: 0;
		padding: var(--space-xs) var(--space-sm);
		box-shadow: 0 -2px 8px rgba(13, 34, 64, 0.15);
	}
}

/* ==========================================================================
   Related recipes grid (shared convention with archive-recipe.css)
   ========================================================================== */

.idia-related-recipes {
	padding: var(--space-lg) 0 calc(var(--space-lg) + 4.5rem);
}

.idia-recipe-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.idia-recipe-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.idia-recipe-card-body {
	padding: var(--space-md);
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.idia-recipe-card-title {
	margin: 0;
	font-size: 1.25rem;
	text-transform: none;
}

.idia-recipe-card-title a {
	text-decoration: none;
}

.idia-recipe-card-title a:hover {
	text-decoration: underline;
}

.idia-recipe-cta {
	align-self: flex-start;
	margin-top: var(--space-xs);
}

.idia-section-heading {
	text-align: center;
	margin-bottom: var(--space-lg);
}

/* ==========================================================================
   Responsive breakpoints
   ========================================================================== */

@media (max-width: 1024px) {
	.idia-recipe-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.idia-recipe-title {
		font-size: 1.75rem;
	}

	.idia-recipe-meta-strip {
		gap: var(--space-md);
	}
}

@media (max-width: 600px) {
	.idia-recipe-grid {
		grid-template-columns: 1fr;
	}

	.idia-sticky-cta-bar .idia-button {
		font-size: 0.75rem;
	}
}

/* Printing: hide non-essential chrome, keep ingredients/instructions readable */
@media print {
	.idia-sticky-cta-bar,
	.idia-section-divider,
	.idia-related-recipes {
		display: none !important;
	}
}