/* ==========================================================================
   Betty Gotuje – Recipe Toolbar (Top & Bottom) & Ingredient Checklist
   ========================================================================== */

/* Recipe Toolbar Container */
.bg-recipe-toolbar[hidden],
.bg-cook-mode-bar[hidden] {
	display: none !important;
}

.bg-recipe-toolbar.is-error,
.bg-cook-mode-bar.is-error {
	border-color: #b45309;
}

.bg-recipe-toolbar,
.bg-cook-mode-bar {
	margin-top: 14px;
	margin-bottom: 22px;
	background: #fbf9f8;
	border: 1px solid #ebdcd5;
	border-radius: 12px;
	padding: 10px 14px;
	transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.bg-recipe-toolbar-bottom {
	margin-top: 28px;
	margin-bottom: 22px;
}

.bg-recipe-toolbar.is-active,
.bg-cook-mode-bar.is-active {
	background: #f0fdf4;
	border-color: #86efac;
	box-shadow: 0 2px 8px rgba(34, 197, 94, 0.12);
}

.bg-recipe-toolbar-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

/* Individual Toolbar Items & Buttons */
.bg-toolbar-item {
	display: inline-flex;
	align-items: center;
}

.bg-toolbar-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 38px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 0.85rem;
	font-weight: 600;
	color: #374151;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 20px;
	cursor: pointer;
	line-height: 1;
	white-space: nowrap;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
	-webkit-tap-highlight-color: transparent;
	user-select: none;
	text-decoration: none;
}

.bg-toolbar-btn:hover {
	color: #95432d;
	border-color: #95432d;
	background: #fdf8f6;
	box-shadow: 0 2px 6px rgba(149, 67, 45, 0.14);
}

.bg-toolbar-btn:active {
	transform: scale(0.97);
}

.bg-toolbar-btn:focus-visible {
	outline: 2px solid #95432d;
	outline-offset: 2px;
}

.bg-toolbar-btn.is-active {
	background: #95432d;
	color: #ffffff;
	border-color: #95432d;
	box-shadow: 0 2px 6px rgba(149, 67, 45, 0.25);
}

.bg-toolbar-btn.is-active .bg-toolbar-icon {
	fill: #ffffff;
}

.bg-toolbar-btn.is-copied {
	background: #166534;
	color: #ffffff;
	border-color: #166534;
}

.bg-toolbar-btn.is-copied .bg-toolbar-icon {
	fill: #ffffff;
}

/* Cook Mode Action Pill */
.bg-toolbar-cook-mode {
	display: inline-flex;
	align-items: center;
}

.bg-toolbar-cook-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 0 10px 0 14px;
	background: #ffffff;
	border: 1px solid #d1d5db;
	border-radius: 20px;
	cursor: pointer;
	font-size: 0.85rem;
	font-weight: 600;
	color: #374151;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: all 0.2s ease;
	margin: 0;
	user-select: none;
}

.bg-toolbar-cook-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.bg-toolbar-cook-label:hover {
	border-color: #95432d;
	background: #fdf8f6;
	color: #95432d;
}

.bg-recipe-toolbar.is-active .bg-toolbar-cook-label {
	background: #f0fdf4;
	border-color: #86efac;
	color: #166534;
}

.bg-toolbar-icon {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	fill: currentColor;
	display: inline-block;
}

/* iOS-style Switch inside toolbar */
.bg-cook-toggle {
	position: relative;
	display: inline-block;
	width: 38px;
	height: 22px;
	flex-shrink: 0;
	margin: 0 0 0 4px;
	cursor: pointer;
}

.bg-cook-checkbox {
	opacity: 0;
	width: 0;
	height: 0;
	position: absolute;
}

.bg-cook-slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #cbd5e1;
	border-radius: 22px;
	transition: background-color 0.25s ease;
}

.bg-cook-slider::before {
	position: absolute;
	content: "";
	height: 16px;
	width: 16px;
	left: 3px;
	bottom: 3px;
	background-color: #ffffff;
	border-radius: 50%;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
	transition: transform 0.25s ease;
}

.bg-cook-checkbox:checked + .bg-cook-slider {
	background-color: #22c55e;
}

.bg-cook-checkbox:focus-visible + .bg-cook-slider {
	outline: 2px solid #22c55e;
	outline-offset: 2px;
}

.bg-cook-checkbox:checked + .bg-cook-slider::before {
	transform: translateX(16px);
}

.bg-cook-checkbox:disabled + .bg-cook-slider {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Hide photos state */
body.bg-photos-hidden .featured-image,
body.bg-photos-hidden .page-header-image-single,
body.bg-photos-hidden .entry-content img,
body.bg-photos-hidden .entry-content figure {
	display: none !important;
}

/* Print-only template elements hidden on screen */
.bg-recipe-print-header,
.bg-recipe-print-footer,
.bg-recipe-print-photo-wrap {
	display: none !important;
}

/* Jump to recipe target scroll margin and visual landing feedback */
.bg-recipe-jump-target {
	scroll-margin-top: 28px;
}

@keyframes bg-highlight-pulse {
	0% {
		background-color: rgba(200, 90, 58, 0.18);
		border-radius: 8px;
	}
	100% {
		background-color: transparent;
	}
}

.bg-target-highlight {
	animation: bg-highlight-pulse 1.8s ease-out;
}



/* Interactive Ingredient Checklist */
.bg-ingredient-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 16px 0 !important;
}

.bg-ingredient-item {
	position: relative;
	padding-left: 32px;
	margin-bottom: 9px;
	line-height: 1.5;
	cursor: pointer;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.bg-ingredient-item::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 3px;
	width: 18px;
	height: 18px;
	border: 2px solid #cbd5e1;
	border-radius: 5px;
	background-color: #ffffff;
	box-sizing: border-box;
	transition: all 0.18s ease;
}

.bg-ingredient-item:hover::before {
	border-color: #e67e22;
}

.bg-ingredient-item:focus-visible {
	outline: 2px solid #166534;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.bg-cook-mode-bar,
	.bg-cook-slider,
	.bg-cook-slider::before,
	.bg-ingredient-item,
	.bg-ingredient-item::before {
		transition: none;
	}
}

.bg-ingredient-item.is-checked {
	color: #94a3b8;
	text-decoration: line-through;
	opacity: 0.7;
}

.bg-ingredient-item.is-checked::before {
	background-color: #22c55e;
	border-color: #22c55e;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E");
	background-size: 13px 13px;
	background-position: center;
	background-repeat: no-repeat;
}

@media (max-width: 640px) {
	.bg-recipe-toolbar,
	.bg-cook-mode-bar {
		padding: 8px;
	}

	.bg-recipe-toolbar-inner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 8px;
	}

	/* Hero row for Cook Mode: full width, clean switch on the right */
	.bg-toolbar-cook-mode {
		grid-column: span 2;
		width: 100%;
	}

	.bg-toolbar-cook-label {
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 14px;
		font-size: 0.86rem;
		box-sizing: border-box;
		white-space: nowrap;
	}

	.bg-toolbar-cook-title {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		white-space: nowrap;
	}

	.bg-toolbar-item {
		width: 100%;
	}

	.bg-toolbar-btn {
		width: 100%;
		justify-content: center;
		padding: 0 8px;
		font-size: 0.82rem;
		height: 38px;
		box-sizing: border-box;
		white-space: nowrap;
	}
}

/* Extra-narrow smartphones (<= 360px, e.g. Samsung Galaxy Z Fold outer screen) */
@media (max-width: 360px) {
	.bg-recipe-toolbar,
	.bg-cook-mode-bar {
		padding: 6px;
	}

	.bg-recipe-toolbar-inner {
		gap: 6px;
	}

	.bg-toolbar-cook-label {
		padding: 0 10px;
		font-size: 0.82rem;
		height: 38px;
	}

	.bg-toolbar-cook-title {
		gap: 6px;
	}

	.bg-toolbar-btn {
		font-size: 0.78rem;
		gap: 5px;
		padding: 0 4px;
		height: 36px;
	}

	.bg-cook-toggle {
		width: 34px;
		height: 20px;
	}

	.bg-cook-slider::before {
		height: 14px;
		width: 14px;
		bottom: 3px;
		left: 3px;
	}

	.bg-cook-checkbox:checked + .bg-cook-slider::before {
		transform: translateX(14px);
	}
}

/* ==========================================================================
   Clean Professional Recipe Print Template
   ========================================================================== */
@media print {
	@page {
		margin: 1cm 1.2cm 1.2cm 1.2cm;
		size: A4 portrait;
	}

	/* Base page reset */
	html, body {
		background: #ffffff !important;
		color: #111827 !important;
		font-size: 9pt !important;
		line-height: 1.35 !important;
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		-webkit-print-color-adjust: exact !important;
		print-color-adjust: exact !important;
	}

	/* Expand main container to 100% full printable width */
	.site,
	.site-content,
	#content,
	#primary,
	#main,
	article,
	.inside-article,
	.entry-content {
		margin: 0 !important;
		padding: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		border: none !important;
		box-shadow: none !important;
		background: transparent !important;
		float: none !important;
	}

	/* -------------------------------------------------------------------------
	   HIDE ALL UNNECESSARY CHROME & CLUTTER
	   ------------------------------------------------------------------------- */
	.site-header,
	.header-wrap,
	.site-logo,
	.header-widget,
	#site-navigation,
	.main-navigation,
	#mobile-header,
	.mobile-menu-control-wrapper,
	.menu-toggle,
	.bg-breadcrumbs-wrapper,
	.rank-math-breadcrumb,
	.bg-recipe-toolbar,
	.bg-cook-mode-bar,
	.bg-recipe-print-wrap,
	.bg-recipe-print-btn,
	#right-sidebar,
	#left-sidebar,
	.widget-area,
	.sidebar,
	aside,
	.bg-related-recipes,
	#bg-related-recipes,
	.post-navigation,
	.nav-links,
	#comments,
	.comments-area,
	.site-footer,
	.footer-widgets,
	.footer-social,
	.site-info,
	.generate-back-to-top,
	.entry-footer,
	footer.entry-meta,
	.entry-header .entry-meta,
	.entry-meta,
	.entry-meta .byline,
	.entry-meta .posted-on,
	.posted-on,
	time.entry-date,
	time.updated,
	.entry-meta .comments-link,
	.entry-meta .edit-link,
	.screen-reader-text,
	.bg-coffee-box,
	.bg-coffee-text,
	.bg-coffee-button,
	.bg-coffee-about,
	.bg-coffee-qr,
	.footer-social-coffee,
	.footer-coffee,
	[class*="coffee"],
	[class*="buymeacoffee"],
	a[href*="buymeacoffee"],
	.widget_block:has(a[href*="buymeacoffee"]),
	#cookie-notice,
	.cookie-notice,
	.cmplz-cookiebanner,
	.share-buttons,
	.social-share {
		display: none !important;
	}

	/* Strip Customizer & Theme grey background boxes around lists */
	body.single-post .entry-content :is(ul, ol),
	.entry-content ul,
	.entry-content ol,
	.bg-ingredient-list {
		background: transparent !important;
		background-color: transparent !important;
		border: none !important;
		border-radius: 0 !important;
		padding: 0 !important;
		box-shadow: none !important;
	}

	/* Suppress browser appending URLs after links */
	a, a:visited {
		color: inherit !important;
		text-decoration: none !important;
	}
	a[href]:after {
		content: none !important;
	}

	/* -------------------------------------------------------------------------
	   PRINT HEADER & BRANDING
	   ------------------------------------------------------------------------- */
	.bg-recipe-print-header {
		display: flex !important;
		justify-content: space-between !important;
		align-items: baseline !important;
		border-bottom: 1.5pt solid #111827 !important;
		padding-bottom: 4pt !important;
		margin-bottom: 8pt !important;
		page-break-after: avoid !important;
		break-after: avoid !important;
	}

	.bg-recipe-print-header-brand {
		display: flex !important;
		align-items: baseline !important;
		gap: 8pt !important;
	}

	.bg-recipe-print-logo {
		font-size: 14pt !important;
		font-weight: 800 !important;
		letter-spacing: -0.02em !important;
		color: #111827 !important;
		line-height: 1.1 !important;
	}

	.bg-recipe-print-tagline {
		font-size: 7.5pt !important;
		color: #6b7280 !important;
	}

	.bg-recipe-print-meta {
		text-align: right !important;
	}

	.bg-recipe-print-url {
		font-size: 7.5pt !important;
		color: #4b5563 !important;
		font-style: italic !important;
	}

	/* -------------------------------------------------------------------------
	   FEATURED RECIPE PHOTO (Always present, compact top-right thumbnail)
	   ------------------------------------------------------------------------- */
	.bg-recipe-print-photo-wrap {
		display: block !important;
		float: right !important;
		width: 150px !important;
		max-width: 28% !important;
		margin: 0 0 8pt 12pt !important;
		page-break-inside: avoid !important;
		break-inside: avoid !important;
	}

	.bg-recipe-print-photo {
		display: block !important;
		width: 100% !important;
		height: 110px !important;
		object-fit: cover !important;
		border-radius: 4px !important;
		border: 1px solid #d1d5db !important;
	}

	/* Hide in-content duplicate photos to avoid wasting ink/paper */
	.entry-content img,
	.entry-content figure {
		display: none !important;
	}

	/* -------------------------------------------------------------------------
	   RECIPE TITLE & META
	   ------------------------------------------------------------------------- */
	h1.entry-title {
		font-size: 16pt !important;
		line-height: 1.2 !important;
		font-weight: 700 !important;
		color: #111827 !important;
		margin: 2pt 0 3pt 0 !important;
		padding: 0 !important;
		page-break-after: avoid !important;
		break-after: avoid !important;
	}

	.entry-header .entry-meta {
		font-size: 7.5pt !important;
		color: #6b7280 !important;
		margin: 0 0 6pt 0 !important;
		padding: 0 !important;
	}

	/* -------------------------------------------------------------------------
	   RECIPE CONTENT & STORY INTRO
	   ------------------------------------------------------------------------- */
	.entry-content {
		font-size: 8.8pt !important;
		line-height: 1.35 !important;
		color: #1f2937 !important;
	}

	/* Compact, elegant styling for the introductory blog story */
	.entry-content > p:first-of-type,
	.entry-content > div:first-of-type:not(.separator) {
		font-size: 8pt !important;
		line-height: 1.3 !important;
		color: #4b5563 !important;
		font-style: italic !important;
		margin-bottom: 6pt !important;
	}

	.entry-content p,
	.entry-content div {
		font-size: 8.8pt !important;
		line-height: 1.35 !important;
		color: #1f2937 !important;
		margin-bottom: 3.5pt !important;
		page-break-inside: avoid !important;
		break-inside: avoid !important;
	}

	/* Consistent, clean styling for section headings (h2, h3, or bold labels) */
	.entry-content h2,
	.entry-content h3,
	.entry-content h4,
	.entry-content > b,
	.entry-content div > b:first-child {
		display: block !important;
		font-size: 10.5pt !important;
		font-weight: 700 !important;
		color: #111827 !important;
		margin-top: 8pt !important;
		margin-bottom: 3pt !important;
		padding-bottom: 2pt !important;
		border-bottom: 1pt solid #e5e7eb !important;
		page-break-after: avoid !important;
		break-after: avoid !important;
	}

	/* -------------------------------------------------------------------------
	   INGREDIENTS: 2-COLUMN DENSE LAYOUT & CHECKBOXES
	   ------------------------------------------------------------------------- */
	.entry-content ul,
	.bg-ingredient-list {
		columns: 2 !important;
		column-gap: 16pt !important;
		list-style: none !important;
		padding-left: 0 !important;
		margin: 4pt 0 8pt 0 !important;
		page-break-inside: avoid !important;
		break-inside: avoid !important;
	}

	.bg-ingredient-item,
	.entry-content ul > li {
		break-inside: avoid !important;
		page-break-inside: avoid !important;
		position: relative !important;
		padding-left: 14pt !important;
		margin-bottom: 2.5pt !important;
		line-height: 1.28 !important;
		font-size: 8.5pt !important;
		color: #1f2937 !important;
		text-decoration: none !important;
		opacity: 1 !important;
	}

	/* Printable checkbox box [ ] */
	.bg-ingredient-item::before,
	.entry-content ul > li::before {
		content: "" !important;
		position: absolute !important;
		left: 0 !important;
		top: 1.5pt !important;
		width: 8pt !important;
		height: 8pt !important;
		border: 1.1pt solid #4b5563 !important;
		border-radius: 1.5pt !important;
		background: #ffffff !important;
		box-sizing: border-box !important;
	}

	/* -------------------------------------------------------------------------
	   PREPARATION / INSTRUCTIONS STEPS
	   ------------------------------------------------------------------------- */
	.entry-content ol {
		margin: 4pt 0 8pt 0 !important;
		padding-left: 14pt !important;
	}

	.entry-content ol > li {
		margin-bottom: 3.5pt !important;
		line-height: 1.35 !important;
		font-size: 8.8pt !important;
		color: #1f2937 !important;
		page-break-inside: avoid !important;
		break-inside: avoid !important;
	}

	/* -------------------------------------------------------------------------
	   PRINT FOOTER (Closing provenance, source link & Buy Me a Coffee QR)
	   ------------------------------------------------------------------------- */
	.bg-recipe-print-footer {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		margin-top: 10pt !important;
		padding-top: 5pt !important;
		border-top: 1pt solid #e5e7eb !important;
		page-break-inside: avoid !important;
		break-inside: avoid !important;
		clear: both !important;
	}

	.bg-recipe-print-footer-info {
		flex: 1 !important;
		padding-right: 12pt !important;
	}

	.bg-recipe-print-footer-brand {
		font-size: 7.5pt !important;
		color: #374151 !important;
		margin: 0 0 2pt 0 !important;
	}

	.bg-recipe-print-footer-source,
	.bg-recipe-print-footer-coffee {
		font-size: 6.8pt !important;
		color: #6b7280 !important;
		margin: 0 0 1.5pt 0 !important;
		line-height: 1.3 !important;
	}

	.bg-recipe-print-footer-source span,
	.bg-recipe-print-footer-coffee span {
		color: #374151 !important;
		font-weight: 500 !important;
	}

	.bg-recipe-print-footer-qr {
		display: flex !important;
		flex-direction: column !important;
		align-items: center !important;
		flex-shrink: 0 !important;
		text-align: center !important;
	}

	.bg-recipe-print-qr-img {
		width: 42pt !important;
		height: 42pt !important;
		display: block !important;
		border: 0.8pt solid #d1d5db !important;
		border-radius: 2pt !important;
		padding: 2pt !important;
		background: #ffffff !important;
	}

	.bg-recipe-print-qr-label {
		display: block !important;
		font-size: 5.8pt !important;
		font-weight: 600 !important;
		color: #4b5563 !important;
		margin-top: 1.5pt !important;
		white-space: nowrap !important;
	}
}