/*
 * Print and PDF.
 *
 * These pages are shared as documents, not only read in a browser, and a solution page printed
 * without this loses most of what makes it an argument: the hero, the estate artwork and the
 * closing photograph are all CSS backgrounds, and every browser drops backgrounds when printing
 * unless told otherwise. So the first rule here is the important one.
 *
 * The rest is turning a page into a document. Site chrome goes — a burger menu and a phone
 * number in a header mean nothing on paper. Collapsed answers open, because a reader of a PDF
 * cannot click them. And rows, table groups and cards are kept off page boundaries, because a
 * price matrix split across a page break is worse than one that starts lower down.
 */

@media print {

	/*
	 * Backgrounds and dark bands survive. Without this the hero is white, the estate band is
	 * white, the statement band is white, and a page whose structure is carried by alternating
	 * surfaces arrives as eleven identical blocks of text.
	 */
	*,
	*::before,
	*::after {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	@page {
		size: A4;
		margin: 12mm 0;
	}

	html,
	body {
		background: #fff;
		font-size: 10.5pt;
	}

	/* --- chrome that is not content ------------------------------------------------- */

	/*
	 * The assistant is one .assistant wrapper holding the launcher and the panel, so hiding the
	 * wrapper is enough. An earlier version listed .ericom-assistant and assistant__launcher,
	 * neither of which exists — the names were guessed rather than read off the markup, so the
	 * rule matched nothing and the launcher printed on top of every exported page.
	 */
	.skip-link,
	.utility-bar,
	.site-nav,
	.assistant {
		display: none !important;
	}

	/* The logo stays. A shared document should say whose it is. */
	.site-header {
		padding-block: 0 6mm;
		border-block-end: 1px solid #ddd;
	}

	.site-header > .wrap { min-height: 0; padding-block: 0; }

	.site-footer { display: none; }

	/* --- collapsed content has to be open --------------------------------------------- */

	/*
	 * A reader cannot expand a disclosure in a PDF, so every answer is shown and the plus and
	 * minus markers go. Both the modern pseudo-element and the older marker are handled: the
	 * page has to print correctly from whichever browser the reader happens to use.
	 */
	details::details-content {
		content-visibility: visible !important;
		block-size: auto !important;
		overflow: visible !important;
	}

	details { display: block !important; }

	.s-faq__marker,
	.site-nav__chevron,
	summary::-webkit-details-marker,
	summary::marker { display: none !important; }

	.s-faq__summary { padding-block: 4mm 1mm; cursor: auto; }
	.s-faq__answer { padding-block-end: 4mm; }

	/* --- keep things whole across page boundaries ------------------------------------- */

	.section,
	.s-estate,
	.s-statement,
	.s-cta { break-inside: auto; }

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

	.s-pairs__item,
	.s-boundary__item,
	.s-capabilities__item,
	.s-estate__state,
	.s-faq__item,
	.s-thesis__stat,
	.s-stats__item,
	figure,
	tr { break-inside: avoid; }

	/* A workstream and at least its first row stay together. */
	.s-matrix__group { break-inside: auto; }
	.s-matrix__group-head { break-after: avoid; }

	/*
	 * Qualified, because the phone layout hides the head with
	 * `.s-matrix__table thead { position: absolute; clip-path: inset(50%) }` — a bare `thead`
	 * selector loses that tie, and changing display alone would not have unhidden it anyway.
	 */
	.s-matrix__table thead {
		display: table-header-group;
		position: static;
		width: auto;
		height: auto;
		overflow: visible;
		clip-path: none;
	}

	/* --- wide layouts, which A4 does not trigger on its own ---------------------------- */

	/*
	 * A4 is 210mm, which Chrome lays out as roughly 794 CSS pixels — under the 52rem breakpoint
	 * every multi-column component here uses. So the printed page got the phone layout: the
	 * matrix stacked into three labelled lines per row and grew from one page to three, and the
	 * boundary lost its two columns.
	 *
	 * A sheet of paper is physically wide enough for both. These put the wide layouts back, at
	 * a smaller type size to fit the narrower measure.
	 */
	.s-matrix__table { min-width: 0; font-size: 8.5pt; }
	.s-matrix__scroll { overflow: visible; }

	.s-matrix__table tbody { display: table-row-group; }
	.s-matrix__table tr { display: table-row; }

	.s-matrix__table th,
	.s-matrix__table td.s-matrix__cell {
		display: table-cell;
		padding: 2mm 3mm;
		border-block-end: 1px solid #ddd;
	}

	.s-matrix__activity { padding-inline-start: 0; }

	/* The tier label belongs in the column head here, not repeated in every cell. */
	.s-matrix__cell::before { content: none; }

	.s-matrix__tier { padding: 0 3mm 2mm; }
	.s-matrix__tier-price { font-size: 13pt; }
	.s-matrix__tier-capacity { font-size: 7.5pt; }

	.s-matrix__group-head th { padding: 5mm 0 2mm; }
	.s-matrix__group-name { font-size: 11pt; }
	.s-matrix__group-body { font-size: 8pt; }

	.s-boundary__columns { grid-template-columns: 1fr 1fr; gap: 8mm; }

	/* --- bands sized for a page rather than a viewport -------------------------------- */

	/*
	 * On screen these are sized against the viewport height. On A4 that produces a hero taller
	 * than the page it is printed on, so they are given a fixed proportion of the page instead.
	 */
	.s-hero--solution {
		min-height: 0;
		aspect-ratio: auto;
		height: 92mm;
	}

	.s-estate__band {
		min-height: 0;
		max-height: none;
		aspect-ratio: auto;
		height: 80mm;
	}

	.s-cta { min-height: 0; }

	.s-signal { min-height: 0; max-height: none; aspect-ratio: auto; height: 85mm; }

	.s-figure__image { max-height: 110mm; object-fit: cover; }

	/* --- typography for paper --------------------------------------------------------- */

	.s-hero__heading { font-size: 26pt; }
	.section__head h2,
	.s-estate__heading,
	.s-thesis__heading { font-size: 17pt; }
	.s-statement__heading { font-size: 15pt; }

	/*
	 * Links print as their text. A URL in brackets after every link is a well-meaning
	 * convention that turns a body paragraph into a wall of addresses; the one address a reader
	 * of this actually needs is added once, at the end.
	 */
	a { text-decoration: none; color: inherit; }

	.btn {
		border: 1px solid #0081c9;
		color: #0081c9 !important;
		background: transparent !important;
	}

	/* Where the document came from, once, at the very end. */
	.site-main::after {
		content: "ericom.com.au";
		display: block;
		padding: 6mm var(--wrap-gutter) 0;
		color: #666;
		font-size: 8pt;
	}
}