/* PART 8. PRINTING GIVES PLAIN TEXT, AND IT STARTS AT THE RECIPE.
 *
 * No graphics of any kind, no background, no border, no panel fill. Not the
 * intro, not the SEO prose above the recipe -- a printed page is for standing
 * at a worktop with, and everything before "Recipe:" is for a reader on a
 * screen.
 *
 * ORDER: title, servings, times, difficulty, ingredients with their
 * sub-headings and footnotes, directions, notes, the nutrition line, then
 * tomthechef.com and the recipe's address.
 */
@media print {
  @page { margin: 14mm; }

  html, body, .ttc-v2 {
    background: #fff !important;
    color: #000 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: "Montserrat", "Segoe UI", system-ui, Arial, sans-serif;
  }
  /* every fill, rule and rounded box goes */
  .ttc-v2 *, .ttc-v2 *::before, .ttc-v2 *::after {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #000 !important;
    text-shadow: none !important;
    float: none !important;
  }

  /* ---- NOT PRINTED ---------------------------------------------------- */
  header, footer, nav, aside,
  #main-right, .v2-side,
  .hero, .hero-photo, .hero-card,          /* the intro lives here */
  .introwrap, .h-intro, .h-more, .popup-dialog,
  .metabar,                                /* repeated inside the card */
  .bws, .jump, .tips, .card:not(.step),    /* "Before we start" and the SEO cards */
  .kofi, .rlabel,
  .gal, .gal-main, .gal-thumbs,
  .advertising-banner, .ads-banner-slot,
  .share, .share-toggle, .ic,
  .h-diets, .nut-diets,
  .h-rating, .rate, .stars, .rtail, .wr, .rgrp,
  .print, .sign,
  .embed, .ttc-embed-slot, .gt-block.comments,
  .flag, .newstar, .avatar, .natnew, .rby, .pub, .rrule,
  /* ROUND 85: the byline's new anchor. It is already invisible on paper
     without this line -- `.hero` and `.rby` above it are both display:none, so
     it collapses to zero width, which is what a print-media check measured --
     but it is named here so that the reason is the rule and not an ancestor
     somebody may move later. Nothing on paper changed in round 85. */
  .byline-link,
  img, svg, picture, iframe, .ring, .bars, .cup, .chev, .pinbtn, .arrow,
  .images, .ttc-stepshot {
    display: none !important;
  }

  /* ---- PRINTED, in order ---------------------------------------------- */
  .rcard, .rhead, .rmeta, .boxes, .box, .nut, .card.step {
    display: block !important;
    padding: 0 !important;
    margin: 0 0 10pt !important;
    width: auto !important;
    height: auto !important;
    min-height: 0 !important;
    flex: none !important;
    overflow: visible !important;
  }
  .rh1 { display: block !important; }
  .rh1 h2 { font-size: 20pt !important; margin: 0 0 6pt !important; }
  .rh2 { display: block !important; }
  .ryield { display: block !important; font-size: 11pt !important;
            margin-bottom: 6pt !important; }
  .rmeta .mb-item {
    display: inline !important;
    margin-right: 16pt !important;
    font-size: 11pt !important;
  }
  /* On screen the three icons say which number is which. In print the icons
   * are gone, and "30 min. 1 h. 1/5" on paper means nothing, so the labels
   * are spelled out. The words are the site's own field names. */
  .rmeta .mb-item:nth-of-type(1)::before { content: "Active time: "; }
  .rmeta .mb-item:nth-of-type(2)::before { content: "Total time: "; }
  .rmeta .mb-item:nth-of-type(3)::before { content: "Difficulty: "; }
  .rmeta .mb-item::before { font-weight: 700; }
  .box h3, .nut h3 { font-size: 13pt !important; margin: 12pt 0 5pt !important; }
  .ing-cols { display: block !important; }
  .li { font-size: 11pt !important; line-height: 1.45 !important; }
  .li.sec { font-weight: 700 !important; margin-top: 9pt !important; }
  .li a { text-decoration: none !important; color: #000 !important; }
  .ing-notes { margin-top: 9pt !important; }
  .ing-notes p { font-size: 9.5pt !important; line-height: 1.4 !important; }
  .dirlabel {
    display: block !important;
    font-size: 13pt !important;
    margin: 12pt 0 5pt !important;
  }
  .step { padding: 0 !important; }
  .step h3 { font-size: 12pt !important; margin: 9pt 0 4pt !important; }
  .sstep { font-size: 11pt !important; margin-left: 0 !important;
           display: block !important; }
  .sstep .lead { font-weight: 700 !important; }
  .sstep .sstep { margin-left: 16pt !important; }
  .slist { font-size: 10.5pt !important; margin-top: 6pt !important; }
  .nut-vals { font-size: 10.5pt !important; }
  .nut-note { font-size: 9pt !important; }

  /* ---- nothing breaks in the middle of a thought ----------------------- */
  .box, .box.ing, .box.too, .nut { break-inside: avoid; page-break-inside: avoid; }
  .card.step, .sstep { break-inside: avoid; page-break-inside: avoid; }
  .li, .ing-notes p { break-inside: avoid; page-break-inside: avoid; }
  h1, h2, h3, .li.sec { break-after: avoid; page-break-after: avoid; }

  /* ---- where it came from ---------------------------------------------- */
  .ttc-v2::after {
    content: "tomthechef.com — " attr(data-print-url);
    display: block !important;
    margin-top: 14pt;
    padding-top: 6pt;
    border-top: 1px solid #000 !important;
    font-size: 9pt;
  }
}