/*=========== Print page ===========*/
/* .print-features h5, .print-features h1 {
	font-family: 'Open Sans', sans-serif;
} */
.print-features {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    border-radius: 20px;
    backdrop-filter: blur(25px); /* Blur effect */
    -webkit-backdrop-filter: blur(25px); /* Safari-specific */
    padding: 30px 25px;
    background-color: rgba(106, 129, 97, 0.2); /* Ensure some opacity */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    z-index: 9999; /* Ensure it's above other elements */
    transition: all 0.3s ease-in-out; /* Smooth hover effect */
}

#recipe-preview-container #main-image-container {
    max-width: 600px !important;
    margin: auto !important;
}

/* Safari-specific workaround */
@supports (-webkit-backdrop-filter: blur(25px)) {
    .print-features {
        background-color: rgba(106, 129, 97, 0.2); /* Slightly lighter for Safari */
    }
}

/* Hover Effect Fix */
.print-features:hover {
    background-color: rgba(106, 129, 97, 0.4); /* Increase opacity on hover */
}


@media print {

	/* ---------- Hide non-essential UI ----------
	   These selectors match every element the JS in
	   recipe_print_preview_page.js hides at runtime. Keeping a CSS
	   fallback means a JS failure (CDN outage, slow connection,
	   ad blocker) still produces a clean printout. */
	.no-print,
	.print-features,
	.print-btn,
	.space-cols,
	#rating-widget,
	#allergen-info-container,
	.abstract-text,
	.badge,
	#recipe-video-link,
	#socials-parent-cont,
	#side-social-btns-container,
	#amz-btn-container,
	#subs-btn,
	#share-btn,
	#checkbox-text {
		display: none !important;
	}

	/* ---------- Defeat the viewport-height layout trap ----------
	   pul_website_styles.css sets `html, body { height: 100% }` and
	   makes body a flex column with `article { flex: 1 }`. During
	   print, "100%" resolves to the single-page viewport height, so
	   the recipe is rendered into a one-page-tall flex container and
	   anything past page 1 is clipped. Forcing auto height (and
	   `min-height: 0` so Firefox doesn't apply the default flex-item
	   minimum) lets the document grow to its natural content height
	   and paginate normally. This is the single most important rule
	   for multi-page printing in Firefox. */
	html,
	body {
		height: auto !important;
		min-height: 0 !important;
	}

	/* ---------- Make the preview container print-flexible ----------
	   The template sets an inline width: 21cm to size the on-screen
	   A4 preview. For actual printing, let it fill the printable area
	   so it adapts to whatever paper the user selects. */
	#recipe-preview-container {
		width: 100% !important;
		max-width: 100% !important;
		padding: 0 !important;
	}

	.article-container {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ---------- Disable layout features that break page fragmentation ----------
	   Firefox refuses to paginate inside position: sticky and is also
	   unreliable inside transformed / filtered ancestors. Chrome
	   sometimes mishandles transformed containing blocks the same way.
	   Forcing these back to plain block flow during print is the fix
	   for the "only page 1 prints" bug. */
	.ingredientlist section,
	.directionlist section {
		position: static !important;
		top: auto !important;
	}

	#recipe-preview-container,
	#recipe-preview-container * {
		transform: none !important;
		filter: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		box-shadow: none !important;
	}

	/* ---------- Firefox flex pagination fix ----------
	   Firefox bug 939897: flex items do not fragment across printed
	   pages. Bootstrap's `.row` is `display: flex; flex-wrap: wrap`
	   and `.col-*` are flex children, which means the ingredient /
	   direction columns can't paginate in Firefox even after the
	   sticky fix. Reducing the rows/cols to plain block flow during
	   print lets the content flow page-to-page. Side-effect: the
	   two-column ingredients/directions layout stacks vertically on
	   paper, which is the standard recipe print layout anyway. */
	#recipe-preview-container .row {
		display: block !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	/* NOTE: `display: block` is intentionally NOT marked !important so
	   that inline `style="display: none"` set by jQuery's .hide()
	   (used by the "Print image" checkbox toggle on #main-image-
	   container) can still hide the image. The rule still wins over
	   Bootstrap's column rules on source order alone (equal specificity,
	   loaded later). */
	#recipe-preview-container .col,
	#recipe-preview-container [class*="col-"] {
		display: block;
		width: 100% !important;
		max-width: 100% !important;
		flex: 0 0 auto !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* ---------- Preserve row layout for compact metadata ----------
	   #recipe-info-container (Servings, Total, Prep, Cook, etc.) is a
	   short, fixed-height row that should stay horizontal in print —
	   the rule above would otherwise stack each metric on its own line.
	   Specificity (2,1,0) beats the block-ify rules above so the row
	   and its columns flex normally. */
	#recipe-preview-container #recipe-info-container {
		display: flex !important;
		flex-wrap: wrap !important;
	}

	#recipe-preview-container #recipe-info-container .col,
	#recipe-preview-container #recipe-info-container [class*="col-"] {
		flex: 1 1 0 !important;
		width: auto !important;
		max-width: none !important;
		padding-left: 0.5rem !important;
		padding-right: 0.5rem !important;
	}

	/* ---------- Page break controls ----------
	   Both legacy page-break-* and modern break-* properties so older
	   browsers and current Firefox/Chrome/Safari all honour them. */
	h1, h2, h3, h4, h5, h6 {
		page-break-after: avoid;
		break-after: avoid-page;
		page-break-inside: avoid;
		break-inside: avoid;
	}

	.ingredientlist li,
	.directionlist li,
	.noteslist li,
	.ingredient-container,
	.direction,
	figure,
	img {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	p, li {
		orphans: 3;
		widows: 3;
	}

	/* ---------- Image handling ----------
	   The optional recipe picture should fit the printable width and
	   never split across a page boundary. */
	#main-image-container {
		page-break-inside: avoid;
		break-inside: avoid;
	}

	#main-image-container img,
	#recipe-preview-container img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* ---------- Preserve meaningful colours ---------- */
	#recipe-preview-container {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* ---------- Link styling for paper ----------
	   The on-screen design uses a box-shadow underline that prints as
	   a thick, fuzzy line on some printers. Swap to a clean underline
	   and keep the link colour readable. */
	#recipe-preview-container a,
	#recipe-preview-container a.link {
		box-shadow: none !important;
		text-decoration: underline;
		color: inherit;
	}

	/* ---------- Ad and embed cleanup ----------
	   Defensive hides in case ad / embed containers leak into the
	   print preview from shared partials. */
	[id^="vrec-"],
	.vrec-container,
	.vrec-ad,
	[id^="shop-with-instacart-"] {
		display: none !important;
	}
}