/**
 * This file contains styles that are specific to the Welcome Packet only or
 * are meant to override the pattern library. This file also contains DocRaptor
 * print CSS overrides.
 */

/**
 * Profile Portrait Overrides
 * These match overrides applied on baptistjax.com/about-us/administration
 * The administrator portraits include a background, and the default margin
 * and padding leave awkward gaps around the photos, so this removes them.
 */
.ProfilePortrait-frame {
	padding: 0;
}

.ProfilePortrait-object {
	margin-top: 0;
}

/**
 * Override screen heading styles to match pattern library print styles
 */
@media screen {
	h2,
	h3 {
		font-style: normal;
		font-weight: 700;
	}
}

/**
 * DocRaptor Print CSS Overrides
 *
 * Note: Most print CSS should live in the pattern library. This file is
 * reserved for CSS tweaks that are only needed for DocRaptor (due to
 * limitations in CSS support) or print CSS that would be harmful in the
 * main pattern library (like using `leader()` for dot leaders).
 */
@media print {
	/*
		DocRaptor/Prince doesn't support `display:unset`
	*/
	.u-print-unset {
		display: block !important;
	}

	/*
		I don't know why, but flex-wrap was causing the two-column sidebar
		layout to fail to wrap to multiple pages. Instead the content was
		getting clipped. Thankfully for this layout we don't want or need
		it to wrap, so we can simply disable it.
	*/
	.Grid--sidebarLayout {
		flex-wrap: nowrap !important;
	}

	/*
		Fix Dot Leaders
		Our dot leader pattern is broken in the generated PDF.
		It's unclear why, since DocRaptor uses Prince, and Prince supports
		the Flexbox fallback, but it also turns out Prince supports the
		proposed `leader()` syntax to do the same thing, so we can just
		swap our approach here.

		@see https://www.princexml.com/doc/gen-content/
		@see https://www.w3.org/Style/Examples/007/leaders.en.html
	*/
	@supports (content: leader(dotted)) {
		.DotLeader {
			break-inside: avoid;
		}

		.DotLeader-between {
			display: none;
		}

		.DotLeader-start::after {
			content: leader(dotted);
		}
	}

	/*
		Page Numbers
		We're using some special DocRaptor CSS to inject page numbers to
		the table of contents and the page footer:
		@see https://docraptor.com/documentation/article/1067094-headers-footers-for-pdfs
		@see https://docraptor.com/documentation/article/1082618-page-numbers
		@see https://docraptor.com/documentation/tutorial/table-of-contents
	*/
	nav .DotLeader-end a::after {
		content: target-counter(attr(href), page);
	}

	/* reduce default margins to more closely match source pdf */
	@page {
		margin: 0.5in;
		padding: 0;
	}

	/* add page numbers to footer, aligned to match source pdf */
	@page {
		@bottom {
			content: counter(page);
			font-family: 'Noto Sans', sans-serif;
			margin-top: -1em; /* pull page numbers into page */
			text-align: right;
			vertical-align: top;
		}
	}

	/* named pages */
	.page-front-cover {
		page: front_cover;
	}

	.page-back-cover {
		page: back_cover;
	}

	.page-toc {
		page: toc;
	}

	/* set TOC to page 0, so successive page numbers are correct */
	@page toc {
		counter-reset: page -1;
		@bottom {
			content: none;
		}
	}

	/* remove page numbers */
	@page front_cover {
		@bottom {
			content: none;
		}
	}

	@page back_cover {
		@bottom {
			content: none;
		}
	}

	/*
		This is to ensure that each "page" in the CMS breaks to a new page in
		the PDF. What markup element it targets may need to change and it may
		belong in the pattern library.
	*/
	.welcome-packet-page {
		page-break-before: always;
	}

	/* Looks like Prince doesn't support `:any-link` */
	a {
		text-decoration: none;
	}
}