/* ==========================================================================
   print.css — loaded with media="print".

   Two audiences: a supporter printing a page to take to a club committee,
   and a journalist printing the evidence. Both need the numbers and the
   sources, neither needs the navigation.

   Everything is assumed to be printed in greyscale on a tired office printer.
   ========================================================================== */

@page {
  margin: 16mm 14mm;
}

:root {
  /* Force the light palette: nobody wants a dark-mode page printed. */
  color-scheme: light;
  --c-ink: #000;
  --c-paper: #fff;
  --c-text: #000;
  --c-text-muted: #333;
  --c-border: #999;
  --c-border-strong: #000;
}

html, body {
  background: #fff !important;
  color: #000 !important;
  font-size: 11pt;
}

/* ---- what does not belong on paper --------------------------------------- */

.site-header,
.site-nav,
.nav__toggle,
.skip-link,
.breadcrumbs,
.site-footer__sitemap,
.site-footer__support,
.site-footer__social,
.chart__controls,
.chart__tooltip,
.theme-toggle,
.scroller__controls,
[data-print-hide] {
  display: none !important;
}

/* ---- links --------------------------------------------------------------- */

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

/* Print the destination of content links, so a printed page is still usable.
   Not for in-page anchors, and not for navigation. */
.prose a[href^="http"]::after,
.citation a[href^="http"]::after {
  content: " (" attr(href) ")";
  font-size: 9pt;
  word-break: break-all;
}

/* ---- structure ----------------------------------------------------------- */

.page__main { display: block; }

h1, h2, h3, h4 { break-after: avoid-page; page-break-after: avoid; }
p, li, blockquote { orphans: 3; widows: 3; }
figure, table, .stat, .citation { break-inside: avoid-page; page-break-inside: avoid; }

.section { padding-block: 0 0 !important; margin-block-end: 8mm; }
.container { max-width: none; padding-inline: 0; }

/* ---- charts --------------------------------------------------------------
   The pattern fills carry the series, not the colours, so a greyscale print
   stays readable. Colours are flattened to greys of clearly different value
   so that the pattern is what distinguishes them, not a colour that has
   become the same grey as its neighbour. */

.chart__svg { max-inline-size: 100%; break-inside: avoid; }

.chart {
  --c-cat-1: #1a1a1a;
  --c-cat-2: #6e6e6e;
  --c-cat-3: #3f3f3f;
  --c-cat-4: #8f8f8f;
  --c-cat-5: #c2c2c2;
  --c-chart-grid: #ccc;
  --c-chart-axis: #000;
  --c-chart-label: #000;
}

.chart__bar, .chart__area { stroke: #fff; }

/* The table is the record, so it always prints, whatever the toggle says. */
.chart__table,
.chart__table.is-open {
  max-block-size: none !important;
  overflow: visible !important;
  border: 0;
  margin-block-start: 4mm;
}
.chart__table:not(.is-open) {
  position: static !important;
  inline-size: 100% !important;
  block-size: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* ---- tables -------------------------------------------------------------- */

.data-table { inline-size: 100%; font-size: 9.5pt; }
.data-table thead th {
  position: static;
  background: #eee !important;
  border-bottom: 1pt solid #000;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.data-table :is(th, td) { border-bottom: 0.5pt solid #bbb; }
.data-table thead { display: table-header-group; }

/* ---- campaign furniture --------------------------------------------------- */

.stat__value { font-size: 20pt; }

.confidence {
  border: 0.75pt solid #000 !important;
  background: none !important;
  color: #000 !important;
}

/* Citations must survive printing: this is the credibility of the page. */
.citation__body { display: block !important; }

.site-footer {
  border-top: 1pt solid #000;
  background: none !important;
  color: #000 !important;
  padding-block: 4mm 0;
  margin-top: 8mm;
}
.site-footer * { color: #000 !important; }

/* A printed page should say where it came from. */
.page__main::after {
  content: "Fair Share Football — fairsharefootball.com — every figure on this page is sourced at /evidence/sources.html";
  display: block;
  margin-top: 8mm;
  padding-top: 3mm;
  border-top: 0.5pt solid #999;
  font-size: 8.5pt;
  color: #333;
}

/* No motion on paper, obviously, and no shadows. */
* {
  animation: none !important;
  transition: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
}