@import (less) './themes/fonts/5e/fonts.less';
@import (less) './themes/assets/assets.less';

//Colors
@background            : #EEE5CE;
@noteGreen             : #e0e5c1;
@headerUnderline       : #c9ad6a;
@horizontalRule        : #9c2b1b;
@headerText            : #58180D;
@monsterStatBackground : #EEDBAB;
@page { margin: 0; }
body {
	counter-reset : phb-page-numbers;
}
*{
	-webkit-print-color-adjust : exact;
}
.useSansSerif(){
	font-family : ScalySansRemake;
	font-size   : 0.325cm;
	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;
	}
}
.useColumns(@multiplier : 1){
	column-count         : 2;
	column-fill          : auto;
	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();
	counter-increment : phb-page-numbers;
	position          : relative;
	z-index           : 15;
	box-sizing        : border-box;
	overflow          : hidden;
	height            : 279.4mm;
	width             : 215.9mm;
	padding           : 1.4cm 1.9cm 1.7cm;
	background-color  : @background;
	background-image  : @backgroundImage;
	font-family       : BookInsanityRemake;
	font-size         : 0.34cm;
	text-rendering    : optimizeLegibility;
	page-break-before : always;
	page-break-after  : always;
	//*****************************
	// *            BASE
	// *****************************/
	p{
		overflow-wrap : break-word;		//TODO: MAKE ALL MARGINS TOP-ONLY. USE * + * STYLE SELECTORS
		margin-bottom : 0.8em;
		line-height   : 1.3em;
		&+p{
			margin-top  : -0.8em;
		}
	}
	ul{
		margin-bottom       : 0.8em;
		padding-left        : 1.4em;
		line-height         : 1.3em;
		list-style-position : outside;
		list-style-type     : disc;
	}
	ol{
		margin-bottom       : 0.8em;
		padding-left        : 1.4em;
		line-height         : 1.3em;
		list-style-position : outside;
		list-style-type     : decimal;
	}
	//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;
	}
	em{
		font-style : italic;
	}
	sup{
		vertical-align : super;
		font-size      : smaller;
		line-height    : 0;
	}
	sub{
		vertical-align : sub;
		font-size      : smaller;
		line-height    : 0;
	}
	//*****************************
	// *           HEADERS
	// *****************************/
	h1,h2,h3,h4{
		font-family   : MrEavesRemake;
		font-weight   : 800;
		color         : @headerText;
	}
	h1{
		margin-bottom       : 0.18cm;
		column-span         : all;
		font-size           : 0.89cm;
		-webkit-column-span : all;
		-moz-column-span    : all;
		&+p::first-letter{
			float       : left;
			font-family : SolberaImitationRemake;
			line-height : 0.8em;
			font-size: 3.5cm;
			padding-left: 40px;
			margin-left: -40px;
			padding-top:10px;
			margin-top:-8px;
			padding-bottom:10px;
			margin-bottom:-20px;
			background-image: linear-gradient(-45deg, #322814, #998250, #322814);
	    background-clip: text;
	    -webkit-background-clip: text;
	    color: rgba(0, 0, 0, 0);
		}
		&+p::first-line{
			font-variant : small-caps;
		}
	}
	h2{
		margin-top    : 0px;
		margin-bottom : 0.05cm;
		font-size     : 0.75cm;
	}
	h3{
		margin-top    : -0.1cm;
		margin-bottom : 0.1cm;
		font-size     : 0.575cm;
		border-bottom : 2px solid @headerUnderline;
	}
	h4{
		margin-top    : -0.02cm;
		margin-bottom : 0.02cm;
		font-size     : 0.458cm;
	}
	h5{
		margin-top    : -0.02cm;
		margin-bottom : 0.02cm;
		font-family   : ScalySansSmallCapsRemake;
		font-size     : 0.423cm;
		font-weight   : 900;
	}
	//*****************************
	// *          TABLE
	// *****************************/
	table{
		.useSansSerif();
		width         : 100%;
		margin-bottom : 1em;
		thead{
			display: table-row-group;
			font-weight : 800;
			th{
				vertical-align : bottom;
				padding        : 0.14em 0.4em;
			}
		}
		tbody{
			tr{
				td{
					padding : 0.14em 0.4em;
				}
				&:nth-child(odd){
					background-color : @noteGreen;
				}
			}
		}
	}
	//*****************************
	// *            NOTE
	// *****************************/
	.note{
		&::before{
			content             : "";
			box-sizing          : border-box;
			border-style        : solid;
			border-width        : 11px;
			border-image        : @noteBorderImage 12;
			border-image-outset : 9px 0px;
			box-shadow          : 1px 4px 14px #888;
			position            : absolute;
			width               : 100%;
			height              : 100%;
			top                 : 0;
			left                : 0;
		}
		.useSansSerif();
		position            : relative;
		margin-top          : 1.3em;
		margin-left         : -0.1em;
		margin-right        : -0.1em;
		background-color    : @noteGreen;
		padding             : 0.5em 0.6em;
		& + * {
			margin-top : 1.3em;
		}
		p{
			display        : block;
			padding-bottom : 0px;
		}
		p + p {
			padding-top : .8em;
		}
		:last-child {
			margin-bottom : 0em;
		}
	}
	//************************************
	// *       DESCRIPTIVE TEXT BOX
	// ************************************/
	.descriptive{
		.useSansSerif();
		display             : block-inline;
		margin-top          : 1.4em;
		background-color    : #faf7ea;
		font-family         : ScalySansRemake;
		border-style        : solid;
		border-width        : 7px;
		border-image        : @descriptiveBoxImage 12 stretch;
		border-image-outset : 4px;
		box-shadow          : 0px 0px 6px #faf7ea;
		padding             : 0.1em;
		& + * {
			margin-top : 1.4em;
		}
		p{
			display        : block;
			padding-bottom : 0px;
			line-height    : 1.5em;
		}
		p + p {
			padding-top : .8em;
		}
		:last-child {
			margin-bottom : 0em;
		}
	}
	//*****************************
	// *    MONSTER STAT BLOCK
	// *****************************/
	.monster {
		.useSansSerif();
		&.frame {
			border-style          : solid;
			border-width          : 7px 6px;
			background-color      : @monsterStatBackground;
			background-image      : @monsterBlockBackground;
			border-image          : @monsterBorderImage 14 round;
			border-image-outset   : 0px 2px;
			background-blend-mode : overlay;
			background-attachment : fixed;
			box-shadow            : 1px 4px 14px #888;
			padding               : 4px 2px;
			margin                : 0px -6px 1em;
		}

		//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns, but breaks internal columns...
		position          : relative;
		padding           : 0px;
		margin-bottom     : 1em;

		p{
			margin-bottom : 0.3cm;
		}
		p+p {
			margin-top  : 0;	//May not be needed
			text-indent : 0;
		}
		p:last-of-type {
			margin-bottom: 0;
		}

		//Headers
		h2{
			font-size     : 0.62cm;
			line-height   : 1em;
			margin        : 0;
			&+p {
				font-size     : 0.304cm; //Monster size and type subtext
				margin-bottom : 0;
			}
		}
		h3{
			font-family    : ScalySansRemake;
			font-weight    : 800;
			font-variant   : small-caps;
			border-bottom  : 2px solid @headerText;
			margin-top     : 0.05cm;
  		padding-bottom : 0.05cm;
		}

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

		//Attribute Lists
		dl {
			color : @headerText;
		}

		// Monster Ability table
		hr + table:first-of-type{
			margin              : 0;
			column-span         : 1;
			color               : @headerText;
			background-color    : transparent;
			border-style        : none;
			border-image        : none;
			-webkit-column-span : 1;
			tr {
				background-color : transparent;
			}
			td,th {
				padding: 0px;
			}
		}
	}

	//Full Width
	.monster.wide{
		.useColumns(0.96);
	}

	hr+hr+blockquote{
		.useColumns(0.96);
	}
	//*****************************
	// *           FOOTER
	// *****************************/
	&:after{
		content          : "";
		position         : absolute;
		bottom           : 0px;
		left             : 0px;
		z-index          : 100;
		height           : 50px;
		width            : 100%;
		background-image : @footerAccentImage;
		background-size  : cover;
	}
	&:nth-child(even){
		&:after{
			transform : scaleX(-1);
		}
		.pageNumber{
			left : 2px;
		}
		.footnote{
			left       : 80px;
			text-align : left;
		}
	}
	.pageNumber{
		position    : absolute;
		right       : 2px;
		bottom      : 22px;
		width       : 50px;
		font-size   : 0.9em;
		color       : #c9ad6a;
		text-align  : center;
		text-indent : 0;
		&.auto::after {
			content : counter(phb-page-numbers);
		}
	}
	.footnote{
		position   : absolute;
		right      : 80px;
		bottom     : 32px;
		z-index    : 150;
		width      : 200px;
		font-size  : 0.8em;
		color      : #c9ad6a;
		text-align : right;
	}
	//************************************
	// *           CODE BLOCKS
	// ************************************/
	code{
    font-family: "Courier New", Courier, monospace;
    font-size: 0.325;
    padding: 2px 4px;
    color: #58180d;
    background-color: #faf7ea;
    border-radius: 4px;
	}

	pre code{
		width               : 100%;
		display             : block;
		border              : 4px solid;
		border-image        : @codeBorderImage 26 stretch;
		border-image-width  : 10px;
		border-image-outset : 2px;
		border-radius       : 12px;
	}
	//*****************************
	// *          EXTRAS
	// *****************************/
	hr{
		visibility : hidden;
		margin     : 0px;
	}
	//Modified unorder list, used in spells
	hr+ul{
		margin-bottom   : 0.5em;
		padding-left    : 1em;
		text-indent     : -1em;
		list-style-type : none;
	}
	.columnSplit {
		visibility                 : hidden;
		-webkit-column-break-after : always;
		break-after                : always;
		-moz-column-break-after    : always;
		break-before               : column;
	}
	//Avoid breaking up
	p,blockquote,table{
		z-index                     : 15;
		-webkit-column-break-inside : avoid;
		page-break-inside           : avoid;
		break-inside                : avoid;
	}
	//Better spacing for spell blocks
	h4+p+hr+ul{
		margin-top : -0.5em
	}
	//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;
	}
	li{
		-webkit-column-break-inside : avoid;
		page-break-inside           : avoid;
		break-inside                : avoid;
	}
}
//*****************************
// *         SPELL LIST
// *****************************/
.page .spellList{
	.useSansSerif();
	column-count        : 4;
	column-span         : all;
	-webkit-column-span : all;
	-moz-column-span    : all;
	ul+h5{
		margin-top : 15px;
	}
	p, ul{
		font-size   : 0.352cm;
		line-height : 1.3em;
	}
	ul{
		margin-bottom               : 0.5em;
		padding-left                : 1em;
		text-indent                 : -1em;
		list-style-type             : none;
		-webkit-column-break-inside : auto;
		page-break-inside           : auto;
		break-inside                : auto;
	}
}
//*****************************
// *         WIDE
// *****************************/
.page .wide{
	column-span         : all;
	-webkit-column-span : all;
	-moz-column-span    : all;
}
//*****************************
// *       CLASS TABLE
// *****************************/
.page .classTable{
	margin-top          : 25px;
	margin-bottom       : 40px;
	border-collapse     : separate;
	background-color    : white;
	border              : initial;
	border-style        : solid;
	border-image-outset : 25px 17px;
	border-image-repeat : stretch;
	border-image-slice  : 150 200 150 200;
	border-image-source : @frameBorderImage;
	border-image-width  : 47px;
	h5{
		margin-bottom : 10px;
	}
}
//*****************************
// *      TABLE OF CONTENTS
// *****************************/
.page .toc{
	-webkit-column-break-inside : avoid;
	page-break-inside           : avoid;
	break-inside                : avoid;
	h1 {
		text-align    : center;
		margin-bottom : 0.1cm;
	}
	a{
		display         : table;
		color           : inherit;
		text-decoration : none;
		&:hover{
			text-decoration : underline;
		}
	}
	h4 {
		margin-top : 0.1cm;
	}
	ul{
		padding-left    : 0;
		list-style-type : none;
		li + li h3 {
			margin-top  : 0.26cm;
			line-height : 1em
		}
		h3 span:first-child::after {
			border : none;
		}
		span {
			display : table-cell;
			&:first-child {
				position   :       relative;
				overflow   :       hidden;
				&::after {
					content       : "";
					position      : absolute;
					bottom        : 0.08cm;        /* Set as you want */
					margin-left   : 0.06cm;        /* Spacing before dot leaders */
					width         : 100%;
					border-bottom : 0.05cm dotted #000;
				}
			}
			&:last-child {
				font-family		 : BookInsanityRemake;
				font-size   	 : 0.34cm;
				font-weight		 : normal;
				color		       : black;
				text-align     : right;
				vertical-align : bottom;       /* Keep Price text bottom-aligned */
				width          : 1%;
				padding-left   : 0.06cm;       /* Spacing after dot leaders */
				/*white-space: nowrap;         /* Uncomment if needed */
			}
		}
		ul { /*List indent*/
			margin-left : 1em;
		}
	}
	&.wide{
		.useColumns(0.96);
	}
}

//*****************************
// *    MUSTACHE DIVS/SPANS
// *****************************/
.page {
	.block {
		break-inside : avoid;
		-webkit-transform   : translateZ(0); //Prevents shadows from breaking across columns
	}
	.inline-block {
		display : inline-block;
		text-indent : initial;
		line-height : 1.3em;
	}
	div {
		column-gap : 0.5cm; //Default spacing if a div uses multicolumns
	}
}

//*****************************
// *    DEFINITION LISTS
// *****************************/
.page {
	dl {
		line-height  : 1.3em;
		padding-left : 1em;
		text-indent  : -1em;
	}
	dl + p {
  	margin-top: 0.5em;
  }
	p + dl {
		margin-top: -0.5em;
	}
  dt {
    display      : inline;
    margin-right : 5px;
  }
  dd {
		display     : inline;
		margin-left : 0px;
		text-indent : 0px;
  }
}

//*****************************
// *    BLANK LINE
// *****************************/
.page {
	.blank {
		height: 0.75em;
	}
	p + .blank {
		margin-top: -1em;
	}
}
