/**
 * Single recipes: Print Recipe button (screen) and print-only layout.
 * Button markup comes from includes/recipe-print.php.
 */

/* Outline pill that sits in line with the servings/prep pills */
.recipe-print-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	vertical-align: middle;
	margin: 0 12px 12px 0;
	padding: 8px 23px;
	border: 2px solid #006eb6;
	border-radius: 50px;
	background: transparent;
	color: #006eb6;
	font-family: 'Deacon';
	font-size: 16px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.recipe-print-button:hover,
.recipe-print-button:focus-visible {
	background: #006eb6;
	color: #ffffff;
}

.recipe-print-button svg {
	flex-shrink: 0;
}

/* Pills drop to 14px on mobile (Kadence setting) */
@media (max-width: 767px) {
	.recipe-print-button {
		font-size: 14px;
	}
}

/*
 * Print: a recipe card. Ink-light (no photo, no filled shapes, so nothing
 * depends on the browser's "print backgrounds" setting), high-contrast text,
 * ingredients beside numbered steps, and lines that don't split across pages.
 */
@media print {
	@page {
		margin: 0.6in 0.6in 0.5in;
	}

	html,
	body.single-recipes {
		background: #ffffff !important;
	}

	body.single-recipes {
		color: #111111;
		font-size: 11pt;
	}

	/* Only the recipe: no header, footer, drawers, breadcrumb, photo, button or sections below */
	body.single-recipes #wrapper > :not(#inner-wrap),
	body.single-recipes #inner-wrap > :not(#primary),
	body.single-recipes .popup-drawer,
	body.single-recipes .wp-block-breadcrumbs,
	body.single-recipes .kb-row-layout-id10221_40c310-5f,
	body.single-recipes .recipe-print-button,
	body.single-recipes .entry-content > .kb-row-layout-wrap ~ *,
	body.single-recipes .tracks-anim,
	body.single-recipes .cky-consent-container,
	body.single-recipes .cky-btn-revisit-wrapper,
	body.single-recipes #kt-scroll-up,
	body.single-recipes .scroll-up-wrap {
		display: none !important;
	}

	body.single-recipes #inner-wrap,
	body.single-recipes #primary,
	body.single-recipes .content-container,
	body.single-recipes .entry-content-wrap,
	body.single-recipes .entry-content .kb-row-layout-wrap,
	body.single-recipes .entry-content .kt-row-column-wrap,
	body.single-recipes .entry-content .kt-inside-inner-col {
		max-width: none !important;
		min-height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
		box-shadow: none !important;
	}

	/* Header: logo, then the page address so the printout leads back to the site */
	body.single-recipes .entry-content::before {
		content: "";
		display: block;
		height: 0.55in;
		margin-bottom: 4pt;
		background: url("/wp-content/uploads/2026/07/MT-generic-logo-with-denali-2.png") left center / contain no-repeat;
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	body.single-recipes .entry-content[data-print-source]::after {
		content: attr(data-print-source);
		display: block;
		clear: both;
		padding-top: 6pt;
		border-top: 1px solid #999999;
		color: #444444;
		font-size: 8.5pt;
		text-align: center;
	}

	body.single-recipes .entry-content h1 {
		margin: 6pt 0 8pt !important;
		color: #0a3f6b !important;
		font-size: 24pt !important;
		line-height: 1.05 !important;
		break-after: avoid;
	}

	/* Servings / prep: outlined, no fill */
	body.single-recipes .wp-block-kadence-advancedheading.recipe-meta {
		margin: 0 6pt 8pt 0 !important;
		padding: 2pt 9pt !important;
		border: 1px solid #0a3f6b;
		background: none !important;
		color: #0a3f6b !important;
		font-size: 8.5pt !important;
	}

	body.single-recipes .kb-dynamic-html p {
		margin: 0 0 6pt !important;
		color: #222222 !important;
		font-size: 10.5pt !important;
		line-height: 1.45 !important;
	}

	/* Ingredients beside instructions; print widths fall in the tablet
	   breakpoint, where this row would otherwise stack */
	body.single-recipes .entry-content .kb-row-layout-wrap.kb-row-layout-id10221_82569f-ae {
		margin-top: 0.2in !important;
		padding: 0.15in 0 0.3in !important;
		border-top: 1.5px solid #0a3f6b;
	}

	/* Floats, not grid: a grid row doesn't grow when a step is pushed to the
	   next page, so the source line would print over it */
	body.single-recipes .kb-row-layout-id10221_82569f-ae > .kt-row-column-wrap {
		display: block !important;
	}

	body.single-recipes .kb-row-layout-id10221_82569f-ae > .kt-row-column-wrap::after {
		content: "";
		display: block;
		clear: both;
	}

	body.single-recipes .kb-row-layout-id10221_82569f-ae .wp-block-kadence-column {
		height: auto !important;
		margin: 0 !important;
	}

	body.single-recipes .kb-row-layout-id10221_82569f-ae .kadence-column10221_83e2ae-16 {
		float: left;
		width: 36% !important;
		margin-right: 0.35in !important;
	}

	body.single-recipes .kb-row-layout-id10221_82569f-ae .instructions {
		display: flow-root !important;
		width: auto !important;
	}

	body.single-recipes .kb-row-layout-id10221_82569f-ae h3 {
		margin: 0 0 8pt !important;
		color: #0a3f6b !important;
		font-size: 13pt !important;
		break-after: avoid;
	}

	body.single-recipes .kb-row-layout-id10221_82569f-ae ul {
		gap: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		list-style: none !important;
	}

	body.single-recipes .kb-row-layout-id10221_82569f-ae li,
	body.single-recipes .kb-row-layout-id10221_82569f-ae li .wp-block-kadence-advancedheading {
		color: #111111 !important;
		font-size: 10.5pt !important;
		line-height: 1.4 !important;
	}

	body.single-recipes .kb-row-layout-id10221_82569f-ae li {
		margin: 0 0 6pt !important;
		break-inside: avoid;
	}

	/* Ingredients: tick boxes for shopping and prep */
	body.single-recipes .kadence-column10221_83e2ae-16 li {
		display: flex !important;
		align-items: flex-start;
	}

	body.single-recipes .kadence-column10221_83e2ae-16 li::before {
		content: "";
		flex: 0 0 auto;
		width: 9pt;
		height: 9pt;
		margin: 2.5pt 7pt 0 0;
		border: 1px solid #444444;
		border-radius: 2px;
	}

	/* Steps: outlined numbers */
	body.single-recipes .instructions ul.wp-block-kadence-repeatertemplate > li {
		align-items: flex-start;
		margin-bottom: 8pt !important;
	}

	body.single-recipes .instructions ul.wp-block-kadence-repeatertemplate > li::before {
		width: 18px;
		height: 18px;
		min-width: 18px;
		margin-right: 9px;
		border: 1.5px solid #0a3f6b;
		background: none !important;
		color: #0a3f6b !important;
		font-size: 8.5pt;
	}
}