/* ==========================================================================
   print.css — for paper and "Save as PDF"

   Whatever theme is on screen, print is ink on white. Navigation and
   interface go away; what's left is the piece, its date, where it came
   from, and every link written out so the page still works on paper.
   ========================================================================== */

@page {
  size: auto;
  margin: 2cm 2.2cm 2.4cm;

  @bottom-left {
    content: "pfunder.me";
    font: 8pt "JetBrains Mono", ui-monospace, monospace;
    color: #666;
  }
  @bottom-right {
    content: counter(page) " / " counter(pages);
    font: 8pt "JetBrains Mono", ui-monospace, monospace;
    color: #666;
  }
}

/* Matches every theme, including the automatic light one, so ink always wins. */
:root:is([data-theme], :not([data-theme])) {
  --bg: #fff;
  --bg-alt: #f3f3f3;
  --fg: #000;
  --dim: #555;
  --rule: #bbb;
  --accent: #000;
  --link: #000;
  --mark: #000;
  color-scheme: light;
}

html {
  font-size: 10pt;
}

/* Tighter rhythm on paper, so a typical recipe fits one sheet. */
p, ul, ol, blockquote, pre, table, figure, details {
  margin-bottom: 1em;
}
h2, h3, h4 {
  margin-top: 1.6em;
}

body {
  background: #fff;
  color: #000;
  line-height: 1.55;
}

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

/* Interface has no meaning on paper. */
.site-header,
.site-nav,
.site-footer,
.skip,
.theme-picker,
.keys,
.prompt,
.no-print {
  display: none !important;
}

.print-only {
  display: block;
}

/* --- the title block ----------------------------------------------------- */

h1 {
  font-size: 16pt;
  margin: 0 0 0.4em;
}

.lede {
  font-size: 11pt;
  color: #333;
}

.meta {
  font-size: 9pt;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  padding: 0.5em 0;
}

/* --- links get written out ----------------------------------------------- */

a {
  color: #000;
  text-decoration: underline;
  background: none !important;
}

.prose a[href^="http"]::after {
  content: " <" attr(href) ">";
  font-size: 8pt;
  color: #555;
  word-break: break-all;
}

/* Internal links: show the full address, since paper has no base URL. */
.prose a[href^="/"]::after {
  content: " <pfunder.me" attr(href) ">";
  font-size: 8pt;
  color: #555;
}

/* --- keep things together ------------------------------------------------ */

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

p, li, blockquote {
  orphans: 3;
  widows: 3;
}

pre, blockquote, table, figure, img, .meta, details {
  break-inside: avoid;
  page-break-inside: avoid;
}

pre {
  border: 1px solid #ccc;
  border-left: 2px solid #000;
  white-space: pre-wrap;
  overflow: visible;
}

/* Collapsed steps print open: paper can't be clicked. */
details {
  border-left: 1px solid #999;
}
details > summary::before,
details[open] > summary::before {
  content: "" / "";
}
details:not([open]) > *:not(summary) {
  display: block !important;
}
details::details-content {
  content-visibility: visible;
  display: block;
}

/* --- images ------------------------------------------------------------- */

/* Images stay off paper; the file line and caption remain as a reference. */
.media figure {
  border: 0;
  padding: 0;
  margin: 0;
}
.media .tint,
.media video,
.media figcaption .bracket {
  display: none;
}
.media summary {
  display: block;
}
.media summary::after {
  content: "pfunder.me" attr(data-src);
  display: block;
  font-size: 8pt;
  color: #555;
}

/* --- recipes ------------------------------------------------------------- */

/* Ingredients sit in two columns so most recipes fit one page. */
.recipe .prose h2:first-of-type + ul {
  columns: 2;
  column-gap: 2em;
}
.recipe .prose ul > li {
  break-inside: avoid;
}

/* Lists in a listing page: drop the grid, keep it plain. */
.ls li {
  grid-template-columns: 11ch 1fr;
}
.ls .kind {
  display: none;
}

/* --- the colophon line at the end of every printed piece ------------------ */

.print-source {
  margin-top: 1.5em;
  break-before: avoid;
  padding-top: 0.6em;
  border-top: 1px solid #000;
  font-size: 8pt;
  color: #555;
}