/*
 * Personal tweaks for clean-jsdoc-theme. Makes text and the sidebar more compact,
 * changes navbar colours.
 *
 * author: egad13
*/

/* || Typography */

html body, html body .main-wrapper,
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	line-height: 1.5;
}
body h1 {
	font-size: 3rem;
}
body .main-wrapper article ul {
	list-style: initial;
}
body .main-wrapper header ol,
body .main-wrapper article ol {
	padding-left: 2.5em;
}
code {
	tab-size: 4;
	font-size: 1em !important;
}
/* Re-center navbar link text */
nav.navbar div.navbar-item {
	display: flex;
	align-items: center;
}

/* || Layout */

div.sidebar > div.sidebar-items-container {
	margin-top: 3rem;
}
body nav.navbar {
	border-radius: 1rem;
}
/* Collapse p margins with the padding on the td */
td p:first-child {
	margin-top: 0;
}
td p:last-child {
	margin-bottom: 0;
}

/* || Colours (dark) */

body.dark nav.navbar {
	background-color: #222;
}
body.dark nav.navbar div.navbar-item:hover {
	background-color: #333;
}
body.dark nav.navbar div.navbar-item:active {
	background-color: #444;
}

/* || Colours (light) */

body.light nav.navbar {
	background-color: #f7f7f7;
}
body.light nav.navbar div.navbar-item:hover {
	background-color: #ddd;
}
body.light nav.navbar div.navbar-item:active {
	background-color: #ccc;
}

/* || Custom ToC in Sidebar */

.sidebar-section-children>div {
	margin: 0 !important;
}

#sidebar div>ol>li:first-child>a,
#mobile-sidebar div>ol>li:first-child>a {
	display: none;
}

#sidebar .toc-link,
#mobile-sidebar .toc-link {
	padding-top: .1em;
	padding-bottom: .1em;
	color: #aaa;
}
.light #sidebar .toc-link,
.light #mobile-sidebar .toc-link {
	color: #555;
}
#sidebar .toc-link.is-active-link,
#mobile-sidebar .toc-link.is-active-link {
	color: #fff;
}
.light #sidebar .toc-link.is-active-link,
.light #mobile-sidebar .toc-link.is-active-link {
	color: #111;
}

/* || Custom Note & Warning Boxes */

.note::before, .warning::before {
	font-family: "heading";
	display: block;
	margin-bottom: .5em;
}
.note, .warning {
	border-radius: 1rem;
	padding: 1rem 1.5rem;
}

.note:before {
	content: "\1F6C8  Note:";
}
.note {
	background: rgb(47,129,247,.25);
}

.warning:before {
	content: "\26A0  Warning:";
}
.warning {
	background: rgba(210,153,34,.25);
}

/* || Custom Sub-tutorial Navigation Section */

article > nav {
	border-radius: 1rem;
	padding: 1rem 1.5rem;
}
article > nav h2 {
	margin: 0;
	font-size: 1.5rem;
}
article > nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: start;
	list-style: none;
	margin: 0;
	padding: 0;
}
article > nav li {
	display: flex;
	align-items: center;
	border-radius: .5rem;
}
article > nav a {
	padding: .5rem 1rem;
	text-decoration: none;
	transition: .3s;
}
article > nav a:hover {
	text-decoration: none;
}
article > nav a:active {
	text-decoration: none;
}

body.dark article > nav {
	background-color: #222;
}
body.dark article > nav li:hover {
	background-color: #333;
}
body.dark article > nav li:active {
	background-color: #444;
}
body.dark article > nav a {
	color: #999;
}

body.light article > nav {
	background-color: #f7f7f7;
}
body.light article > nav li:hover {
	background-color: #ddd;
}
body.light article > nav li:active {
	background-color: #ccc;
}
body.light article > nav a {
	color: #222;
}