/* tiptap editor content styling
*/

:root
{
	--default-w:720;
	--default-width:calc(var(--default-w) * 1px);

	/* sizes in mm from print template grid */
	--width-mm:138;
	
	--grid-x-mm:14.8;
	--grid-x-gap-mm:2.8;
	--grid-x-block-mm:calc(14.8 + 2.8);
	--grid-y-mm:16.6;
	--grid-y-gap-mm:3.0;

	--column-2-gap-mm:2.8;
	--column-3-gap-mm:3.0;

	--line-indent-mm:5;

	/* responsive horizontal grid (including 10px left and right padding) */
	--grid-x:calc((var(--grid-x-mm)/var(--width-mm)) * (100% - 20px));
	--grid-x-gap:calc((var(--grid-x-gap-mm)/var(--width-mm)) * (100% - 20px));
	--grid-block-x:calc(var(--grid-x) + var(--grid-x-gap));

	/* responsive line indent */
	--line-indent:calc((var(--line-indent-mm) / var(--width-mm)) * 100%);
}

#tiptap
{
	margin: 150px auto;
	min-height:calc(100% - 200px);

	color:var(--editor-text);
	
	font-family: suisse_works,serif;
	font-size: var(--default-type);
	line-height: var(--default-line);
	
	letter-spacing:normal;	
}
#tiptap.cover
{
	margin-top:55px;
}

.tiptap
{
	position:relative;
	max-width:var(--default-width);
	margin:0 auto;
	outline:none;
	
	white-space:normal !important;
}

.tiptap /* development grid */
{
/* 
	background-image: url(/media/page-grid-web.svg);
	background-size:calc(100% - 20px);
	background-repeat:repeat-y;
	background-position:10px 0;
 */
}

.tiptap *
{
	position:relative;
}
#page.edit .tiptap *
{
	transition:background-color .1s linear 0s;
}


/* placeholders */

.tiptap p.is-editor-empty:first-child::before
{
  content: attr(data-placeholder);
  float: left;
  height: 0;
  pointer-events: none;
  color:var(--placeholder);
}
#tiptap.cover .tiptap p.is-editor-empty:first-child::before
{
	content:'Drop a cover image here & add authors for title page …';
}


/* selected nodes */

.tiptap:not(.view) .ProseMirror-selectednode
{
	box-shadow: 0px 1px 3px 0px rgba(5,1,0,.15);
	
	background-color:var(--yellow);
	background-color:rgba(255,255,121,.8);
	transition-duration:.2s;
}
.tiptap:not(.view) img.ProseMirror-selectednode,
.tiptap:not(.view) figure.ProseMirror-selectednode img
{
	filter:sepia() hue-rotate(10deg);
}

#page-editor.editable .tiptap p:not(.ProseMirror-selectednode):hover::before
{
	position:absolute;
	left:-20px;
	width:30px;
	height:100%;
	padding-left:5px;
	box-sizing:border-box;
	
	content:'¶';
	font-size:1rem;
	line-height:1;
	color:var(--content-paragraph);
	
	background-image:linear-gradient(to right, transparent 19px, var(--content-paragraph) 19px, transparent 20px);

	cursor:pointer;
}

#page-editor.editable .tiptap section::before,
#page-editor.editable .tiptap > ol::before
{
	position:absolute;
	left:-30px;
	width:30px;
	height:100%;
	padding-left:5px;
	box-sizing:border-box;
	
	content:'§';
	font-size:1rem;
	line-height:1;
	color:var(--content-section);
	
	background-image:linear-gradient(to right, transparent 20px, var(--content-section) 20px, transparent 21px);

	cursor:pointer;
}

#page-editor.editable .tiptap > ol::before
{
	content:'•';
}



/* headings */

.tiptap .label
{
	font-family:'suisse_intl_monothin','courier new',sans-serif;
	font-size: 20px;
	line-height: 29px;
	margin:0 4px 4px 0;
}
.tiptap h2,
.tiptap h3,
.tiptap h4
{
	font-weight:normal;
	padding:0 10px;
	text-align:left;
}
.tiptap h2
{
	font-size:var(--chapter-title);
}
.tiptap h3
{
	font-size:var(--section-title);
	line-height: var(--section-line);
	margin-left:calc(var(--grid-x) / 2);
}
.tiptap h4
{
	text-decoration:underline;
	margin-left:calc(var(--grid-x) / 2);
}


/* sizes */

.tiptap p.small,
.tiptap .columns-3
{
	font-size:var(--small-type);
	line-height: var(--small-line);
}
.tiptap p.medium
{
	font-size:var(--medium-type);
	line-height: var(--medium-line);
}
.tiptap strong
{
	font-family: inherit;
	font-weight: bold;
}


/* body text */

.tiptap a
{
	color:inherit;
	text-decoration:underline;
}
.tiptap p
{
	padding:0 10px;
	margin-top:0;
	margin-bottom:0;
}
.tiptap p.page-break
{
	padding-bottom:1rem;
	border-bottom:1px dotted var(--object);
}
.tiptap p:not(.indent)
{
	padding-right:calc(var(--grid-block-x) + 10px);
}
.tiptap p.indent
{
	padding-left:calc(10px + var(--grid-block-x));
	padding-right:10px;
}
.tiptap	p.indent-half
{
	padding-left:calc(10px + (var(--grid-x)/2));
	padding-right:calc((var(--grid-x)/2) + var(--grid-block-x) + 10px);
}

.tiptap p.indent-line
{
	text-indent:calc(var(--line-indent) * (var(--width-mm) / (var(--width-mm) - var(--grid-x-block-mm)))); 
}
.tiptap p.small.indent-line
{
	text-indent:calc(var(--line-indent) * (var(--width-mm) / (var(--width-mm) - (2 * var(--grid-x-block-mm))))); 
}
.tiptap p.indent-line-neg
{
	text-indent:calc(var(--line-indent) * ((var(--width-mm) * -1) / (var(--width-mm) - var(--grid-x-block-mm) - var(--line-indent-mm))));
}
.tiptap p.small.indent-line-neg
{
	text-indent:calc(var(--line-indent) * ((var(--width-mm) * -1) / (var(--width-mm) - (2 * var(--grid-x-block-mm)) - var(--line-indent-mm))));
}
.tiptap	p:not(.indent).indent-line-neg
{
	padding-left:calc(10px + (var(--line-indent)));
}

.tiptap	p.small:not(.indent)
{
	padding-right:calc((var(--grid-block-x) * 2) + 10px);
}
.tiptap p.small.indent
{
	padding-right:calc(var(--grid-block-x) + 10px);
	/* margin-left:17.6mm; */
	/* margin-right:17.6mm; */
}
.tiptap .label.person:last-of-type
{
	margin-bottom:1em;
}

.tiptap sup
{
	line-height:1;
}

/* labels */

.tiptap mark.label
{
	font-size:inherit;
	line-height:inherit;
	height:auto;
	padding:0 8px;
}


/* columns */

.tiptap section
{
	padding:0 10px;
}

.tiptap section p:first-child
{
	margin-top:0;
}
.tiptap section.columns-2
{
	columns:2;
	column-gap:var(--grid-x-gap);
}
.tiptap section.columns-2 p
{
	padding:0;
}
.tiptap section.columns-3
{
	columns:3;
}
.tiptap section.columns-3 p
{
	padding:0 calc((var(--column-3-gap-mm) / var(--width-mm)) * 300%);
	text-indent:calc((var(--column-3-gap-mm) / var(--width-mm)) * -300%);
}


/* lists */

.tiptap ol,
.tiptap ul
{
	margin:0;
	padding:0;
	padding-left:calc(10px + var(--grid-x) / 2);
	padding-right:calc(10px + var(--grid-block-x));
	
	list-style:none;
}

.tiptap li
{
	position:relative;
}

.tiptap li p
{
	padding:0 !important;
}

/* list style */

.tiptap li p::before
{
	content:'–'; /* default to unnumbered list */

	position:absolute;
	left:calc( (var(--grid-x-mm)/2 / (6 * var(--grid-x-block-mm) + var(--grid-x-mm)/2)) * -100% ) !important; /* important overrules hover */
	
	/* overrule default p:hover */

	width:auto !important;
	padding-left:0 !important;
	color:inherit !important;
	line-height:inherit !important;
	background:none !important;
	cursor:auto !important;
}
.tiptap li p.decimal::before
{
	content: counter(list-item) '.' !important;
}
.tiptap li p.alpha::before
{
	content: counter(list-item,lower-alpha) '.'  !important;
}

.tiptap ol > li p.indent,
.tiptap ul > li p.indent
{
	margin-left:calc(( (var(--grid-x-mm) / 2 + var(--grid-x-gap-mm)) / (var(--grid-x-block-mm) * 6 + var(--grid-x-mm) / 2)) * 100%);
	margin-right:calc(( var(--grid-x-block-mm) / (var(--grid-x-block-mm) * 6 + var(--grid-x-mm) / 2)) * -100%);
}
.tiptap ol > li p.indent::before,
.tiptap ul > li p.indent::before
{
	left:calc( (var(--grid-x-mm)/2 / (7 * var(--grid-x-block-mm) - var(--grid-x-gap-mm))) * -100% ) !important;
}

/* 2nd level */

.tiptap ol ol, 
.tiptap ul ul
{
	padding-left:calc(((var(--grid-x-mm) / 2 + var(--grid-x-gap-mm)) / (var(--grid-x-block-mm) * 6 + var(--grid-x-mm) / 2)) * 100%);
	padding-right:0;
}
.tiptap ol ol > li p::before,
.tiptap ul ul > li p::before
{
	left:calc( ((var(--grid-x-mm)/2 + var(--grid-x-gap-mm)) / (6 * var(--grid-x-block-mm) - var(--grid-x-gap-mm))) * -100% ) !important;
}

.tiptap ol ol > li p.indent,
.tiptap ul ul > li p.indent
{
	/* TODO re-calculate below! */
	margin-left:calc(( (var(--grid-x-mm) / 2 ) / (var(--grid-x-block-mm) * 6 + var(--grid-x-mm) / 2)) * 100%);
	margin-right:calc(var(--grid-block-x) * -1);
}

/* 3rd level */

.tiptap ol ol ol, 
.tiptap ul ul ul
{
	padding-left:calc(( var(--grid-x-mm) / (var(--grid-x-block-mm) * 6 - var(--grid-x-gap-mm))) * 100%);
	padding-right:0;
}
.tiptap ol ol ol > li p::before,
.tiptap ul ul ul > li p::before
{
	left:calc( ( var(--grid-x-mm) / (5 * var(--grid-x-block-mm))) * -100% ) !important;
}

.tiptap ol * > li p.decimal::before
{
	content: counters(list-item,'.') !important;
}
.tiptap ol * > li p.alpha::before
{
	content: counters(list-item,'.',lower-alpha) !important;
}


/* images */

.tiptap img,
.tiptap figure
{
	/* default image: wrap around, align left */
	position:relative;
	display:inline-block;
	float:left;
	margin:0 var(--grid-block-x) var(--grid-block-x) 10px;

	object-fit:cover;

	z-index:1;
}
.tiptap img.contain
{
	object-fit:contain;
	object-position:0 0;
}
.tiptap img.page.cover
{
	width:100%;
	aspect-ratio:160/230 !important;
	width:auto;
	height:80vh;
	margin-top:0;

}
.tiptap img.uploading
{
	border:2px dashed;
	opacity:.5;
}

img:not(.right)[data-right="0"],
figure:not(.right)[data-right="0"]
{
	margin-right:var(--grid-x-gap);
}
img[data-left="1"],
figure:not(.caption-left)[data-left="1"]
{
	margin-left:calc(10px + var(--grid-block-x));
}
img[data-left="2"],
figure:not(.caption-left)[data-left="2"]
{
	margin-left:calc(10px + (var(--grid-block-x) * 2));
}



.tiptap img.right,
.tiptap figure.right
{
	float:right;
	margin:0 10px var(--grid-block-x) var(--grid-x-gap);
}
.tiptap img.right[data-left="1"],
.tiptap figure.right[data-left="1"]
{
	margin-left:var(--grid-block-x);
}
.tiptap img.right[data-left="2"],
.tiptap figure.right[data-left="2"]
{
	margin-left:calc(2 * var(--grid-block-x));
}



.tiptap img.block,
.tiptap figure.block
{
	float:none;
	display:block;
	margin-bottom:1rem;
}
.tiptap figure > img[data-width].block.right
{
	margin-left:0;
}

.tiptap img.page
{
	display:inline;
	vertical-align:middle;
	
	aspect-ratio:160/230 !important;
	width:calc(((100% - 20px) / 2) - 4px);
	margin:8px 4px 8px 10px;
}
.tiptap figure.page
{
	aspect-ratio:160/230 !important;
	width:calc(((100% - 20px) / 2) - 4px);
}
.tiptap img.page + img.page
{
	margin:8px 10px 8px 4px;
}

.tiptap img.spread,
.tiptap figure.spread
{
	display:block;
	float:none;
	width:calc(100% - 20px);
	margin:8px 0 16px 10px;
	
	aspect-ratio:320/230 !important;
}


.tiptap figure
{
	box-sizing: content-box; /* keeps size for caption layout with padding */
}
.tiptap figure.block
{
	margin-bottom:1em;
}
/* 
.tiptap figure img
{
	display:block;
	width:50%;
	margin:0;
}
 */
.tiptap figure:not(.view) > img,
.tiptap figure:not(.view) > img.right
{
	display:block;
	float:none;
	margin:0;
}

.editable .tiptap figure:not(.view) > img
{
	width:100%;
}

.tiptap figure > figcaption
{
	display:block;
	width:100%;
	margin-top:8px;
	
	
	font-size:var(--caption-type);
	line-height:var(--caption-line);
	
}
.tiptap figure.is-empty figcaption::before
{
	content:'Add caption text';

  float: left;
  height: 0;
  pointer-events: none;
  color: var(--placeholder);
}



.tiptap figure.caption-left figcaption,
.tiptap figure.caption-right figcaption
{
	position:absolute;
	top:0;
	margin-top:0;
}
.tiptap figure.caption-left figcaption
{
	left:0;
}
.tiptap figure.caption-right figcaption
{
	right:0;
}



.tiptap figcaption
{
	/* background-color:rgba(250,0,0,.2); */
}

.tiptap figure.caption-left
{
	padding-left:calc(2 * var(--grid-block-x));
}
.tiptap figure.caption-left[data-left="1"]
{
	padding-left:calc(3 * var(--grid-block-x));
}
.tiptap figure.caption-left[data-left="2"]
{
	padding-left:calc(4 * var(--grid-block-x));
}

.tiptap figure.caption-right
{
	padding-right:calc(2 * var(--grid-block-x));
}
.tiptap figure.caption-right[data-right="1"]
{
	padding-right:calc(3 * var(--grid-block-x));
}
.tiptap figure.caption-right[data-right="2"]
{
	padding-right:calc(4 * var(--grid-block-x));
}



.tiptap figcaption
{
	/* background-color:rgba(250,250,0,.3); */
	z-index:1;

}