/**
 * Printweergave voor een enkel recept — bewust een eigen, compacte opmaak
 * i.p.v. de schermweergave verkleind, zodat het gros van de recepten op
 * één A4'tje past: ingrediënten en bereidingswijze naast elkaar (net als
 * op een echt receptenkaartje), geen sterrenbeoordeling/advertenties/
 * afbeeldingen bij de stappen — dat kost ruimte zonder op papier iets toe
 * te voegen. Spacing bewust krap gehouden (elk puntje scheelt op een
 * recept met veel stappen), geen scheidingslijnen tussen stappen — puur
 * witruimte + het genummerde rondje, net als in Apple's eigen documenten.
 *
 * @package Umami
 */

@media print {
	@page {
		margin: 14mm 14mm;
	}

	/* Alles weg wat niets toevoegt op papier. */
	.site-header, .site-footer, .recipe-hero, .recipe-actions, .related-recipes,
	.nav-toggle, .header-actions, .skip-link, .rating-widget,
	.ad-slot, .steps-list__image, .portion-stepper__btn,
	.recipe-hero__title-row .favorite-btn {
		display: none !important;
	}

	.recipe-print-header, .recipe-print-footer {
		display: block !important;
	}

	* {
		box-shadow: none !important;
		text-shadow: none !important;
		background-image: none !important;
	}

	body {
		font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
		font-size: 10pt;
		line-height: 1.35;
		color: #1d1d1f;
		background: #fff;
	}
	a { color: inherit; text-decoration: none; }
	.container { max-width: none; padding: 0; }

	/* ---- Kleine letterhead-achtige kop (vervangt de verborgen hero) ---- */
	.recipe-print-header__logo {
		width: 46pt;
		height: auto;
		margin: 0 0 8pt;
	}
	.recipe-print-header h1 {
		font-size: 19pt;
		font-weight: 700;
		letter-spacing: -0.01em;
		margin: 0 0 2pt;
	}
	.recipe-print-header p {
		font-size: 9pt;
		color: #6e6e73;
		margin: 0 0 8pt;
	}

	/* ---- Kengetallen-balk: compacte rij met dunne scheidingslijnen ---- */
	.recipe-meta-bar {
		display: flex;
		max-width: none;
		border-top: 0.75pt solid #d2d2d7;
		border-bottom: 0.75pt solid #d2d2d7;
		border-radius: 0;
		box-shadow: none;
		padding: 5pt 0;
		margin: 0 0 10pt;
	}
	.recipe-meta-bar__item {
		flex: 1;
		text-align: center;
		border-right: 0.75pt solid #d2d2d7;
		padding: 0 4pt;
	}
	.recipe-meta-bar__item:last-child { border-right: none; }
	.recipe-meta-bar__value { font-size: 11pt; font-weight: 600; }
	.recipe-meta-bar__label { font-size: 7pt; color: #6e6e73; text-transform: uppercase; letter-spacing: .04em; margin-top: 1pt; }
	.portion-stepper { display: block; }
	.portion-stepper__value { display: inline-block; }

	/* ---- Twee kolommen: bereiding breed links, ingrediënten smal rechts
	   — zelfde volgorde als de brondata (geen CSS-herordening nodig), dus
	   robuust in elke printengine. ---- */
	.recipe-layout {
		display: grid !important;
		grid-template-columns: 1fr 185pt;
		gap: 0 20pt;
		align-items: start;
		padding: 0;
	}
	.recipe-content { min-width: 0; }
	.recipe-intro { font-size: 9.5pt; margin-bottom: 8pt; }
	.recipe-content h2 { font-size: 12pt; margin: 0 0 6pt; }

	.steps-list { display: block; }
	.steps-list__item {
		display: flex;
		gap: 7pt;
		margin-bottom: 5pt;
		break-inside: avoid;
	}
	.steps-list__number {
		flex: none;
		width: 14pt;
		height: 14pt;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		border: 0.75pt solid #0071e3;
		color: #0071e3;
		font-size: 7.5pt;
		font-weight: 600;
		margin-top: 0.5pt;
	}
	.steps-list__title { font-size: 8.5pt; text-transform: uppercase; letter-spacing: .03em; color: #6e6e73; margin: 0 0 1pt; }
	.steps-list__text { font-size: 9.5pt; margin: 0; }

	/* ---- Ingrediënten: grijs kaartje, aanvinkbaar (handig bij het
	   boodschappen doen), meegroeiend met de bereidingskolom. De grijze
	   achtergrond zit sinds de aparte advertentiekaart op .recipe-sidebar__
	   card (het schermdeel eromheen, .recipe-sidebar, is alleen nog een
	   layout-wrapper) — zonder deze regel zou .recipe-sidebar hier zijn
	   eigen (lege) grijze kader om die kaart heen tekenen, dubbelop. ---- */
	.recipe-sidebar { position: static; }
	.recipe-sidebar__card {
		background: #f5f5f7;
		border-radius: 8pt;
		padding: 10pt 12pt;
		break-inside: avoid;
	}
	.recipe-sidebar__card h3 { font-size: 10pt; margin: 0 0 6pt; }
	.ingredient-group-title { font-size: 8pt; font-weight: 600; text-transform: uppercase; color: #6e6e73; margin: 6pt 0 2pt; }
	.ingredient-group-title:first-child { margin-top: 0; }
	.ingredient-list__item {
		display: flex;
		align-items: flex-start;
		gap: 5pt;
		font-size: 9pt;
		padding-block: 2pt;
		border-bottom: 0.5pt solid #e5e5ea;
	}
	.ingredient-list__checkbox {
		flex: none;
		width: 7.5pt;
		height: 7.5pt;
		margin-top: 1.5pt;
		border: 0.75pt solid #a1a1a6;
		border-radius: 2pt;
	}
	.ingredient-list__amount { font-weight: 600; margin-right: 2pt; }

	/* ---- Onderdelen na de stappen: compact, elk als één blok bij elkaar. ---- */
	.recipe-notes, .recipe-variations, .recipe-pairings, .recipe-allergens, .nutrition-table {
		margin-top: 8pt;
		break-inside: avoid;
	}
	.recipe-notes h3, .recipe-variations h3, .recipe-pairings h3 { font-size: 9.5pt; margin: 0 0 2pt; }
	.recipe-notes p, .recipe-variations li, .recipe-pairings li { font-size: 9pt; }

	.recipe-allergens { font-size: 8.5pt; }
	.allergen-chip { display: inline-block; border: 0.75pt solid #d2d2d7; border-radius: 999pt; padding: 1pt 7pt; font-size: 7.5pt; margin-right: 4pt; }

	.nutrition-table table { width: auto; font-size: 8.5pt; }
	.nutrition-table caption { text-align: left; font-size: 8.5pt; font-weight: 600; margin-bottom: 2pt; }
	.nutrition-table th, .nutrition-table td { padding: 1pt 10pt 1pt 0; }
	.nutrition-table__disclaimer { font-size: 7pt; color: #6e6e73; margin-top: 2pt; }

	/* ---- Kleine, grijze voetregel — herkomst van het recept op papier. ---- */
	.recipe-print-footer {
		margin-top: 10pt;
		padding-top: 5pt;
		border-top: 0.5pt solid #d2d2d7;
		font-size: 7.5pt;
		color: #a1a1a6;
	}
}