/**
 * CJ's Brew & BBQ - Recipe Detail Page Styles
 * Implements design-system.md tokens for single recipe view
 * Reference: docs/design-system.md (CANON)
 */

@import url('brand-colors.css');

/* =======================================
   RECIPE DETAIL CONTAINER
   ======================================= */

.cjbb-recipe-detail-container {
	max-width: 1200px;
	margin: 0 auto;
	padding: var(--space-6);
	font-family: var(--font-body);
	color: var(--text-primary);
	display: grid;
	grid-template-columns: 1fr 3fr;
	gap: var(--space-8);
}

/* =======================================
   HERO SECTION
   ======================================= */

.recipe-detail-hero {
	position: relative;
	width: 100%;
	height: 600px;
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 0;
	grid-column: 1 / -1;
	border: 1px solid var(--border-subtle);
}

.recipe-detail-hero-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recipe-detail-hero-placeholder {
	width: 100%;
	height: 100%;
	background: var(--bg-secondary);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: var(--text-tertiary);
	font-size: var(--text-lg);
	gap: var(--space-2);
}

.recipe-detail-hero-placeholder-icon {
	font-size: 64px;
	opacity: 0.5;
}

.recipe-detail-hero-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: var(--space-8) var(--space-6);
	background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 100%);
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.recipe-detail-title {
	font-family: var(--font-heading);
	font-size: 4.635rem;
	font-weight: var(--font-semibold);
	color: var(--neutral-000);
	margin: 0;
	line-height: var(--leading-normal);
	display: block;
}

.recipe-title-accent {
	color: var(--brand-primary);
	font-weight: var(--font-semibold);
}

.recipe-detail-badges {
	display: flex;
	gap: var(--space-3);
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
}

.recipe-badge {
	display: inline-flex;
	align-items: center;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	white-space: nowrap;
	border: 1px solid transparent;
}

.recipe-badge-primary {
	background: #1A1A1A;
	color: var(--neutral-000);
	border-color: #3a3a3a;
}

.recipe-badge-neutral {
	background: #1A1A1A;
	color: var(--neutral-000);
	border-color: #3a3a3a;
}

/* Hero overlay badge overrides - need !important to override recipe-profile.css */
.recipe-detail-hero-overlay .recipe-badge-primary {
	background: #1A1A1A !important;
	color: var(--neutral-000) !important;
	border: 1px solid #3a3a3a !important;
}

.recipe-detail-hero-overlay .recipe-badge-neutral {
	background: #1A1A1A !important;
	color: var(--neutral-000) !important;
	border: 1px solid #3a3a3a !important;
}

/* Dark mode hero overlay badge overrides */
html.theme-dark .recipe-detail-hero-overlay .recipe-badge-primary {
	background: #1A1A1A !important;
	color: var(--neutral-000) !important;
	border: 1px solid #3a3a3a !important;
}

html.theme-dark .recipe-detail-hero-overlay .recipe-badge-neutral {
	background: #1A1A1A !important;
	color: var(--neutral-000) !important;
	border: 1px solid #3a3a3a !important;
}

/* Hero overlay difficulty badges - match dark mode neon styles */
.recipe-detail-hero-overlay .recipe-badge-difficulty-beginner {
	background: var(--neon-cyan-bg) !important;
	color: var(--neon-cyan) !important;
	border: 2px solid var(--neon-cyan) !important;
	font-weight: var(--font-semibold);
}

.recipe-detail-hero-overlay .recipe-badge-difficulty-intermediate {
	background: var(--neon-gold-bg) !important;
	color: var(--neon-gold) !important;
	border: 2px solid var(--neon-gold) !important;
	font-weight: var(--font-semibold);
}

.recipe-detail-hero-overlay .recipe-badge-difficulty-advanced {
	background: var(--neon-coral-bg) !important;
	color: var(--neon-coral) !important;
	border: 2px solid var(--neon-coral) !important;
	font-weight: var(--font-semibold);
}

.recipe-badge-difficulty {
	background: rgba(0, 0, 0, 0.6);
	color: var(--neutral-000);
	border-color: var(--brand-primary);
}

.recipe-badge-difficulty-beginner {
	background: rgba(0, 0, 0, 0.6);
	color: var(--neutral-000);
	border-color: #22c55e;
}

.recipe-badge-difficulty-intermediate {
	background: rgba(0, 0, 0, 0.6);
	color: var(--neutral-000);
	border-color: #fbbf24;
}

.recipe-badge-difficulty-advanced {
	background: rgba(0, 0, 0, 0.6);
	color: var(--neutral-000);
	border-color: #ef4444;
}

/* =======================================
   FAVOURITE STAR OVERLAY (Hero Top-Right)
   ======================================= */

/* Favourite Star Overlay Button (Toggleable Icon Button - design-system.md:247-436) */
.cjbb-favourite-star-overlay {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	z-index: 20;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border-radius: 50%;
	background: color-mix(in srgb, var(--neutral-900) 60%, transparent);
	border: 2px solid var(--neutral-000);
	color: var(--neutral-000);
	cursor: pointer;
	transition: all 200ms;
	backdrop-filter: blur(4px);
}

.cjbb-favourite-star-overlay:hover {
	background: color-mix(in srgb, var(--neutral-900) 80%, transparent);
	border-color: var(--brand-primary);
	transform: scale(1.1);
}

.cjbb-favourite-star-overlay.active {
	background: color-mix(in srgb, var(--brand-primary) 90%, transparent);
	border-color: var(--brand-primary);
	color: var(--neutral-000);
}


/* =======================================
   INFO GRID
   ======================================= */

.recipe-detail-info-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-4);
	padding: 0 0 var(--space-6) 0;
	background: var(--bg-primary);
	border-radius: var(--radius-md);
	margin-bottom: 0;
	grid-column: 1 / -1;
}

.recipe-detail-info-item {
	text-align: center;
	padding: var(--space-3);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-sm);
	background-color: var(--bg-secondary);
}

.recipe-detail-info-label {
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-1);
}

.recipe-detail-info-value {
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	color: var(--text-primary);
}

.recipe-detail-info-value a {
	color: var(--brand-primary);
	text-decoration: underline;
	transition: color 200ms;
}

.recipe-detail-info-value a:hover {
	color: var(--brand-primary-dark);
	text-decoration: underline;
}

.recipe-detail-info-value a:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* =======================================
   TWO-COLUMN LAYOUT
   ======================================= */

.recipe-detail-content-wrapper {
	display: contents;
}

.recipe-detail-main {
	display: contents;
}

.recipe-detail-sidebar {
	grid-column: 2;
	grid-row: 6;
	display: flex;
	flex-direction: column;
	gap: 16px;
	align-items: flex-start;
}

/* =======================================
   SECTIONS (Cards)
   ======================================= */

.recipe-detail-section {
	background: var(--bg-secondary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: 18px;
	box-shadow: var(--shadow-sm);
}

/* LEFT COLUMN (25%): Sausage Details */
.recipe-detail-section:has(.recipe-detail-sausage-grid) {
	grid-column: 1;
	grid-row: 3;
	background: var(--bg-secondary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: 18px;
	box-shadow: var(--shadow-sm);
}

/* Sausage section title with header divider */
.recipe-detail-section:has(.recipe-detail-sausage-grid) .recipe-detail-section-title {
	border-bottom: 1px solid var(--border-subtle);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-4);
}

/* LEFT COLUMN (25%): Ingredients */
.recipe-detail-section:has(.recipe-detail-ingredients-list) {
	grid-column: 1;
	grid-row: 4;
}

/* When Sausage Details is not available, move Ingredients up to row 3 */
.cjbb-recipe-detail-container:not(:has(.recipe-detail-sausage-grid)) .recipe-detail-section:has(.recipe-detail-ingredients-list) {
	grid-row: 3;
}

/* RIGHT COLUMN (75%): About This Recipe */
.recipe-detail-section:has(.recipe-detail-description:not(.recipe-detail-ingredients-list)) {
	grid-column: 2;
	grid-row: 3;
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
}

/* RIGHT COLUMN (75%): Instructions */
.recipe-detail-section:has(.recipe-detail-instructions-list) {
	grid-column: 2;
	grid-row: 4;
}

/* FULL-WIDTH: Photos Gallery */
.recipe-detail-section:has(.recipe-detail-gallery) {
	grid-column: 1 / -1;
	grid-row: 7;
}

.recipe-detail-section-title {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: var(--font-semibold);
	color: var(--text-primary);
	margin: 0 0 var(--space-4) 0;
	line-height: var(--leading-tight);
}

/* Add orange pipe before "About This Recipe" title */
.recipe-detail-section:has(.recipe-detail-description:not(.recipe-detail-ingredients-list)) .recipe-detail-section-title {
	font-size: calc(var(--text-2xl) * 1.5);
}

.recipe-detail-section:has(.recipe-detail-description:not(.recipe-detail-ingredients-list)) .recipe-detail-section-title::before {
	content: "| ";
	color: var(--brand-primary);
	margin-right: var(--space-2);
}

.recipe-detail-description {
	font-size: var(--text-base);
	font-family: var(--font-body);
	color: var(--text-secondary);
	line-height: var(--leading-relaxed);
	margin: 0;
}

/* =======================================
   SAUSAGE DETAILS GRID
   ======================================= */

.recipe-detail-sausage-grid {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.recipe-detail-sausage-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px;
	background: transparent;
	border-radius: 0;
	border-bottom: none;
}


.recipe-detail-sausage-label {
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0;
}

/* Make last sausage value (Lean/Fat Ratio) orange */
.recipe-detail-sausage-grid .recipe-detail-sausage-item:nth-child(4) .recipe-detail-sausage-value {
	color: var(--brand-primary);
}

.recipe-detail-sausage-value {
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	color: var(--text-primary);
	text-align: right;
}

/* =======================================
   BEER PROFILE GRID
   ======================================= */

.recipe-detail-beer-profile-grid {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.recipe-detail-beer-profile-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 6px;
	background: transparent;
	border-radius: 0;
	border-bottom: none;
}

.recipe-detail-beer-profile-label {
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0;
}

.recipe-detail-beer-profile-value {
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	color: var(--text-primary);
	text-align: right;
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
}

/* SRM color swatch */
.beer-srm-swatch {
	display: inline-block;
	width: 16px;
	height: 16px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border-subtle);
	vertical-align: middle;
	flex-shrink: 0;
}

/* Beer profile section grid placement — mirrors sausage section */
.recipe-detail-section:has(.recipe-detail-beer-profile-grid) {
	grid-column: 1;
	grid-row: 3;
	background: var(--bg-secondary);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
	border: 1px solid var(--border-subtle);
}

.recipe-detail-section:has(.recipe-detail-beer-profile-grid) .recipe-detail-section-title {
	border-bottom: 1px solid var(--border-subtle);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-4);
}

/* When Beer Profile is present, push Ingredients down */
.cjbb-recipe-detail-container:has(.recipe-detail-beer-profile-grid) .recipe-detail-section:has(.recipe-detail-ingredients-list) {
	grid-row: 4;
}

/* =======================================
   COOK PROFILE & EQUIPMENT
   ======================================= */

.recipe-detail-cook-profile,
.recipe-detail-equipment {
	margin-bottom: var(--space-6);
}

.recipe-detail-tag-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.recipe-detail-tag {
	display: inline-block;
	padding: 4px 12px;
	background: var(--bg-secondary);
	border: 1px solid var(--border-subtle);
	border-radius: 20px;
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	color: var(--text-secondary);
}

html.theme-dark .recipe-detail-tag {
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-default);
	color: var(--dark-text-secondary);
}

/* =======================================
   NUTRITION CARD
   ======================================= */

.recipe-detail-nutrition-card {
	background: var(--bg-secondary);
	border: 2px solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: var(--space-6);
}

.nutrition-per {
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--text-tertiary);
	margin-bottom: var(--space-4);
	padding-bottom: var(--space-3);
	border-bottom: 1px solid var(--border-subtle);
}

.nutrition-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: var(--space-3);
}

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

.nutrition-label {
	font-size: var(--text-xs);
	color: var(--text-tertiary);
	text-transform: uppercase;
	letter-spacing: 0.03em;
}

.nutrition-value {
	font-size: var(--text-lg);
	font-weight: var(--font-semibold);
	color: var(--text-primary);
}

html.theme-dark .recipe-detail-nutrition-card {
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-default);
}

html.theme-dark .nutrition-per {
	color: var(--dark-text-tertiary);
	border-color: var(--dark-border-subtle);
}

html.theme-dark .nutrition-label {
	color: var(--dark-text-tertiary);
}

html.theme-dark .nutrition-value {
	color: var(--dark-text-primary);
}

/* =======================================
   INGREDIENTS LIST
   ======================================= */

.recipe-detail-ingredients-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.recipe-detail-ingredient-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0px;
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
	gap: var(--space-4);
	border-bottom: 1px solid var(--border-subtle);
}

.recipe-detail-ingredient-item:last-child {
	border-bottom: none;
}

.recipe-detail-ingredient-name {
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	color: var(--text-primary);
	flex: 1;
}

/* Add orange bullet point before ingredient name */
.recipe-detail-ingredient-name::before {
	content: "● ";
	color: var(--brand-primary);
	margin-right: var(--space-2);
}

.recipe-detail-ingredient-qty {
	font-size: var(--text-sm);
	font-weight: var(--font-normal);
	color: var(--text-secondary);
	white-space: nowrap;
}

/* =======================================
   INSTRUCTIONS (Card + Grid Pattern)
   ======================================= */

.recipe-detail-instructions-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.recipe-detail-instruction-card {
	display: grid;
	grid-template-columns: 48px 1fr;
	gap: var(--space-6);
	padding: var(--space-4);
	background: var(--bg-secondary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
}

.recipe-detail-step-number {
	width: 60px;
	height: 40px;
	background: var(--bg-tertiary);
	color: var(--brand-primary);
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	flex-shrink: 0;
}

.recipe-detail-step-content {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	justify-content: center;
}

.recipe-detail-step-text {
	font-size: var(--text-base);
	font-family: var(--font-body);
	color: var(--text-primary);
	line-height: var(--leading-normal);
	margin: 0;
}

.recipe-detail-step-meta {
	display: flex;
	gap: var(--space-4);
	flex-wrap: wrap;
}

.recipe-detail-step-meta-item {
	font-size: var(--text-sm);
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	gap: var(--space-1);
}

/* =======================================
   IMAGE GALLERY
   ======================================= */

.recipe-detail-gallery {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--space-4);
}

.recipe-detail-gallery-image {
	aspect-ratio: 1 / 1;
	border-radius: var(--radius-md);
	overflow: hidden;
	background: var(--bg-secondary);
}

.recipe-detail-gallery-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 300ms ease;
}

.recipe-detail-gallery-image:hover img {
	transform: scale(1.05);
}

/* =======================================
   SIDEBAR: SHARE SECTION
   ======================================= */

.recipe-detail-share-section {
	padding: 0;
	background: transparent;
	border: none;
	box-shadow: none;
	display: flex;
	flex-direction: row;
	gap: var(--space-4);
	align-items: center;
	width: 100%;
}

.recipe-detail-share-title {
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--text-secondary);
	margin: 0;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	flex-shrink: 0;
}

.recipe-detail-share-icon {
	font-size: 1.25rem;
	color: var(--text-secondary);
	flex-shrink: 0;
	cursor: default;
}

.recipe-detail-social-buttons {
	display: flex;
	flex-direction: row;
	gap: var(--space-3);
	align-items: center;
	width: auto;
	flex-wrap: nowrap;
}

.recipe-detail-social-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: 0.75rem;
	font-weight: var(--font-medium);
	text-decoration: none;
	cursor: pointer;
	transition: all 200ms;
	border: none;
	min-height: 20px;
	text-align: center;
	white-space: nowrap;
	flex: 1;
	max-width: 60px;
}

.recipe-detail-social-btn:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

.recipe-detail-social-btn.facebook {
	background: transparent;
	color: var(--text-primary) !important;
	border: none;
}

.recipe-detail-social-btn.facebook:hover {
	opacity: 0.7;
}

.recipe-detail-social-btn.twitter {
	background: transparent;
	color: var(--text-primary) !important;
	border: none;
}

.recipe-detail-social-btn.twitter:hover {
	opacity: 0.7;
}

.recipe-detail-social-btn.pinterest {
	background: transparent;
	color: var(--text-primary) !important;
	border: none;
}

.recipe-detail-social-btn.pinterest:hover {
	opacity: 0.7;
}

.recipe-detail-social-btn.copy-url {
	background: transparent !important;
	color: var(--text-primary) !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.recipe-detail-social-btn.copy-url:hover {
	opacity: 0.7;
	background: transparent !important;
	border: none !important;
}

.recipe-detail-social-btn.copy-url:focus {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

/* Buttons in Share Row */
.recipe-detail-actions .cjbb-btn {
	min-height: 30px;
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-md);
	font-size: 0.875rem;
	font-weight: var(--font-medium);
	white-space: nowrap;
	flex: 1;
	max-width: 150px;
}

.recipe-detail-actions .cjbb-btn-primary {
	background: transparent !important;
	color: var(--text-primary) !important;
	border: 2px solid var(--border-strong) !important;
	transition: all 200ms;
}

.recipe-detail-actions .cjbb-btn-primary:hover {
	background: var(--bg-secondary) !important;
	border-color: var(--border-strong) !important;
}

.recipe-detail-actions .cjbb-btn.cjbb-btn-secondary.delete-recipe {
	background: transparent !important;
	color: #7F1D1D !important;
	border: 2px solid #7F1D1D !important;
	padding: var(--space-1) var(--space-3) !important;
	transition: all 200ms;
	transform: none !important;
}

.recipe-detail-actions .cjbb-btn.cjbb-btn-secondary.delete-recipe:hover {
	background: rgba(127, 29, 29, 0.1) !important;
	color: #7F1D1D !important;
	border-color: #7F1D1D !important;
	transform: none !important;
}

.recipe-detail-actions .cjbb-btn-secondary {
	background: transparent !important;
	color: var(--text-primary) !important;
	border: 2px solid var(--border-strong) !important;
}

.recipe-detail-actions .cjbb-btn-secondary:hover {
	background: var(--bg-secondary) !important;
	border-color: var(--border-strong) !important;
}

/* =======================================
   SIDEBAR: ACTIONS
   ======================================= */

.recipe-detail-actions {
	display: flex;
	flex-direction: row;
	gap: var(--space-3);
	align-items: center;
	width: 100%;
	flex-wrap: nowrap;
	border-bottom: 2px solid var(--border-strong);
	padding-bottom: var(--space-4);
	margin-bottom: var(--space-4);
}

/* Favourite Toggle Button (Toggleable Icon Button - design-system.md:247-436) */
.cjbb-favourite-toggle-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 44px;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	background: transparent;
	border: 2px solid var(--border-strong);
	color: var(--text-primary);
	cursor: pointer;
	transition: all 200ms;
	flex: 1;
}

.cjbb-favourite-toggle-btn .favourite-icon {
	font-size: 1.25rem;
	line-height: 1;
}

.cjbb-favourite-toggle-btn:hover {
	background: var(--bg-secondary);
	border-color: var(--brand-primary);
	transform: scale(1.02);
}

.cjbb-favourite-toggle-btn:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

.cjbb-favourite-toggle-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

.cjbb-favourite-toggle-btn.active {
	background: rgba(255, 88, 16, 0.1);
	border-color: var(--brand-primary);
	color: var(--brand-primary);
}

/* Favourite row in sidebar */
.recipe-detail-favourite-row {
	display: flex;
	width: 100%;
	margin-bottom: var(--space-4);
}

.recipe-detail-favourite-row .cjbb-favourite-toggle-btn {
	width: 100%;
	justify-content: center;
}

/* =======================================
   VARIANT ATTRIBUTION
   ======================================= */

.recipe-detail-variant-attribution {
	background: var(--bg-secondary);
	border: 1px solid var(--border-subtle);
	border-radius: var(--radius-md);
	padding: var(--space-4);
	margin-bottom: var(--space-6);
	grid-column: 1;
	grid-row: 5;
}

.recipe-detail-variant-label {
	font-size: var(--text-xs);
	font-weight: var(--font-medium);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: var(--space-2);
}

.recipe-detail-variant-credit {
	font-size: var(--text-base);
	color: var(--text-primary);
	margin: var(--space-2) 0;
}

.recipe-detail-variant-credit strong {
	font-weight: var(--font-medium);
	color: var(--text-primary);
}

.recipe-detail-variant-link {
	font-size: var(--text-base);
	font-weight: var(--font-medium);
	color: var(--brand-primary);
	text-decoration: none;
}

.recipe-detail-variant-link:hover {
	color: var(--brand-primary-dark);
	text-decoration: underline;
}

.recipe-detail-variant-link:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* =======================================
   COMMENTS PLACEHOLDER
   ======================================= */

.recipe-detail-comments {
	margin-top: var(--space-8);
	padding-top: var(--space-8);
	border-top: 1px solid var(--border-subtle);
	grid-column: 1 / -1;
	grid-row: 8;
}

.recipe-detail-comments-placeholder {
	text-align: center;
	padding: var(--space-12) var(--space-6);
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	color: var(--text-secondary);
}

/* =======================================
   EMPTY STATE
   ======================================= */

.recipe-detail-empty {
	font-size: var(--text-base);
	color: var(--text-secondary);
	font-style: italic;
	padding: var(--space-4);
	text-align: center;
}

/* =======================================
   RESPONSIVE LAYOUT
   ======================================= */

@media (max-width: 768px) {
	.cjbb-recipe-detail-container {
		padding: var(--space-4);
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.recipe-detail-hero {
		height: 400px;
		border-radius: var(--radius-md);
	}

	.recipe-detail-hero-overlay {
		padding: var(--space-6) var(--space-4);
	}

	.recipe-detail-title {
		font-size: 2.64rem;
	}

	.recipe-detail-info-grid {
		grid-template-columns: repeat(2, 1fr);
		padding: var(--space-4);
	}

	.recipe-detail-variant-attribution,
	.recipe-detail-section:has(.recipe-detail-sausage-grid),
	.recipe-detail-section:has(.recipe-detail-beer-profile-grid),
	.recipe-detail-section:has(.recipe-detail-description:not(.recipe-detail-ingredients-list)),
	.recipe-detail-section:has(.recipe-detail-ingredients-list),
	.recipe-detail-section:has(.recipe-detail-instructions-list) {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}

	.recipe-detail-sidebar {
		grid-column: 1 / -1 !important;
		grid-row: auto !important;
	}

	.recipe-detail-section {
		padding: var(--space-4);
	}

	.recipe-detail-sausage-grid {
		grid-template-columns: 1fr;
	}

	.recipe-detail-beer-profile-grid {
		grid-template-columns: 1fr;
	}

	.recipe-detail-instruction-card {
		grid-template-columns: 40px 1fr;
		gap: var(--space-3);
		padding: var(--space-3);
	}

	.recipe-detail-step-number {
		width: 40px;
		height: 40px;
		font-size: var(--text-lg);
	}

	.recipe-detail-gallery {
		grid-template-columns: repeat(2, 1fr);
	}

	.recipe-detail-social-buttons {
		flex-direction: row;
		flex-wrap: wrap;
	}

	.recipe-detail-social-btn {
		flex: 1;
		min-width: 100px;
		max-width: none;
	}

	.recipe-detail-share-section {
		flex-direction: column;
		align-items: stretch;
	}

	.recipe-detail-social-buttons {
		width: 100%;
	}

	.recipe-detail-actions {
		width: 100%;
		margin-left: 0;
		flex-wrap: wrap;
	}

	.recipe-detail-actions .cjbb-btn {
		flex: 1;
		min-width: 100px;
		max-width: none;
	}
}

/* =======================================
   DARK MODE
   ======================================= */

html.theme-dark .recipe-detail-section {
	background-color: #1A1A1A;
	border-color: var(--dark-border-default);
}

html.theme-dark .recipe-detail-section:has(.recipe-detail-ingredients-list) {
	background-color: #0F0F0F;
}

html.theme-dark .recipe-detail-info-grid {
	background: var(--dark-bg-secondary);
}

html.theme-dark .recipe-title-accent {
	color: var(--brand-primary) !important;
}

html.theme-dark .recipe-detail-ingredient-item {
	padding: 6px;
	background-color: #0F0F0F;
	border-color: #2a2a2a;
}

html.theme-dark .recipe-detail-instruction-card {
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-default);
}

html.theme-dark .recipe-detail-sausage-item {
	background: #1a1a1a;
	border-color: var(--dark-border-default);
}

html.theme-dark .recipe-detail-share-section {
	background: transparent;
	border-color: var(--dark-border-default);
}

html.theme-dark .recipe-detail-social-btn.facebook {
	background: transparent;
	color: var(--neutral-000) !important;
	border: none;
}

html.theme-dark .recipe-detail-social-btn.facebook:hover {
	opacity: 0.7;
}

html.theme-dark .recipe-detail-social-btn.twitter {
	background: transparent;
	color: var(--neutral-000) !important;
	border: none;
}

html.theme-dark .recipe-detail-social-btn.twitter:hover {
	opacity: 0.7;
}

html.theme-dark .recipe-detail-social-btn.pinterest {
	background: transparent;
	color: var(--neutral-000) !important;
	border: none;
}

html.theme-dark .recipe-detail-social-btn.pinterest:hover {
	opacity: 0.7;
}

html.theme-dark .recipe-detail-social-btn.copy-url {
	background: transparent !important;
	color: var(--neutral-000) !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
}

html.theme-dark .recipe-detail-social-btn.copy-url:hover {
	opacity: 0.7;
	background: transparent !important;
	border: none !important;
}

html.theme-dark .recipe-detail-social-btn.copy-url:focus {
	outline: none !important;
	border: none !important;
	box-shadow: none !important;
}

html.theme-dark .recipe-detail-actions .cjbb-btn-primary {
	background: #2a2a2a !important;
	border-color: #3a3a3a !important;
	color: var(--neutral-000) !important;
}

html.theme-dark .recipe-detail-actions .cjbb-btn-primary:hover {
	background: #3a3a3a !important;
	border-color: #4a4a4a !important;
}

html.theme-dark .recipe-detail-actions .cjbb-btn.cjbb-btn-secondary.delete-recipe {
	background: transparent !important;
	border: 2px solid #7F1D1D !important;
	color: #7F1D1D !important;
	padding: var(--space-1) var(--space-3) !important;
	transform: none !important;
}

html.theme-dark .recipe-detail-actions .cjbb-btn.cjbb-btn-secondary.delete-recipe:hover {
	background: rgba(127, 29, 29, 0.1) !important;
	color: #7F1D1D !important;
	border-color: #7F1D1D !important;
	transform: none !important;
}

html.theme-dark .recipe-detail-actions .cjbb-btn-secondary {
	background: #2a2a2a !important;
	border-color: #3a3a3a !important;
	color: var(--neutral-000) !important;
}

html.theme-dark .recipe-detail-actions .cjbb-btn-secondary:hover {
	background: #3a3a3a !important;
	border-color: #4a4a4a !important;
}

html.theme-dark .recipe-detail-actions {
	border-bottom: 2px solid var(--dark-border-default);
}

/* Dark mode: Favourite toggle button */
html.theme-dark .cjbb-favourite-toggle-btn {
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-strong);
	color: var(--dark-text-primary);
}

html.theme-dark .cjbb-favourite-toggle-btn:hover {
	background: var(--dark-bg-quaternary);
	border-color: var(--brand-primary);
	color: var(--dark-text-primary);
}

html.theme-dark .cjbb-favourite-toggle-btn.active {
	background: rgba(255, 88, 16, 0.15);
	border-color: var(--brand-primary);
	color: var(--brand-primary);
}

html.theme-dark .recipe-detail-variant-attribution {
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-default);
}

html.theme-dark .recipe-detail-comments-placeholder {
	background: var(--dark-bg-secondary);
	color: var(--dark-text-secondary);
}

html.theme-dark .recipe-detail-hero-placeholder {
	background: var(--dark-bg-secondary);
	color: var(--dark-text-tertiary);
}

/* Dark mode: Info grid and items */
html.theme-dark .recipe-detail-info-grid {
	background-color: #0f0f0f;
}

html.theme-dark .recipe-detail-info-item {
	background-color: #1a1a1a;
}

/* Dark mode: Sausage label color */
html.theme-dark .recipe-detail-sausage-label {
	color: var(--dark-text-secondary) !important;
}

/* Dark mode: Ingredient name color */
html.theme-dark .recipe-detail-ingredient-name {
	color: var(--dark-text-primary);
}

/* Dark mode: Sausage value color */
html.theme-dark .recipe-detail-sausage-value {
	color: var(--dark-text-secondary);
}

/* Dark mode: Lean/Fat Ratio orange text */
html.theme-dark .recipe-detail-sausage-grid .recipe-detail-sausage-item:nth-child(4) .recipe-detail-sausage-value {
	color: var(--brand-primary) !important;
}

/* Dark mode: Beer Profile */
html.theme-dark .recipe-detail-section:has(.recipe-detail-beer-profile-grid) {
	background: #0f0f0f;
	border-color: var(--dark-border-default);
}

html.theme-dark .recipe-detail-beer-profile-item {
	background: #1a1a1a;
	border-color: var(--dark-border-default);
}

html.theme-dark .recipe-detail-beer-profile-label {
	color: var(--dark-text-secondary) !important;
}

html.theme-dark .recipe-detail-beer-profile-value {
	color: var(--dark-text-secondary);
}

html.theme-dark .beer-srm-swatch {
	border-color: var(--dark-border-subtle);
}

/* Dark mode: Adjust step number styling */
html.theme-dark .recipe-detail-step-number {
	background: var(--dark-bg-quaternary);
	color: var(--brand-primary);
}

html.theme-dark .recipe-detail-info-item {
	background-color: var(--dark-bg-secondary);
	border-color: var(--dark-border-default);
}

html.theme-dark .recipe-detail-variant-link {
	color: var(--brand-primary);
}

html.theme-dark .recipe-detail-variant-link:hover {
	color: var(--brand-primary-dark);
}

/* =======================================
   STAR RATING
   ======================================= */

.cjbb-star-rating {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4);
	padding: var(--space-4) 0;
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--border-subtle);
}

.star-rating-label {
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.star-rating-stars {
	display: flex;
	gap: var(--space-1);
}

.star-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 2px;
	color: var(--text-tertiary);
	transition: all 150ms;
	border-radius: var(--radius-sm);
}

.star-btn:hover,
.star-btn.active {
	color: var(--brand-primary);
	transform: scale(1.15);
}

.star-btn:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

.star-rating-summary {
	font-size: var(--text-sm);
	color: var(--text-secondary);
}

.rating-average {
	font-weight: var(--font-semibold);
	color: var(--brand-primary);
	font-size: var(--text-lg);
}

.cjbb-star-rating-loggedout {
	padding: var(--space-4) 0;
	margin-bottom: var(--space-4);
	border-bottom: 1px solid var(--border-subtle);
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

.cjbb-star-rating-loggedout a {
	color: var(--brand-primary);
}

/* =======================================
   RECIPE COMMENTS
   ======================================= */

.cjbb-recipe-comments {
	margin-top: var(--space-4);
}

.cjbb-comment-form {
	margin-bottom: var(--space-6);
}

.cjbb-comment-form textarea {
	width: 100%;
	padding: var(--space-3);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-md);
	font-family: var(--font-body);
	font-size: var(--text-base);
	color: var(--text-primary);
	background: var(--bg-primary);
	resize: vertical;
	min-height: 80px;
	transition: border-color 200ms;
	box-sizing: border-box;
}

.cjbb-comment-form textarea:focus {
	outline: none;
	border-color: var(--brand-primary);
	box-shadow: 0 0 0 3px rgba(255, 88, 16, 0.1);
}

.cjbb-comment-submit {
	margin-top: var(--space-2);
}

.cjbb-comments-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.cjbb-comment-item {
	display: flex;
	gap: var(--space-3);
	padding: var(--space-3);
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	border: 1px solid var(--border-subtle);
}

.cjbb-comment-avatar img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}

.cjbb-comment-body {
	flex: 1;
}

.cjbb-comment-author {
	font-weight: var(--font-medium);
	color: var(--text-primary);
	font-size: var(--text-sm);
}

.cjbb-comment-date {
	font-size: var(--text-xs);
	color: var(--text-tertiary);
	margin-left: var(--space-2);
}

.cjbb-comment-text {
	font-size: var(--text-base);
	color: var(--text-primary);
	line-height: var(--leading-normal);
	margin-top: var(--space-1);
}

.cjbb-comments-empty,
.cjbb-comments-loading {
	text-align: center;
	padding: var(--space-6);
	color: var(--text-secondary);
	font-size: var(--text-sm);
}

/* Dark mode overrides */
html.theme-dark .cjbb-comment-form textarea {
	background: var(--dark-bg-tertiary);
	border-color: var(--dark-border-default);
	color: var(--dark-text-primary);
}

html.theme-dark .cjbb-comment-form textarea:focus {
	border-color: var(--brand-primary);
	box-shadow: 0 0 0 3px rgba(255, 88, 16, 0.15);
}

html.theme-dark .cjbb-comment-item {
	background: var(--dark-bg-secondary);
	border-color: var(--dark-border-default);
}

html.theme-dark .star-btn {
	color: var(--dark-text-tertiary);
}

html.theme-dark .cjbb-star-rating {
	border-bottom-color: var(--dark-border-default);
}

html.theme-dark .cjbb-star-rating-loggedout {
	border-bottom-color: var(--dark-border-default);
}

/* =======================================
   NOTIFICATION DROPDOWN ITEMS
   ======================================= */

.notification-item {
	padding: var(--space-3);
	border-bottom: 1px solid var(--border-subtle);
	font-size: var(--text-sm);
	color: var(--text-primary);
	line-height: var(--leading-normal);
}

.notification-item:last-child {
	border-bottom: none;
}

.dropdown-link {
	display: block;
	text-align: center;
	padding: var(--space-3);
	color: var(--brand-primary);
	font-weight: var(--font-medium);
	font-size: var(--text-sm);
	text-decoration: none;
	border-top: 1px solid var(--border-subtle);
}

.dropdown-link:hover {
	text-decoration: underline;
}

/* =======================================
   RECIPE TAGS (Detail Page)
   ======================================= */

.recipe-detail-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-4);
}

.recipe-tag-pill {
	display: inline-flex;
	align-items: center;
	padding: var(--space-1) var(--space-3);
	background: var(--bg-tertiary);
	color: var(--text-secondary);
	border: 1px solid var(--border-subtle);
	border-radius: 9999px;
	font-family: var(--font-body);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	text-decoration: none;
	transition: background 200ms, color 200ms, border-color 200ms;
	cursor: pointer;
	white-space: nowrap;
}

.recipe-tag-pill:hover {
	background: var(--brand-primary);
	color: var(--neutral-000);
	border-color: var(--brand-primary);
	text-decoration: none;
}

.recipe-tag-pill:focus {
	outline: 2px solid var(--brand-primary);
	outline-offset: 2px;
}

/* Dark mode tags */
html.theme-dark .recipe-tag-pill {
	background: var(--dark-bg-tertiary);
	color: var(--dark-text-secondary);
	border-color: var(--dark-border-subtle);
}

html.theme-dark .recipe-tag-pill:hover {
	background: var(--brand-primary);
	color: var(--neutral-000);
	border-color: var(--brand-primary);
}