/* Webfonts */

@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=Karla:ital@0;1&display=swap');


/* Variables */

:root {
	--body-text-color: #101010;
	--body-font-family: "Karla", sans-serif;
	--titles-font-family: "DM Serif Display", serif;
	--color-off-white: #f2f0ef;
}


/* Global */

html {
	font-size: clamp(12px,calc(5vw / 6 + 4px),24px);
}

body {
	color: var(--body-text-color);
	font-family: var(--gh-font-body, var(--body-font-family));
	padding-top: 4rem;
}

.anchor {
	top: -4rem;
}

.cursor-pointer {
	cursor: pointer;
}

.kg-width-wide {
  grid-column: unset;
}

.kg-width-full {
  grid-column: unset;
}

/* Layout */

section, footer {
	padding: 6rem 0;
	position: relative;
}

.container, .container-fluid {
	display: block;
	padding-left: 2rem;
	padding-right: 2rem;
	position: relative;
}

.container {
	max-width: calc(80rem + 4rem);
}

.row {
	justify-content: center;
	margin-left: -1rem;
	margin-right: -1rem;
	margin-bottom: -2rem;
}

.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
	padding-left: 1rem;
	padding-right: 1rem;
	margin-bottom: 2rem;
}

.row.row-pad-xs {
	margin-left: -0.25rem;
	margin-right: -0.25rem;
	margin-bottom: -0.5rem;
}

.row.row-pad-xs > :is(.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto) {
	padding-left: 0.25rem;
	padding-right: 0.25rem;
	margin-bottom: 0.5rem;	
}

.row.row-pad-sm {
	margin-left: -0.5rem;
	margin-right: -0.5rem;
	margin-bottom: -1rem;
}

.row.row-pad-sm > :is(.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto) {
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	margin-bottom: 1rem;	
}


/* Typography */

:is(h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, p, ol, ul, p.subtitle):last-child {
  margin-bottom: 0;
}


a {
	color: var(--body-text-color);
	text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
	font-family: var(--gh-font-heading, var(--titles-font-family));
	margin-bottom: 1.5rem;
	text-wrap: balance;
}

h1 {
	font-size: 3rem;
}

h2 {
	font-size: 2.5rem;
}

h3 {
	font-size: 2rem;
}

.text-white, .text-white :is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,p,a) {
	color: #fff!important;
}

.text-body, .text-body :is(h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,p,a) {
	color: var(--body-text-color)!important;
}

.text-xs {
	font-size: 0.75rem;
}

.text-sm {
	font-size: 0.875rem;
}

.text-lg {
	font-size: 1.25rem;
}

.balance-text {
	text-wrap: balance;
}


/* Colours */

.bg-off-white {
	background-color: var(--color-off-white);
}

.bg-dark {
	background-color: var(--body-text-color);
}


/* Dropdowns */

.dropdown-toggle::after {
	transform: translateY(0.1rem);
	transition: 0.2s ease-out;
}

.dropdown-toggle.show::after {
	transform: scaleY(-1) translateY(-0.1rem);
}


/* Navbar */

.navbar {
	background-color: rgba(255,255,255, 0.85);
	backdrop-filter: blur(0.25rem);
	height: 4rem;
	padding: 0 2rem;
}

.nav-logo {
	color: var(--body-text-color);
	font-family: var(--titles-font-family);
	font-size: 2.5rem;
	line-height: 0.8;
}

.nav-logo span {
	opacity: 0.25;
}


.navbar-links > * {
	margin-left: 1.5rem;
	opacity: 0.75;
	transition: 0.2s ease-out;
}

.navbar-links a:hover {
	opacity: 1;
}


/* USP Panels */

.usp-panel h3 {
	line-height: 1;
}



/* Footer */

footer {
	background: #101010;
}

footer .nav-logo span {
	opacity: 0.5;
}

.footer-links > * {
	margin-left: 1.5rem;
}

.footer-bottom {
	border-top: 1px solid rgba(255,255,255,0.5);
}


/* Docs */

.docs-content h2 {
	border-bottom: 1px solid var(--bs-border-color);	
}

.docs-content h3 {
	font-size: 1.75rem;
	margin-bottom: 0.5rem;
}

.docs-content p:has(+ h2) {
	margin-bottom: 2.5rem;
}

.docs-topbar {
	border-top: 1px solid #101010;
	border-bottom: 1px solid #101010;
}

.changelog-item:not(:first-child) {
	border-top: 1px solid var(--bs-modal-header-border-color);
	margin-top: 1.5rem;
	padding-top: 1.5rem;
}

.docs-sidebar {
	border: 1px solid var(--bs-border-color);	
	top: 6rem;
}

.toc-list {
	line-height: 1.1;
	list-style: none;
	padding-left: 0;
}

.toc-link:before {
	display: none;
}

.toc-link.node-name--H2 {
	display: inline-block;
	font-size: 1.15rem;
}

.toc-list li:not(:first-child) .toc-link.node-name--H2  {
	margin-top: 1.25rem;
}

.toc-link.node-name--H3 {
	display: inline-block;
	font-size: 0.875rem;
	line-height: 1.15;
	margin-top: 0.375rem;
}

.accordion-button {
	background-color: transparent!important;
	box-shadow: none!important;
	outline: none!important;
}


/* Media Queries */

@media (max-width: 767px) {
	.is-active-link {font-weight: 400;}
}

@media (max-width: 575px) {
	section, footer {padding: 4.5rem 0;}
	.navbar {padding: 0 1rem;}
	.footer-links > * {margin-left: 1rem; margin-right: 1rem;}
	.container, .container-fluid {padding-left: 1rem;padding-right: 1rem;}
	.nav-logo {font-size: 2rem;}
}