/* For the Almendra font. This must precede all other rules. */
@import url("https://fonts.googleapis.com/css2?family=Almendra:wght@700&display=swap");

@page {
	background-image: url('/assets/special-guides/pathfinder-kingmaker/page-new.jpg');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	margin: 10mm;
}

@page {
	@bottom-left {
		font-family: AlmendraBold;
	}
	@bottom-right {
		font-family: AlmendraBold;
	}
}

@page cover {
	background-image: none;
	margin-bottom: inherit;
}

@page guide-info {
	background-image: none;
}

html > body,
.guide-main-wrap .guide-page .guide-page-content .guide-page-content-inner {
	background-color: transparent !important;
}

h1, h2, h3, h4, h5, h6 {
	font-family: Almendra, serif;
}

.guide-main-wrap p,
.guide-main-wrap figcaption,
.guide-main-wrap table {
	font-size: smaller;
}

#guide-pdf-info {
	margin-top: 30mm;
}

#guide-pdf-info h1, #guide-pdf-info h2 {
	font-family: inherit;
}

.guide-main-wrap .guide-page .guide-page-content div.tip,
.guide-main-wrap .guide-page .guide-page-content div.note,
.guide-main-wrap .guide-page .guide-page-content div.dyk,
.guide-main-wrap .guide-page .guide-page-content div.warning,
/* Outdated */
.guide-main-wrap .guide-page .guide-page-content div.info,
.guide-main-wrap .guide-page .guide-page-content div.success {
	padding: 7mm 9mm;
	background-image: url('/assets/special-guides/pathfinder-kingmaker/infobox-top-tr.png'),
		url('/assets/special-guides/pathfinder-kingmaker/infobox-bottom-tr.png');
	border-image-source: none;
	border-style: none;
}

.guide-main-wrap .guide-page .guide-page-content div.tip > div,
.guide-main-wrap .guide-page .guide-page-content div.note > div,
.guide-main-wrap .guide-page .guide-page-content div.dyk > div,
.guide-main-wrap .guide-page .guide-page-content div.warning > div,
/* Guide is using some old boxes so let's do those too */
.guide-main-wrap .guide-page .guide-page-content div.info > div,
.guide-main-wrap .guide-page .guide-page-content div.success > div {
	border-width: 2mm;
	border-style: solid;
	padding: 1em 2em;
}

.guide-main-wrap .guide-page .guide-page-content .image-block-1, .guide-main-wrap .guide-page .guide-page-content .image-block-2, .guide-main-wrap .guide-page .guide-page-content .image-block-multi {
	margin-left: auto;
	margin-right: auto;
	max-width: 75%;
}

.guide-main-wrap .guide-page .guide-page-content .image-block-1.has-caption,
.guide-main-wrap .guide-page .guide-page-content .image-block-1.no-caption,
.guide-main-wrap .guide-page .guide-page-content .image-block-2.has-caption,
.guide-main-wrap .guide-page .guide-page-content .image-block-2.no-caption,
.guide-main-wrap .guide-page .guide-page-content .image-block-multi {
	background-color: transparent;
	border-width: 2mm;
	border-color: #9c4443;
	border-image-source: none;
	line-height: 0;
}

.guide-main-wrap .guide-page .guide-page-content .image-block-1.has-caption img,
.guide-main-wrap .guide-page .guide-page-content .image-block-1.no-caption img,
.guide-main-wrap .guide-page .guide-page-content .image-block-2.has-caption img,
.guide-main-wrap .guide-page .guide-page-content .image-block-2.no-caption img,
.guide-main-wrap .guide-page .guide-page-content .image-block-multi img {
	padding: 0;
}

.guide-main-wrap .guide-page .guide-page-content .image-block-2.has-caption img:first-of-type,
.guide-main-wrap .guide-page .guide-page-content .image-block-2.no-caption img:first-of-type {
	border-style: none solid none none;
}

.guide-main-wrap .guide-page .guide-page-content .image-block-2.has-caption img:last-of-type,
.guide-main-wrap .guide-page .guide-page-content .image-block-2.no-caption img:last-of-type {
	border-style: none none none solid;
}

#guide-page-type-guide .guide-main-wrap .first-guide-page {
	background-image: none;
}

/* Stuff from the old custom styles.css */

.guide-main-wrap .guide-page .guide-page-content .image-block .image-block-inner {
	background-color: black;
}

@media (min-width: 621px) {
	.guide-main-wrap .guide-page .guide-page-content h4,
	.guide-main-wrap .guide-page .guide-page-content h5,
	.guide-main-wrap .guide-page .guide-page-content h6 {
		border-bottom-style: none;
	}

	#guide-pdf-info .pathfinder-logos img {
		width: 50%;
		padding: 0 10%;
	}

	#guide-pdf-info .pathfinder-logos img:first-child {
		float: left;
	}


	.guide-main-wrap .guide-page > h3 {
		padding-bottom: 10px;
		background-image: url('/assets/special-guides/pathfinder-kingmaker/underline.png');
		background-position: left bottom;
		background-repeat: repeat-x;
		border-bottom-style: none;
		margin-bottom: 1em;
	}

	.guide-main-wrap .guide-page .guide-page-content h4 {
		text-align: center;
		padding-bottom: 22px;
		background-image: url('/assets/special-guides/pathfinder-kingmaker/subheader.png');
		background-position: center bottom;
		background-repeat: no-repeat;
	}

	.guide-main-wrap .guide-page .guide-page-content .image-block-multi > .image-block-multi-gallery,
	.guide-main-wrap .guide-page .guide-page-content .image-block-multi > .image-block-multi-gallery > .image-block-multi-select {
		background-color: #202020;
	}

	.guide-main-wrap .guide-page .guide-page-content .image-block-1 > p,
	.guide-main-wrap .guide-page .guide-page-content .image-block-2 > p,
	.guide-main-wrap .guide-page .guide-page-content .image-block-multi > p {
		background-color: #202020;
		padding: 0;
	}

	.guide-main-wrap .guide-page .guide-page-content .image-block-1 > p.image-block-caption,
	.guide-main-wrap .guide-page .guide-page-content .image-block-2 > p.image-block-caption,
	.guide-main-wrap .guide-page .guide-page-content .image-block-multi > p.image-block-caption {
		margin: 0;
		padding: 1em 30px;
	}

	.guide-main-wrap .guide-page .guide-page-content .image-block-1.has-caption figure,
	.guide-main-wrap .guide-page .guide-page-content .image-block-1.no-caption figure,
	.guide-main-wrap .guide-page .guide-page-content .image-block-2.has-caption figure,
	.guide-main-wrap .guide-page .guide-page-content .image-block-2.no-caption figure,
	.guide-main-wrap .guide-page .guide-page-content .image-block-multi figure {
		background-position: left top;
		background-repeat: no-repeat;
		background-size: cover;
		background-color: #202020;
		padding: 0;
	}
	.image-block-multi figcaption,
	.image-block-multi p:last-child, {
		padding: 1em 2em;
	}
	.guide-main-wrap .guide-page .guide-page-content .image-block-1 img,
	.guide-main-wrap .guide-page .guide-page-content .image-block-2 img,
	.guide-main-wrap .guide-page .guide-page-content .image-block-multi img {
		padding: 0;
		border-color: #202020;
		border-width: 1mm;
	}

	.guide-main-wrap .guide-page .guide-page-content .image-block-2 > img:first-child {
		border-right-style: solid;
		padding-right: 0;
	}

	.guide-main-wrap .guide-page .guide-page-content .image-block-2 > img:last-of-type {
		border-left-style: solid;
	}

	.guide-main-wrap .guide-page .guide-page-content .image-block-2 .lightbox-link-wrap:first-of-type {
		border-right-width: 2px;
		border-right-color: #202020;
	}

	.guide-main-wrap .guide-page .guide-page-content .image-block-2 .lightbox-link-wrap:last-of-type {
		padding: 0;
		border-left-width: 2px;
		border-left-style: solid;
		border-left-color: #202020;
		border-right-style: none;
	}


	.guide-main-wrap .guide-page .guide-page-content div.tip,
	.guide-main-wrap .guide-page .guide-page-content div.note,
	.guide-main-wrap .guide-page .guide-page-content div.dyk,
	.guide-main-wrap .guide-page .guide-page-content div.warning,
	/* Outdated */
	.guide-main-wrap .guide-page .guide-page-content div.info,
	.guide-main-wrap .guide-page .guide-page-content div.success,
	.markdown-body	{
		border-image-source: url('/assets/special-guides/pathfinder-kingmaker/infobox-frame.png');
		border-image-slice: 26 34 28 34;
		border-width: 26px 34px 28px 34px;
		border-style: solid;
		border-color: #202020;

		margin-bottom: 1rem;
		background-position: left top, left bottom;
		background-repeat: no-repeat, no-repeat;
		background-size: contain, contain;
		padding: 0;
		background-color: transparent;
		border-radius: 0;
		position: relative;
	}

	.guide-main-wrap .guide-page .guide-page-content div.tip > p,
	.guide-main-wrap .guide-page .guide-page-content div.note > p,
	.guide-main-wrap .guide-page .guide-page-content div.dyk > p,
	.guide-main-wrap .guide-page .guide-page-content div.warning > p,
	/* Guide is using some old boxes so let's do those too */
	.guide-main-wrap .guide-page .guide-page-content div.info > p,
	.guide-main-wrap .guide-page .guide-page-content div.success > p {
		border-style: none solid;
		border-width: 5px;
		padding: 1em 2em;
		margin: 0;
	}

	/* Make link color lighter on boxes with lighter text */
	.guide-main-wrap .guide-page .guide-page-content div.note > p a,
	.guide-main-wrap .guide-page .guide-page-content div.dyk > p a,
	.guide-main-wrap .guide-page .guide-page-content div.warning > p a,
	/* Guide is using some old boxes so let's do those too */
	.guide-main-wrap .guide-page .guide-page-content div.info > p a,
	.guide-main-wrap .guide-page .guide-page-content div.success > p a {
		color: #aaf;
	}

	.guide-main-wrap .guide-page .guide-page-content div.tip > p:first-child,
	.guide-main-wrap .guide-page .guide-page-content div.note > p:first-child,
	.guide-main-wrap .guide-page .guide-page-content div.dyk > p:first-child,
	.guide-main-wrap .guide-page .guide-page-content div.warning > p:first-child,
	/* Guide is using some old boxes so let's do those too */
	.guide-main-wrap .guide-page .guide-page-content div.info > p:first-child,
	.guide-main-wrap .guide-page .guide-page-content div.success > p:first-child {
		border-top-style: solid;
	}

	.guide-main-wrap .guide-page .guide-page-content div.tip > p:first-child img,
	.guide-main-wrap .guide-page .guide-page-content div.note > p:first-child img,
	.guide-main-wrap .guide-page .guide-page-content div.dyk > p:first-child img,
	.guide-main-wrap .guide-page .guide-page-content div.warning > p:first-child img,
	/* Guide is using some old boxes so let's do those too */
	.guide-main-wrap .guide-page .guide-page-content div.info > p:first-child img,
	.guide-main-wrap .guide-page .guide-page-content div.success > p:first-child img {
		padding: 0;
	}

	.guide-main-wrap .guide-page .guide-page-content div.tip > p:last-child,
	.guide-main-wrap .guide-page .guide-page-content div.note > p:last-child,
	.guide-main-wrap .guide-page .guide-page-content div.dyk > p:last-child,
	.guide-main-wrap .guide-page .guide-page-content div.warning > p:last-child,
	/* Guide is using some old boxes so let's do those too */
	.guide-main-wrap .guide-page .guide-page-content div.info > p:last-child,
	.guide-main-wrap .guide-page .guide-page-content div.success > p:last-child {
		border-bottom-style: solid;
	}


	.guide-main-wrap .guide-page .guide-page-content div.tip > div,
	.guide-main-wrap .guide-page .guide-page-content div.tip > p {
		border-color: #8f774a;
		color: #39352d;
		background-color: #d3bb83;
	}

	.guide-main-wrap .guide-page .guide-page-content div.note > div,
	.guide-main-wrap .guide-page .guide-page-content div.info > div,
	.guide-main-wrap .guide-page .guide-page-content div.note > p,
	.guide-main-wrap .guide-page .guide-page-content div.info > p {
		border-color: #0b354a;
		color: #f2f2f2;
		background-color: #586E79;
	}

	.guide-main-wrap .guide-page .guide-page-content div.note > p:first-of-type::before,
	.guide-main-wrap .guide-page .guide-page-content div.info > p:first-of-type::before {
		content: "\ec54";
		color: #0b354a;
	}

	.guide-main-wrap .guide-page .guide-page-content div.dyk > div,
	.guide-main-wrap .guide-page .guide-page-content div.success > div,
	.guide-main-wrap .guide-page .guide-page-content div.dyk > p,
	.guide-main-wrap .guide-page .guide-page-content div.success > p {
		border-color: #4a6606;
		color: #d1c59f;
		background-color: #2c3a09;
	}

	.guide-main-wrap .guide-page .guide-page-content div.warning > div,
	.guide-main-wrap .guide-page .guide-page-content div.warning > p {
		border-color: #660e09;
		color: #ffffff;
		background-color: #84302b;
	}

	.guide-main-wrap .guide-page .guide-page-content div.warning > p:first-of-type::before {
		color: #660e09;
	}

	.guide-main-wrap .guide-page .guide-page-content div.dyk > p:first-of-type::before {
		color: #4a6606;
	}

	.guide-main-wrap .guide-page .guide-page-content div.tip > p:first-of-type::before {
		color: #8f774a;
	}

	.guide-main-wrap .guide-page .guide-page-content div.tip::before,
	.guide-main-wrap .guide-page .guide-page-content div.note::before,
	.guide-main-wrap .guide-page .guide-page-content div.dyk::before,
	.guide-main-wrap .guide-page .guide-page-content div.warning::before,
	.guide-main-wrap .guide-page .guide-page-content div.info::before,
	.guide-main-wrap .guide-page .guide-page-content div.success::before {
		content: none;
	}

	.guide-main-wrap .guide-page span.guide-page-subheader {
		color: #333;
	}

	.guide-main-wrap .guide-page .guide-page-content .guide-page-content-inner::after {
		/* using ::after for this - if I just set it as a background image at the
			 "bottom" of .guide-page-content, it appears on every page. */
		content: url('/assets/special-guides/pathfinder-kingmaker/pagebreak.png');
		text-align: center;
		margin: 0 auto;
		display: block;
	}

	.guide-main-wrap > hr {
		display: none;
	}

}
@media (min-width: 1180px) {
	.guide-main-wrap .guide-page .guide-page-content,
	.guide-main-wrap .guide-page .guide-page-content > .guide-page-content-inner {
		overflow: visible;
	}

	.guide-main-wrap .guide-page .guide-page-content .image-block-1,
	.guide-main-wrap .guide-page .guide-page-content .image-block-2,
	.guide-main-wrap .guide-page .guide-page-content .image-block-multi {
		background-color: transparent;
		position: relative;
		overflow: visible;
		border-image-source: url('/assets/special-guides/pathfinder-kingmaker/frame.png');
		border-image-slice: 41 48 41 52;
		border-width: 41px 48px 41px 52px;
		border-style: solid;
		border-color: #202020;
		padding: 0;
		margin-left: -52px;
		margin-right: -48px;
		margin-bottom: 1em;
		max-width: unset;
	}
}