/**
 * HappenBoard Theme — print styles.
 *
 * What a reader wants on paper or in a PDF is the text of the page: the
 * documentation, the legal pages and the plans first. The site chrome
 * (bars, menus, chat, cookie banner, newsletter, footer) is left out, the
 * page turns black on white, sticky and animated parts sit still, and
 * links in the text show their address.
 *
 * The file is linked with media="print" (functions.php). Its rules also
 * sit inside @media print, so they never reach the screen even if the
 * file is inlined with the other theme stylesheets one day.
 */

@media print {

	@page {
		margin: 16mm 14mm 18mm;
	}

	/* ---------------------------------------------------------- base -- */

	html {
		scroll-padding-top: 0;
	}

	html,
	body {
		background: #fff !important;
		color: #000 !important;
	}

	body {
		font-size: 11pt;
		line-height: 1.5;
		orphans: 3;
		widows: 3;
	}

	/*
	 * Black text on no background, whether or not the reader prints the
	 * background graphics: white text on the dark cards would vanish
	 * otherwise. Shapes cut with a mask (tickets, scalloped edges) are
	 * printed whole so their text is not clipped. The :not(#print) lifts
	 * these rules over the !important colour classes of the editor
	 * (.has-*-color, .has-*-background-color).
	 */
	body :not(#print),
	body :not(#print)::before,
	body :not(#print)::after {
		color: #000 !important;
		background-color: transparent !important;
		background-image: none !important;
		box-shadow: none !important;
		text-shadow: none !important;
		filter: none !important;
		backdrop-filter: none !important;
		animation: none !important;
		transition: none !important;
	}

	body :not(#print, .hb-icon) {
		-webkit-mask: none !important;
		mask: none !important;
	}

	/* Small icons are drawn with a mask over a coloured box: keep them. */
	body :is(li, .hb-marquee__item):not(#print, .breadcrumb-item)::before,
	body .hb-icon:not(#print) {
		background-color: #000 !important;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	/* Nothing sticks over the text: the sticky parts of the theme. */
	.wp-site-blocks > header.wp-block-template-part.site-header,
	.wp-block-table.is-style-comparison thead :is(th, td),
	.hb-stop__frame.hb-stop__frame,
	.hb-install__pin.hb-install__pin,
	.hb-section.hb-section--hero-single,
	.hb-versus-diff__label.hb-versus-diff__label,
	.hb-versus-diff__aside.hb-versus-diff__aside,
	.hb-versus-steps__title.hb-versus-steps__title,
	.hb-plans-compare__head.hb-plans-compare__head,
	.int-filter,
	.hb-article__aside.hb-article__aside,
	.int-page__aside.int-page__aside,
	.changelog-rail,
	.docs-sidebar__inner.docs-sidebar__inner,
	.docs-layout .docs-aside {
		position: static !important;
	}

	/* ------------------------------------------------- left out -- */

	.skip-link,
	.seopress-user-consent,
	.seopress-user-consent-backdrop,
	.header-utility-bar,
	.hb-main-nav,
	.hb-header__end,
	.hb-header__card > :not(.hb-header__start, .hb-logo),
	.hb-header__start > :not(.hb-logo),
	.site-footer,
	.hb-chat,
	.hb-chat-panel,
	.hb-search,
	.hb-toast,
	.hb-section--trial,
	.hb-section--sticky-cta,
	.hb-newsletter-box,
	.hb-money-back__media,
	.hb-money-back__seal,
	.docs-sidebar,
	.docs-aside,
	.docs-pager,
	.hb-share,
	.wp-block-buttons,
	.wp-block-button,
	.wp-block-embed,
	iframe,
	video,
	audio,
	form,
	dialog,
	button {
		display: none !important;
	}

	/* ------------------------------------------------- header -- */

	/* Only the logo stays, as a letterhead. */
	.site-header,
	.hb-header,
	.hb-header__bar,
	.hb-header__card {
		display: block !important;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		min-height: 0 !important;
	}

	.site-header {
		margin-block-end: 8mm !important;
	}

	/* ------------------------------------------------- layout -- */

	/* One column the width of the paper. */
	.wp-site-blocks,
	main,
	.docs-layout.docs-layout,
	.docs-layout .docs-main {
		display: block !important;
	}

	.wp-site-blocks,
	main,
	.docs-layout.docs-layout,
	.docs-layout .docs-main,
	.has-global-padding {
		width: auto !important;
		max-width: none !important;
		margin-inline: 0 !important;
		padding-inline: 0 !important;
	}

	.is-layout-constrained > * {
		max-width: none !important;
		margin-inline: 0 !important;
	}

	main,
	.docs-layout.docs-layout,
	.docs-layout .docs-main,
	.site-main {
		margin-block: 0 !important;
		padding-block: 0 !important;
		min-height: 0 !important;
	}

	section,
	.hb-section,
	.hb-scalloped,
	.hb-panel {
		margin-block: 0 8mm !important;
		padding-block: 0 !important;
		min-height: 0 !important;
		height: auto !important;
		overflow: visible !important;
	}

	img,
	svg,
	figure,
	picture {
		max-width: 100% !important;
		height: auto;
	}

	/* Breadcrumbs: a plain chevron between the links (the masked arrow
	 * leaves hairlines in PDFs). */
	.site-breadcrumbs {
		margin-block: 0 4mm !important;
	}

	.site-breadcrumbs li {
		font-size: 9pt !important;
	}

	body .breadcrumb-item:not(#print)::before {
		content: none !important;
	}

	body .breadcrumb-item:not(#print)::after {
		content: "\203A" !important;
		width: auto !important;
		height: auto !important;
		margin-inline: 1.5mm !important;
	}

	body .breadcrumb-item:not(#print):last-child::after {
		content: none !important;
	}

	/* ----------------------------------------------- sections -- */

	/* Home, "Publish / Promote / Sell": the screenshot sits above the
	 * three tickets, which no longer scroll over it. */
	.hb-stop__panel.hb-stop__panel,
	.hb-stop__frame.hb-stop__frame {
		margin: 0 !important;
		padding: 0 !important;
	}

	.hb-stop__panel > .hb-stop__screens.hb-stop__screens {
		position: static !important;
		width: auto !important;
		transform: none !important;
	}

	.hb-stop__screen ~ .hb-stop__screen {
		display: none !important;
	}

	.hb-stop__tickets.hb-stop__tickets {
		flex-direction: row !important;
		gap: 4mm !important;
		margin-block: 6mm !important;
	}

	.hb-stop__ticket.hb-stop__ticket,
	.hb-stop__ticket.hb-stop__ticket:nth-child(2) {
		flex: 1 1 0;
		width: auto !important;
		margin: 0 !important;
	}

	.hb-stop__cta.hb-stop__cta {
		margin-top: 0 !important;
	}

	/* Cards that were drawn by their colour or a cut shape get a thin
	 * outline instead. */
	.hb-stop__ticket,
	.hb-panel--ticket,
	.hb-ticket-light,
	.hb-sticker,
	.hb-switch {
		border: 1px solid #999 !important;
		border-radius: 2mm !important;
		padding: 4mm !important;
	}

	/* --------------------------------------------------- text -- */

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

	h1 {
		font-size: 24pt !important;
		margin-block: 0 4mm !important;
	}

	h2 {
		font-size: 16pt !important;
		margin-block: 8mm 3mm !important;
	}

	h3 {
		font-size: 13pt !important;
		margin-block: 6mm 2mm !important;
	}

	p,
	li,
	td,
	th,
	dd,
	dt {
		font-size: 11pt !important;
	}

	figure,
	img,
	table,
	tr,
	pre,
	blockquote,
	.wp-block-image,
	.hb-panel,
	.hb-sticker,
	.hb-ticket-light,
	.hb-plan,
	.hb-stop__tickets {
		break-inside: avoid;
	}

	a {
		text-decoration: underline;
	}

	/* Addresses of the links in the text, which paper cannot follow. */
	:is(.entry-content, .docs-content) :is(p, li, td):not(.breadcrumb-item) a[href]:not([href^="#"], [href^="mailto:"], [href^="tel:"])::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		overflow-wrap: anywhere;
		text-decoration: none;
	}

	pre,
	code {
		font-size: 9pt !important;
	}

	pre {
		white-space: pre-wrap !important;
		overflow-wrap: anywhere;
		overflow: visible !important;
		max-height: none !important;
		border: 1px solid #999 !important;
		border-radius: 0 !important;
		padding: 3mm !important;
	}

	table {
		border-collapse: collapse !important;
		width: 100% !important;
	}

	th,
	td {
		border: 1px solid #999 !important;
		padding: 1.5mm 2mm !important;
	}

	thead {
		display: table-header-group;
	}

	/* Tabs print as the plain stack they are without JavaScript: every
	 * panel, each under its label (the plans of the Pricing page). */
	.hb-tabs .hb-tablist,
	.hb-pricing__details > summary {
		display: none !important;
	}

	.hb-tabs.hb-tabs > .hb-tab-panel[hidden] {
		display: block !important;
	}

	/* The comparison table starts on a page of its own. */
	.hb-plans-compare {
		break-before: page;
	}

	.hb-tabs--enhanced .hb-tab-label {
		display: block !important;
		margin-block: 4mm 1mm !important;
	}

	/* Answers folded in a <details> print open. */
	details::details-content {
		content-visibility: visible !important;
		display: block !important;
		block-size: auto !important;
		overflow: visible !important;
		opacity: 1 !important;
	}

	summary {
		list-style: none;
		font-weight: 600;
	}
}