/*
 * THE PRINT SHEET.
 *
 * ⚠ THE SECTIONS ARE HIDDEN BY DEFAULT AND SHOWN BY CLASS, not the other way
 * round. A stylesheet that hid things on demand would print everything the
 * first time a class name was mistyped — and the failure would be a wasted
 * page of ink that nobody notices until the cartridge runs out. This way a
 * mistake prints too little, which is the safe direction.
 *
 * ⚠ AND IT APPLIES ON SCREEN TOO. The preview must be what comes out of the
 * printer; two rule sets that disagree is how a print view starts lying.
 */

.fdp { max-width: 46rem; margin: 0 auto; padding: 1.5rem 1rem 3rem; color: #111; }

/* Nothing shows until its part is switched on. */
.fdp-photo,
.fdp-summary,
.fdp-meta,
.fdp-scaled,
.fdp-ingredients,
.fdp-method,
.fdp-nutrition,
.fdp-notes { display: none; }

.fdp--photo .fdp-photo,
.fdp--summary .fdp-summary,
.fdp--meta .fdp-meta,
.fdp--meta .fdp-scaled,
.fdp--ingredients .fdp-ingredients,
.fdp--method .fdp-method,
.fdp--nutrition .fdp-nutrition,
.fdp--notes .fdp-notes { display: block; }

/* ── The chooser, which is never printed ─────────────────────────────── */
.fdp-chooser {
	border: 1px solid #d8dde2;
	border-radius: .5rem;
	padding: 1rem 1.25rem;
	margin-bottom: 2rem;
	background: #f8fafb;
}
.fdp-chooser__title { margin: 0 0 .5rem; font-weight: 600; }
.fdp-chooser__boxes { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin-bottom: .75rem; }
.fdp-chooser__boxes label { display: flex; align-items: center; gap: .35rem; font-size: .95rem; }
.fdp-chooser__actions { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; }
.fdp-chooser__note { color: #5b6770; font-size: .85rem; }

/* ── The sheet ───────────────────────────────────────────────────────── */
.fdp-head h1 { font-size: 1.6rem; margin: 0 0 .35rem; }
.fdp-meta { margin: 0 0 .25rem; color: #333; }
.fdp-scaled { margin: 0 0 .5rem; font-style: italic; color: #5b6770; }
.fdp-summary { margin: 0 0 1rem; }
.fdp-photo { margin: 0 0 1rem; }
.fdp-photo img { max-width: 100%; height: auto; }

.fdp-section { margin-top: 1.5rem; }
.fdp-section h2 {
	font-size: 1.1rem;
	margin: 0 0 .5rem;
	padding-bottom: .25rem;
	border-bottom: 1px solid #222;
}
.fdp-section h3 { font-size: .95rem; margin: .75rem 0 .25rem; }

.fdp-ingredients ul { margin: 0; padding-left: 1.2rem; }
.fdp-ingredients li { margin-bottom: .2rem; }
.fdp-ingredients li.is-optional { color: #444; font-style: italic; }
.fdp-note { color: #5b6770; }

.fdp-method ol { margin: 0; padding-left: 1.3rem; }
.fdp-method li { margin-bottom: .55rem; }
.fdp-prose { line-height: 1.5; }
.fdp-none { color: #5b6770; }

.fdp-nutrition__list { margin: 0; padding-left: 1.2rem; }

.fdp-foot {
	margin-top: 2rem;
	padding-top: .5rem;
	border-top: 1px solid #ccc;
	font-size: .8rem;
	color: #5b6770;
	word-break: break-all;
}

/* ── Paper ───────────────────────────────────────────────────────────── */
@media print {
	.no-print, .fdp-chooser { display: none !important; }

	/* The host template's furniture, if this is ever printed inside one. */
	header.header, nav, footer.footer, .sp-preloader,
	#sp-header, #sp-footer, #sp-bottom, .breadcrumb { display: none !important; }

	.fdp { max-width: none; padding: 0; color: #000; }

	body { background: #fff; font-size: 11pt; }

	/* ⚠ A STEP SPLIT ACROSS TWO PAGES IS A STEP READ TWICE. */
	.fdp-ingredients li,
	.fdp-method li,
	.fdp-section h2,
	.fdp-section h3 { break-inside: avoid; page-break-inside: avoid; }

	.fdp-section h2, .fdp-section h3 { break-after: avoid; page-break-after: avoid; }

	/* A photograph is the most expensive thing on the page; when it is asked
	   for, keep it small enough to leave room for the cooking. */
	.fdp--photo .fdp-photo img { max-height: 7cm; width: auto; }

	a[href]::after { content: ""; }
}

@page { margin: 1.6cm; }