/* headgate's colors, taken from the logo: deep navy, a working blue and a bright cyan. */
:root {
  --hg-navy: #011740;
  --hg-blue: #0a82e0;
  --hg-cyan: #1fd6f5;
}

[data-md-color-scheme="default"] {
  --md-primary-fg-color: var(--hg-navy);
  --md-primary-fg-color--light: #0b2a63;
  --md-primary-fg-color--dark: #000d26;
  --md-accent-fg-color: var(--hg-blue);
  --md-typeset-a-color: var(--hg-blue);
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color: var(--hg-cyan);
  --md-primary-fg-color--light: #6ae4fa;
  --md-primary-fg-color--dark: #0fb3cf;
  /* Text on the cyan: navy, since white on a light cyan is hard to read. */
  --md-primary-bg-color: var(--hg-navy);
  --md-primary-bg-color--light: rgba(1, 23, 64, 0.7);
  --md-accent-fg-color: var(--hg-cyan);
  --md-typeset-a-color: var(--hg-cyan);
}

/* The landing page's hero: the logo, the name, one sentence and the ways in. */
.hg-hero {
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: 1.5rem 2rem;
  align-items: center;
  margin: 1rem 0 2.5rem;
}

.hg-hero img {
  width: 9rem;
  height: 9rem;
  border-radius: 1.6rem;
  box-shadow: 0 0.6rem 2rem rgba(10, 130, 224, 0.35);
}

.md-typeset .hg-hero h1 {
  margin: 0 0 0.4rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.hg-hero p {
  margin: 0 0 1rem;
  font-size: 1.05rem;
}

.md-typeset .hg-hero .md-button {
  margin: 0.2rem 0.4rem 0.2rem 0;
}

/* On a phone the hero stacks and reads left to right: a smaller logo, then the text, then buttons that share rows. */
@media screen and (max-width: 44.9375em) {
  .hg-hero {
    grid-template-columns: 1fr;
    gap: 1rem;
    margin: 0 0 1.5rem;
  }

  .hg-hero img {
    width: 4rem;
    height: 4rem;
    border-radius: 0.9rem;
    box-shadow: 0 0.3rem 1rem rgba(10, 130, 224, 0.35);
  }

  .hg-hero p {
    font-size: 0.85rem;
  }

  .md-typeset .hg-hero p:has(> .md-button) {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .md-typeset .hg-hero .md-button {
    flex: 1 1 0;
    margin: 0;
    padding-inline: 1em;
    text-align: center;
    white-space: nowrap;
  }

  .md-typeset .hg-hero .md-button--primary {
    flex-basis: 100%;
  }
}

/* Feature cards: a colored icon above each title. */
.md-typeset .grid.cards .hg-icon {
  color: var(--md-accent-fg-color);
}

/* Wide tables read better a little smaller, with each row named in bold. */
.md-typeset table:not([class]) {
  font-size: 0.7rem;
}

.md-typeset table:not([class]) td:first-child {
  min-width: 8rem;
  font-weight: 600;
}

/* The comparison's last column is headgate's: tinted, so it reads as the answer. */
.hg-compare table td:last-child,
.hg-compare table th:last-child {
  background-color: color-mix(in srgb, var(--md-accent-fg-color) 9%, transparent);
}

/* Comparison matrices: one icon per cell, colored by what it means. */
.md-typeset .hg-yes {
  color: #16a34a;
}

.md-typeset .hg-addon {
  color: #d97706;
}

.md-typeset .hg-no {
  color: var(--md-default-fg-color--lighter);
}

.hg-matrix table th:not(:first-child),
.hg-matrix table td:not(:first-child) {
  text-align: center;
}

.hg-matrix table td:first-child {
  min-width: 12rem;
}

/* On a phone a matrix fits the screen, headgate's column included: the library names turn on their side, so each
   icon column needs only a line's width and the row names keep the rest. */
@media screen and (max-width: 44.9375em) {
  .md-typeset .hg-matrix table:not([class]) {
    display: table;
    width: 100%;
  }

  .md-typeset .hg-matrix table:not([class]) th,
  .md-typeset .hg-matrix table:not([class]) td {
    min-width: 0;
    padding: 0.55em 0.35em;
  }

  .md-typeset .hg-matrix table:not([class]) th:first-child,
  .md-typeset .hg-matrix table:not([class]) td:first-child {
    min-width: 0;
    padding-left: 0.6em;
  }

  .md-typeset .hg-matrix table:not([class]) th:not(:first-child) {
    padding: 0.6em 0.35em;
    white-space: nowrap;
    vertical-align: bottom;
    text-align: left;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
  }
}

/* A wide table still scrolls on a phone; its first column stays put, so each row keeps its name. The wrapper is what
   scrolls, so the table itself must not clip, or the column would stick to a box that never moves. */
@media screen and (max-width: 44.9375em) {
  .md-typeset .md-typeset__scrollwrap table:not([class]) {
    overflow: visible;
  }

  .md-typeset table:not([class]) td:first-child {
    min-width: 6rem;
  }

  .md-typeset table:not([class]) th:first-child,
  .md-typeset table:not([class]) td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--md-default-bg-color);
    box-shadow: inset -1px 0 0 var(--md-typeset-table-color);
  }

  /* A linked API name broken mid-word (``BreakerPolic`` / ``y``) is harder to read than a table that scrolls a little.
     Prose code in a description may still wrap, or one long dotted name would widen the whole table. */
  .md-typeset table:not([class]) td a > code {
    white-space: nowrap;
    word-break: normal;
  }
}

/* The legend above a matrix: icons and their meanings on one line. */
.hg-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.4rem;
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

/* The home page's "one base class instead of a stack": many chips on the left, one headgate on the right. */
.hg-stack {
  display: grid;
  grid-template-columns: 1fr auto 14rem;
  gap: 1rem;
  align-items: center;
  margin: 1.5rem 0;
}

.hg-stack-before {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem;
  border: 1px dashed var(--md-default-fg-color--lighter);
  border-radius: 0.8rem;
}

.hg-stack-label {
  width: 100%;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

.hg-chip {
  padding: 0.25rem 0.7rem;
  border-radius: 1rem;
  font-size: 0.75rem;
  background-color: var(--md-code-bg-color);
}

.hg-chip-glue {
  font-style: italic;
  color: var(--md-default-fg-color--light);
}

.hg-stack-arrow {
  font-size: 2rem;
  color: var(--md-accent-fg-color);
}

.hg-stack-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 1.2rem 1rem;
  text-align: center;
  border-radius: 0.8rem;
  background-color: color-mix(in srgb, var(--md-accent-fg-color) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--md-accent-fg-color) 40%, transparent);
}

.hg-stack-after img {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.8rem;
}

.hg-stack-after strong {
  font-size: 1.1rem;
}

.hg-stack-after span {
  font-size: 0.75rem;
  color: var(--md-default-fg-color--light);
}

@media screen and (max-width: 44.9375em) {
  .hg-stack {
    grid-template-columns: 1fr;
  }

  .hg-stack-arrow {
    justify-self: center;
    transform: rotate(90deg);
  }
}

/* The home page's call pipeline: numbered steps that wrap, each with a one-line job. */
.md-typeset ol.hg-pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: 0.6rem;
  margin: 1.2rem 0;
  padding: 0;
  list-style: none;
  counter-reset: hg-step;
}

.md-typeset ol.hg-pipeline li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin: 0;
  padding: 0.7rem 0.8rem;
  border-radius: 0.6rem;
  border-top: 3px solid var(--md-accent-fg-color);
  background-color: var(--md-code-bg-color);
  counter-increment: hg-step;
}

.md-typeset ol.hg-pipeline li::before {
  content: counter(hg-step);
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--md-accent-fg-color);
}

.md-typeset ol.hg-pipeline li span {
  font-size: 0.7rem;
  line-height: 1.4;
  color: var(--md-default-fg-color--light);
}

/* On a phone the pipeline takes two steps a row rather than one, so the whole call fits on a screen or two. */
@media screen and (max-width: 44.9375em) {
  .md-typeset ol.hg-pipeline {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
  }

  .md-typeset ol.hg-pipeline li {
    padding: 0.55rem 0.65rem;
  }
}