/* ==========================================================================
   print.css — Save-as-PDF stylesheet for Safari Audio plugin manuals
   Served from the site root and linked from every manual as:

     <link rel="stylesheet" href="/print.css" media="print">

   media="print" means this file never touches screen rendering. It only
   applies when the reader hits Print / Save as PDF.
   ========================================================================== */

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

/* --------------------------------------------------------------------------
   1. Keep the manual's colours.
   Browsers strip background colours and images from printed output by
   default. Every manual's design carries meaning in colour — accent chips,
   note callouts, the dark screenshot frames — so force them back on.
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}

html,
body {
  background: var(--bg) !important;
  width: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}

body {
  font-size: 10.5pt;
  line-height: 1.55;
}

/* --------------------------------------------------------------------------
   2. Nothing stays collapsed in a PDF.
   MeawChain's brand accordion hides its panels behind a click; a printed
   manual has no clicks, so every panel is expanded and the chevron dropped.
   The <details> rule is future-proofing for manuals that add one later.
   -------------------------------------------------------------------------- */
.brand-plugins {
  display: block !important;
  padding: 12px 20px !important;
}

.brand-header {
  background: var(--surface2) !important;
  border-bottom: 1px solid var(--border) !important;
}

.chevron {
  display: none !important;
}

details:not([open]) > *:not(summary) {
  display: block !important;
}

/* --------------------------------------------------------------------------
   3. The nav prints once, at the top, as a contents strip.
   It is position:sticky on screen, which paints it over the content on
   every printed page. Static + wrapping turns it into a usable contents row.
   -------------------------------------------------------------------------- */
nav {
  position: static !important;
  overflow: visible !important;
  flex-wrap: wrap !important;
  padding: 8px 20px !important;
  break-inside: avoid;
  break-after: avoid;
}

nav a,
nav li a {
  padding: 4px 10px !important;
  font-size: 8pt !important;
}

/* --------------------------------------------------------------------------
   4. Page geometry — @page owns the margins, so the layout runs full width.
   -------------------------------------------------------------------------- */
main {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

header {
  padding: 22px 20px 0 !important;
}

header .intro {
  margin-top: 14px !important;
}

footer {
  padding: 20px !important;
  break-inside: avoid;
}

/* --------------------------------------------------------------------------
   5. Typography — the headings use clamp() with vw units, which have no
   sensible meaning on paper. Pin them to point sizes instead.
   -------------------------------------------------------------------------- */
header h1                 { font-size: 26pt !important; }
header .tagline           { font-size: 12pt !important; margin-top: 10px !important; }
header .intro             { font-size: 9.5pt !important; }
h2,
.section-title            { font-size: 16pt !important; margin-bottom: 14px !important; }
h3                        { font-size: 8.5pt !important; margin: 18px 0 8px !important; }
.lbl                      { font-size: 8pt !important; }
.pn, .param-name          { font-size: 9pt !important; }
.pd, .param-desc,
.note, .steps li,
.lic-table                { font-size: 9.5pt !important; }
.cap                      { font-size: 7.5pt !important; }

/* --------------------------------------------------------------------------
   6. Page breaks — each top-level section opens a page, and the repeating
   blocks (parameter rows, callouts, figures, licence table rows) are never
   split across two pages.
   -------------------------------------------------------------------------- */
main section {
  break-before: page;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  border-top: none !important;
}

main > section:first-of-type {
  break-before: auto;
}

/* Keep a heading with the block it introduces. Intro paragraphs are
   deliberately left out: gluing one to a full-width screenshot that cannot
   fit on the remaining page strands the heading above a page of whitespace. */
h1, h2, h3, h4,
.lbl, .section-chip {
  break-after: avoid;
}

.pb, .pr, .param-row, .param-list,
.note, .lc, .lg, .cb,
.fig, .figrow, .split, .chip,
.brand-item, .steps li,
figure, img, tr, thead {
  break-inside: avoid;
}

/* A long licence table should flow across pages with its header repeated,
   rather than being forced whole onto one. */
.lic-table {
  break-inside: auto;
}

.lic-table thead {
  display: table-header-group;
}

/* --------------------------------------------------------------------------
   7. Images — cap the height so a screenshot never outgrows its page, and
   drop the soft drop shadows, which print as grey smudges. The design's
   hard offset shadows are left alone: they read as part of the artwork.
   -------------------------------------------------------------------------- */
img {
  max-width: 100% !important;
  height: auto !important;
}

.fig img,
.fig.nat img,
.fig.med img,
.figrow .fig img,
.split .fig img {
  max-height: 135mm !important;
  width: auto !important;
  box-shadow: none !important;
}

.hero-full,
.hero-img {
  max-height: 105mm !important;
  width: auto !important;
  margin-top: 16px !important;
  box-shadow: none !important;
}

.chip {
  box-shadow: none !important;
}

.brand {
  margin: 28px 0 4px !important;
}

.brand img {
  max-width: 55mm !important;
}