/*
 * wiki-styles.css
 * Copyright (C) 2025 Jacob Babor
 *
 * Distributed under terms of the MIT license.
 */

:root {
	--blue: #0052cc;
	--indigo: #6610f2;
	--purple: #6f42c1;
	--pink: #e83e8c;
	--red: #d9534f;
	--orange: #f0ad4e;
	--yellow: #ffc107;
	--green: #28a745;
	--teal: #20c997;
	--cyan: #17a2b8;
	--white: #fff;
	--gray: #6c757d;
	--gray-dark: #343a40;
	--primary: #0052cc;
	--secondary: #6c757d;
	--success: #28a745;
	--info: #17a2b8;
	--warning: #ffc107;
	--danger: #d9534f;
	--light: #f8f9fa;
	--dark: #343a40;
	--breakpoint-xs: 0;
	--breakpoint-sm: 576px;
	--breakpoint-md: 768px;
	--breakpoint-lg: 992px;
	--breakpoint-xl: 1200px;
	--font-family-sans-serif: "IBM Plex Sans", "Roboto", sans-serif;
	--font-family-monospace: "IBM Plex Mono", monospace;
	/* Custom shit */
	--trim-faint: rgba(255,255,255,0.08);
}
html {
       background: var(--background);
}
body {
       background: var(--background);
       color: var(--foreground);
       font-family: var(--font-primary);
       line-height: 1.2;
       margin: 0;
}

.toolbar {
	background-color: transparent !important;
	padding: 0;
	display: flex;
	gap: 8px;
	justify-content: space-between;
}
#toolbar-widgets {
	display: flex;
	gap: 8px;
	justify-content: right;
}

#article-container {
	margin-top: 0 !important;
}
.btn, .nav-link.active {
	background-color: var(--link) !important;
	border-color: var(--link) !important;
	transition: .04s ease-in;
}
.btn:hover, .nav-link.active:hover {
	background-color: var(--link-hover) !important;
	border-color: var(--link-hover) !important;
	transition: .04s ease-in;
}
.btn-danger {
	background-color: #e88e7d !important;
	border-color: #e88e7d !important;
}
.btn-danger:hover {
	background-color: #e8ada2 !important;
	border-color: #e8ada2 !important;
}
.wiki-label label {
	font-weight: bold !important;
	color: var(--foreground);
}
.table {
	color: var(--foreground);
}
.dropdown-item:active {
	background-color: var(--link) !important;
}
pre {
	padding: 0.50em !important;
	font-size: 90% !important;
	color: var(--foreground) !important;
	background-color: var(--background) !important;
	border-radius: 8px !important;
}
hr {
	border-top: 1px solid var(--trim) !important;
}
footer#wiki-footer {
	font-size: 80%;
	text-align: center;
}

/* Broken-ass breadcrumbs */
#article-breadcrumbs {
	gap: 8px;
}
.breadcrumb {
	background-color: var(--background-darker);
}
#article-breadcrumbs .btn-group {
	margin-left: 0 !important;
}

/* Fix up the article navbar */
@media only screen and (max-width: 768px) {
	/* Make breadcrumbs consistent */
	div#breadcrumbs {
		width: 100%;
	}
	nav:has(ol.breadcrumb) {
		width: 100%;
	}
	/* Hide labels */
	span.hidden-xs {
		display: none;
	}
	/* Make the navbar wrapper flex the right way */
	nav#article-menu ul.nav {
		flex-direction: row;
		justify-content: center !important;
	}
}

/* Feedback */
.invalid-feedback {
	color: #e88e7d
}

/* Forms */
.form-actions {
	border-top: 1px solid var(--trim) !important;
	background: transparent !important;
}
.input-group {
	width: 98% !important;
}

/* Cards */
.card {
	background-color: var(--background-darker) !important;
	border: none !important;
}
.card-header {
	background-color: transparent !important;
	border-bottom: 1px solid var(--trim) !important;
}

/* Editor stuff */
textarea#id_content {
	font-size: 110%;
	height: 40em;
}

/* Article menu stuff */
nav#article-menu {
	border-bottom: 1px solid var(--trim);
}
nav#article-menu h1 {
	border-bottom: none;
}
h1#article-title {
	margin: 0;
}

/* The whole damn article */
.wiki-article {
	max-width: 60em;
	margin: 0 auto;
}

/* Headings */
.wiki-article h1, .wiki-article h2, .wiki-article h3 {
	padding-left: 0;
	padding-right: 0;
	margin-right: 0;
	margin-left: 0;
}
.wiki-article h1 {
	font-weight: bold;
	font-size: 200%;
	border-bottom: 1px solid var(--trim) !important;
}
.wiki-article h2 {
	font-weight: normal;
	border-bottom: 1px solid var(--trim-faint) !important;
}
.wiki-article h3, .wiki-article p {
}
.wiki-article a {
	font-weight: normal;
}
.wiki-article .codehilite-wrap {
	max-height: unset !important;
}
.wiki-article pre {
	max-height: 400px;
	max-width: unset;
	width: calc(100% - 16px);
	margin-left: 8px;
	margin-right: 8px;
	margin-bottom: 0;
	padding: 0.5em;
	border-radius: 8px !important;
	background: var(--background-darker) !important;
}
.wiki-article code:not(pre code) {
	color: var(--foreground);
	font-size: 95%;
	padding: 4px;
	border-radius: 8px;
	background: var(--background-darker);
}

/* TOC, Article list, etc. */
.wiki-article .article-list, .wiki-article .toc{
	padding: 0.5em;
	background-color: var(--background-darker) !important;
	min-width: 300px !important;
	max-width: 500px !important;
	border-radius: 8px;
}
.wiki-article .article-list *, .wiki-article .toc * {
	background-color: transparent !important;
	border-bottom: none !important;
}
.wiki-article .article-list li, .wiki-article .toc li {
	margin: 0 !important;
}
.wiki-article .list-group .nav-header, .wiki-article .toctitle {
	border-bottom: 2px solid var(--trim) !important;
	font-size: 120%;
	padding: 3px 10px;
	font-weight: bold;
}
.wiki-article .toctitle {
	/* We're adding some stuff here to line this up with .nav-header, which is hierarchically different */
	display: block;
	margin: 0 0 0 0;
}
.wiki-article .list-group a {
	border-bottom: 1px solid var(--trim-faint) !important;
}
.wiki-article .list-group .list-group {
	padding-left: 6px;
}
.wiki-article .toc .list-group {
	padding-top: 0;
}
.wiki-article figure {
	display: flex;
}
.wiki-article figure img {
	border-radius: 8px;
	box-shadow: 5px 5px var(--shadow);
}
.wiki-article figure:not(.float-left):not(.float-right) {
	margin: 0 auto;
}