/* Material for MkDocs with the edreate brand: Poppins and Fira Code, primary
   purple, teal and cream. Screenshots keep treehawk's own colours. */

@import url("https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500&family=Otomanopee+One&family=Poppins:wght@400;500;600;700&display=swap");

:root {
  --brand-primary: #4531cc;
  --brand-primary-soft: #7f6df9;
  --brand-green: #448882;
  --brand-cream: #fcf3d1;
  --brand-ink: #0c0c0c;
  --md-text-font: "Poppins";
  --md-code-font: "Fira Code";
}

[data-md-color-scheme="treehawk-light"] {
  --md-primary-fg-color: #ffffff;
  --md-primary-bg-color: var(--brand-ink);
  --md-default-fg-color: var(--brand-ink);
  --md-typeset-a-color: var(--brand-primary);
  --md-accent-fg-color: var(--brand-green);
  --md-code-bg-color: #f5f5f5;
}

[data-md-color-scheme="treehawk-dark"] {
  color-scheme: dark;
  --md-primary-fg-color: #121016;
  --md-primary-bg-color: #ffffff;
  --md-default-bg-color: var(--brand-ink);
  --md-default-fg-color: #ffffff;
  --md-default-fg-color--light: rgba(255, 255, 255, 0.75);
  --md-default-fg-color--lighter: rgba(255, 255, 255, 0.45);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.12);
  --md-typeset-color: rgba(255, 255, 255, 0.9);
  --md-typeset-a-color: var(--brand-primary-soft);
  --md-accent-fg-color: #6fc2ba;
  --md-code-bg-color: #1a1820;
  --md-code-fg-color: #d4d4d4;
  --md-footer-bg-color: #121016;
}

.md-header {
  box-shadow: none;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  font-weight: 700;
  color: var(--brand-primary);
}
[data-md-color-scheme="treehawk-dark"] .md-typeset h1,
[data-md-color-scheme="treehawk-dark"] .md-typeset h2,
[data-md-color-scheme="treehawk-dark"] .md-typeset h3 {
  color: var(--brand-primary-soft);
}

/* Code blocks in One Dark, as on the brand site. */
.md-typeset pre > code {
  --md-code-fg-color: #d4d4d4;
  --md-code-hl-comment-color: #5c6370;
  --md-code-hl-keyword-color: #c678dd;
  --md-code-hl-string-color: #98c379;
  --md-code-hl-function-color: #61afef;
  --md-code-hl-number-color: #d19a66;
  --md-code-hl-constant-color: #d19a66;
  --md-code-hl-operator-color: #56b6c2;
  --md-code-hl-punctuation-color: #56b6c2;
  --md-code-hl-variable-color: #e06c75;
  --md-code-hl-name-color: #d4d4d4;
  background-color: #282c34;
  border-radius: 0.5rem;
  /* Keep the last characters of a line clear of the copy button. */
  padding-right: 2.8rem;
}

/* The copy button sits on the dark block in both schemes, so its colours are
   set here rather than derived from the scheme's (light) code background. */
.md-typeset pre {
  --md-code-bg-color: #282c34;
  --md-code-bg-color--light: #282c34;
  --md-code-bg-color--lighter: #282c34;
  /* Clips the copy button's fade to the block; the code still scrolls. */
  overflow: hidden;
  border-radius: 0.5rem;
}
.md-typeset .md-code__nav {
  top: 0;
  right: 0;
  padding: 0.45em;
  border-radius: 0 0.5rem 0 0.4rem;
  background-color: #282c34;
  box-shadow: -0.6rem 0 0.6rem #282c34;
}
.md-typeset :hover > .md-code__nav {
  background-color: #333842;
}
.md-typeset .md-code__button {
  color: rgba(255, 255, 255, 0.45);
}
.md-typeset :hover > * > .md-code__button {
  color: rgba(255, 255, 255, 0.75);
}
.md-typeset .md-code__button.focus-visible,
.md-typeset .md-code__button:hover {
  color: #6fc2ba;
}

/* Phones: Material runs code blocks edge to edge, so drop the corners and
   keep the copy button visible without hover. */
@media screen and (max-width: 44.984375em) {
  .md-typeset pre,
  .md-typeset pre > code,
  .md-typeset .md-code__nav {
    border-radius: 0;
  }
  .md-typeset .md-code__button {
    color: rgba(255, 255, 255, 0.7);
  }
}

/* Pill buttons. */
.md-typeset .md-button {
  border: 2px solid var(--brand-primary);
  border-radius: 40px;
  color: var(--brand-primary);
  font-weight: 600;
}
.md-typeset .md-button--primary,
.md-typeset .md-button:hover {
  background-color: var(--brand-primary);
  border-color: var(--brand-primary);
  color: #ffffff;
}

/* Each diagram ships a light and a dark export. */
[data-md-color-scheme="treehawk-light"] img[src$="#only-dark"],
[data-md-color-scheme="treehawk-dark"] img[src$="#only-light"] {
  display: none;
}

.md-typeset figure img {
  border-radius: 0.5rem;
}

/* Home page hero, after the brand's page hero. */
.hero {
  padding: 1.5rem 1.8rem;
  margin-bottom: 1.5rem;
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 20%, rgba(69, 49, 204, 0.09), transparent 42%),
    radial-gradient(circle at 85% 35%, rgba(68, 136, 130, 0.11), transparent 40%),
    var(--brand-cream);
  color: var(--brand-ink);
}
.md-typeset .hero h1 {
  margin: 0.3rem 0;
  font-family: "Otomanopee One", sans-serif;
  font-weight: 400;
  color: var(--brand-ink);
}
.md-typeset .hero h1 span {
  color: var(--brand-primary);
}
.hero img {
  width: 3rem;
}
.md-typeset .hero .md-button {
  margin: 0.5rem 0.4rem 0 0;
}
[data-md-color-scheme="treehawk-dark"] .hero {
  background:
    radial-gradient(circle at 10% 20%, rgba(127, 109, 249, 0.22), transparent 45%),
    radial-gradient(circle at 85% 35%, rgba(111, 194, 186, 0.16), transparent 42%),
    #17151d;
  color: #ffffff;
  border: 1px solid var(--md-default-fg-color--lightest);
}
[data-md-color-scheme="treehawk-dark"] .md-typeset .hero h1 {
  color: #ffffff;
}
[data-md-color-scheme="treehawk-dark"] .md-typeset .hero h1 span,
[data-md-color-scheme="treehawk-dark"] .md-typeset .hero .md-button {
  color: var(--brand-primary-soft);
  border-color: var(--brand-primary-soft);
}
[data-md-color-scheme="treehawk-dark"] .md-typeset .hero .md-button--primary,
[data-md-color-scheme="treehawk-dark"] .md-typeset .hero .md-button:hover {
  color: #ffffff;
  border-color: var(--brand-primary);
}

/* Phones: a tighter hero with full-width, stacked buttons. */
@media screen and (max-width: 44.984375em) {
  .hero {
    padding: 1.2rem 1rem;
    border-radius: 14px;
  }
  .md-typeset .hero .md-button {
    display: block;
    margin: 0.6rem 0 0;
    text-align: center;
  }
}