/**
 * This contains the content styling
 * @author Sascha Leib <sascha@leib.be>
 */

main p,
main blockquote,
main div.table {
	margin-bottom:	1em;
}

/* headlines: */
main h1, main h2, main h3, main h4, main h5, main h6 {
	font-family:	@ini_alt_fonts;
	color:			@ini_headlines;
	margin:			1em 0 1em 0;
	line-height:	1.1em;
}

main h1 { font-size: 2em; }
main h2 { font-size: 1.5em; }
main h3 { font-size: 1.125em; }
main h4 { font-size: 1em; }
main h5 { font-size: .875em; }
main h6 { font-size: .75em; }

main h1 *, main h2 *, main h3 *, main h4 *, main h5 *, main h6 * {
	font-family:	inherit;
	font-size:		inherit;
	color:			inherit;
	margin:			inherit;
	line-height:	inherit;
}

/* on the homepage only, reduce the H1 top margin: */
body.home h1:first-child { margin-top: .5em; }

/* make strike-through and underline more useful! */
main 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;
}
main s {
	-webkit-text-decoration-color: rgba(255,0,0,.5);
	-webkit-text-decoration-line: line-through;
	-webkit-text-decoration-style: solid;
	-webkit-text-decoration-thickness: 1pt;
	text-decoration: line-through rgba(255,0,0,.5) solid 1pt;
}

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

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

main li::marker {
	color:			#666;
}

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

/* horizontal rules */
main hr {
	border:				#666 solid 0;
	border-top-width:	1pt;
	height:				0;
	margin:				3pt 0;
}

main tt, main blockquote tt,
main pre, main pre *,
main code, main blockquote code {
	font-family:	@ini_mono_fonts;
}
main code, main blockquote code {
	border:			@ini_border solid 1px;
	border-radius:	3pt;
	padding:		0 2pt;
}

/* quotes: */
main blockquote {
	border-left:	@ini_blockquote solid .4em;
	border-radius:	.5em;
	padding:		.25em 0 .25em .75em;
	margin:			0 2em 1em 1em;
	font-family:	@ini_alt_fonts;
	font-size:		1.1rem;
}
main blockquote * {
	font-family:	@ini_alt_fonts;
	font-size:		1.1rem;
} 

main svg {
	display:			block;
	fill-rule:			evenodd;
	clip-rule:			evenodd;
	stroke-linejoin:	round;
	stroke-miterlimit:	1.5;
}
main svg.math {
	margin-left:		15px
}

/*  tables */
main div.table {
    overflow-x:			auto;
}

main table {
    border-collapse:	collapse;
    empty-cells:		show;
    border-spacing:		0;
	font-size:			smaller;
    border:				1px solid @ini_border;
	margin-bottom:		1em;
}

main table.inline {
    min-width:			50%;
}

main table th,
main table td {
	padding:			.5em .3em;
	vertical-align:		top;
	border:				1px solid @ini_border;
	line-height:		1.25em;
}
main table th {
	font-weight:		bold;
	background-color:	@ini_background_alt;
	text-align:			left;
}

main table.inline tr:hover td {
    background-color:	@ini_background_alt;
}

main table.inline tr:hover th {
    background-color:	@ini_border;
}

/* asides */
main aside {
	width:			50%;
	max-width:		220px;
	min-width:		150px;
	float:			right;
	text-align:		center;
	font-size:		smaller;
	margin-left:	.5em;
	font-size:		small;
	line-height:	1.5em;
}
main aside footer {
	line-height:	1.1em;
}

/* images */
main img {
	max-width:		100%;
	height:			auto;
}

/* tablet break point: */
@media (max-width: @ini_tablet_width) {

	/* use hyphenation rules */
	main p {
		hyphens: auto;
		-webkit-hyphens: auto;
		-moz-hyphens: auto;
		-ms-hyphens: auto;
		hyphenate-limit-chars: 6 2 3;
		-ms-hyphenate-limit-chars: 6 2 3;
		-webkit-hyphenate-limit-before: 2;
		-webkit-hyphenate-limit-after: 3;
		hyphenate-limit-lines: 3;
		-ms-hyphenate-limit-lines: 3;
	}
}

/* phone break point: */
@media (max-width: @ini_phone_width) {

	.nophone {
		display: none !important;
	}
	
	main aside {
		width:			100%;
		max-width:		initial;
		float:			none;
		margin-left:	0;
	}
}

/* dark mode overrides */
@media (prefers-color-scheme: dark) {
	body.darkmode main h1, body.darkmode main h2,
	body.darkmode main h3, body.darkmode main h4,
	body.darkmode main h5, body.darkmode main h6 { color: @ini_headlines_dark; }
	body.darkmode main table { border-color: @ini_border_dark; }
	body.darkmode main table th { background-color: rgba(255,255,255,0.05); }
	body.darkmode main table.inline tr:hover td,
	body.darkmode #acl_manager table tr:hover { background-color: rgba(255,255,255,0.1); }
	body.darkmode main code, main blockquote code { border-color: @ini_border_dark; }
	body.darkmode main table.inline tr:hover th { background-color: @ini_border_dark; }
	body.darkmode main blockquote { border-left-color: @ini_blockquote_dark }
	
	body.darkmode div.error { background-color: #4B2F36; color: #FFB3D2; border-color: #743E4C; }
	body.darkmode div.success { background-color: #28381F; color: #FBE2A1; border-color: #37562E; }
	body.darkmode div.notify { background-color: #42381F; color: #FCE2A1; border-color: #56562E; }
}