@import (less) './themes/fonts/Blank/fonts.less';
@import (less) './themes/fonts/5e/fonts.less';
@import (less) './themes/assets/assets.less';
@import (less) './themes/fonts/iconFonts/elderberryInn.less';
@import (less) './themes/fonts/iconFonts/diceFont.less';
@import (less) './themes/fonts/iconFonts/gameIcons.less';
@import (less) './themes/fonts/iconFonts/fontAwesome.less';
@import (less) './themes/fonts/Journal/fonts.less';

:root {
	//Colors
	--HB_Color_Background            : #FFFFFF; // White
	--HB_Color_WatercolorStain       : #000000; // Black
}

@page { margin : 0; }
body { counter-reset : page-numbers 0; }
* { -webkit-print-color-adjust : exact; }

//*****************************
// *    MUSTACHE DIVS/SPANS
// *****************************/
.page {
	.block {
		display           : inline-block;
		width             : 100%;
		break-inside      : avoid;
		img { z-index : 0; }
	}
	.inline-block {
		display     : inline-block;
		text-indent : initial;
	}
}

.useColumns(@multiplier : 1, @fillMode: auto) {
	column-fill          : @fillMode;
	column-count         : 2;
}
.columnWrapper {
	column-gap        : inherit;
	max-height        : 100%;
	column-span       : all;
	columns           : inherit;
	column-fill       : inherit;
}
.page {
	.useColumns();
	position               : relative;
	z-index                : 15;
	box-sizing             : border-box;
	width                  : 215.9mm;
	height                 : 279.4mm;
	padding                : 1.4cm 1.9cm 1.7cm;
	overflow               : clip;
	background-color       : var(--HB_Color_Background);
	text-rendering         : optimizeLegibility;
	contain                : strict;
	content-visibility     : auto;
	contain-intrinsic-size : auto none;
}
//*****************************
// *            BASE
	// *****************************/
.page {
	p {
		display       : block;
		overflow-wrap : break-word;
	}
	strong { font-weight : bold; }
	em { font-style : italic; }
	sup {
		font-size      : smaller;
		line-height    : 0;
		vertical-align : super;
	}
	sub {
		font-size      : smaller;
		line-height    : 0;
		vertical-align : sub;
	}
	ul {
		padding-left        : 1.4em;
		list-style-position : outside; //Needed for multiline list items
		list-style-type     : disc;
	}
	ol {
		padding-left        : 1.4em;
		list-style-position : outside;
		list-style-type     : decimal;
	}
	img { z-index : -1; }

	//*****************************
	// *           HEADERS
	// *****************************/
	h1,h2,h3,h4,h5,h6 {
		font-weight  : bold;
		line-height  : 1.2em;
	}
	h1 { font-size : 2em; }
	h2 { font-size : 1.5em; }
	h3 { font-size : 1.17em; }
	h4 { font-size : 1em; }
	h5 { font-size : 0.83em; }
	//*****************************
	// *          TABLE
	// *****************************/
	table {
		width : 100%;
		thead {
			display     : table-row-group;
			font-weight : bold;
		}
	}
	div:not(.columnWrapper) > table + table {	// Side-by-side tables should not
		margin-top : 0;	                        // have vertical spacing.
	}

	//************************************
	// *           CODE BLOCKS
	// ************************************/
	code {
		font-family      : 'Courier New', 'Courier', monospace;
		overflow-wrap    : break-word;
		white-space      : pre-wrap;
	}

	pre code {
		display             : inline-block;
		width               : 100%;
	}
	//*****************************
	// *          EXTRAS
	// *****************************/
	.columnSplit {
		visibility                 : hidden;
		margin-top                 : 0;
		break-after                : always;
		-webkit-column-break-after : always;
		-moz-column-break-after    : always;
		& + * { margin-top : 0; }
	}
	//Avoid breaking up
	blockquote,table {
		z-index                     : 15;
		-webkit-column-break-inside : avoid;
		page-break-inside           : avoid;
		break-inside                : avoid;
	}
	// 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;
	}

	/* Wrap Text */
	.wrapLeft {
		shape-outside : var(--HB_src);
		float         : right;
		shape-margin  : 0.2cm;
	}

	.wrapRight {
		shape-outside : var(--HB_src);
		float         : left;
		shape-margin  : 0.2cm;
	}

	/* Watermark */
	.watermark {
		position        : absolute;
		top             : 0;
		left            : 0;
		z-index         : 500;
		display         : grid !important;
		place-items     : center;
		justify-content : center;
		width           : 100%;
		height          : 100%;
		margin          : 0;
		font-size       : 120px;
		text-transform  : uppercase;
		opacity         : 30%;
		transform       : rotate(-45deg);
		p { margin-bottom : none; }
	}

	/* Watercolor */
	[class*='watercolor'] {
		position            : absolute;
		z-index             : -2;
		width               : 2000px;    /* dimensions need to be real big so the user can set */
		height              : 2000px;    /* height or width and the image will maintain aspect ratio */
		background-color    : var(--HB_Color_WatercolorStain);			/* default color */
		background-size     : cover;
		-webkit-mask-image  : var(--wc);
		mask-image          : var(--wc);
		-webkit-mask-repeat : no-repeat;
		mask-repeat         : no-repeat;
		-webkit-mask-size   : contain;
		mask-size           : contain;
		--wc                : @watercolor1;         /* default image */
	}

	.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; }

	/* Image Masks */

	[class*='imageMask'] {
		position              : absolute;
		bottom                : 50%;
		left                  : 50%;
		z-index               : -1;
		width                 : 200%;
		height                : 200%;
		background-image      : var(--checkerboard);
		background-size       : 20px;
		-webkit-mask-image    : var(--wc), var(--revealer);
		mask-image            : var(--wc);
		-webkit-mask-repeat   : repeat-x;
		mask-repeat           : repeat-x;
		-webkit-mask-position : 50% calc(50% - var(--offset));
		mask-position         : 50% calc(50% - var(--offset));
		-webkit-mask-size     : 50%; //Scale only X to fit page width, leave height at aspect ratio, designed to hang off the edge
		mask-size             : 50%;
		transform             : translateY(50%) translateX(-50%) rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
		--rotation            : 0;
		--revealer            : none;
		--checkerboard        : none;
		--scaleX              : 1;
		--scaleY              : 1;
		& > p:has(img) {
			position   : absolute;
			bottom     : 50%;
			left       : 50%;
			width      : 50%;
			height     : 50%;
			transform  : translateX(-50%) translateY(50%) scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY))) rotate(calc(-1deg * var(--rotation)));
		}
		& img {
			position : absolute;
			bottom   : 0;
			display  : block;
		}
		&.bottom {
			--rotation : 0;
			& img {bottom : 0;}
		}
		&.top {
			--rotation : 180;
			& img {top : 0;}
		}
		&.left {
			--rotation : 90;
			& img {left : 0;}
		}
		&.right {
			--rotation : -90;
			& img {right : 0;}
		}
		&.revealImage {
			--revealer     : linear-gradient(0deg, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.2));
			--checkerboard : url('/assets/waterColorMasks/missingImage.png'); //shows any masked regions not filled by image
		}
	}

	.imageMaskEdge {
		&1 { --wc : url('/assets/waterColorMasks/edge/0001.webp'); }
		&2 { --wc : url('/assets/waterColorMasks/edge/0002.webp'); }
		&3 { --wc : url('/assets/waterColorMasks/edge/0003.webp'); }
		&4 { --wc : url('/assets/waterColorMasks/edge/0004.webp'); }
		&5 { --wc : url('/assets/waterColorMasks/edge/0005.webp'); }
		&6 { --wc : url('/assets/waterColorMasks/edge/0006.webp'); }
		&7 { --wc : url('/assets/waterColorMasks/edge/0007.webp'); }
		&8 { --wc : url('/assets/waterColorMasks/edge/0008.webp'); }
	}

	[class*='imageMaskCenter'] {
		bottom                : calc(var(--offsetY));
		left                  : calc(var(--offsetX));
		width                 : 100%;
		height                : 100%;
		-webkit-mask-image    : var(--wc), var(--revealer);
		mask-image            : var(--wc), var(--revealer);
		-webkit-mask-repeat   : no-repeat;
		mask-repeat           : no-repeat;
		-webkit-mask-position : 0% 0%;
		mask-position         : 50% 50%;
		-webkit-mask-size     : 100% 100%; //Scale both dimensions to fit page size
		mask-size             : 100% 100%; //Scale both dimensions to fit page size
		transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));

		& > p:has(img) {
			position   : absolute;
			bottom     : 0;
			left       : 0;
			width      : 100%;
			height     : 100%;
			transform  : unset;
			transform  : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
				rotate(calc(-1deg * var(--rotation)))
				translateX(calc(-1 * var(--offsetX)))
				translateY(calc(1 * var(--offsetY)));
		}
	}

	.imageMaskCenter {
		&1 { --wc : url('/assets/waterColorMasks/center/0001.webp'); }
		&2 { --wc : url('/assets/waterColorMasks/center/0002.webp'); }
		&3 { --wc : url('/assets/waterColorMasks/center/0003.webp'); }
		&4 { --wc : url('/assets/waterColorMasks/center/0004.webp'); }
		&5 { --wc : url('/assets/waterColorMasks/center/0005.webp'); }
		&6 { --wc : url('/assets/waterColorMasks/center/0006.webp'); }
		&7 { --wc : url('/assets/waterColorMasks/center/0007.webp'); }
		&8 { --wc : url('/assets/waterColorMasks/center/0008.webp'); }
		&9 { --wc : url('/assets/waterColorMasks/center/0009.webp'); }
		&10 { --wc : url('/assets/waterColorMasks/center/0010.webp'); }
		&11 { --wc : url('/assets/waterColorMasks/center/0011.webp'); }
		&12 { --wc : url('/assets/waterColorMasks/center/0012.webp'); }
		&13 { --wc : url('/assets/waterColorMasks/center/0013.webp'); }
		&14 { --wc : url('/assets/waterColorMasks/center/0014.webp'); }
		&15 { --wc : url('/assets/waterColorMasks/center/0015.webp'); }
		&16 { --wc : url('/assets/waterColorMasks/center/0016.webp'); }
		&special { --wc : url('/assets/waterColorMasks/center/special.webp'); }
	}


	[class*='imageMaskCorner'] {
		bottom                : calc(-50% + var(--offsetY));
		left                  : calc(-50% + var(--offsetX));
		width                 : 200%;
		height                : 200%;
		-webkit-mask-image    : var(--wc), var(--revealer);
		mask-image            : var(--wc), var(--revealer);
		-webkit-mask-repeat   : no-repeat;
		mask-repeat           : no-repeat;
		-webkit-mask-position : 50% 50%;
		mask-position         : 50% 50%;
		-webkit-mask-size     : 100% 100%; //Scale both dimensions to fit page size
		mask-size             : 100% 100%; //Scale both dimensions to fit page size
		transform             : rotate(calc(1deg * var(--rotation))) scaleX(var(--scaleX)) scaleY(var(--scaleY));
		& > p:has(img) {
			bottom     : 25%;
			left       : 25%;
			width      : 50%;
			height     : 50%; //Complex transform below to handle mix of % and cm offsets
			transform  : scaleX(calc(1 / var(--scaleX))) scaleY(calc(1 / var(--scaleY)))
				rotate(calc(-1deg * var(--rotation)))
				translateX(calc(-1 * var(--offsetX)))
				translateY(calc(1 * var(--offsetY)));
		}
	}
	.imageMaskCorner {
		&1 { --wc : url('/assets/waterColorMasks/corner/0001.webp'); }
		&2 { --wc : url('/assets/waterColorMasks/corner/0002.webp'); }
		&3 { --wc : url('/assets/waterColorMasks/corner/0003.webp'); }
		&4 { --wc : url('/assets/waterColorMasks/corner/0004.webp'); }
		&5 { --wc : url('/assets/waterColorMasks/corner/0005.webp'); }
		&6 { --wc : url('/assets/waterColorMasks/corner/0006.webp'); }
		&7 { --wc : url('/assets/waterColorMasks/corner/0007.webp'); }
		&8 { --wc : url('/assets/waterColorMasks/corner/0008.webp'); }
		&9 { --wc : url('/assets/waterColorMasks/corner/0009.webp'); }
		&10 { --wc : url('/assets/waterColorMasks/corner/0010.webp'); }
		&11 { --wc : url('/assets/waterColorMasks/corner/0011.webp'); }
		&12 { --wc : url('/assets/waterColorMasks/corner/0012.webp'); }
		&13 { --wc : url('/assets/waterColorMasks/corner/0013.webp'); }
		&14 { --wc : url('/assets/waterColorMasks/corner/0014.webp'); }
		&15 { --wc : url('/assets/waterColorMasks/corner/0015.webp'); }
		&16 { --wc : url('/assets/waterColorMasks/corner/0016.webp'); }
		&17 { --wc : url('/assets/waterColorMasks/corner/0017.webp'); }
		&18 { --wc : url('/assets/waterColorMasks/corner/0018.webp'); }
		&19 { --wc : url('/assets/waterColorMasks/corner/0019.webp'); }
		&20 { --wc : url('/assets/waterColorMasks/corner/0020.webp'); }
		&21 { --wc : url('/assets/waterColorMasks/corner/0021.webp'); }
		&22 { --wc : url('/assets/waterColorMasks/corner/0022.webp'); }
		&23 { --wc : url('/assets/waterColorMasks/corner/0023.webp'); }
		&24 { --wc : url('/assets/waterColorMasks/corner/0024.webp'); }
		&25 { --wc : url('/assets/waterColorMasks/corner/0025.webp'); }
		&26 { --wc : url('/assets/waterColorMasks/corner/0026.webp'); }
		&27 { --wc : url('/assets/waterColorMasks/corner/0027.webp'); }
		&28 { --wc : url('/assets/waterColorMasks/corner/0028.webp'); }
		&29 { --wc : url('/assets/waterColorMasks/corner/0029.webp'); }
		&30 { --wc : url('/assets/waterColorMasks/corner/0030.webp'); }
		&31 { --wc : url('/assets/waterColorMasks/corner/0031.webp'); }
		&32 { --wc : url('/assets/waterColorMasks/corner/0032.webp'); }
		&33 { --wc : url('/assets/waterColorMasks/corner/0033.webp'); }
		&34 { --wc : url('/assets/waterColorMasks/corner/0034.webp'); }
		&35 { --wc : url('/assets/waterColorMasks/corner/0035.webp'); }
		&36 { --wc : url('/assets/waterColorMasks/corner/0036.webp'); }
		&37 { --wc : url('/assets/waterColorMasks/corner/0037.webp'); }
	}
}

//*****************************
// *    DEFINITION LISTS
// *****************************/
.page {
	dl {
		padding-left : 1em;
		white-space  : pre-line;
	}
	dt {
		display      : inline;
		margin-right : 0.5ch;
		margin-left  : -1em;
	}
	dd {
		display     : inline;
		margin-left : 0;
		text-indent : 0;
	}
}

//*****************************
// *         WIDE
// *****************************/
.page {
	.wide {
		column-span         : all;
		display             : block;
		margin-bottom       : 1em;
		& + * { margin-top : 0; }
	}
	.blank {
		height     : 1em;
		margin-top : 0;
		& + * { margin-top : 0; }
	}
}

//*****************************
//*        CREDITS
//*****************************/
.page .homebreweryCredits {
	p {
		font-family    : 'NodestoCapsWide';
		font-size      : 0.4cm;
		line-height    : 1em;
		text-align     : center;
		text-indent    : 0;
		letter-spacing : 0.08em;
	}
	a {
		color           : inherit;
		text-decoration : none;
		&:hover { text-decoration : underline; }
	}
	.homebreweryIcon {
		display          : block;
		height           : 1.5cm;
		margin           : 0 auto;
		background-color : black;
		-webkit-mask     : url('/assets/naturalCritLogoWhite.svg') center / contain no-repeat;
		mask             : url('/assets/naturalCritLogoWhite.svg') center / contain no-repeat;
	}
	.homebreweryIcon.red { background-color : red; }
	.homebreweryIcon.gold { background-image : linear-gradient(to top left, brown 22.5%, gold 40%, white 60%, gold 67.5%, brown 82.5%); }
}

//*****************************
//*        Page Number
//*****************************/
.page {
	.pageNumber {
		position    : absolute;
		right       : 30px;
		bottom      : 30px;
		width       : 50px;
		font-size   : 0.9em;
		text-align  : center;
		&.auto::after { content : counter(page-numbers); }
	}

	&:nth-child(even) {
		.pageNumber { left : 30px; }
	}

	.resetCounting { counter-set : page-numbers 1; }

	&:not(:has(.skipCounting)) { counter-increment : page-numbers; }

}

//*******************************
// * Ordered List Type Overrides
// *****************************/
@counter-style lower-alpha-trailing-paren {
	system: extends lower-alpha;
	prefix: "";
	suffix: ") ";
  }

.page{
	.ol-ccby ol {
		list-style-type: lower-alpha;
	}

	.ol-ccby ol ol{
		padding-left: 0px !important;
		list-style-type: greek;
	}

	.ol-ccby ol ol ol {
		padding-left: 0px !important;
		list-style-type: upper-alpha;
	}

	.ol-ccby ol ol ol ol {
		padding-left: 0px !important;
		list-style-type: lower-roman;
	}

	.ol-ccby p {
		padding-left: 25px;
		text-indent: 0em !important;
	}

	// Non-indented, numerical lists with slight gap between paragraphs.
	.ol-lowerLetters ol {
		list-style-type: lower-alpha-trailing-paren;
	}

	.ol-lowerLetters ol li p {
		display: inline;
	}

  	.ol-lowerLetters ol {
		list-style-position: inside;
		padding: 0px;
	}

	.ol-lowerLetters ol li:not(:last-child) { 
		 margin-bottom: 0.5em; 	
	}      	  

	.ol-noIndent ol {
		list-style-position: inside;
		padding: 0px;
	}

	.ol-noIndent ol li p {
		display: inline;
	}

	.ol-noIndent ol li:not(:last-child) { 
		 margin-bottom: 0.5em; 	
	}  
}

// *****************************
// *       INDEX
// *****************************/
.page {
	.index {

		ul ul { margin : 0; }

		ul {
			padding-left    : 0;
			text-indent     : 0;
			list-style-type : none;
		}

		& > ul > li {
			padding-left : 1.5em;
			text-indent  : -1.5em;
		}
	}
}

// *****************************
// *      TABLE OF CONTENTS
// *****************************/

// Default Exclusions
// Anything not exlcuded is included, default Headers are H1, H2, and H3.
h4,
h5,
h6,
.page:has(.frontCover), 
.page:has(.backCover), 
.page:has(.insideCover), 
.noToC,
.toc { --TOC : exclude; }

.tocDepthH2 :is(h1, h2) {--TOC : include; }
.tocDepthH3 :is(h1, h2, h3) {--TOC : include; }
.tocDepthH4 :is(h1, h2, h3, h4) {--TOC : include; }
.tocDepthH5 :is(h1, h2, h3, h4, h5) {--TOC : include; }
.tocDepthH6 :is(h1, h2, h3, h4, h5, h6) {--TOC : include; }

.tocIncludeH1 h1 {--TOC : include; }
.tocIncludeH2 h2 {--TOC : include; }
.tocIncludeH3 h3 {--TOC : include; }
.tocIncludeH4 h4 {--TOC : include; }
.tocIncludeH5 h5 {--TOC : include; }
.tocIncludeH6 h6 {--TOC : include; }

.page {
	&:has(.toc)::after { display : none; }
	.toc {
		-webkit-column-break-inside : avoid;
		page-break-inside           : avoid;
		break-inside                : avoid;
		h1 {
			margin-bottom : 0.3cm;
			text-align    : center;
		}
		a {
			display         : inline;
			color           : inherit;
			text-decoration : none;
			&:hover { text-decoration : underline; }
		}
		h4 {
			margin-top  : 0.2cm;
			line-height : 0.4cm;
			& + ul li { line-height : 1.2em; }
		}
		ul {
			padding-left    : 0;
			margin-top      : 0;
			list-style-type : none;
			a {
				display         : flex;
				flex-flow       : row nowrap;
				justify-content : space-between;
				width           : 100%;
			}
			li + li h3 {
				margin-top  : 0.26cm;
				line-height : 1em;
			}
			h3 span:first-child::after { border : none; }
			span {
				display : contents;
				&:first-child::after {
					bottom        : 0.08cm;
					flex          : 1;
					margin-right  : 0.16cm;
					margin-bottom : 0.08cm;
					margin-left   : 0.08cm;        /* Spacing before dot leaders */
					content       : '';
					border-bottom : 0.05cm dotted #000000;
				}
				&:last-child {
					display     : inline-block;
					align-self  : flex-end;
					font-size   : 0.34cm;
					font-weight : normal;
				}
			}
			ul { /* List indent */
				margin-left : 1em;
			}
		}
		&.wide {
			.useColumns(0.96, @fillMode: balance);
		}
	}
	.toc.wide li { break-inside : auto; }
}


/**********************************
Firefox endruns
**********************************/

@supports (-moz-user-select: none) {  // This section will only apply to Firefox; it's the only browser that supports `-mos-xyz...`
  .page {
    blockquote, table {
      page-break-inside: auto;
      break-inside: auto; 
    }
  }
}