/* ============================================================
 * Sieve brand overrides for MkDocs Material.
 *
 * - Brand palette: deep navy (#262a35) + teal accent (#0D9488)
 * - Header uses the full lockup (icon + wordmark) via
 *   docs/overrides/partials/logo.html
 * - Code blocks and inline code render cleanly on both themes
 * - Page TOC is merged into the left navigation (toc.integrate)
 * ========================================================== */

/* ── Dark (default, matches brand background) ───────────────── */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: #262a35;
  --md-default-fg-color--light: #ABABBA;
  --md-default-fg-color: #DCDCE0;
  --md-default-fg-color--lightest: #7E7E90;
  --md-code-bg-color: #2e3240;
  --md-code-fg-color: #DCDCE0;
  --md-typeset-color: #DCDCE0;
  --md-typeset-a-color: #0D9488;
  --md-primary-fg-color: #1e2230;
  --md-primary-bg-color: #DCDCE0;
  --md-accent-fg-color: #0D9488;
  --md-footer-bg-color: #1e2230;
  --md-footer-fg-color: #ABABBA;
}

/* ── Light ──────────────────────────────────────────────────── */
/*
 * Previously the light scheme inherited the dark code colours,
 * which rendered commands as teal on a dark slab — unreadable.
 * Use a very light slab with dark foreground so inline commands
 * like `sieve benchmark` read cleanly against white page content.
 */
[data-md-color-scheme="default"] {
  --md-primary-fg-color: #262a35;       /* header bar remains dark navy */
  --md-primary-bg-color: #ffffff;
  --md-accent-fg-color: #0D9488;
  --md-typeset-a-color: #0D9488;
  --md-default-fg-color: #1f2937;
  --md-default-fg-color--light: #4b5563;
  --md-default-fg-color--lightest: #9ca3af;
  --md-code-bg-color: #f1f3f5;          /* pale grey slab */
  --md-code-fg-color: #1f2937;          /* near-black text */
}

/* ── Header ─────────────────────────────────────────────────── */
.md-header {
  background-color: var(--md-primary-fg-color);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.md-tabs {
  background-color: var(--md-primary-fg-color);
}

/*
 * The lockup SVG carries the "Sieve" wordmark, so hide the
 * separate site-name text that Material renders next to the logo;
 * keep it visible to screen readers.
 */
.md-header__topic:first-child .md-ellipsis {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/*
 * Give the header logo room to render the full lockup. The SVG
 * viewBox is 340×64 — roughly 5.3:1 — so we fix a height and let
 * width scale. `currentColor` on strokes picks up the header's
 * foreground, so it works on both themes.
 */
.md-header__button.md-logo {
  padding: 0.3rem 0.6rem;
}
.md-header__button.md-logo :is(img, svg, .md-header__logo-svg) {
  height: 1.8rem;
  width: auto;
  color: var(--md-primary-bg-color);
}

/* ── Code ───────────────────────────────────────────────────── */
.md-typeset code,
.md-typeset :not(pre) > code {
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

/* Fenced code blocks pick up the same palette. */
.md-typeset pre > code {
  background-color: var(--md-code-bg-color);
  color: var(--md-code-fg-color);
}

/* ── Links ──────────────────────────────────────────────────── */
.md-typeset a:hover {
  color: #14b8a6;
}

/* ── Search ─────────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-search__input {
  background-color: #2e3240;
}
[data-md-color-scheme="default"] .md-search__input {
  background-color: #f1f3f5;
}

/* ── Sidebars ───────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-sidebar {
  border-right-color: #3d4255;
}

[data-md-color-scheme="slate"] .md-nav__link--active {
  color: #0D9488;
}
[data-md-color-scheme="default"] .md-nav__link--active {
  color: #0D9488;
}

/* ── Admonitions ────────────────────────────────────────────── */
[data-md-color-scheme="slate"] .md-typeset .admonition {
  border-color: #3d4255;
  background-color: #2e3240;
}

/* ── Footer ─────────────────────────────────────────────────── */
.md-footer {
  background-color: var(--md-footer-bg-color);
}

/* ── Landing page polish (index.md) ────────────────────────── */
/*
 * The landing page uses brand-respectful restraint:
 * - The teal accent (#0D9488) stays reserved for the mark.
 * - Hero/section dividers use a desaturated navy tint instead
 *   of an explicit rule — gives structure without chrome.
 * - Grid cards use a slightly elevated background slab so they
 *   read as discrete units without needing borders.
 */

.sieve-divider {
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(82, 82, 91, 0.25) 20%,
    rgba(82, 82, 91, 0.25) 80%,
    transparent 100%
  );
  margin: 2.5rem auto;
  width: 100%;
}

[data-md-color-scheme="slate"] .sieve-divider {
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(220, 220, 224, 0.12) 20%,
    rgba(220, 220, 224, 0.12) 80%,
    transparent 100%
  );
}

/* Grid card polish — only on pages that use them. */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > .card,
.md-typeset div.grid > div {
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  border: 1px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li {
  background: rgba(220, 220, 224, 0.03);
  border-color: rgba(220, 220, 224, 0.08);
}

[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li {
  background: #fafafa;
  border-color: rgba(0, 0, 0, 0.06);
}

.md-typeset .grid.cards > ul > li:hover {
  border-color: rgba(13, 148, 136, 0.4);
  /* The single allowed use of teal in chrome: subtle hover hint that
   * a card is part of an active navigation surface. The dot in the
   * logo and the hover-hint are the only teal surfaces in the system. */
}

/* Card heading — tighten spacing so cards read as compact units. */
.md-typeset .grid.cards > ul > li > h3 {
  margin-top: 0;
  margin-bottom: 0.4rem;
  font-weight: 600;
}

/* Landing-page H1 (sentence-case wordmark substrate) — extra breathing
 * room below the page title before the lead paragraph. */
.md-typeset > h1:first-child {
  margin-bottom: 1.5rem;
}

/* The "Honest scope" + "What's not in this docs site" sections sit
 * close to the cards visually; give them a small left rule to mark
 * them as commentary, not a primary section. */
.md-typeset h2 + ul {
  margin-top: 0.6rem;
}

/* ── Hero stat row (3 big numbers under the lead paragraph) ─── */

.sieve-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin: 2rem 0 0.5rem 0;
}

@media (max-width: 600px) {
  .sieve-hero-stats {
    grid-template-columns: 1fr;
  }
}

.sieve-hero-stat {
  text-align: center;
  padding: 1.4rem 0.8rem;
  border-radius: 10px;
  border: 1px solid transparent;
}

[data-md-color-scheme="slate"] .sieve-hero-stat {
  background: rgba(220, 220, 224, 0.04);
  border-color: rgba(220, 220, 224, 0.10);
}

[data-md-color-scheme="default"] .sieve-hero-stat {
  background: #fafafa;
  border-color: rgba(0, 0, 0, 0.06);
}

/* The first paragraph inside a hero stat is the number; the
 * second is the caption. Style by source order so the markdown
 * stays clean. */
.sieve-hero-stat > p:first-child {
  font-size: 2.4rem;
  line-height: 1.1;
  font-weight: 700;
  margin: 0 0 0.3rem 0;
  letter-spacing: -0.01em;
}

.sieve-hero-stat > p:first-child > strong {
  font-weight: 700;
  color: var(--md-default-fg-color);
}

.sieve-hero-stat > p:last-child {
  margin: 0;
  font-size: 0.85rem;
  color: var(--md-default-fg-color--light);
  text-transform: none;
}

/* ── Before/after compare block ─────────────────────────────── */

.sieve-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  margin: 1.5rem 0;
}

@media (max-width: 800px) {
  .sieve-compare {
    grid-template-columns: 1fr;
  }
}

.sieve-compare-col {
  border-radius: 10px;
  padding: 1rem 1.2rem;
  border: 1px solid transparent;
}

[data-md-color-scheme="slate"] .sieve-compare-col {
  background: rgba(220, 220, 224, 0.03);
  border-color: rgba(220, 220, 224, 0.08);
}

[data-md-color-scheme="default"] .sieve-compare-col {
  background: #fafafa;
  border-color: rgba(0, 0, 0, 0.06);
}

.sieve-compare-col > p:first-child {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--md-default-fg-color--light);
}

.sieve-compare-col pre {
  margin: 0;
}

/* ── Material icons inside grid-card headings ──────────────── */
/*
 * pymdownx.emoji + material extension turns ":material-icon:" into
 * an inline SVG with class .twemoji. When that sits in a card
 * heading, render it as a soft accent at a comfortable size and
 * lift it slightly so it baselines with the heading text.
 */
.md-typeset .grid.cards > ul > li > p > .twemoji,
.md-typeset .grid.cards > ul > li > h3 > .twemoji,
.md-typeset .grid.cards > ul > li > .twemoji {
  height: 1.35em;
  width: 1.35em;
  vertical-align: -0.25em;
  margin-right: 0.4rem;
  color: var(--md-default-fg-color--light);
}

[data-md-color-scheme="slate"] .md-typeset .grid.cards > ul > li > p:first-child .twemoji {
  color: rgba(220, 220, 224, 0.55);
}

[data-md-color-scheme="default"] .md-typeset .grid.cards > ul > li > p:first-child .twemoji {
  color: rgba(0, 0, 0, 0.45);
}

/*
 * Cards no longer use a leading <h3> — content is icon + bold text
 * followed by an --- divider and body copy. Give the leading bold
 * line presence and the divider a softer treatment.
 */
.md-typeset .grid.cards > ul > li > p:first-child {
  margin-top: 0;
  margin-bottom: 0.6rem;
  font-size: 1.05rem;
  font-weight: 600;
}

.md-typeset .grid.cards > ul > li > hr {
  margin: 0.5rem 0 0.9rem 0;
  border: 0;
  height: 1px;
  background: rgba(125, 125, 140, 0.18);
}