custom.css

/**
 * Any CSS included here will be global. The classic template
 * bundles Infima by default. Infima is a CSS framework designed to
 * work well for content-centric websites.
 */

/* Load fonts from Bunny Fonts */
@import url(https://fonts.bunny.net/css?family=inter:100,200,300,400,500,600,700,800,900|jetbrains-mono:100,200,300,400,500,600,700,800);

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono&family=IBM+Plex+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

/* Font families matching our design system */
:root {
  --ifm-font-family-base: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --ifm-font-family-monospace: "IBM Plex Mono", SFMono-Regular, Menlo, Monaco,
    Consolas, "Liberation Mono", "Courier New", monospace;
  --ifm-color-primary: #3940e3;
  --ifm-color-primary-dark: #2028df;
  --ifm-color-primary-darker: #1e25d3;
  --ifm-color-primary-darkest: #191fae;
  --ifm-color-primary-light: #5258e7;
  --ifm-color-primary-lighter: #595fe8;
  --ifm-color-primary-lightest: #6166e9;

  --ifm-h1-font-size: 2rem;
  --ifm-h2-font-size: 1.5rem;
  --ifm-h3-font-size: 1.25rem;
  --ifm-h4-font-size: 1rem;
  --ifm-h5-font-size: 0.875rem;
  --ifm-h6-font-size: 0.85rem;
  --ifm-font-weight-semibold: 600;
  --ifm-navbar-search-input-icon: url("/static/img/search.svg");
  --ifm-navbar-background-color: #181B63;
  --ifm-footer-background-color: #f1f2f2;
  --ifm-color-carousel-bg: #f2f2f2;
  --ifm-menu-color: #000000;

  /* Custom Font Size */
  font-size: 15px;

  /* Top Navbar */
  --ifm-navbar-item-padding-horizontal: 1rem;

  /* Algolia DocSearch */
  --docsearch-searchbox-background: transparent !important;
  --docsearch-searchbox-focus-background: var(--ifm-color-white);
  --docsearch-searchbox-shadow: transparent !important;
}

[data-theme="dark"] {
  --ifm-color-primary: #7281f3;
  --ifm-color-primary-dark: #6b7bf2;
  --ifm-color-primary-darker: #6878f2;
  --ifm-color-primary-darkest: #5b6cf1;
  --ifm-color-primary-light: #939ef6;
  --ifm-color-primary-lighter: #a3adf7;
  --ifm-color-primary-lightest: #d5d9fb;
  --ifm-footer-background-color: var(--ifm-color-gray-900);
  --ifm-color-carousel-bg: #2c2c2c;
  --ifm-navbar-background-color: #181B63;
}

.navbar__logo img {
  margin-top: 0px;
}

strong {
  font-weight: var(--ifm-font-weight-semibold);
}

.menu__link {
  font-size: 15px;
  font-weight: 500;
}

.menu__link--active {
  font-size: 15px;
  font-weight: 500;
}

.menu__link:hover {
  font-size: 15px;
  font-weight: 500;
}

.navbar__items > .navbar__item {
  margin-left: auto;
}

.navbar__items > .navbar__item ~ .navbar__item {
  margin-left: unset;
}

.navbar__items > .navbar__item:last-of-type {
  margin-right: auto;
}

.navbar__link:hover {
  color: #ffffff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

.navbar__link--active {
  color: #ffffff;
  font-size: 16px;
}

.navbar__link {
  color: #ffffff;
  font-size: 16px;
}

.navbar__inner {
  color: #ffffff;
}

.navbar-sidebar__item {
  background-color: #ffffff;
}

.navbar-sidebar__brand {
  color: #ffffff;
}

.navbar-sidebar__brand:hover {
  color: #ffffff;
}

.navbar__search-input {
  background-color: #ffffff;
}

.docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.1);
  display: block;
  margin: 0 calc(-1 * var(--ifm-pre-padding));
  padding: 0 var(--ifm-pre-padding);
}

[data-theme="dark"] .docusaurus-highlight-code-line {
  background-color: rgba(0, 0, 0, 0.3);
}

[data-theme="light"] img[src$="#gh-dark-mode-only"],
[data-theme="dark"] img[src$="#gh-light-mode-only"] {
  display: none;
}

img[alt$="#width300"] {
  max-width: 300px;
  display: block;
}

img[alt$="#width400"] {
  max-width: 400px;
  display: block;
}

img[alt$="#width500"] {
  max-width: 500px;
  display: block;
}

img[alt$="#width600"] {
  max-width: 600px;
  display: block;
}

[data-theme="dark"] .markdown-inline-svg {
  filter: invert(100%) hue-rotate(180deg);
}

.svglite g path {
  fill: none;
}

.header-github-link {
  padding: 5px;
  margin-left: 5px;
  margin-right: 5px;
  border: 0px solid transparent;
  border-radius: 50%;
  transition: 0.2s;
}

.header-github-link::before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

[data-theme="dark"] .header-github-link::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
    no-repeat;
}

.header-github-link:hover {
  background-color: rgb(235, 237, 240);
}

[data-theme="dark"] .header-github-link:hover {
  background-color: rgb(68, 73, 80);
}

.header-discord-link {
  padding: 5px;
  margin-left: 5px;
  margin-right: 5px;
  border: 0px solid transparent;
  border-radius: 50%;
  transition: 0.2s;
}

.header-discord-link::before {
  content: "";
  width: 24px;
  height: 24px;
  display: flex;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.345,6.236c-0.218-0.606-0.438-1.217-0.442-1.225c-0.105-0.235-0.348-0.383-0.604-0.357	c-0.162,0.013-3.995,0.343-6.451,2.318C3.564,8.158,1,15.092,1,21.087c0,0.106,0.027,0.209,0.08,0.301	c1.771,3.11,6.599,3.924,7.699,3.959c0.007,0.001,0.013,0.001,0.019,0.001c0.194,0,0.376-0.093,0.492-0.25l1.19-1.612	c-1.966-0.299-2.321-0.689-2.404-0.75c-0.444-0.327-0.772-0.785-0.374-1.363c0.306-0.449,0.948-0.597,1.44-0.344	C9.646,21.264,10.995,22.02,15,22c3.977-0.012,5.723-0.845,5.748-0.863c0.668-0.301,1.189-0.177,1.514,0.269	c0.387,0.607,0.111,1.018-0.331,1.344c-0.083,0.061-0.284,0.232-2.396,0.732l1.175,1.615c0.115,0.158,0.298,0.25,0.492,0.25	c0.007,0,0.013,0,0.019-0.001c1.101-0.035,5.929-0.849,7.699-3.959c0.053-0.092,0.08-0.195,0.08-0.301	c0-5.994-2.564-12.928-3.88-14.14c-2.424-1.948-6.257-2.278-6.419-2.292c-0.256-0.022-0.499,0.123-0.604,0.357	c-0.004,0.008-0.218,0.629-0.425,1.228C17.672,6.239,16.041,6,15,6S12.345,6.236,12.345,6.236z M11,19c-1.105,0-2-1.333-2-2.979	s0.895-2.979,2-2.979c1.109-0.165,1.976,1.333,2,2.979C13,17.667,12.105,19,11,19z M19,19c-1.105,0-2-1.342-2-2.997	s0.895-2.997,2-2.997s2,1.342,2,2.997S20.105,19,19,19z'/%3E%3C/svg%3E%0A")
    no-repeat;
}

[data-theme="dark"] .header-discord-link::before {
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 30 30' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.345,6.236c-0.218-0.606-0.438-1.217-0.442-1.225c-0.105-0.235-0.348-0.383-0.604-0.357	c-0.162,0.013-3.995,0.343-6.451,2.318C3.564,8.158,1,15.092,1,21.087c0,0.106,0.027,0.209,0.08,0.301	c1.771,3.11,6.599,3.924,7.699,3.959c0.007,0.001,0.013,0.001,0.019,0.001c0.194,0,0.376-0.093,0.492-0.25l1.19-1.612	c-1.966-0.299-2.321-0.689-2.404-0.75c-0.444-0.327-0.772-0.785-0.374-1.363c0.306-0.449,0.948-0.597,1.44-0.344	C9.646,21.264,10.995,22.02,15,22c3.977-0.012,5.723-0.845,5.748-0.863c0.668-0.301,1.189-0.177,1.514,0.269	c0.387,0.607,0.111,1.018-0.331,1.344c-0.083,0.061-0.284,0.232-2.396,0.732l1.175,1.615c0.115,0.158,0.298,0.25,0.492,0.25	c0.007,0,0.013,0,0.019-0.001c1.101-0.035,5.929-0.849,7.699-3.959c0.053-0.092,0.08-0.195,0.08-0.301	c0-5.994-2.564-12.928-3.88-14.14c-2.424-1.948-6.257-2.278-6.419-2.292c-0.256-0.022-0.499,0.123-0.604,0.357	c-0.004,0.008-0.218,0.629-0.425,1.228C17.672,6.239,16.041,6,15,6S12.345,6.236,12.345,6.236z M11,19c-1.105,0-2-1.333-2-2.979	s0.895-2.979,2-2.979c1.109-0.165,1.976,1.333,2,2.979C13,17.667,12.105,19,11,19z M19,19c-1.105,0-2-1.342-2-2.997	s0.895-2.997,2-2.997s2,1.342,2,2.997S20.105,19,19,19z'/%3E%3C/svg%3E%0A")
    no-repeat;
}

.header-discord-link:hover {
  background-color: rgb(235, 237, 240);
}

[data-theme="dark"] .header-discord-link:hover {
  background-color: rgb(68, 73, 80);
}

/* === Typography & Readability Experiments === */

/* Normalize list markers: avoid unnecessary variation across nesting levels */
article ul { list-style-type: disc; }
article ol { list-style-type: decimal; }


/* Section spacing: consistent vertical rhythm */
article .markdown > h2 { margin-top: 2rem; }
article .markdown > h3 { margin-top: 1.5rem; }
article .markdown > p  { margin-bottom: 1rem; }

/* Heading hierarchy: stronger H2/H3 differentiation */
article .markdown > h2 { font-weight: 700; }
article .markdown > h3 { font-weight: 500; }

/* Code block visual distinction: subtle background + left border accent */
article pre {
  background-color: #f6f8fa;
  border-left: 3px solid var(--ifm-color-primary);
}

figure[data-rehype-pretty-code-figure] {
  margin: 0;
}

figure[data-rehype-pretty-code-figure]:has(figcaption) pre {
  border-top-left-radius: 0px !important;
  border-top-right-radius: 0px !important;
}

figure[data-rehype-pretty-code-figure]
  figcaption[data-rehype-pretty-code-title] {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  background-color: hsl(229, 20%, 30%);
  padding: 0.5rem 1rem;
  color: #99FFFF;
  border-radius: 0.5rem 0.5rem 0 0;
  font-family: var(--ifm-font-family-monospace);
  font-size: 1rem !important;
  font-weight: normal;
  line-height: 1.5;
}

.menu div:has(a[href$="tql2/operators"]) + ul,
.menu div:has(a[href$="tql2/functions"]) + ul {
  display: none !important;
}

.menu a[href$="tql2/operators"] + button,
.menu a[href$="tql2/functions"] + button {
  display: none;
}

figure[data-rehype-pretty-code-figure]:has(
    + figure[data-rehype-pretty-code-figure]
  ):not(:has(+ figure[data-rehype-pretty-code-figure] > figcaption))
  > pre {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 2px solid #6a7195;
}

figure[data-rehype-pretty-code-figure]
  + figure[data-rehype-pretty-code-figure]:not(:has(> figcaption))
  > pre {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

figure[data-rehype-pretty-code-figure] > pre > code {
  margin: 0 !important;
  padding: 0 !important;
}

figure[data-rehype-pretty-code-figure] > pre > code > code {
  margin: 0 4px !important;
  padding: 8px !important;
  min-height: 48px;
  align-items: center;
}

figure[data-rehype-pretty-code-figure] > pre > code > pre {
  margin: 0 !important;
  padding: 0 !important;
}

figure[data-rehype-pretty-code-figure] code {
  font-size: 1rem;
}

pre button.rehype-pretty-copy {
  width: 32px !important;
  height: 32px !important;
  display: flex !important;
  position: absolute;
  border-radius: 0px;
  border: 1px solid #bfc7d5;
  outline: inherit;
  justify-content: center !important;
  align-items: center !important;
  background-color: transparent;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

pre button.rehype-pretty-copy .ready {
  padding-left: 8px !important;
  background-position: center;
}

pre button.rehype-pretty-copy .success {
  padding-left: 8px !important;
  background-position: center;
}

.video-responsive {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.video-responsive video {
  width: 100%;
  height: auto;
  display: block;
}

@media screen and (min-width: 768px) {
  .video-responsive {
    width: 75%;
  }
}

* {
  scroll-behavior: smooth;
}

code, pre {
  font-variant-ligatures: none;
  max-width: 100%;
  overflow-x: auto;
  tab-size: 4;
}

kb-short {
  color: var(--ifm-color-primary-darkest);
  font-size: 14pt;
  font-variant-caps: small-caps;
}

/* Menu item styling for UI elements */
gui {
  display: inline;
  font-family: "Segoe UI", sans-serif;
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: 0.03em;
  background-color: #f0f0f5;
  padding: 0.1em 0.4em;
  border-radius: 3px;
  border: 1px solid #d0d0d8;
}

[data-theme="dark"] gui {
  background-color: #2a2a3a;
  border-color: #4a4a5a;
}

.theme-code-block-title {
  font-size: 12pt;
  font-weight: normal;
}

/* For the Details tag */
[data-theme="dark"] {
  --vm-color-details-border: #6166e9;
  --vm-color-details-background: #191d36;
}

/* For the Details tag */
[data-theme="light"] {
  --vm-color-details-border: #19193e;
  --vm-color-details-background: #cbe8ed;
}

/* For the DANGER admonition */
.alert--danger {
  background-color: #FFF7EF;
}

/* For the WARNING/CAUTION admonitions */
.alert--warning {
  background-color: #FFF7EF;
}

/* For the INFO admonition */
.alert--info {
  background-color: #DDEEEE;
}

/* For the NOTE admonition */
.alert--secondary {
  background-color: #F5F5F5;
}

/* For the TIP admonition */
.alert--success {
  background-color: #E6F6E6;
}

/* For code block titles */
.theme-code-block > div[class^="codeBlockTitle_"] {
  color: #47d9d9;
  font-family: var(--ifm-font-family-monospace);
  /* font-size: 1rem !important; */
  font-weight: normal;
  line-height: 1.5;
}