/* Print rules. Governing spec: docs/design-system/ui-ux-specification.md §5, screens/recipe.md §4,
   information-architecture.md §2. Loaded with media="print" after main.css. */

@page {
  margin: 15mm;
}

/* Ink: pure black text on pure white, no shadows or fills. */
html,
body,
* {
  background: #ffffff !important;
  color: #000000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body {
  display: block;
  font-size: 11pt;
  line-height: 1.4;
}

/* Interactive chrome and controls are hidden. */
.skip-link,
.site-header,
.site-footer,
recipe-search,
.search-status,
.term-row,
.recipe-bar,
.cook-start,
.btn-stepper,
cook-timer {
  display: none !important;
}

.container {
  max-width: none;
  padding: 0;
}

a {
  text-decoration: none;
}

h1,
h2,
h3 {
  break-after: avoid;
}

h1 {
  margin-top: 0;
}

/* The hero prints as a small thumbnail. */
.recipe-hero {
  float: right;
  width: 45mm;
  margin: 0 0 4mm 6mm;
}

.recipe-hero img {
  border-radius: 0;
}

/* This recipe's categories and tags print as plain names. */
.recipe-terms .pill {
  display: inline;
  min-height: 0;
  padding: 0;
  border: 0;
  font-size: inherit;
  font-weight: inherit;
}

.recipe-terms li:not(:last-child)::after {
  content: ",";
}

/* Ingredients on the left with an empty box to tick, steps on the right. */
.recipe-columns {
  display: grid !important;
  grid-template-columns: 35% 65%;
  gap: 8mm;
  clear: both;
}

.ingredient-item::before {
  content: "[ ]\00a0";
  font-family: var(--font-family-mono);
}

.ingredient-item,
.recipe-tools li,
.nutrition-table th,
.nutrition-table td {
  border-color: #000000 !important;
}

.step {
  min-height: 0;
  margin-bottom: 3mm;
  padding: 0 0 0 8mm;
  border: 0;
  break-inside: avoid;
}

.step::before {
  top: 0;
  left: 0;
}

/* The source prints its address as text. */
.recipe-source a::after {
  content: " (" attr(href) ")";
}

/* Every printed page ends with its own URL. */
.print-url {
  display: block !important;
  margin: 8mm 0 0;
  font-size: 9pt;
}