/* ═══════════════════════════════════════════════════════════════
   print.css — Angela Palermo
   Linked with media="print", so ZERO effect on screen.
   Tuned to the real .recipe-* markup in recipe.html.
   Last updated: 2026-08-04

   IMPORTANT: link this AFTER the inline <style> block in
   recipe.html, i.e. immediately before </head>. Several rules
   here match the inline block's specificity exactly, so source
   order decides the winner.
   ═══════════════════════════════════════════════════════════════ */

@page {
  size: A4 portrait;
  margin: 14mm 15mm 16mm;
}

/* ─── 1. Hide site chrome ─────────────────────────────────────
   Or add class="no-print" / data-print="hide" to any element.  */
.site-nav,
footer,
.popup-overlay,
.cart-panel,
.cart-overlay,
.newsletter-section,
.nav-cart,
.btn,
.recipe-print-wrap,
video,
iframe,
.no-print,
[data-print="hide"] {
  display: none !important;
}

/* ─── 2. Page reset ──────────────────────────────────────────
   Kill shadows only — the ochre and pistachio accents are the
   brand and are deliberately kept.                             */
html,
body {
  background: #fff !important;
  margin: 0 !important;
  padding: 0 !important;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

main {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

main *,
main *::before,
main *::after {
  box-shadow: none !important;
  text-shadow: none !important;
}

.recipe-article {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 10.5pt !important;
  line-height: 1.5 !important;
  color: #000 !important;
}

/* ─── 3. Title block ─────────────────────────────────────── */
.recipe-eyebrow {
  font-size: 7.5pt !important;
  letter-spacing: .2em !important;
  margin: 0 0 3mm !important;
  color: #4f6b4a !important;
}

.recipe-eyebrow a {
  color: #4f6b4a !important;
  border-bottom: none !important;
}

.recipe-title {
  font-size: 24pt !important;
  line-height: 1.08 !important;
  margin: 0 0 2.5mm !important;
  break-after: avoid;
  page-break-after: avoid;
}

.recipe-title-en {
  font-size: .55em !important;
}

.recipe-byline {
  font-size: 8pt !important;
  letter-spacing: .08em !important;
  margin: 0 0 6mm !important;
}

/* ─── 4. Hero image ──────────────────────────────────────── */
.recipe-hero {
  margin: 0 0 6mm !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.recipe-hero img {
  max-width: 100% !important;
  max-height: 68mm !important;
  width: auto !important;
  height: auto !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
}

.recipe-hero-cap {
  font-size: 8.5pt !important;
  margin-top: 2mm !important;
}

/* ─── 5. Intro ───────────────────────────────────────────── */
.recipe-intro p {
  font-size: 10.5pt !important;
  line-height: 1.6 !important;
  margin: 0 0 3mm !important;
  orphans: 3;
  widows: 3;
}

.recipe-intro p:first-of-type::first-letter {
  font-size: 2.8em !important;
  padding: 2px 7px 0 0 !important;
}

/* ─── 6. Prep / cook / serves strip ──────────────────────── */
.recipe-meta {
  margin: 6mm 0 !important;
  border: 0.6pt solid #A87900 !important;
  border-radius: 0 !important;
  background: transparent !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.recipe-meta-cell {
  padding: 3mm 4mm !important;
  border-right: 0.4pt solid #d8c9a8 !important;
}

.recipe-meta-k {
  font-size: 6.5pt !important;
  margin-bottom: 1mm !important;
}

.recipe-meta-v {
  font-size: 11pt !important;
}

/* ─── 7. Section headings ────────────────────────────────── */
.recipe-section {
  margin: 7mm 0 !important;
}

.recipe-sec {
  font-size: 15pt !important;
  margin: 0 0 1.5mm !important;
  break-after: avoid;
  page-break-after: avoid;
}

.recipe-sec-rule {
  width: 16mm !important;
  height: 1.2pt !important;
  margin-bottom: 4mm !important;
  background: #A87900 !important;
  border-radius: 0 !important;
}

/* ─── 8. Ingredients ─────────────────────────────────────────
   The screen dot is a coloured background box, which vanishes
   when the reader has "background graphics" switched off in the
   print dialogue. Swapped for a real bullet character, which
   always prints.                                               */
.recipe-ing-group {
  margin-bottom: 5mm !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.recipe-ing-heading {
  font-size: 8pt !important;
  margin: 0 0 2mm !important;
}

.recipe-ingredients li {
  padding: 1.6mm 0 1.6mm 6mm !important;
  border-bottom: 0.3pt dashed #cfc3ad !important;
  line-height: 1.4 !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.recipe-ingredients li::before {
  content: "\2022" !important;
  left: 1mm !important;
  top: 1.4mm !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  border-radius: 0 !important;
  color: #4f6b4a !important;
  font-size: 12pt !important;
  line-height: 1 !important;
}

/* ─── 9. Method ──────────────────────────────────────────────
   Same problem, worse: the step number is white text on an ochre
   filled circle. With background graphics off, the number
   disappears completely. Redrawn as an ochre ring with ochre
   text — borders and text always print.                        */
.recipe-method li {
  padding: 0 0 4mm 11mm !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

.recipe-method li::before {
  width: 8mm !important;
  height: 8mm !important;
  top: -1mm !important;
  background: #fff !important;
  border: 0.8pt solid #A87900 !important;
  color: #A87900 !important;
  font-size: 10pt !important;
}

.recipe-step-label {
  font-size: 10.5pt !important;
  margin-bottom: 0.8mm !important;
  break-after: avoid;
  page-break-after: avoid;
}

/* ─── 10. Serving note ───────────────────────────────────── */
.recipe-serve-note {
  margin: 6mm 0 0 !important;
  padding: 3mm 4mm !important;
  background: transparent !important;
  border-left: 1.5pt solid #4f6b4a !important;
  border-radius: 0 !important;
  font-size: 10.5pt !important;
  break-inside: avoid;
  page-break-inside: avoid;
}

/* ─── 11. Print-only masthead + footer (injected by JS) ──── */
.print-only {
  display: block !important;
}

.print-head {
  margin: 0 0 6mm !important;
  padding-bottom: 2.5mm !important;
  border-bottom: 1pt solid #A87900 !important;
}

.print-head .print-brand {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 15pt;
  color: #A87900 !important;
  line-height: 1;
}

.print-head .print-kicker {
  margin-top: 1.5mm;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 7.5pt;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #4f6b4a !important;
}

.print-foot {
  margin-top: 8mm !important;
  padding-top: 2.5mm !important;
  border-top: 0.4pt solid #A87900 !important;
  font-family: 'Lato', Arial, sans-serif;
  font-size: 7.5pt;
  letter-spacing: .05em;
  color: #3a2e26 !important;
  break-inside: avoid;
}