/* Split/Second modding docs. Bootstrap 5 underneath; this file sets the accent,
	 the three-column shell, the reference tables and the code blocks. */

:root,
[data-bs-theme="light"] {
	--accent: #0b6fb3;
	--accent-soft: rgba(11, 111, 179, 0.12);
	--bs-link-color: var(--accent);
	--bs-link-hover-color: #084f80;
	--bs-link-color-rgb: 11, 111, 179;
	--bs-link-hover-color-rgb: 8, 79, 128;
	--code-bg: #f6f7f9;
	--hl-keyword: #8a2a8f;
	--hl-string: #1a7f37;
	--hl-number: #a04a00;
	--hl-comment: #6a737d;
	--hl-builtin: #0b6fb3;
	--hl-title: #0b5aa8;
	--topbar-h: 3.25rem;
	--sidebar-w: 16.5rem;
	--toc-w: 14rem;
}

[data-bs-theme="dark"] {
	--accent: #62c3f2;
	--accent-soft: rgba(98, 195, 242, 0.14);
	--bs-link-color: var(--accent);
	--bs-link-hover-color: #9ad9f7;
	--bs-link-color-rgb: 98, 195, 242;
	--bs-link-hover-color-rgb: 154, 217, 247;
	--bs-body-bg: #1b1d21;
	--bs-body-color: #d9dbe0;
	--bs-tertiary-bg: #22252a;
	--bs-secondary-bg: #262a30;
	--bs-border-color: #33373e;
	--code-bg: #15171a;
	--hl-keyword: #d49be0;
	--hl-string: #9ad89a;
	--hl-number: #f0b57a;
	--hl-comment: #7c8591;
	--hl-builtin: #8fd2f5;
	--hl-title: #8fc1ff;
}

html { scroll-padding-top: calc(var(--topbar-h) + 1rem); }

body {
	padding-top: var(--topbar-h);
	font-size: 0.975rem;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

/* --- top bar ------------------------------------------------------------ */

.topbar {
	height: var(--topbar-h);
	background: var(--bs-body-bg);
	padding: 0;
}
.topbar .navbar-brand { font-weight: 600; font-size: 1rem; }
.topbar .brand-sub { font-weight: 400; color: var(--bs-secondary-color); margin-left: 0.25rem; }
.topbar .btn { display: inline-flex; align-items: center; gap: 0.35rem; }

[data-bs-theme="dark"] .icon-sun { display: none; }
[data-bs-theme="light"] .icon-moon { display: none; }

.search { position: relative; flex: 1 1 auto; min-width: 0; max-width: 22rem; }
.topbar .navbar-brand { white-space: nowrap; }
@media (max-width: 575.98px) {
	.topbar .brand-sub { display: none; }
	.topbar .navbar-brand { font-size: 0.95rem; margin-right: 0; }
}
.search .form-control { background: var(--bs-tertiary-bg); }
.search-results {
	width: 100%;
	min-width: 18rem;
	max-height: 24rem;
	overflow-y: auto;
	margin-top: 0.25rem;
	right: 0;
	left: auto;
}
.search-results .dropdown-item { white-space: normal; padding: 0.4rem 0.75rem; }
.search-results .dropdown-item small { display: block; color: var(--bs-secondary-color); }
.search-results .dropdown-item.active small { color: inherit; opacity: 0.8; }
.search-results .dropdown-header { font-size: 0.75rem; }

/* --- shell ---------------------------------------------------------------- */

.shell {
	display: grid;
	grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
	min-height: calc(100vh - var(--topbar-h));
}
@media (min-width: 1200px) {
	.shell { grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--toc-w); }
}
@media (max-width: 991.98px) {
	.shell { grid-template-columns: minmax(0, 1fr); }
}

.sidebar {
	position: sticky;
	top: var(--topbar-h);
	height: calc(100vh - var(--topbar-h));
	overflow-y: auto;
	border-right: 1px solid var(--bs-border-color);
	background: var(--bs-body-bg);
	font-size: 0.875rem;
}
@media (max-width: 991.98px) {
	.sidebar { position: fixed; top: 0; height: 100%; width: var(--sidebar-w); }
}
/* Bootstrap's responsive offcanvas makes the body a flex row at lg and up; the list is a column. */
.sidebar .sidebar-body { display: block; padding: 1rem 0.75rem 2rem; overflow: visible; }
.nav-section { margin-top: 1.1rem; }
.nav-heading {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
	padding: 0 0.6rem 0.3rem;
}
.nav-list { list-style: none; margin: 0; padding: 0; }
.nav-list a {
	display: block;
	padding: 0.22rem 0.6rem;
	border-radius: 0.3rem;
	color: var(--bs-body-color);
	text-decoration: none;
	border-left: 2px solid transparent;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}
.nav-list a:hover { background: var(--bs-tertiary-bg); }
.nav-list a.active {
	color: var(--accent);
	border-left-color: var(--accent);
	background: var(--accent-soft);
}

.content { padding: 2.25rem clamp(1rem, 4vw, 3rem) 4rem; }
.page { max-width: 52rem; }

.toc {
	position: sticky;
	top: var(--topbar-h);
	height: calc(100vh - var(--topbar-h));
	overflow-y: auto;
	padding: 2.4rem 1rem 2rem 0;
	font-size: 0.8rem;
	display: none;
}
@media (min-width: 1200px) { .toc { display: block; } }
.toc-heading { font-weight: 600; margin-bottom: 0.5rem; color: var(--bs-secondary-color); }
.toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--bs-border-color); }
.toc li a {
	display: block;
	padding: 0.18rem 0 0.18rem 0.75rem;
	color: var(--bs-secondary-color);
	text-decoration: none;
	border-left: 1px solid transparent;
	margin-left: -1px;
}
.toc li.toc-3 a { padding-left: 1.6rem; }
.toc li a:hover, .toc li a.active { color: var(--accent); border-left-color: var(--accent); }

/* --- prose --------------------------------------------------------------- */

.page-header { margin-bottom: 2rem; }
.eyebrow {
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--accent);
	margin-bottom: 0.4rem;
}
.page h1 { font-weight: 650; font-size: 2.1rem; letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.page .lead { font-size: 1.08rem; color: var(--bs-secondary-color); margin-bottom: 0; }

.page h2 {
	font-size: 1.45rem;
	font-weight: 600;
	margin-top: 2.75rem;
	margin-bottom: 0.9rem;
	padding-bottom: 0.35rem;
	border-bottom: 1px solid var(--bs-border-color);
}
.page h3 { font-size: 1.12rem; font-weight: 600; margin-top: 2rem; margin-bottom: 0.6rem; }
.page h3 code { font-size: 0.95em; }
.page h2:first-child, .page-header + h2 { margin-top: 0; }
.page p, .page ul, .page ol { margin-bottom: 1rem; }
.page li + li { margin-top: 0.25rem; }

.anchor {
	margin-left: 0.4rem;
	font-weight: 400;
	color: var(--bs-secondary-color);
	text-decoration: none;
	opacity: 0;
}
h2:hover .anchor, h3:hover .anchor, .anchor:focus { opacity: 1; }

code {
	color: inherit;
	background: var(--code-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: 0.25rem;
	padding: 0.05rem 0.3rem;
	font-size: 0.86em;
}
a > code { color: var(--bs-link-color); }
th code, pre code { background: none; border: 0; padding: 0; font-size: inherit; }

figure.code { margin: 1rem 0 1.25rem; }
figure.code .code-title {
	font-family: var(--bs-font-monospace);
	font-size: 0.75rem;
	color: var(--bs-secondary-color);
	background: var(--bs-tertiary-bg);
	border: 1px solid var(--bs-border-color);
	border-bottom: 0;
	border-radius: 0.4rem 0.4rem 0 0;
	padding: 0.3rem 0.85rem;
}
figure.code pre {
	margin: 0;
	background: var(--code-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: 0.4rem;
	padding: 0.85rem 1rem;
	font-size: 0.84rem;
	line-height: 1.55;
	overflow-x: auto;
}
figure.code .code-title + pre { border-top-left-radius: 0; border-top-right-radius: 0; }

.hljs-keyword, .hljs-literal { color: var(--hl-keyword); }
.hljs-string { color: var(--hl-string); }
.hljs-number { color: var(--hl-number); }
.hljs-comment { color: var(--hl-comment); font-style: italic; }
.hljs-built_in { color: var(--hl-builtin); }
.hljs-title, .hljs-attr, .hljs-section { color: var(--hl-title); }

.callout {
	border-left: 3px solid var(--accent);
	background: var(--bs-tertiary-bg);
	border-radius: 0 0.4rem 0.4rem 0;
	padding: 0.6rem 1rem;
	margin: 1.25rem 0;
}
.callout > :last-child { margin-bottom: 0; }
.callout-title { font-weight: 700; margin-right: 0.3rem; }
.callout.warning { border-left-color: #d9822b; }
.callout.warning .callout-title { color: #d9822b; }
.callout.tip { border-left-color: #3a9d5d; }
.callout.tip .callout-title { color: #3a9d5d; }

/* --- tables --------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: 1rem 0 1.5rem; }
.page .table {
	margin-bottom: 0;
	font-size: 0.9rem;
	--bs-table-bg: transparent;
}
.page .table caption {
	caption-side: top;
	padding: 0 0 0.4rem;
	font-size: 0.8rem;
	color: var(--bs-secondary-color);
}
.page .table th {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--bs-secondary-color);
	border-bottom-width: 1px;
	white-space: nowrap;
}
.page .table td { vertical-align: top; padding: 0.5rem 0.6rem; }
.page .table th { padding: 0.35rem 0.6rem; }
.page .table td > :last-child { margin-bottom: 0; }
.page .table .col-name, .page .table .col-sig { white-space: nowrap; }
.page .table .col-sig { white-space: pre; tab-size: 2; }
.page .table .col-returns { white-space: pre-wrap; min-width: 9rem; }
.page .table .col-desc { width: 100%; }
.page .table .col-type { white-space: nowrap; }
.page .table .col-access { white-space: nowrap; }
.page .table .col-desc { min-width: 16rem; }
.page .table tr:target { background: var(--accent-soft); }
.page .table td code { white-space: pre-wrap; }
.page .table .col-sig code { white-space: pre; }

.access {
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 0.1rem 0.4rem;
	border-radius: 0.25rem;
	border: 1px solid var(--bs-border-color);
	color: var(--bs-secondary-color);
}
.access.rw { color: var(--accent); border-color: var(--accent); }
.access.method { color: var(--bs-body-color); }

a.type { text-decoration: none; border-bottom: 1px dotted; font-family: var(--bs-font-monospace); font-size: 0.86em; }
a.type:hover { border-bottom-style: solid; }

/* --- page footer --------------------------------------------------------- */

.page-footer {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--bs-border-color);
}
.pager { text-decoration: none; font-weight: 500; }
.pager.next { text-align: right; margin-left: auto; }
.pager-label { display: block; font-size: 0.75rem; color: var(--bs-secondary-color); font-weight: 400; }

/* --- home ----------------------------------------------------------------- */

.home-intro { max-width: 46rem; }
.home-intro h1 { font-size: 2.4rem; font-weight: 650; letter-spacing: -0.01em; }
.home-intro .lead { font-size: 1.15rem; color: var(--bs-secondary-color); }
.home-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 2rem; margin-top: 2.5rem; }
.home-grid h2 { font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); border: 0; margin: 0 0 0.75rem; padding: 0; }
.home-grid ul { list-style: none; padding: 0; margin: 0; }
.home-grid li { margin: 0 0 0.6rem; }
.home-grid li a { font-weight: 500; }
.home-grid li small { display: block; color: var(--bs-secondary-color); }