/* Raklet engineering docs — visual polish overrides on top of mkdocs-material.
   Findings from /design-review on 2026-05-20; see PR description for rationale.

   Scope: typography weight + heading color hierarchy + small layout niceties.
   Everything here is a CSS override — no theme template changes. */

/* ---------------------------------------------------------------- *
 * Heading hierarchy
 *
 * Material's default H1 is rgba(0,0,0,0.54) — lighter than body text
 * at rgba(0,0,0,0.87). The largest text on the page was the lightest.
 * Match body text color so size carries the hierarchy, not opacity.
 * ---------------------------------------------------------------- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-typeset h5,
.md-typeset h6 {
  color: var(--md-default-fg-color);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.md-typeset h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Material renders weights 300/400 for headings by default — keep 600+
   in slate (dark) mode too. */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2,
[data-md-color-scheme="slate"] .md-typeset h3,
[data-md-color-scheme="slate"] .md-typeset h4,
[data-md-color-scheme="slate"] .md-typeset h5,
[data-md-color-scheme="slate"] .md-typeset h6 {
  color: var(--md-default-fg-color);
}

/* ---------------------------------------------------------------- *
 * Body copy
 * ---------------------------------------------------------------- */
.md-typeset {
  /* Tabular numerals in tables and inline numbers — looks cleaner in
     timestamps, table cells, port numbers, etc. */
  font-variant-numeric: tabular-nums;
}

.md-typeset p {
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- *
 * Header
 *
 * Material's charcoal `primary: black` theme leaves the search box
 * looking flat. Lift it with a subtle internal background.
 * ---------------------------------------------------------------- */
.md-search__form {
  background-color: rgba(255, 255, 255, 0.08);
}

.md-search__form:hover {
  background-color: rgba(255, 255, 255, 0.14);
}

/* ---------------------------------------------------------------- *
 * Code blocks
 *
 * Slightly tighter inline code background — Material's default is
 * a translucent block that visually fights with surrounding prose.
 * ---------------------------------------------------------------- */
.md-typeset code {
  font-size: 0.85em;
  padding: 0.15em 0.4em;
}

/* ---------------------------------------------------------------- *
 * Tables
 *
 * Material's default table has no top/bottom border — looks like a
 * floating block. Give it a top border so it reads as tabular data.
 * ---------------------------------------------------------------- */
.md-typeset table:not([class]) {
  border-top: 1px solid var(--md-default-fg-color--lightest);
}