/* ──────────────────────────────────────────────────────────────────────────
   Parti brand theme for MkDocs Material.
   Tokens lifted verbatim from parti-frontend-revamp/src/styles/global.css
   so docs.parti.com matches the app's dark / editorial / green aesthetic.

     accent green  #22D89C   (--accent / --parti-green / --rising)
     accent blue   #4F5CF5   (--parti-blue)
     background    #050608   (--bg / --ink-0)
     surfaces      #0b0d12 / #11141b / #161a23
     rule          #1f242f   (--rule)
     fg            #f5f5f0   (--fg)
     fg-2          #b8bcc4   (--fg-2)
     fg-3          #6e7480   (--fg-3)
     fonts         Inter (body) · Newsreader (display serif) · JetBrains Mono
   ────────────────────────────────────────────────────────────────────────── */

:root {
  --parti-green: #22d89c;
  --parti-green-dim: #18a075;
  --parti-green-glow: rgba(34, 216, 156, 0.18);
  --parti-blue: #4f5cf5;

  --parti-bg: #050608;
  --parti-bg-1: #0b0d12;
  --parti-surface: #11141b;
  --parti-surface-2: #161a23;
  --parti-rule: #1f242f;

  --parti-fg: #f5f5f0;
  --parti-fg-2: #b8bcc4;
  --parti-fg-3: #6e7480;

  --parti-display: "Newsreader", Georgia, "Times New Roman", serif;
}

/* Newsreader (display serif) isn't one of Material's font slots — pull it
   directly so headings get the editorial parti.com look. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

/* ── Material colour-scheme override (palette primary/accent: custom) ────── */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--parti-bg);
  --md-default-fg-color: var(--parti-fg);
  --md-default-fg-color--light: var(--parti-fg-2);
  --md-default-fg-color--lighter: var(--parti-fg-3);
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.08);

  --md-primary-fg-color: var(--parti-bg-1);
  --md-primary-fg-color--light: var(--parti-surface);
  --md-primary-fg-color--dark: var(--parti-bg);
  --md-primary-bg-color: var(--parti-fg);
  --md-primary-bg-color--light: var(--parti-fg-2);

  --md-accent-fg-color: var(--parti-green);
  --md-accent-fg-color--transparent: var(--parti-green-glow);
  --md-accent-bg-color: #04130d;

  --md-typeset-a-color: var(--parti-green);

  --md-code-bg-color: #0d1016;
  --md-code-fg-color: #d7dbe0;

  --md-footer-bg-color: var(--parti-bg-1);
  --md-footer-bg-color--dark: var(--parti-bg);

  --md-typeset-mark-color: var(--parti-green-glow);
}

/* ── Page chrome ─────────────────────────────────────────────────────────── */
.md-header,
.md-tabs {
  background-color: var(--parti-bg-1);
  border-bottom: 1px solid var(--parti-rule);
}
.md-header {
  box-shadow: 0 1px 0 var(--parti-rule);
}
.md-tabs__link {
  color: var(--parti-fg-2);
  opacity: 1;
  font-weight: 500;
}
.md-tabs__link--active,
.md-tabs__link:hover {
  color: var(--parti-fg);
}
/* underline the active top-level tab in accent green */
.md-tabs__item--active {
  box-shadow: inset 0 -2px 0 var(--parti-green);
}

.md-header__title {
  font-weight: 600;
}

/* Material ramps the root to 137.5%/150% on medium/large screens, which makes
   the whole type scale read oversized for docs. Cap it at a normal size. */
html {
  font-size: 112.5%;
}

body {
  background: var(--parti-bg);
}

/* Material caps the content grid at 61rem, which leaves a large empty band on
   wide screens (worse on TOC-hidden pages where the right column is unused) so
   the content never reaches the full-width header/search bar. Widen the grid so
   the page lines up with the header; long-form article TEXT keeps a readable
   measure via the per-page rules below. */
.md-grid {
  max-width: none;
}

/* Article prose: keep a comfortable reading measure on very wide screens even
   though the grid itself is wide (so headings/code/tables align with the header
   but body text doesn't sprawl). Landing pages opt out below. */
.md-content__inner {
  max-width: none;
}

/* Landing pages (homepage + section indexes) hide the nav/TOC and should fill
   the full widened grid so the hero + card grid align with the header edges. */
.md-content__inner:has(.parti-hero),
.md-content__inner:has(.parti-cards) {
  max-width: none;
}

/* ── Typography — editorial serif headings, Inter body ───────────────────── */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  font-family: var(--parti-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--parti-fg);
}
.md-typeset h1 {
  font-weight: 600;
  font-size: 2.05rem;
  line-height: 1.12;
  margin-bottom: 0.85rem;
}
.md-typeset h2 {
  font-size: 1.5rem;
  border-top: 1px solid var(--parti-rule);
  padding-top: 1.4rem;
  margin-top: 2.6rem;
  margin-bottom: 0.9rem;
}
.md-typeset h3 {
  font-size: 1.2rem;
  margin-top: 1.9rem;
}
/* Body copy: a touch more leading for comfortable long-form reading. */
.md-typeset {
  line-height: 1.68;
  color: var(--parti-fg-2);
}
.md-typeset p {
  margin: 0.7em 0 0.9em;
}
.md-typeset strong {
  color: var(--parti-fg);
  font-weight: 600;
}
.md-typeset li {
  margin-bottom: 0.3em;
}

/* ── Links / accents ─────────────────────────────────────────────────────── */
.md-typeset a {
  color: var(--parti-green);
  text-decoration: none;
}
.md-typeset a:hover {
  color: var(--parti-green-dim);
  text-decoration: underline;
}

/* ── Code blocks — rounded, dark surface ─────────────────────────────────── */
.md-typeset pre > code,
.md-typeset code {
  border-radius: 8px;
}
.md-typeset pre {
  border-radius: 10px;
}
.highlight > pre,
.md-typeset .highlight {
  border: 1px solid var(--parti-rule);
  border-radius: 10px;
}
.md-typeset code {
  background-color: rgba(34, 216, 156, 0.08);
  color: #d7dbe0;
}

/* ── Tables — rounded, surface, green-tinted header ──────────────────────── */
.md-typeset table:not([class]) {
  border: 1px solid var(--parti-rule);
  border-radius: 10px;
  overflow: hidden;
  background: var(--parti-surface);
}
.md-typeset table:not([class]) th {
  background: var(--parti-surface-2);
  color: var(--parti-fg);
  font-weight: 600;
}
.md-typeset table:not([class]) td {
  border-top: 1px solid var(--parti-rule);
}

/* ── Admonitions / cards — rounded, dark, green default ──────────────────── */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 10px;
  border-width: 1px;
  border-left-width: 4px;
  background: var(--parti-surface);
}
.md-typeset .admonition.note,
.md-typeset .admonition.tip,
.md-typeset .admonition.abstract {
  border-color: var(--parti-green);
}
.md-typeset .note > .admonition-title,
.md-typeset .tip > .admonition-title,
.md-typeset .abstract > .admonition-title {
  background-color: var(--parti-green-glow);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.md-typeset .md-button {
  border-radius: 10px;
  border-color: var(--parti-rule);
  color: var(--parti-fg);
}
.md-typeset .md-button--primary {
  background-color: var(--parti-green);
  border-color: var(--parti-green);
  color: #04130d;
  font-weight: 600;
}
.md-typeset .md-button--primary:hover {
  background-color: var(--parti-green-dim);
  border-color: var(--parti-green-dim);
}

/* ── Nav / sidebar accents ───────────────────────────────────────────────── */
.md-nav {
  font-size: 0.74rem;
}
.md-nav__link--active,
.md-nav__link:focus,
.md-nav__link:hover {
  color: var(--parti-green);
}
.md-nav__item .md-nav__link--active {
  font-weight: 600;
}
/* Section group labels (navigation.sections): small-caps, dimmed — gives the
   sidebar a clear, scannable grouping rhythm. */
.md-nav__item--section > .md-nav__link {
  color: var(--parti-fg-3);
  font-weight: 600;
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.55rem;
}
/* Tighter row rhythm + a subtle active rail on the current page. */
.md-nav__item {
  padding-top: 0;
}
.md-nav__list .md-nav__link {
  margin-top: 0.12rem;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}
.md-sidebar--primary .md-nav__item .md-nav__link--active {
  border-left: 2px solid var(--parti-green);
  margin-left: -0.6rem;
  padding-left: 0.6rem;
}
/* TOC (right sidebar) — quieter labels, green active marker. */
.md-nav--secondary .md-nav__title {
  color: var(--parti-fg-3);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ── Search ──────────────────────────────────────────────────────────────── */
.md-search__form {
  border-radius: 10px;
  background-color: var(--parti-surface);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--parti-surface);
}

/* ── Logo sizing in the header ───────────────────────────────────────────── */
/* The header uses the light wordmark (parti-logo-light.svg) so the mark is
   visible on the dark #0b0d12 header. Nudge the height up so the wordmark
   reads next to the "Parti Docs" title. */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  height: 1.7rem;
  width: auto;
}

/* ── Landing hero ────────────────────────────────────────────────────────── */
.parti-hero {
  position: relative;
  overflow: hidden; /* clip the ::before aura so it can't cause horizontal scroll */
  padding: 3.25rem 0 2.5rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--parti-rule);
}
/* Soft green aura behind the hero to give the landing page depth. */
.parti-hero::before {
  content: "";
  position: absolute;
  top: -2rem;
  left: -8rem;
  width: 34rem;
  height: 22rem;
  background: radial-gradient(circle at 30% 30%, var(--parti-green-glow), transparent 62%);
  pointer-events: none;
  z-index: 0;
  filter: blur(8px);
}
.parti-hero > * {
  position: relative;
  z-index: 1;
}
.parti-hero h1 {
  font-size: 2.85rem;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 1.1rem;
  border-top: none;
  padding-top: 0;
  background: linear-gradient(94deg, var(--parti-fg) 28%, var(--parti-green) 135%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.parti-hero > p {
  max-width: 44rem;
  color: var(--parti-fg-2);
  font-size: 1.1rem;
  line-height: 1.65;
}
.parti-hero > p strong {
  color: var(--parti-fg);
}
.parti-hero .md-button {
  margin-top: 1.4rem;
  margin-right: 0.6rem;
  padding: 0.55em 1.4em;
}

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

/* ── Hero grid used on landing pages (.parti-cards) ──────────────────────── */
.parti-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 1.1rem;
  margin: 1.75rem 0 2rem;
}
/* Markdown wraps each card link in a <p>, so the card <a> is .parti-cards p a
   (not a direct child). Target the descendant + flatten the <p> so the grid
   lays out equal-height card links. */
.parti-cards p {
  margin: 0;
  height: 100%;
}
.parti-cards a {
  position: relative;
  display: block;
  height: 100%;
  box-sizing: border-box;
  padding: 1.3rem 1.35rem;
  border: 1px solid var(--parti-rule);
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.012), transparent 60%),
    var(--parti-surface);
  text-decoration: none !important;
  color: var(--parti-fg) !important;
  transition: border-color 0.18s ease, transform 0.18s ease,
    box-shadow 0.18s ease, background 0.18s ease;
}
.parti-cards a:hover {
  border-color: var(--parti-green);
  transform: translateY(-3px);
  box-shadow: 0 10px 30px -14px var(--parti-green-glow);
}
.parti-cards a strong {
  display: block;
  font-family: var(--parti-display);
  font-size: 1.12rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
  color: var(--parti-fg);
}
.parti-cards a:hover strong {
  color: var(--parti-green);
}
.parti-cards a span {
  display: block;
  color: var(--parti-fg-2);
  font-size: 0.84rem;
  line-height: 1.5;
}

/* ── Final polish ────────────────────────────────────────────────────────── */
/* Admonition titles: align type with the editorial body. */
.md-typeset .admonition-title,
.md-typeset summary {
  font-weight: 600;
  letter-spacing: -0.005em;
}
.md-typeset .admonition,
.md-typeset details {
  font-size: 0.78rem;
}
.md-typeset .admonition > :last-child,
.md-typeset details > :last-child {
  margin-bottom: 0.4rem;
}

/* Tables: roomier cells + monospace-friendly alignment. */
.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.62em 0.95em;
  font-size: 0.8rem;
}

/* Inline code: subtler tint, crisp border so it reads as a token not a button. */
.md-typeset code {
  background-color: rgba(34, 216, 156, 0.07);
  border: 1px solid rgba(34, 216, 156, 0.14);
  padding: 0.1em 0.36em;
  font-size: 0.84em;
}
.md-typeset pre > code {
  border: none;
  background: transparent;
}
.md-typeset a > code {
  color: var(--parti-green);
}

/* Header/tabs spacing — tighten the wordmark + title pairing. */
.md-header__title {
  font-size: 0.92rem;
}
.md-tabs__link {
  font-size: 0.76rem;
}

/* Top tab bar lift away from content so the page doesn't feel cramped. */
.md-main__inner {
  margin-top: 1.2rem;
}

/* Horizontal rules + first-heading spacing on content pages. */
.md-typeset hr {
  border-bottom: 1px solid var(--parti-rule);
  margin: 2rem 0;
}
.md-content__inner > h1:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0.3rem;
}

/* Buttons: a hair more presence on hover for the secondary variant. */
.md-typeset .md-button:hover:not(.md-button--primary) {
  border-color: var(--parti-green);
  color: var(--parti-green);
}