/*
Theme Name: Agillic Developers Documentation 2026
Theme URI: https://developers.agillic.com
Author: Adam Kvisgaard
Description: Theme for Agillic Developers Documentation (2026)
Requires at least: 5.3
Tested up to: 6.2
Requires PHP: 5.6
Version: 2.0.3
*/

@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,400,0..1,-50..200");
@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,700;1,400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap");
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css");
@import url("https://cdn.jsdelivr.net/npm/swagger-ui-dist@5/swagger-ui.css?v=0.1");

@import "css/mediaqueries.css?v=3.2";
@import "css/navigation.css?v=3.2.1";
@import "css/colorscheme.css?v=3.3";
@import "css/colorscheme_dark.css?v=0.1";
@import "css/prism_styles.css?v=3.2";
@import "css/content_elements.css?v=3.2";
@import "css/search.css?v=3.2";
@import "css/breadcrumb.css?v=3.2";
@import "css/toc.css?v=3.2";
@import "css/swagger.css?v=1.0";
/* @import "css/dev.css?v=3.2"; */


/* 
Poppins Regular		400		Body text:		p
Poppins Medium		500		Subtitle	:	h2 + quotes
Poppins Bold		700		Headline:		h1 + graphic elements
*/

:root {
	/*---- Agillic CVI ----*/
	--ag-cvi-one: hsl(219, 37%, 17%);
	--ag-cvi-two: hsl(218, 33%, 24%);
	--ag-cvi-three: hsl(212, 29%, 36%);
	--ag-cvi-four: hsl(214, 23%, 56%);
	--ag-cvi-cta: hsl(355, 95%, 63%);
	--ag-cvi-light-one: hsl(225, 12%, 93%);
	--ag-cvi-light-two: hsl(10, 14%, 91%);
	--ag-cvi-light-three: hsl(60, 4%, 60%);
}

:root {
	--ag-radius: 3px;
	--ag-font-family: "Poppins", var(--bs-body-font-family);
	--ag-icons: "Material Symbols Rounded", "bootstrap-icons", system-ui, -apple-system;
	--ag-font-feature: "kern" 1;
	--ag-lspacing-one: 0.36px;
	--ag-lspacing-two: 0.24px;
	--ag-code-size: 15px;
	--ag-code-font: "JetBrains Mono", var(--bs-font-monospace);
	--ag-code-padding: 1.5em 1.7em;
	--ag-code-block-padding: 1.4em 0;
}

html,
body {
	min-height: 100vh;
	margin: 0;
}

body {
	font-family: var(--ag-font-family) !important;
	-webkit-font-feature-settings: var(--ag-font-feature);
	-moz-font-feature-settings: var(--ag-font-feature);
	-ms-font-feature-settings: var(--ag-font-feature);
	font-feature-settings: var(--ag-font-feature);
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	font-optical-sizing: auto;
	/*---- bootstrap overwrites ----*/
	--bs-border-radius: var(--ag-radius);
	--bs-border-color: var(--ag-color-line);
	--bs-body-font-size: 16px;
	--bs-body-line-height: 26px;
	--bs-body-color: var(--ag-color-text);
	--bs-code-color: var(--ag-cvi-cta);
	--bs-body-bg: var(--ag-color-bg);
	--bs-heading-color: var(--ag-color-h);
}

button,
input {
	font-feature-settings: var(--ag-font-feature);
}

.clearfix {
	overflow: auto;
}

.clearfix::after {
	content: "";
	clear: both;
	display: block;
}

.top-wrap {
	background-color: var(--ag-cvi-one);
	-webkit-box-shadow: var(--ag-shadow);
	-moz-box-shadow: var(--ag-shadow);
	box-shadow: var(--ag-shadow);
}

.top,
.main {
	--bs-columns: 20;
	--bs-gap: 0;
	margin: auto;
	display: block;
	z-index: -1 !important;
}

nav.navbar {
	padding: 0;
	margin: 0 auto;
}

a#agillic {
	display: flex;
	grid-column: 2 / span 3;
	text-decoration: none;
}

a#agillic svg.logo,
a#agillic img.logo {
	width: 65px;
}

a#agillic span.title {
	font-family: var(--ag-code-font);
	font-size: 14px;
	text-transform: uppercase;
	color: var(--ag-color-logo);
	margin: auto auto auto 30px;
	letter-spacing: var(--ag-lspacing-one);
}

/* ----- Theme toggle ----- */

div#theme-toggle {
	grid-column: 19 / span 1;
	text-align: right;
	padding: 0;
	margin: 0;
}

div#theme-toggle::before {
	content: var(--ag-dark-mode);
	font-family: var(--ag-icons);
	font-size: 28px;
	color: var(--ag-dark-mode-toggle);
	position: relative;
	font-variation-settings: 'GRAD' -50, 'FILL' 1;
}

div#theme-toggle:hover::before {
	cursor: pointer;
}

.bread {
	grid-column: span 20;
}

div.content {
	padding-bottom: 50px;
	margin: 0 auto;
}

/* ----- Sidebar ----- */

div.sidebar-wrap {
	grid-column-start: 17;
	grid-column-end: 20;
}

.sidebar p,
.sidebar ul {
	font-size: 15px;
}

.scrollspy {
	position: sticky;
	top: 120px;
	margin-bottom: 30px;
	z-index: 1 !important;
}

/* ---- Footer ---- */

footer {
	--bs-columns: 20;
	--bs-gap: 0;
	background-color: var(--ag-cvi-one);
}

footer div.logo img {
	width: 128px;
	margin-bottom: 20px;
}

footer div.logo p {
	font-size: 12px;
	letter-spacing: var(--ag-lspacing-one);
	color: var(--ag-cvi-light-one);
	line-height: 20px;
	display: block;
	max-width: 460px;
}

footer ul.footer_links {
	padding: 0;
	list-style-type: none;
	line-height: 24px;
}

footer ul.footer_links li::before {
	content: "\e5c8";
	font-family: var(--ag-icons);
	font-size: 14px;
	color: var(--ag-cvi-light-one);
	position: relative;
	top: 2px;
	margin-right: 15px;
}

footer ul.footer_links li a,
footer ul.footer_links li a:visited,
footer ul.footer_links li a:active {
	color: var(--ag-cvi-light-one);
	font-size: 16px;
	text-decoration: none;
}

footer ul.footer_links li:hover::before {
	color: var(--ag-color-hover);
}

div.footernavs {
	--bs-columns: 5;
}

div.footernavs h4 {
	text-transform: uppercase;
	font-size: 16px;
	color: var(--ag-cvi-light-one);
	font-weight: 700;
	margin-bottom: 20px;
	letter-spacing: var(--ag-lspacing-one);
}

div.footernavs div.quicklinks {
	grid-column: span 2;
}

div.footernavs div.contactinfo ul {
	list-style-type: none;
	color: var(--ag-cvi-light-one);
	padding: 0;
}

div.footernavs div.contactinfo ul li:last-child {
	margin-top: 15px;
}

div.bottom {
	--bs-columns: 20;
	--bs-gap: 0;
	background-color: var(--ag-color-bottom);
	height: 52px;
}

div#copyright {
	/* grid-column: 5 / span 12; */
	font-size: 12px;
	letter-spacing: var(--ag-lspacing-one);
	color: var(--ag-cvi-light-one);
	padding-top: 13px;
	margin: 0;
}

.hide {
	display: none !important;
}