/* ==========================================================================
   /publisher/recipe-print.css  --  the printed recipe card       media="print"

   WHY THIS FILE CAN BE THIS SIMPLE
   Every stylesheet the site loads is media-limited to the screen (default.css,
   navbar.css, content.css are media="screen"; mobile.css is handheld/screen),
   and body.php's own <style> block is media="screen" too. None of it reaches
   the printer, so this sheet is not overriding anything -- it is the ONLY CSS
   in the print context and the page is a blank canvas.

   WHAT IT PRINTS
   Not the web page. body.php renders a purpose-built card into
   #recipe-print-sheet (display:none on screen) and this file reveals it while
   hiding everything else: title, the three facts, ingredients with tick boxes,
   numbered steps, and where it came from. No hero image, no card colours, no
   navbar, no footer, no affiliate links -- a kitchen document that reads at
   arm's length and survives a mono printer. Same result whether the visitor
   clicks "Print recipe" or hits Ctrl+P.

   Sister sheet: /mise/mise-print.css. Keep the two visually in step.
   ========================================================================== */

@page {
	size: auto;
	margin: 14mm 13mm 12mm;
}

/* ---------- hide the web page ---------- */
#navbar,
#topmenu-desktop,
#topmenu-mobile-beta,
#footer,
#sidebar,
#popup,
#modalPage2,
#waiting,
#waiter,
#robotMsg,
#shareButtons,
#scrollTop,
#rr-digest-banner,
#loading_wrapper,
#columns {
	display: none !important;
}
/* Belt and braces for anything the chrome adds later: inside the page shell,
   only #wrap survives, and inside #wrap only the sheet. */
#page-container > *:not(#wrap) { display: none !important; }
#wrap > *:not(#recipe-print-sheet) { display: none !important; }

/* ---------- the canvas ---------- */
html, body {
	background: #fff !important;
	color: #000;
	margin: 0;
	padding: 0;
	width: auto;
	border: 0;
	-webkit-print-color-adjust: exact;
	print-color-adjust: exact;
}
body {
	font: 10.5pt/1.45 "Muli", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-align: left;
}
#wrap {
	display: block !important;
	padding: 0 !important;
	margin: 0 !important;
	max-width: none !important;
	width: auto !important;
}
#recipe-print-sheet {
	display: block !important;
	text-align: left;
	color: #000;
}
#recipe-print-sheet * { box-sizing: border-box; }
#recipe-print-sheet a { color: #000; text-decoration: none; }

/* ---------- masthead ---------- */
#recipe-print-sheet .pm {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12pt;
	border-bottom: 1.5pt solid #000;
	padding-bottom: 5pt;
}
#recipe-print-sheet .pm .brand {
	font-size: 11pt;
	font-weight: 800;
	letter-spacing: .22em;
	text-transform: uppercase;
}
#recipe-print-sheet .pm .src {
	font-size: 8pt;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #444;
}

#recipe-print-sheet h1 {
	font-size: 23pt;
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -.01em;
	margin: 12pt 0 2pt;
	color: #000;
}
#recipe-print-sheet .psub {
	font-size: 10pt;
	color: #333;
	margin: 0 0 12pt;
}

/* ---------- the facts: time / servings / calories ---------- */
#recipe-print-sheet .pfacts {
	display: flex;
	gap: 0;
	border: 1pt solid #000;
	border-radius: 3pt;
	overflow: hidden;
	break-inside: avoid;
	page-break-inside: avoid;
}
#recipe-print-sheet .pfacts div {
	flex: 1;
	padding: 7pt 9pt;
	border-left: .5pt solid #999;
}
#recipe-print-sheet .pfacts div:first-child { border-left: 0; }
#recipe-print-sheet .pfacts .k {
	display: block;
	font-size: 7.5pt;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #555;
}
#recipe-print-sheet .pfacts .v {
	display: block;
	font-size: 15pt;
	font-weight: 800;
	line-height: 1.15;
	margin-top: 2pt;
	font-variant-numeric: tabular-nums;
}

/* ---------- section headings ---------- */
#recipe-print-sheet h2 {
	font-size: 9pt;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 16pt 0 6pt;
	padding-bottom: 3pt;
	border-bottom: .75pt solid #000;
	break-after: avoid;
	page-break-after: avoid;
	color: #000;
}

/* ---------- ingredients ---------- */
/* Two columns once the list is long enough to earn them (body.php adds .two
   at 8+ items). Column balance keeps the page short. */
#recipe-print-sheet .pcols.two { column-count: 2; column-gap: 18pt; }
#recipe-print-sheet .plist { list-style: none; margin: 0; padding: 0; }
#recipe-print-sheet .plist li {
	display: flex;
	align-items: flex-start;
	gap: 6pt;
	padding: 2.5pt 0;
	border-bottom: .5pt dotted #ccc;
	break-inside: avoid;
	page-break-inside: avoid;
}
#recipe-print-sheet .plist .n { flex: 1; }
#recipe-print-sheet .box {
	display: block;
	flex: 0 0 auto;
	width: 9.5pt;
	height: 9.5pt;
	border: .75pt solid #333;
	border-radius: 1.5pt;
	margin-top: 2pt;
}

/* ---------- steps ---------- */
#recipe-print-sheet .psteps { list-style: none; margin: 0; padding: 0; counter-reset: step; }
#recipe-print-sheet .psteps li {
	display: flex;
	align-items: flex-start;
	gap: 8pt;
	padding: 5pt 0;
	border-bottom: .5pt dotted #bbb;
	break-inside: avoid;
	page-break-inside: avoid;
}
#recipe-print-sheet .psteps li:last-child { border-bottom: 0; }
#recipe-print-sheet .psteps .num {
	flex: 0 0 18pt;
	font-size: 13pt;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: #000;
}
#recipe-print-sheet .psteps .txt { flex: 1; padding-top: 1pt; }

/* ---------- foot ---------- */
#recipe-print-sheet .pfoot {
	margin-top: 14pt;
	padding-top: 6pt;
	border-top: .75pt solid #000;
	font-size: 7.5pt;
	line-height: 1.4;
	color: #444;
	break-inside: avoid;
	page-break-inside: avoid;
}
#recipe-print-sheet .pfoot .link { font-weight: 700; color: #000; word-break: break-all; }