/* Stylesheet for DokuWiki Nuropa template
 * by Sascha Leib
 * File name: content.css
 */

main {
	h1, h2, h3, h4, h5, h6 {
		font-family: @ini_headline_fonts;
		color: @ini_headline_color;
		margin: 1em 0;
		font-weight: 600;
		line-height: 1.5em;
	}
	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3  {font-size: 1.5rem; }
	h4 { font-size: 1.25rem; }
	h5 { font-size: 1rem; }
	h6 { font-size: 1rem; }

	section {
		padding: 0 6pt;
	}

	aside.float-right {
		position: relative;
		float: right;
		clear: right;
		width: 33%;
		margin: 3pt 0 6pt 10pt;
		z-index: 2;
	}
	aside.float-left {
		position: relative;
		float: left;
		clear: left;
		width: 33%;
		margin: 3pt 10pt 6pt 0;
		z-index: 2;
	}

	p, li, dl {
		font-size: 1rem;
		line-height: 1.5em;
	}

	p {
		margin: .75rem 0;
		word-wrap: break-word;
		overflow-wrap: break-word;
		hyphens: auto;
		-ms-hyphens: auto;
		-moz-hyphens: auto;
		-webkit-hyphens: auto;
		hyphenate-limit-chars: 6 2 3;
	}

	ul,
	ol {
		padding-left: 1.75em;
	}
	dl dt {
		color: @ini_headline_color;
		font-weight: bold;
	}
	dl dd {
		margin-left: 1.75em;
	}

	dl.compact {
		display: table-row;
	}

	dl.compact dt {
		display: table-cell;
		width: 20%;
		padding-right: 1.5%;
	}
	dl.compact dd {
		display: table-cell;
		vertical-align: bottom;
		padding-bottom: .5em;
	}
	a:link,
	a:visited {
		color: @ini_link;
		text-decoration: underline;
	}
	a:hover {
		color: @ini_link;
	}
	a:focus {
		outline: 3px solid @ini_focus_outline;
		text-decoration: none;
	}

	blockquote {
		& {
			font-family: @ini_alternate_fonts;
			font-size: 1rem;
			line-height: 1.5rem;
			border: @ini_border_color solid 1pt;
			border-left: @ini_theme_color solid 3pt;
			border-radius: .25rem;
			padding: 1em 0 1em 2rem;
			margin: .5rem 0 .5rem 0;
			hanging-punctuation: first allow-end;
			text-indent: -1rem;
			-webkit-box-shadow: 1px 1px 1px 0 rgba(0,0,0,.3);
			box-shadow: 1px 1px 1px 0 rgba(0,0,0,.3);
		}
		&::before {
			content: open-quote;
			color: @ini_theme_color;
			font-size: 1.5rem;
			display: inline-block;
			width: .75rem;
			text-align: center;
			vertical-align: sub;
			text-indent: 0;
		}
		&::after {
			content: no-close-quote;
			visibility: hidden;
		}
		blockquote {
			margin: -2em .25em 0 0;
		}
	}

	/* inline styles */
	u {
		-webkit-text-decoration-color: #F30;
		-webkit-text-decoration-line: underline;
		-webkit-text-decoration-style: wavy;
		-webkit-text-decoration-thickness: .7pt;
		text-decoration: underline #F30 wavy .7pt;
	}
	s {
		-webkit-text-decoration-color: rgba(255,0,0,0.5);
		-webkit-text-decoration-line: line-through;
		-webkit-text-decoration-style: solid;
		-webkit-text-decoration-thickness: .075em;
		text-decoration: line-through rgba(255,0,0,0.5) solid .075em;
	}
	code, tt {
		font-family: @ini_mono_fonts;
		font-size: @ini_mono_font_size;
	}

	/* list styles */
	ul, ol {
		margin: 0 2em 1em 1em;
		padding-left: 1.75em;
	}
	ul li, ol li {
		margin-top: .5em;
	}
	ul { list-style: square outside; }
	ul ul { list-style-type: disc; }
	ul ul ul { list-style-type: none; }
	ul ul ul li { margin-left: 1em; }
	ul ul ul li:before { display: block; content: '\2043'; text-align:center; float: left; width: 1em; margin-left: -1em; }
	ul ul ul ul li:before { content: '\FE63' }
	ul ul ul ul ul li:before { content: '\00B7' }

	/* numbered lists vary by nestling: */
	ol { list-style: decimal outside; }
	ol ol { list-style-type: lower-alpha; }
	ol ol ol { list-style-type: lower-roman; }
	ol ol ol ol { list-style-type: lower-greek; }
	ol ol ol ol ol { list-style-type: decimal-leading-zero; font-size: .96em;}
	ol ol ol ol ol ol { list-style-type: upper-alpha; font-size: .96em;}
	ul ul ul ol li { margin-left: 0; }
	ul ul ul ol li:before { display: none; content: ''; }

	li::marker {
		color: #666;
	}

	ul ul, ul ol,
	ol ul, ol ol {
		margin-bottom: 0;
		padding-left: .25em;
	}

	/* footnotes */
	div.footnotes {
		& {
			margin-top: 1.5em;
		}
		&::before {
			content: '';
			display: block;
			width: 33.3%;
			height: 1em;
			border-top: @ini_text solid 1pt;
		}
		.fn {
			& {
				display: grid;
				grid-template-columns: 1.5em auto;
				gap: .5em;
				font-size: smaller;
				margin-bottom: 1em;
			}
			sup {
				& {
					display: inline;
					text-align: right;
					font-size: 90%;
				}
				a:link, a:visited {
					color: @ini_text;
					text-decoration: none;
				}
				a:hover {
					color: @ini_link;
				}
			}
			.content {
				max-width: 40em;
			}
		}
	}
	sup {
		a.fn_top:link, a.fn_top:visited {
			font-size: 88%;
			text-decoration: none;
		}
		a.fn_top:hover {
			text-decoration: underline;
		}
	}

	/* custom elements */
	details {
		& {
			padding: .5em 0 .5em 1em;
		}
		summary {
			& {
				color: @ini_link;
				margin-left: -1em;
				display: inline-grid;
				grid-template-columns: auto auto;
				padding: .25em .5em;
				border: transparent solid 1px;
				border-radius: .25em;
			}
			&::after {
				content: '';
				display: inline-block;
				width: 1.25em; height: 1.25em;
				background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z' style='fill:%23333'/%3E%3C/svg%3E") center no-repeat;
				background-size: 1em;
				transform: rotate(0deg);
				transition: transform .3s ease-in-out;
			}
			&:hover {
				border-color: @ini_form_btn_outline;
				background-color: @ini_form_btn_bg;
			}
			&:focus {
				border-color: transparent;
				outline: @ini_focus_outline solid 2pt;
			}
		}
		&[open] {
			summary {
				&:after {
					transform: rotate(180deg);
					transition: transform .3s ease-in-out;
				}
			}
		}
	}

}

/* footnote popup */
#insitu__fn {
	background-color: #FFFCE4EE;
	color: #1A1A1A;
	font-size: smaller;
	padding: .25em;
	border: #1A1A1A solid 1px;
	border-radius: .25em;
	box-shadow: 1px 1px 2px 2px #1A1A1A33;
	-webkit-box-shadow: 1px 1px 2px 2px #1A1A1A33;
	-moz-box-shadow: 1px 1px 2px 2px #1A1A1A33;
}