/* Peach look, shared with the ops dashboard and cli.peach.ebu.io: white (or
   ink in dark mode) header with the peach logo, orange accent, system fonts.
   The header markup is overrides/partials/header.html. Copied from
   pipe/peach-opsdocs (docs/assets/stylesheets/peach-theme.css); keep the two in step.

   Material sets its scheme and primary colour as attributes on <body>; the
   two-attribute selectors below out-rank its [data-md-color-primary=...]
   rules, so the palette in mkdocs.yml only picks the scheme now. */
[data-md-color-scheme="default"][data-md-color-primary] {
  --pk-bg: #ffffff; --pk-head: #2d3138; --pk-muted: #646b79; --pk-border: #e7eaf0;
  --pk-card: #ffffff; --pk-accent: #d9731f; --pk-accent-text: #b45309;
  --pk-accent-soft: rgba(217, 115, 31, .12); --pk-kbd-bg: #f1f5f9; --pk-kbd-border: #cbd5e1;
  --md-primary-fg-color: #d9731f;
  --md-primary-fg-color--light: #feab5d;
  --md-primary-fg-color--dark: #b45309;
  --md-accent-fg-color: #d9731f;
  --md-typeset-a-color: #b45309;
}
[data-md-color-scheme="slate"][data-md-color-primary] {
  --pk-bg: #13171f; --pk-head: #f0f1f3; --pk-muted: #8891a1; --pk-border: #262d3a;
  --pk-card: #181c25; --pk-accent: #feab5d; --pk-accent-text: #fdba74;
  --pk-accent-soft: rgba(254, 171, 93, .14); --pk-kbd-bg: #2b323d; --pk-kbd-border: #3d4653;
  --md-default-bg-color: #13171f;
  --md-code-bg-color: #1a1f29;
  --md-primary-fg-color: #feab5d;
  --md-primary-fg-color--light: #fdba74;
  --md-primary-fg-color--dark: #d9731f;
  --md-primary-bg-color: #13171f;
  --md-accent-fg-color: #feab5d;
  --md-typeset-a-color: #fdba74;
}

/* ---------- header ---------- */
.pk-header {
  background: var(--pk-bg);
  color: var(--pk-head);
  border-bottom: .05rem solid var(--pk-border);
  box-shadow: none;
  font-size: .8rem;
}
.pk-header.md-header--shadow { box-shadow: 0 .05rem .2rem rgba(0, 0, 0, .05); }
.pk-header__inner { height: 4.6rem; align-items: center; gap: .5em; }
.pk-brand { display: flex; align-items: center; gap: .6em; margin-left: .4rem; color: var(--pk-head); }
.pk-brand:hover, .pk-brand:focus { color: var(--pk-head); }
/* rem, not em: Material sets body font-size to .5rem, and an em here inherits
   that rather than the header context, which shrank the brand well below the
   ops dashboards. rem is root-relative, so the size is deterministic. */
.pk-brand__logo { height: 2.2rem; width: auto; display: block; transform: translateY(-.1em); }
.pk-brand__name { font-size: 1.5rem; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; line-height: 1; }
.pk-header__tools { display: flex; align-items: center; gap: .5em; margin-left: auto; }
.pk-header .md-header__button.md-icon { color: var(--pk-muted); }
.pk-header .md-header__button.md-icon:hover { color: var(--pk-head); opacity: 1; }

/* Theme toggle: same bordered square as the dashboards' icon buttons. */
.pk-header .md-header__option { margin: 0; }
.pk-header .md-header__option .md-header__button {
  margin: 0; padding: .35em; border: .05rem solid var(--pk-border); border-radius: .45em; background: var(--pk-card);
}
.pk-header .md-header__option .md-header__button:hover { border-color: var(--pk-accent); }

/* Inline search box (60em and up): the dashboards' bordered ⌘K button. */
@media screen and (min-width: 60em) {
  .pk-header .md-search { padding: 0; }
  .pk-header .md-search__form {
    background: var(--pk-card); border: .05rem solid var(--pk-border); border-radius: .45em; box-shadow: none;
  }
  .pk-header .md-search__form:hover { background: var(--pk-card); border-color: var(--pk-accent); }
  .pk-header .md-search__input { color: var(--pk-head); font-size: .85em; }
  .pk-header .md-search__input::placeholder, .pk-header .md-search__icon { color: var(--pk-muted); }
  .pk-header .md-search__form::after {
    content: "⌘K"; position: absolute; right: .55em; top: 50%; transform: translateY(-50%); pointer-events: none;
    font-family: var(--md-code-font-family); font-size: .7em; font-weight: 600; color: var(--pk-muted);
    background: var(--pk-kbd-bg); border: .05rem solid var(--pk-kbd-border); border-bottom-width: .1rem;
    border-radius: .3em; padding: .05em .4em;
  }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form::after { display: none; }
  [data-md-toggle="search"]:checked ~ .md-header .md-search__form { border-color: var(--pk-accent); }
}

/* ---------- layout: room below the header ---------- */
.md-main__inner { margin-top: 2.6rem; }
.md-sidebar { top: 3.6rem; }
.md-typeset :target { --md-scroll-margin: 4.8rem; }

/* ---------- sidebar and contents ---------- */
.md-nav__title { color: var(--pk-muted); }
/* The site name over the sidebar repeats the header; keep it only as the
   mobile drawer's title (the sidebar becomes a drawer below 76.25em). */
@media screen and (min-width: 76.25em) {
  .md-nav--primary > .md-nav__title { display: none; }
}
.md-nav__link { border-radius: .3rem; }
/* Slightly larger menu text (Material: .7rem). The space between rows is mostly
   padding, not margin, so each row is clickable over its full height. */
.md-nav--primary { font-size: .76rem; }
.md-nav--primary .md-nav__link { margin-top: .1em; padding-block: .4em; }
/* Index-page sections: the container is a row of its own; the title and arrow
   inside it carry the padding, so both are tall click targets. */
.md-nav--primary .md-nav__container { padding-block: 0; }
.md-nav--primary .md-nav__container > .md-nav__link { margin-top: 0; padding-block: .4em; }
.md-nav--primary .md-nav__link--active {
  background: var(--pk-accent-soft); color: var(--pk-head); font-weight: 650; padding-inline: .4rem; margin-left: -.4rem;
}
/* A section with its own index page (navigation.indexes) is a container holding
   two active links, the title and the arrow; highlight the row once, not each. */
.md-nav--primary .md-nav__item .md-nav__container:has(> .md-nav__link--active) {
  background: var(--pk-accent-soft); border-radius: .3rem; padding: 0 .4rem; margin-left: -.4rem;
}
.md-nav--primary .md-nav__item .md-nav__container > .md-nav__link--active {
  background: none; padding-inline: 0; margin-left: 0; color: var(--pk-head);
}
.md-nav--secondary .md-nav__link--active { color: var(--pk-accent-text); font-weight: 600; }

/* ---------- page ---------- */
.md-typeset h1 { font-weight: 800; color: var(--pk-head); letter-spacing: -.015em; }
/* A <small> subtitle in a heading sits on its own line, muted and lighter. */
.md-typeset h1 small { display: block; margin-top: .3rem; font-weight: 600; font-size: .55em; letter-spacing: 0; color: var(--pk-muted); }
.md-typeset h2 { font-weight: 700; color: var(--pk-head); letter-spacing: -.01em; }
.md-typeset h3 { font-weight: 650; color: var(--pk-head); }
.md-typeset table:not([class]) { border-color: var(--pk-border); border-radius: .4rem; }
.md-typeset table:not([class]) th { background: var(--md-code-bg-color); color: var(--pk-head); }

/* ---------- footer build stamp ---------- */
/* Version/commit/build-time line under the copyright (overrides/partials/copyright.html,
   set by hooks/version.py). Quieter than the copyright line: it is a diagnostic.
   Copied from pipe/peach-opsdocs (extra.css); keep the two in step. */
.md-build-stamp {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid hsla(0, 0%, 100%, .14);
  font-family: var(--md-code-font-family, monospace);
  font-size: .64rem;
  line-height: 1.4;
  color: hsla(0, 0%, 100%, .62);
}
.md-build-stamp a {
  color: hsla(0, 0%, 100%, .78);
  border-bottom: 1px dotted hsla(0, 0%, 100%, .4);
}
.md-build-stamp a:hover, .md-build-stamp a:focus {
  color: var(--md-accent-fg-color);
  border-bottom-color: var(--md-accent-fg-color);
}
.md-build-stamp__sep { opacity: .45; padding: 0 .2rem; }