/**
 * Recipe Block Styles
 *
 * Custom styles for recipe-specific blocks and patterns.
 * Following Chang Cookbook brand guidelines.
 */

/* =============================================
   HEADER LOGO - Extended Beyond Header
   ============================================= */

/* Allow logo to overflow all header containers */
header,
header .wp-block-group,
header .wp-block-group .wp-block-group {
	overflow: visible !important;
}

/* Constrain header height */
header > .wp-block-group {
	max-height: 120px;
}

/* Logo wrapper - establish positioning context */
.chang-header-logo {
	position: relative;
	z-index: 1000;
}

/* Logo image - extend into dark hero */
.chang-header-logo img {
	position: relative;
	z-index: 1000;
	/* Move logo up 50px from previous position */
	transform: translateY(5px);
	filter: drop-shadow(0 6px 20px rgba(74, 52, 41, 0.3));
	transition: transform 0.3s ease, filter 0.3s ease;
}

/* Hover effect */
.chang-header-logo:hover img {
	transform: translateY(5px) scale(1.05);
	filter: drop-shadow(0 8px 24px rgba(74, 52, 41, 0.35));
}

/* Pull hero section up to meet the logo extension */
header + main .wp-block-cover:first-child,
header + .wp-block-group .wp-block-cover:first-child {
	margin-top: -20px;
	padding-top: calc(var(--wp--preset--spacing--70) + 20px);
}

/* Recipe Card - Equal Height Grid */
.wp-block-post-template {
	align-items: stretch !important;
}

.wp-block-post-template > .wp-block-post {
	height: 100%;
}

/* Recipe Card Hover Effects */
.recipe-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	box-shadow: 0 2px 8px rgba(74, 52, 41, 0.08);
}

.recipe-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(74, 52, 41, 0.15);
}

/* Card content section grows to fill space */
.recipe-card > .wp-block-group {
	flex: 1;
	display: flex;
	flex-direction: column;
}

/* Push excerpt to bottom, title stays at top */
.recipe-card .wp-block-post-excerpt {
	margin-top: auto;
}

.recipe-card img {
	transition: transform 0.3s ease;
}

.recipe-card:hover img {
	transform: scale(1.02);
}

/* Difficulty Badges */
.recipe-difficulty-badge a {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 100px;
	text-decoration: none;
	font-weight: 600;
	letter-spacing: 0.05em;
}

/* Easy - Green */
.recipe-difficulty-badge a[href*="easy"] {
	background-color: #dcfce7;
	color: #166534;
}

/* Medium - Orange */
.recipe-difficulty-badge a[href*="medium"] {
	background-color: #ffedd5;
	color: #c2410c;
}

/* Hard - Brown */
.recipe-difficulty-badge a[href*="hard"] {
	background-color: #f5f1eb;
	color: #4a3429;
}

/* Recipe Category Tags */
.recipe-category-tag {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.recipe-category-tag a {
	color: var(--wp--preset--color--chang-brown-600);
	text-decoration: none;
	font-size: 0.75rem;
	transition: color 0.2s ease;
}

.recipe-category-tag a:hover {
	color: var(--wp--preset--color--chang-orange-400);
}

.recipe-category-tag a:focus {
	outline: 2px solid var(--wp--preset--color--chang-orange-400);
	outline-offset: 2px;
	border-radius: 2px;
}

/* =============================================
   ACCESSIBILITY: Focus States
   ============================================= */

/* Global focus styles for recipe components */
.recipe-card a:focus,
.recipe-difficulty-badge a:focus {
	outline: 2px solid var(--wp--preset--color--chang-orange-400);
	outline-offset: 2px;
}

/* Keyboard navigation visibility */
.recipe-card:focus-within {
	box-shadow: 0 0 0 3px rgba(255, 153, 102, 0.4);
}

/* Skip to content link for recipe pages */
.skip-to-recipe-content {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.skip-to-recipe-content:focus {
	position: fixed;
	top: 10px;
	left: 10px;
	width: auto;
	height: auto;
	padding: 1rem;
	background: var(--wp--preset--color--chang-orange-400);
	color: var(--wp--preset--color--chang-brown-900);
	font-weight: 600;
	z-index: 9999;
	border-radius: 8px;
}

/* Recipe Time Grid */
.recipe-time-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

@media (max-width: 600px) {
	.recipe-time-grid {
		flex-direction: column;
	}

	.recipe-time-grid .wp-block-separator {
		display: none;
	}
}

/* Ingredient List Styling */
.recipe-ingredients-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.recipe-ingredients-list li {
	display: flex;
	align-items: flex-start;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--wp--preset--color--chang-neutral-200);
	color: var(--wp--preset--color--chang-brown-800);
	font-size: 1rem;
	line-height: 1.6;
}

.recipe-ingredients-list li:last-child {
	border-bottom: none;
}

.recipe-ingredients-list li::before {
	content: "";
	width: 20px;
	height: 20px;
	min-width: 20px;
	border: 2px solid var(--wp--preset--color--chang-orange-400);
	border-radius: 4px;
	margin-right: 12px;
	margin-top: 2px;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Interactive checkbox effect on hover */
.recipe-ingredients-list li:hover::before {
	background-color: rgba(255, 153, 102, 0.1);
}

/* Ingredients Box - Warm Gradient for Brand Cohesion */
.recipe-ingredients-box {
	background: linear-gradient(to bottom right, #ffffff 0%, #f5f1eb 100%) !important;
	border: 1px solid var(--wp--preset--color--chang-neutral-200);
	box-shadow: 0 10px 25px -5px rgba(74, 52, 41, 0.1), 0 4px 10px -5px rgba(74, 52, 41, 0.04);
}

/* Sticky Ingredients on Desktop - Stay visible while scrolling instructions */
@media (min-width: 901px) {
	.recipe-ingredients-box {
		position: sticky;
		top: 2rem;
		max-height: calc(100vh - 4rem);
		overflow-y: auto;
		align-self: flex-start;
	}

	/* Custom scrollbar for long ingredient lists */
	.recipe-ingredients-box::-webkit-scrollbar {
		width: 6px;
	}

	.recipe-ingredients-box::-webkit-scrollbar-track {
		background: var(--wp--preset--color--chang-neutral-100);
		border-radius: 3px;
	}

	.recipe-ingredients-box::-webkit-scrollbar-thumb {
		background: var(--wp--preset--color--chang-orange-400);
		border-radius: 3px;
	}

	.recipe-ingredients-box::-webkit-scrollbar-thumb:hover {
		background: var(--wp--preset--color--chang-orange-600);
	}
}

/* Stack columns earlier for tablets (better UX while cooking) */
@media (max-width: 900px) {
	.wp-block-columns:has(.recipe-ingredients-box) {
		flex-direction: column;
	}

	.wp-block-columns:has(.recipe-ingredients-box) > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Instructions Box - Matching Warm Gradient */
.recipe-instructions-box {
	background: linear-gradient(to bottom right, #ffffff 0%, #f5f1eb 100%);
	border: 1px solid var(--wp--preset--color--chang-neutral-200);
	border-radius: 16px;
	padding: 2rem;
	box-shadow: 0 10px 25px -5px rgba(74, 52, 41, 0.1), 0 4px 10px -5px rgba(74, 52, 41, 0.04);
}

/* Section Headings - With Brand Accent Border */
.recipe-section-heading {
	font-size: 1.5rem !important;
	font-weight: 700;
	color: var(--wp--preset--color--chang-brown-900);
	margin-bottom: 1.25rem;
	letter-spacing: -0.01em;
	padding-left: 1rem;
	border-left: 4px solid var(--wp--preset--color--chang-orange-400);
}

/* Recipe Content Section Background - Warm Cream */
.recipe-content-section {
	background-color: var(--wp--preset--color--chang-neutral-50);
}

/* Instructions List Styling */
.recipe-instructions-list ol {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: step-counter;
}

.recipe-instructions-list li {
	display: flex;
	align-items: flex-start;
	padding: 1.25rem 0;
	border-bottom: 1px solid var(--wp--preset--color--chang-neutral-200);
	counter-increment: step-counter;
	color: var(--wp--preset--color--chang-brown-800);
	font-size: 1rem;
	line-height: 1.7;
}

.recipe-instructions-list li:last-child {
	border-bottom: none;
}

.recipe-instructions-list li::before {
	content: counter(step-counter);
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	background-color: var(--wp--preset--color--chang-orange-400);
	color: var(--wp--preset--color--chang-brown-900);
	font-weight: 700;
	font-size: 1rem;
	border-radius: 50%;
	margin-right: 16px;
	flex-shrink: 0;
}

/* Highlight current step on hover */
.recipe-instructions-list li:hover {
	background-color: rgba(255, 153, 102, 0.05);
	margin-left: -1rem;
	margin-right: -1rem;
	padding-left: 1rem;
	padding-right: 1rem;
	border-radius: 8px;
}

/* Nutrition Grid */
.recipe-nutrition-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}

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

.nutrition-item {
	text-align: center;
	padding: 1rem;
	background-color: var(--wp--preset--color--chang-neutral-50);
	border-radius: 12px;
}

.nutrition-value {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--wp--preset--color--chang-brown-900);
}

.nutrition-label {
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--chang-brown-600);
	margin-top: 4px;
}

/* Featured Recipe Badge */
.featured-recipe-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: linear-gradient(135deg, #ff9966 0%, #e6824e 100%);
	color: #4a3429;
	padding: 6px 16px;
	border-radius: 100px;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	z-index: 1;
}

/* Recipe Rating Stars */
.recipe-rating {
	display: flex;
	align-items: center;
	gap: 4px;
}

.recipe-rating .star {
	color: var(--wp--preset--color--chang-orange-400);
}

.recipe-rating .star-empty {
	color: var(--wp--preset--color--chang-neutral-100);
}

/* =============================================
   MOBILE RESPONSIVENESS
   ============================================= */

@media (max-width: 782px) {
	/* Stack recipe columns on mobile */
	.wp-block-columns:has(.recipe-ingredients-box) {
		flex-direction: column;
	}

	.wp-block-columns:has(.recipe-ingredients-box) > .wp-block-column {
		flex-basis: 100% !important;
	}

	/* Ensure touch targets are at least 44px */
	.recipe-difficulty-badge a,
	.recipe-category-tag a {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Improve mobile typography */
	.recipe-section-heading {
		font-size: 1.375rem !important;
	}

	/* Instruction step numbers - slightly smaller on mobile */
	.recipe-instructions-list li::before {
		min-width: 32px;
		height: 32px;
		font-size: 0.875rem;
	}

	/* Better spacing on mobile */
	.recipe-instructions-list li {
		padding: 1rem 0;
	}

	.recipe-instructions-list li:hover {
		margin-left: 0;
		margin-right: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

/* Extra small screens */
@media (max-width: 480px) {
	.recipe-card {
		margin-left: -0.5rem;
		margin-right: -0.5rem;
		border-radius: 12px;
	}

	.recipe-time-grid {
		gap: 0.5rem;
	}

	.nutrition-item {
		padding: 0.75rem;
	}

	.nutrition-value {
		font-size: 1.25rem;
	}
}

/* Print Styles */
@media print {
	.recipe-card,
	.recipe-card:hover {
		box-shadow: none;
		transform: none;
	}

	.recipe-ingredients-list li::before {
		border-color: #000;
	}

	.recipe-instructions-list li::before {
		background-color: #ccc;
		color: #000;
	}

	/* Hide non-essential elements for print */
	.recipe-difficulty-badge,
	.recipe-rating {
		display: none;
	}
}