/* ---------------------------------------------------------------------------
   Print

   Written for the agreements: a signed document should come off the printer
   looking like a contract, not like a screenshot of a website. Navigation,
   footer and the call to action carry nothing onto paper, so they go. What is
   left is the text, the tables, and room to sign.

   Loaded with media="print", so none of it touches the screen.
   --------------------------------------------------------------------------- */

@page {
	margin: 20mm 18mm;
}

/* Ink is expensive and the paper is already white. */
:root {
	--color-ink: #000;
	--color-muted: #444;
	--color-paper: #fff;
	--color-shell: #fff;
	--hairline: 1px solid #999;

	/* The screen sizes are fluid: clamp() reads the viewport, and in print the
	   viewport is the sheet. That gives a 20pt lead paragraph on A4. Pin every
	   size to points instead, and the document sets like a document. */
	--size-display: 20pt;
	--size-title: 13pt;
	--size-lead: 11.5pt;
	--size-subtitle: 11pt;
	--size-body: 10.5pt;
	--size-small: 9.5pt;
	--size-eyebrow: 8pt;
	--size-logo: 12pt;
	--size-quote-mark: 14pt;
}

body {
	background: #fff;
	color: #000;
	font-size: 10.5pt;
	line-height: 1.5;
}

/* Chrome that belongs to the website, not to the document. */
.site-header,
.site-footer,
.skip-link,
.nav-toggle,
form,
video,
iframe,
/* The call to action, wrapper and all. `.section--tight` alone would also
   take the essay footer, which shares the class. */
.section:has(> .container > .cta) {
	display: none !important;
}

/* The heading rail is a screen layout. On paper headings sit above their text. */
.page-content,
.container,
main {
	display: block !important;
	margin: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	width: auto !important;
}

.page-content > h2 {
	grid-column: auto !important;
}

/* The document's own title, once, at the top. */
h1 {
	margin-bottom: 4mm;
}

h2 {
	margin-top: 8mm;
}

h3 {
	margin-top: 5mm;
}

/* The lead paragraph is the parties clause. It should read as text, not as a
   pull quote. */
.lead {
	font-size: var(--size-lead);
	line-height: 1.45;
}

/* A heading alone at the foot of a page is the classic printing fault. */
h1, h2, h3 {
	break-after: avoid;
	page-break-after: avoid;
}

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

table,
figure,
blockquote {
	break-inside: avoid;
	page-break-inside: avoid;
}

table {
	font-size: 10pt;
}

/* Links lose their destination on paper, so print it — except for internal
   anchors and mail links, where the visible text already says everything. */
a {
	color: #000;
	text-decoration: underline;
}

.page-content a[href^="http"]::after {
	content: " (" attr(href) ")";
	font-size: 8.5pt;
	word-break: break-all;
}

.page-content a[href^="/"]::after {
	content: " (larswagner.eu" attr(href) ")";
	font-size: 8.5pt;
}

.page-content a[href^="#"]::after,
.page-content a[href^="mailto"]::after,
.page-content a[href^="tel"]::after {
	content: "";
}

/* Signatures. The separator before them is where the last page should start
   if the document is running long — nobody should sign on an orphaned sheet
   with nothing above it, but nor should the block be split in half. */
.wp-block-separator {
	border: 0;
	border-top: 1px solid #999;
	margin-top: 10mm;
}

.wp-block-separator ~ p {
	break-inside: avoid;
	line-height: 2.6;
	page-break-inside: avoid;
}