@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');

/* Global font override */
:root {
  --md-text-font: "Ubuntu", sans-serif;
  --md-code-font: "Ubuntu Mono", monospace;
}

/* === LIGHT THEME === */
[data-md-color-scheme="default"] {
  --brand-heading-color: #20BDFF;
  --brand-link-color: #20BDFF;
  --brand-code-color: #20BDFF;
  --brand-bg-color: #E6F7FF;
  --brand-nav-bg: #ffffff;
  --brand-header-bg: #0f111a;
  --brand-footer-bg: #11131d;

  --brand-codeblock-bg: #f4faff;
  --brand-codeblock-text: #1a1a1a;
  --brand-codeblock-border: #d0d7de;
}

/* === DARK THEME === */
[data-md-color-scheme="slate"] {
  --brand-heading-color: #20BDFF;
  --brand-link-color: #20BDFF;
  --brand-code-color: #9BF9CF;
  --brand-bg-color: #002B36;
  --brand-nav-bg: #0f111a;
  --brand-header-bg: #0f111a;
  --brand-footer-bg: #11131d;

  --brand-codeblock-bg: #1e1e1e;
  --brand-codeblock-text: #eaeaea;
  --brand-codeblock-border: #2d2d2d;
}

/* === Typography === */
html,
body,
.md-typeset,
.md-nav,
.md-header,
.md-footer {
  font-family: "Ubuntu", sans-serif !important;
}

/* === Headings === */
[data-md-color-scheme="default"] .md-typeset h1,
[data-md-color-scheme="default"] .md-typeset h2,
[data-md-color-scheme="default"] .md-typeset h3,
[data-md-color-scheme="default"] .md-typeset h4,
[data-md-color-scheme="default"] .md-typeset h5,
[data-md-color-scheme="default"] .md-typeset h6,
[data-md-color-scheme="default"] .md-typeset a {
  color: var(--brand-heading-color) !important;
}

[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6,
[data-md-color-scheme="slate"] .md-typeset a {
  color: var(--brand-heading-color) !important;
}

/* === Sidebar Navigation Link Colors === */
[data-md-color-scheme="default"] .md-nav__link--active,
[data-md-color-scheme="default"] .md-nav__link:focus,
[data-md-color-scheme="default"] .md-nav__link:hover {
  color: var(--brand-link-color) !important;
}

[data-md-color-scheme="slate"] .md-nav__link--active,
[data-md-color-scheme="slate"] .md-nav__link:focus,
[data-md-color-scheme="slate"] .md-nav__link:hover {
  color: var(--brand-link-color) !important;
}

/* === Header/Footer background === */
[data-md-color-scheme="default"] .md-header,
[data-md-color-scheme="default"] .md-footer,
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-footer {
  background-color: var(--brand-header-bg) !important;
}

/* === Inline code === */
.md-typeset code {
  background-color: var(--brand-bg-color);
  color: var(--brand-code-color);
  border-radius: 4px;
  padding: 0.15em 0.3em;
  font-size: 85%;
  font-family: "Ubuntu Mono", monospace;
}

/* === Hyperlinks look like inline code === */
.md-typeset a {
  background-color: var(--brand-bg-color);
  color: var(--brand-code-color);
  padding: 0.15em 0.3em;
  border-radius: 4px;
  text-decoration: none;
}

.md-typeset a:hover {
  text-decoration: underline;
}

/* === Code blocks === */
.md-typeset pre > code {
  display: block;
  background-color: var(--brand-codeblock-bg);
  color: var(--brand-codeblock-text);
  border: 1px solid var(--brand-codeblock-border);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  font-size: 0.875em;
  line-height: 1.6;
  font-family: "Ubuntu Mono", monospace;
  overflow-x: auto;
  white-space: pre;
  position: relative;
}

/* === Code block copy button === */
.md-typeset pre {
  position: relative;
}

.md-typeset .md-clipboard {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  border: none;
  background: none;
  color: var(--brand-code-color);
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.2s ease-in-out;
  font-size: 1rem;
}

.md-typeset .md-clipboard:hover {
  opacity: 1;
}

/* Change icon size and color */
.md-clipboard svg {
  width: 0.8rem;
  height: 0.8rem;
  stroke: var(--brand-code-color);
}

/* Optional: animate feedback after copy */
.md-typeset .md-clipboard:focus {
  outline: none;
}

.md-nav__item {
  margin-left: 0rem;
  font-size: medium;
}

.md-nav__link {
  margin-left: 0rem;
  font-size: large;
}

.md-nav__list {
  margin-left: 0.25rem;
  margin-top: 0.15rem;
  margin-bottom: 0.15rem;
  font-size: large;
}
/* allow content width to grow without limiting it */
.md-grid {
    max-width: initial;
}