/* print.css — the resource pages as documents.
 *
 * Loaded with media="print" by /guide, /checklist, /templates and /glossary, and
 * used by apps/produce/scripts/build-resource-pdfs.mjs to generate the PDFs in
 * public/downloads/. One stylesheet serves both, which is the point: the PDF a
 * reader downloads and the page a crawler reads are the same document, so they
 * cannot drift into saying different things.
 *
 * What it does, in order of how much it matters:
 *   1. Strips the app — nav, footer, forms, CTAs, decoration. A document does
 *      not have a signup button.
 *   2. Makes the hero a cover page.
 *   3. Keeps tables, check rows and code blocks off page boundaries.
 *   4. Turns <details> inside out, because a collapsed answer prints as a
 *      heading with nothing under it.
 */

@page {
  size: A4;
  /* Top margin leaves room for the running header the PDF build injects. */
  margin: 18mm 16mm 20mm;
}

/* ---- strip the application ---------------------------------------------- */
.mb-nav, .mb-navbar, nav#mb-nav, .mb-mobile, .mb-progress,
.mk-footer, footer,
.mk-blob, .mk-crumb,
form, .rq, .rq-fine, .rq-msg,
.mk-btns, .mk-btn, .mk-cta, .mk-rail, .tp-copy,
.gd-toc + p, .mk-arrow {
  display: none !important;
}
/* The "keep going" and capture bands are navigation, not content. */
section[id="updates"], section[id="pl-capture"], section:has(> .mk-wrap > .mk-rail) {
  display: none !important;
}

/* ---- reveals must not survive into print --------------------------------- *
 * marketing.css reveals section blocks with a SCROLL-DRIVEN animation
 * (`animation-timeline: view()`) whose keyframes start at opacity 0, held by
 * fill-mode `both`. A paginated render has no scroll timeline, so progress
 * stays at 0 forever and every one of those blocks prints invisible — the text
 * is still in the PDF's text layer, so it reads as a heading that silently
 * vanished rather than as an obvious blank. Clear `animation` outright, exactly
 * as the reduced-motion block in marketing.css does: killing the transition
 * alone would leave them stranded at opacity 0. */
.mk-hero .mk-crumb, .mk-hero h1.mk-h1, .mk-hero .mk-lead, .mk-hero .mk-btns,
.mk-hero .mk-answer, .mk-hero .mk-panel,
.mk-sec .mk-sec-head, .mk-sec .mk-card, .mk-sec .mk-panel, .mk-sec .mk-answer,
.mk-sec .mk-rail a, .mk-sec .mk-stat-cap {
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

body {
  background: #fff !important;
  color: #1A1D24 !important;
  font-size: 10.5pt;
  line-height: 1.5;
}
.mb-has-nav { padding-top: 0 !important; }
.mk-sec, .mk-sec-tight { padding: 0 0 10mm !important; border: 0 !important; background: none !important; }
.mk-sec.mk-white, .mk-sec.mk-warm { background: none !important; }
.mk-wrap { max-width: none !important; padding: 0 !important; }
.mk-narrow { max-width: none !important; }

/* ---- the cover ----------------------------------------------------------- */
.mk-hero, .hero {
  padding: 26mm 0 0 !important;
  break-after: page;
  overflow: visible !important;
}
.mk-hero h1, .hero h1, h1.mk-h1 {
  font-size: 34pt !important;
  line-height: 1.04 !important;
  letter-spacing: -0.02em;
  max-width: 22ch;
  margin: 0 0 8mm !important;
}
.mk-hero .mk-lead, .hero .lead {
  font-size: 13pt !important;
  line-height: 1.5 !important;
  max-width: 44ch;
  color: #3A3330 !important;
}
/* A rule and the provenance line, so the cover states where this came from. */
.mk-hero .mk-note, .hero .muted {
  margin-top: 10mm !important;
  padding-top: 4mm;
  border-top: 2px solid #EC6B4C;
  font-size: 9pt !important;
  color: #6B625B !important;
  max-width: 60ch;
}

/* ---- body ---------------------------------------------------------------- */
h2, .mk-h2, .ck-h2, .gd-h2, .tp-h2 {
  font-size: 17pt !important;
  line-height: 1.15 !important;
  margin: 8mm 0 3mm !important;
  break-after: avoid;
  break-inside: avoid;
}
h3, .mk-h3 { font-size: 12.5pt !important; margin: 6mm 0 2mm !important; break-after: avoid; }
h4 { font-size: 11pt !important; break-after: avoid; }
p, li { orphans: 3; widows: 3; }
.mk-p, .mk-lead, p { max-width: none !important; font-size: 10.5pt !important; }
.mk-note, .note { font-size: 9pt !important; color: #6B625B !important; }

/* Section eyebrows keep the numbering that the headings refer to. */
.gd-num, .ck-weight, .tp-file, .rs-label {
  font-size: 8pt !important;
  letter-spacing: .12em;
  color: #C24E2E !important;
  margin-bottom: 2mm !important;
}

/* The guide's contents list is genuinely useful in a document — keep it, but
   as one column so the page numbers of a printed copy still read in order. */
.gd-toc { columns: 1 !important; }
.gd-toc li { padding: 3px 0 !important; font-size: 10pt !important; }

/* ---- page breaks ---------------------------------------------------------
 * Only SHORT things get `avoid`. A tall block that refuses to split doesn't
 * stay together — it jumps to the next page and leaves the previous one half
 * empty, which is worse than a clean split. So rows, check entries and quotes
 * hold together; tables and code blocks are allowed to continue overleaf. */
.ck, .gd-layer, .pl-item, .rs-item, .term, blockquote, .gd-quote,
.mk-checks li, .rp-also li, tr, details > summary {
  break-inside: avoid;
}
.mk-table-scroll, table, tbody, .tp-code, .tp-code pre, pre, details {
  break-inside: auto;
  overflow: visible !important;
}
table { width: 100% !important; border-collapse: collapse; font-size: 9.5pt !important; }
table.mk-table { min-width: 0 !important; }
table th, table td { padding: 2.5mm 4mm 2.5mm 0 !important; border-top: 1px solid #E4DAD2 !important; }
table thead th { border-bottom: 1.5pt solid #1A1D24 !important; font-size: 8pt !important; }
thead { display: table-header-group; }  /* repeat headers across pages */

/* ---- code ---------------------------------------------------------------- */
.tp-code pre {
  background: #FBF8F5 !important;
  border: 1px solid #E4DAD2 !important;
  border-radius: 3mm !important;
  padding: 4mm !important;
}
.tp-code code, pre, code {
  font-size: 8pt !important;
  line-height: 1.5 !important;
  /* A PDF has no horizontal scrollbar: anything that overflows is simply lost. */
  white-space: pre-wrap !important;
  word-break: break-word;
}

/* ---- collapsed content prints open --------------------------------------- */
details { display: block !important; }
details > div { display: block !important; padding: 0 0 4mm !important; }
details > summary {
  list-style: none;
  font-size: 11pt !important;
  font-weight: 600;
  padding: 3mm 0 1mm !important;
  break-after: avoid;
}
details > summary::after, details > summary::marker { display: none !important; content: none !important; }
.mk-faqs { border: 0 !important; }
details.mk-faq { border-bottom: 1px solid #E4DAD2 !important; }

/* ---- links --------------------------------------------------------------- */
a { color: #1A1D24 !important; text-decoration: none; }
/* Body links carry their destination, because a printed link is otherwise a
   dead end. Nav and card links are hidden above, so this only hits prose. */
.mk-p a[href^="/"]::after, li a[href^="/"]::after, .ck a[href^="/"]::after,
.mk-note a[href^="/"]::after, details a[href^="/"]::after, dd a[href^="/"]::after {
  content: " (mentionbeat.com" attr(href) ")";
  font-size: 8pt;
  color: #6B6158;
}

/* ---- glossary (console.css stack, not marketing.css) --------------------- */
.band, .wrap { background: none !important; padding: 0 !important; max-width: none !important; }
.terms { max-width: none !important; }
.term { padding: 3mm 0 !important; border-bottom: 1px solid #E4DAD2 !important; }
.term dt { font-size: 11pt !important; }
.term dd { font-size: 10pt !important; color: #3A3330 !important; }

/* ---- checklist rows ------------------------------------------------------ */
.ck { padding: 4mm 0 !important; }
.ck-name { font-size: 11.5pt !important; }
.ck-id { font-size: 8pt !important; }
.sev { border: 1px solid #E4DAD2; font-size: 7.5pt !important; padding: 1px 6px !important; }
.sev-critical { background: #FBEAE3 !important; color: #B4442A !important; }
.sev-important { background: #FCF1E6 !important; color: #96601F !important; }
.sev-minor { background: #F7F3EF !important; color: #6B625B !important; }