@import (less) './themes/assets/assets.less';

:root {
	//Colors
	--HB_Color_Background            : #EEE5CE; // Light parchment
	--HB_Color_Accent                : #E0E5C1; // Pastel green
	--HB_Color_HeaderUnderline       : #C0AD6A; // Gold
	--HB_Color_HorizontalRule        : #9C2B1B; // Maroon
	--HB_Color_HeaderText            : #58180D; // Dark Maroon
	--HB_Color_MonsterStatBackground : #F2E5B5; // Light orange parchment
	--HB_Color_CaptionText           : #766649; // Brown
	--HB_Color_WatercolorStain       : #BBAD82; // Light brown
	--HB_Color_Footnotes             : #C9AD6A; // Gold
}

.useSansSerif() {
	font-family : 'ScalySansRemake';
	font-size   : 0.318cm;
	line-height : 1.2em;
	p,dl,ul,ol { line-height : 1.2em; }
	ul, ol { padding-left : 1em; }
	em { font-style : italic; }
	strong {
		font-weight    : 800;
		letter-spacing : -0.02em;
	}
	h5 + * { margin-top : 0.1cm; }
}
.useColumns(@multiplier : 1, @fillMode: auto) {
	column-count         : 2;
	column-fill          : @fillMode;
	column-gap           : 0.9cm;
	column-width         : 8cm * @multiplier;
	-webkit-column-count : 2;
	-moz-column-count    : 2;
	-webkit-column-width : 8cm * @multiplier;
	-moz-column-width    : 8cm * @multiplier;
	-webkit-column-gap   : 0.9cm;
	-moz-column-gap      : 0.9cm;
}
.page {
	.useColumns();
	font-family      : 'BookInsanityRemake';
	font-size        : 0.34cm;
	background-image : @backgroundImage;
}
// *****************************
// *            BASE
// *****************************/

.page {
	p {
		line-height : 1.25em;
		& + * { margin-top : 0.325cm; }  //TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
		& + p { margin-top : 0; }
	}
	ul {
		padding-left  : 1.4em;
		margin-bottom : 0.8em;
		line-height   : 1.25em;
	}
	ol {
		padding-left  : 1.4em;
		margin-bottom : 0.8em;
		line-height   : 1.25em;
	}
	//Indents after p or lists
	p + p, ul + p, ol + p { text-indent : 1em; }
	img { z-index : -1; }
	strong {
		font-weight    : bold;
		letter-spacing : -0.02em;
	}
	// *****************************
	// *           HEADERS
	// *****************************/
	h1,h2,h3,h4 {
		font-family : 'MrEavesRemake';
		color       : var(--HB_Color_HeaderText);
	}
	h1 {
		margin-bottom       : 0.18cm; //Margin-bottom only because this is WIDE
		column-span         : all;
		font-size           : 0.89cm;
		line-height         : 1em;
		-webkit-column-span : all;
		-moz-column-span    : all;
		& + p::first-letter {
			float                   : left;
			padding-bottom          : 2px;
			padding-left            : 40px; //Allow background color to extend into margins
			margin-top              : -0.3cm;
			margin-bottom           : -20px;
			margin-left             : -40px;
			font-family             : 'SolberaImitationRemake';
			font-size               : 3.5cm;
			line-height             : 1em;
			color                   : rgba(0, 0, 0, 0);
			background-image        : linear-gradient(-45deg, #322814, #998250, #322814);
			-webkit-background-clip : text;
			background-clip         : text;
		}
		& + p::first-line { font-variant : small-caps; }
	}
	h2 {
		//margin-top    : 0px; //Font is misaligned. Shift up slightly
		//margin-bottom : 0.05cm;
		font-size   : 0.75cm;
		line-height : 0.988em; //Font is misaligned. Shift up slightly
	}
	h3 {
		//margin-top    : -0.1cm; //Font is misaligned. Shift up slightly
		//margin-bottom : 0.1cm;
		font-size     : 0.575cm;;
		line-height   : 0.995em; //Font is misaligned. Shift up slightly
		border-bottom : 2px solid var(--HB_Color_HeaderUnderline);
		& + * { margin-top : 0.17cm; }
	}
	* + h3 {
		margin-top    : 0.155cm; //(0.325 - 0.17)
	}
	h4 {
		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
		//margin-bottom : 0.02cm;
		font-size   : 0.458cm;
		line-height : 0.971em; //Font is misaligned. Shift up slightly
		& + * { margin-top : 0.09cm; }
	}
	* + h4 {
		margin-top    : 0.235cm; //(0.325 - 0.09)
	}
	h5 {
		//margin-top    : -0.02cm; //Font is misaligned. Shift up slightly
		//margin-bottom : 0.02cm;
		font-family : 'ScalySansSmallCapsRemake';
		font-size   : 0.423cm;
		line-height : 0.951em; //Font is misaligned. Shift up slightly
		& + * { margin-top : 0.2cm; }
	}
	// *****************************
	// *          TABLE
	// *****************************/
	table {
		.useSansSerif();
		line-height : 16px;
		& + * { margin-top : 0.325cm; }
		thead {
			display     : table-row-group;
			font-weight : 800;
			th {
				//padding        : 0.14em 0.4em;
				padding        : 0px 1.5px;   // Both of these are temporary, just to force
				vertical-align : bottom;
				//line-height : 16px;        // PDF to render at same height until Chrome 108
			}
		}
		tbody {
			tr {
				td {
					//padding : 0.14em 0.4em;
					padding : 0px 1.5px;   // Both of these are temporary, just to force
					//line-height : 16px;        // PDF to render at same height until Chrome 108
				}
				&:nth-child(odd) { background-color : var(--HB_Color_Accent); }
			}
		}
	}
	// *****************************
	// *          QUOTE
	// *****************************/
	.quote {

		& > p {
			font-style  : italic;
			line-height : 0.54cm;

			&:first-child::first-line {
				font-size    : 0.38cm;
				font-style   : normal;
				font-variant : small-caps;
			}
		}

		p + .attribution { margin-top : 0; }

		.attribution {
			display     : block;
			font-style  : normal;
			line-height : 0.54cm;
			text-align  : right;

			&::before {
				margin-right : 0.2em;
				content      : '---';
			}
		}

		& + * { margin-top : 0.54cm; }
		
	}

	// *****************************
	// *            NOTE
	// *****************************/
	.note {
		.useSansSerif();
		padding             : 0.13cm 0.16cm;
		background-color    : var(--HB_Color_Accent);
		border-style        : solid;
		border-width        : 1px;
		border-image        : @noteBorderImage 12 stretch;
		border-image-width  : 11px;
		border-image-outset : 9px 0px;
		box-shadow          : 1px 4px 14px #888888;
		.page :where(&) {
			margin-top : 9px; //Prevent top border getting cut off on colbreak
		}
		& + * { margin-top : 0.45cm; }
		h5 { font-size : 0.375cm; }
		p {
			display        : block;
			padding-bottom : 0px;
		}
		:last-child { margin-bottom : 0; }
	}
	// ************************************
	// *       DESCRIPTIVE TEXT BOX
	// ************************************/
	.descriptive {
		.useSansSerif();
		padding             : 0.1em;
		background-color    : #FAF7EA;
		border-style        : solid;
		border-width        : 7px;
		border-image        : @descriptiveBoxImage 12 stretch;
		border-image-outset : 4px;
		box-shadow          : 0 0 6px #FAF7EA;
		.page :where(&) {
			margin-top        : 4px; //Prevent top border getting cut off on colbreak
		}
		& + * { margin-top : 0.45cm; }
		h5 { font-size : 0.375cm; }
		p {
			display        : block;
			padding-bottom : 0px;
			line-height    : 1.5em;
		}
		:last-child { margin-bottom : 0; }
	}
	// *****************************
	// *    Images Snippets
	// *****************************/

	/* Arist Credit */
	.artist {
		position    : absolute;
		width       : auto;
		font-family : 'WalterTurncoat';
		font-size   : 0.27cm;
		color       : var(--HB_Color_CaptionText);
		text-align  : center;
		p, p + p {
			margin      : unset;
			line-height : 1em;
			text-indent : unset;
		}
		h5 {
			font-family : 'WalterTurncoat';
			font-size   : 1.3em;
		}
		a {
			color           : inherit;
			text-decoration : unset;
			&:hover { text-decoration : underline; }
		}
	}

	/* Watermark */
	.watermark { color : black; }

	/* Watercolor */
	
	.watercolor1 { --wc : @watercolor1; }
	.watercolor2 { --wc : @watercolor2; }
	.watercolor3 { --wc : @watercolor3; }
	.watercolor4 { --wc : @watercolor4; }
	.watercolor5 { --wc : @watercolor5; }
	.watercolor6 { --wc : @watercolor6; }
	.watercolor7 { --wc : @watercolor7; }
	.watercolor8 { --wc : @watercolor8; }
	.watercolor9 { --wc : @watercolor9; }
	.watercolor10 { --wc : @watercolor10; }
	.watercolor11 { --wc : @watercolor11; }
	.watercolor12 { --wc : @watercolor12; }

	// *****************************
	// *    MONSTER STAT BLOCK
	// *****************************/
	.monster {
		.useSansSerif();
		&.frame {
			width                 : calc(100% + 0.32cm);
			padding               : 4px 2px;
			margin-right          : -0.16cm;
			margin-left           : -0.16cm;
			background-color      : var(--HB_Color_MonsterStatBackground);
			background-image      : @monsterBlockBackground;
			background-blend-mode : overlay;
			border-style          : solid;
			border-width          : 7px 6px;
			border-image          : @monsterBorderImage 14 round;
			border-image-outset   : 0px 2px;
			box-shadow            : 1px 4px 14px #888888;
		}

		position      : relative;
		padding       : 0px;
		margin-bottom : 0.325cm;

		//Headers
		h2 {
			margin      : 0;
			font-size   : 0.62cm;
			line-height : 1em;
			& + p {
				margin-bottom : 0;
				font-size     : 0.304cm; //Monster size and type subtext
			}
		}
		h3 {
			font-family   : 'ScalySansSmallCapsRemake';
			font-size     : 0.45cm;
			border-bottom : 1.5px solid var(--HB_Color_HeaderText);
		}

		//Triangle dividers
		hr {
			height           : 6px;
			margin           : 0.12cm 0cm;
			visibility       : visible;
			background-image : @redTriangleImage;
			background-size  : 100% 100%;
			border           : none;
		}

		//Attribute Lists - All text between HRs is red
		hr ~ :is(dl,p) { color : var(--HB_Color_HeaderText); }
		hr:last-of-type {
			& ~ :is(dl,p) {
				color : inherit; // After the HRs, reset text to black
			}
			& + * {
				margin-top : 0.325cm; // Space after last HR
			}
		}

		.bonus {
			float: right;
			padding-right: 0.5em;
		}

		// Monster Ability table
		hr + table:first-of-type {
			margin              : 0;
			column-span         : none;
			color               : var(--HB_Color_HeaderText);
			background-color    : transparent;
			border-style        : none;
			border-image        : none;
			-webkit-column-span : none;
			tr { background-color : transparent; }
			td,th { padding : 0px; }
		}
		//indent fix after bulleted lists
		:is(ul,ol) + p { text-indent : 0; }

		:last-child { margin-bottom : 0; }
	}

	//Full Width
	.monster.wide {
		.useColumns(0.96, @fillMode: balance);
	}

	//only for IOS devices
	@supports (-webkit-touch-callout: none) {
		.page .monster.frame {
			background-repeat : no-repeat;
			background-size   : cover;
		}
	}

	// *****************************
	// *           FOOTER
	// *****************************/
	&::after {
		position         : absolute;
		bottom           : 0px;
		left             : 0px;
		z-index          : 100;
		width            : 100%;
		height           : 50px;
		content          : '';
		background-image : @footerAccentImage;
		background-size  : cover;
	}
	&:nth-child(even) {
		&::after { transform : scaleX(-1); }
		.pageNumber { left : 2px; }
		.footnote {
			left       : 80px;
			text-align : left;
		}
	}
	.pageNumber {
		right       : 2px;
		bottom      : 22px;
		color       : var(--HB_Color_Footnotes);
	}
	.footnote {
		position   : absolute;
		right      : 80px;
		bottom     : 32px;
		z-index    : 150;
		width      : 200px;
		font-size  : 0.8em;
		color      : var(--HB_Color_Footnotes);
		text-align : right;
	}
	// ************************************
	// *           CODE BLOCKS
	// ************************************/
	code {
		padding          : 0px 4px;
		font-size        : 0.325cm;
		color            : #58180D;
		background-color : #FAF7EA;
		border-radius    : 4px;
	}

	pre code {
		padding             : 0.15cm;
		margin-bottom       : 2px;
		border-style        : solid;
		border-width        : 1px;
		border-radius       : 12px;
		border-image        : @codeBorderImage 26 stretch;
		border-image-width  : 10px;
		border-image-outset : 2px;
		.page :where(&) {
			margin-top        : 2px; //Prevent top border getting cut off on colbreak
		}
		& + * { margin-top : 0.325cm; }
	}
	// *****************************
	// *          EXTRAS
	// *****************************/
	hr {
		margin     : 0px;
		visibility : hidden;
	}
	//Text indent right after table
	table + p { text-indent : 1em; }
	// Nested lists
	ul ul,ol ol,ul ol,ol ul {
		margin-bottom : 0px;
		margin-left   : 1.5em;
	}
}

// *****************************
// *         SPELL LIST
// *****************************/
.page .spellList {
	.useSansSerif();
	column-count : 2;
	ul + h5 { margin-top : 15px; }
	p, ul {
		font-size   : 0.352cm;
		line-height : 1.265em;
	}
	ul {
		padding-left                : 1em;
		margin-bottom               : 0.5em;
		text-indent                 : -1em;
		list-style-type             : none;
		-webkit-column-break-inside : auto;
		page-break-inside           : auto;
		break-inside                : auto;
	}
	&.wide { column-count : 4; }
}

// *****************************
// *       CLASS TABLE
// *****************************/
.page .classTable {
	th[colspan]:not([rowspan]) { white-space : nowrap; }
	&.frame {
		width               : calc(100% + 0.2cm);
		margin-top          : 0.7cm;
		margin-right        : -0.1cm;
		margin-bottom       : 0.9cm;
		margin-left         : -0.1cm;
		border-collapse     : separate;
		background-color    : white;
		border              : initial;
		border-style        : solid;
		border-image-source : @frameBorderImage;
		border-image-slice  : 200;
		border-image-width  : 47px;
		border-image-outset : 0.4cm 0.3cm;
		border-image-repeat : stretch;
		&.wide:first-child { margin-top : 0.12cm; }
		& + * { margin-top : 0; }
	}
	&.decoration { position : relative; }
	&.decoration::before {
		position            : absolute;
		top                 : 50%;
		left                : 50%;
		z-index             : -1;
		width               : 7.75cm;
		height              : calc(100% + 3.3cm);
		content             : '';
		background-image    : @classTableDecoration,
			@classTableDecoration;
		filter              : drop-shadow(0px 0px 1px #C8C5C080);
		background-repeat   : no-repeat, no-repeat;
		background-position : top, bottom;
		background-size     : contain, contain;
		transform           : translateY(-50%) translateX(-50%);
	}
	&.decoration.wide::before {
		width               : calc(100% + 3.3cm);
		height              : 7.75cm;
		background-position : left, right;
	}
	h5 + table { margin-top : 0.2cm; }
}

// *****************************
// *    DEFINITION LISTS
// *****************************/
.page {
	dl {
		line-height  : 1.25em;
		& + * {	margin-top : 0.17cm; }
	}
	p + dl { margin-top : 0.17cm; }
	dt {
		margin-right : 5px;
		margin-left  : -1em;
	}
}

//*****************************
// *       RUNE TABLE
// *****************************/
.page {
	.runeTable {
		margin-block : 0.7cm;
		table {
			font-family : inherit;
			tbody tr { background : unset; }
			th, td {
				width          : 1.3cm;
				height         : 1.3cm;
				font-weight    : normal;
				text-transform : uppercase;
				vertical-align : middle;
				outline        : 1px solid #000000;
			}
			th {
				font-family : 'BookInsanityRemake';
				font-size   : 0.45cm;
			}
			td { font-size : 0.7cm; }
		}

		&.frame {
			border              : initial;
			border-style        : solid;
			border-image-source : @scriptBorder;
			border-image-slice  : 170;
			border-image-width  : 1.4cm;
			border-image-outset : 0.45cm 0.35cm 0.4cm 0.4cm;
			border-image-repeat : stretch;
		}
	}
}