/* mintbot brand palette — derived from the logo gradient
   (#27f0a8 highlight → #17dc94 primary → #0db478 mid → #04734f deep).
   Overrides Material's `primary: teal` defaults so links, header,
   selected nav and active toc match the logo. */

:root,
[data-md-color-scheme="default"] {
  --md-primary-fg-color:           #0db478;
  --md-primary-fg-color--light:    #17dc94;
  --md-primary-fg-color--dark:     #04734f;
  --md-accent-fg-color:            #17dc94;
  --md-accent-fg-color--transparent: rgba(23, 220, 148, 0.12);
  --md-typeset-a-color:            #0db478;
}

[data-md-color-scheme="slate"] {
  --md-primary-fg-color:           #0db478;
  --md-primary-fg-color--light:    #27f0a8;
  --md-primary-fg-color--dark:     #04734f;
  --md-accent-fg-color:            #27f0a8;
  --md-accent-fg-color--transparent: rgba(39, 240, 168, 0.14);
  --md-typeset-a-color:            #27f0a8;
}

/* Header gets a richer gradient instead of a flat fill — picks up the
   same mint→deep tones the logo uses. */
.md-header,
.md-tabs {
  background: linear-gradient(135deg, #04734f 0%, #0db478 55%, #17dc94 100%);
}
[data-md-color-scheme="slate"] .md-header,
[data-md-color-scheme="slate"] .md-tabs {
  background: linear-gradient(135deg, #023b29 0%, #04734f 55%, #0db478 100%);
}

/* Hero banner on the landing page. The wide SVG already includes the
   wordmark and tagline, so we let it span the content column and hide
   the H1 visually (kept for a11y / SEO). */
.mintbot-hero {
  margin: 0 0 1.5rem;
  padding: 1.5rem 0 0.5rem;
}
.mintbot-hero img {
  display: block;
  width: 100%;
  max-width: 432px;
  height: auto;
  margin: 0 auto;
}
.mintbot-hero + h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Theme-aware header logo. The override partial renders both files;
   we show whichever matches the active scheme.
   - light scheme: darker logo (logo-icon-light.svg) reads on bright mint header
   - dark scheme: brighter logo (logo-icon-dark.svg) pops on slate header
   `!important` is required because Material's own
   `.md-header__button.md-logo img { display: block }` rule has higher
   specificity than a single class selector and would otherwise show both. */
.mintbot-logo { display: none !important; }
[data-md-color-scheme="default"] .mintbot-logo--light { display: inline-block !important; }
[data-md-color-scheme="slate"]   .mintbot-logo--dark  { display: inline-block !important; }

/* Search input shouldn't fight the mint header */
.md-search__input {
  background-color: rgba(255, 255, 255, 0.16);
}
.md-search__input:hover,
[data-md-toggle="search"]:checked ~ .md-header .md-search__input {
  background-color: rgba(255, 255, 255, 0.24);
}

/* Walkthrough screenshots (Getting started). Each lives in a <figure>
   so the caption reads as a caption, not body text. Rounded corners +
   a soft mint-tinted border + drop shadow lift the shot off the page
   and tie it to the brand without a heavy frame. Centered, and capped
   so a tall portrait shot (pricing card, Stripe form) doesn't tower
   over the column. */
.md-typeset figure.shot {
  margin: 1.4rem auto 1.6rem;
  text-align: center;
}
.md-typeset figure.shot img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
  border-radius: 12px;
  border: 1px solid rgba(13, 180, 120, 0.22);
  box-shadow: 0 14px 38px -16px rgba(0, 0, 0, 0.55),
              0 0 0 1px rgba(255, 255, 255, 0.02);
}
[data-md-color-scheme="slate"] .md-typeset figure.shot img {
  border-color: rgba(39, 240, 168, 0.20);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.7);
}
.md-typeset figure.shot figcaption {
  margin-top: 0.7rem;
  font-size: 0.82rem;
  color: var(--md-default-fg-color--light);
  font-style: normal;
}

/* Numbered step heading badge — a small mint chip in front of each
   "## N. …" step so the walkthrough scans as a sequence. */
.md-typeset .step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.6em;
  height: 1.6em;
  margin-right: 0.5rem;
  padding: 0 0.4em;
  border-radius: 999px;
  background: var(--md-primary-fg-color);
  color: #fff;
  font-size: 0.78em;
  font-weight: 700;
  vertical-align: 0.12em;
}