/* docs.ihasmail.org -- Material for MkDocs, dressed in the ihasmail palette.
 *
 * The colours are the same ones ihasmail.org uses, and for the same reasons:
 * the cat's orange (#F9A34B), the envelope's teal (#46CAC3) and the ink
 * outline (#1C4053) that becomes the dark ground. Teal leads, orange is the
 * highlight. The light values are the darkened teal/orange from the site,
 * chosen so body text, muted text and links clear WCAG AA on their grounds.
 *
 * Everything is done by re-pointing Material's own custom properties, so
 * upstream keeps ownership of the layout and we only own the palette. The
 * handful of rules below the token blocks exist because Material assumes a
 * saturated header bar; ihasmail.org's header is the page ground with a hair-
 * line under it, and that is what is reproduced here.
 *
 * Material's variable NAMES are the contract this file depends on -- see the
 * pin in requirements.txt before upgrading mkdocs-material.
 */

/* ---------------------------------------------------------------- light -- */
[data-md-color-scheme="default"] {
  --ihm-bg: #f6fbfb;
  --ihm-bg-alt: #eaf4f4;
  --ihm-surface: #ffffff;
  --ihm-border: #d2e3e5;
  --ihm-border-strong: #b3d0d3;
  --ihm-text: #10303d;
  --ihm-text-muted: #4a6b76;
  --ihm-accent: #0b6b67;
  --ihm-accent-hot: #095553;
  --ihm-on-accent: #ffffff;
  --ihm-warm: #9c580c;
  --ihm-warm-soft: #f9a34b;
  --ihm-tint: rgba(11, 107, 103, 0.09);
  --ihm-tint-warm: rgba(156, 88, 12, 0.10);
  --ihm-code-bg: #edf6f6;

  --md-hue: 195;

  --md-default-fg-color: var(--ihm-text);
  --md-default-fg-color--light: var(--ihm-text-muted);
  --md-default-fg-color--lighter: rgba(16, 48, 61, 0.32);
  --md-default-fg-color--lightest: rgba(16, 48, 61, 0.07);
  --md-default-bg-color: var(--ihm-bg);
  --md-default-bg-color--light: rgba(246, 251, 251, 0.70);
  --md-default-bg-color--lighter: rgba(246, 251, 251, 0.45);
  --md-default-bg-color--lightest: rgba(246, 251, 251, 0.12);

  /* The header takes the page ground rather than a colour bar. */
  --md-primary-fg-color: var(--ihm-bg);
  --md-primary-fg-color--light: var(--ihm-bg-alt);
  --md-primary-fg-color--dark: var(--ihm-border);
  --md-primary-bg-color: var(--ihm-text);
  --md-primary-bg-color--light: var(--ihm-text-muted);

  --md-accent-fg-color: var(--ihm-accent-hot);
  --md-accent-fg-color--transparent: var(--ihm-tint);
  --md-accent-bg-color: var(--ihm-on-accent);
  --md-accent-bg-color--light: rgba(255, 255, 255, 0.70);

  --md-typeset-color: var(--ihm-text);
  --md-typeset-a-color: var(--ihm-accent);
  --md-typeset-mark-color: var(--ihm-tint-warm);
  --md-typeset-table-color: var(--ihm-border);

  /* A keycap in Material has no border: the outline is its box-shadow, drawn
     from these three. Overriding `kbd` with box-shadow: none flattens every
     key on the shortcuts page into plain text. */
  --md-typeset-kbd-color: var(--ihm-surface);
  --md-typeset-kbd-border-color: var(--ihm-border-strong);
  --md-typeset-kbd-accent-color: var(--ihm-bg);

  --md-code-fg-color: var(--ihm-text);
  --md-code-bg-color: var(--ihm-code-bg);

  --md-footer-fg-color: var(--ihm-text);
  --md-footer-fg-color--light: var(--ihm-text-muted);
  --md-footer-fg-color--lighter: rgba(16, 48, 61, 0.40);
  --md-footer-bg-color: var(--ihm-bg-alt);
  --md-footer-bg-color--dark: var(--ihm-bg-alt);

  --md-shadow-z1: 0 4px 12px -8px rgba(16, 48, 61, 0.34);
  --md-shadow-z2: 0 12px 30px -20px rgba(16, 48, 61, 0.40);
  --md-shadow-z3: 0 18px 44px -26px rgba(16, 48, 61, 0.42);
}

/* ----------------------------------------------------------------- dark -- */
[data-md-color-scheme="slate"] {
  --ihm-bg: #0d2430;
  --ihm-bg-alt: #0a1c26;
  --ihm-surface: #12303e;
  --ihm-border: #21505f;
  --ihm-border-strong: #2e6a7a;
  --ihm-text: #eaf6f6;
  --ihm-text-muted: #a3c3cb;
  --ihm-accent: #46cac3;
  --ihm-accent-hot: #6fdcd6;
  --ihm-on-accent: #062028;
  --ihm-warm: #f9a34b;
  --ihm-warm-soft: #f9a34b;
  --ihm-tint: rgba(70, 202, 195, 0.10);
  --ihm-tint-warm: rgba(249, 163, 75, 0.16);
  --ihm-code-bg: #0a1c26;

  --md-hue: 197;

  --md-default-fg-color: var(--ihm-text);
  --md-default-fg-color--light: var(--ihm-text-muted);
  --md-default-fg-color--lighter: rgba(234, 246, 246, 0.32);
  --md-default-fg-color--lightest: rgba(234, 246, 246, 0.10);
  --md-default-bg-color: var(--ihm-bg);
  --md-default-bg-color--light: rgba(13, 36, 48, 0.70);
  --md-default-bg-color--lighter: rgba(13, 36, 48, 0.45);
  --md-default-bg-color--lightest: rgba(13, 36, 48, 0.12);

  --md-primary-fg-color: var(--ihm-bg);
  --md-primary-fg-color--light: var(--ihm-surface);
  --md-primary-fg-color--dark: var(--ihm-bg-alt);
  --md-primary-bg-color: var(--ihm-text);
  --md-primary-bg-color--light: var(--ihm-text-muted);

  --md-accent-fg-color: var(--ihm-accent-hot);
  --md-accent-fg-color--transparent: var(--ihm-tint);
  --md-accent-bg-color: var(--ihm-on-accent);
  --md-accent-bg-color--light: rgba(6, 32, 40, 0.70);

  --md-typeset-color: var(--ihm-text);
  --md-typeset-a-color: var(--ihm-accent);
  --md-typeset-mark-color: var(--ihm-tint-warm);
  --md-typeset-table-color: var(--ihm-border);

  /* See the light block: the keycap outline is a box-shadow, not a border. */
  --md-typeset-kbd-color: #163a4a;
  --md-typeset-kbd-border-color: var(--ihm-border-strong);
  --md-typeset-kbd-accent-color: var(--ihm-border);

  --md-code-fg-color: var(--ihm-text);
  --md-code-bg-color: var(--ihm-code-bg);

  --md-footer-fg-color: var(--ihm-text);
  --md-footer-fg-color--light: var(--ihm-text-muted);
  --md-footer-fg-color--lighter: rgba(234, 246, 246, 0.40);
  --md-footer-bg-color: var(--ihm-bg-alt);
  --md-footer-bg-color--dark: var(--ihm-bg-alt);

  --md-shadow-z1: 0 6px 18px -12px rgba(0, 0, 0, 0.70);
  --md-shadow-z2: 0 16px 40px -24px rgba(0, 0, 0, 0.72);
  --md-shadow-z3: 0 22px 60px -28px rgba(0, 0, 0, 0.75);
}

/* ---------------------------------------------------------------- type -- */
/* theme.font is false in mkdocs.yml, so Material emits no font variables and
   these are the whole story. Same two stacks as ihasmail.org's styles.css. */
:root {
  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
                  Helvetica, Arial, sans-serif;
  --md-code-font: "JetBrains Mono", "Fira Code", ui-monospace, "SFMono-Regular",
                  Consolas, monospace;
}

/* ------------------------------------------------------- header + brand -- */
/* Material expects a saturated bar and paints the search field, its icons and
   the tab strip with transparent black over it. On a header that is the page
   ground, that reads as grey mud -- these rules put the site's own border and
   tint there instead. */
.md-header {
  border-bottom: 1px solid var(--ihm-border);
  box-shadow: none;
}
.md-header--shadow {
  box-shadow: var(--md-shadow-z1);
  transition: box-shadow 0.25s;
}

/* The wordmark, cut to match .brand .wordmark on ihasmail.org. */
.md-header__title .md-ellipsis {
  font-weight: 800;
  letter-spacing: -0.03em;
}
.md-header__button.md-logo :is(img, svg) {
  height: 1.6rem;
  width: auto;
}

.md-search__form {
  background-color: var(--ihm-tint);
  border: 1px solid var(--ihm-border);
  box-shadow: none;
}
.md-search__form:hover {
  background-color: var(--ihm-tint);
  border-color: var(--ihm-border-strong);
}
.md-search__input {
  color: var(--ihm-text);
}
.md-search__input::placeholder,
.md-search__icon {
  color: var(--ihm-text-muted);
}
[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background-color: var(--ihm-surface);
  border-color: var(--ihm-border-strong);
}
.md-search-result__meta {
  color: var(--ihm-text-muted);
}
.md-tabs {
  border-bottom: 1px solid var(--ihm-border);
}

/* --------------------------------------------------------------- typeset -- */
.md-typeset h1,
.md-typeset h2 {
  color: var(--ihm-text);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.md-typeset h3,
.md-typeset h4 {
  font-weight: 700;
}
.md-typeset a:hover {
  color: var(--ihm-accent-hot);
}
.md-typeset code {
  border-radius: 5px;
}
.md-typeset :is(table:not([class]), .md-typeset__table table) {
  border: 1px solid var(--ihm-border);
  border-radius: 12px;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background-color: var(--ihm-bg-alt);
  color: var(--ihm-text);
}
/* These tables are mostly environment variables and defaults, and a column
   that wraps `STALWART_URL` across two lines is unreadable. Code in a cell
   sets the column's minimum width instead. */
.md-typeset table:not([class]) :is(td, th) code {
  white-space: nowrap;
}
.md-typeset blockquote {
  border-left: 3px solid var(--ihm-accent);
  color: var(--ihm-text-muted);
}
.md-typeset hr {
  border-bottom-color: var(--ihm-border);
}

/* The primary button, matched to .btn-primary on ihasmail.org. */
.md-typeset .md-button {
  border-radius: 10px;
  border-color: var(--ihm-border-strong);
  color: var(--ihm-accent);
  font-weight: 600;
}
.md-typeset .md-button--primary {
  background-color: var(--ihm-accent);
  border-color: var(--ihm-accent);
  color: var(--ihm-on-accent);
}
.md-typeset .md-button:is(:hover, :focus) {
  background-color: var(--ihm-accent-hot);
  border-color: var(--ihm-accent-hot);
  color: var(--ihm-on-accent);
}

/* ---------------------------------------------------------- admonitions -- */
/* Material's blues and purples are off-palette. Warning, danger and failure
   keep their amber and red -- those carry meaning that a house colour would
   throw away. */
.md-typeset :is(.admonition, details) {
  border-radius: 12px;
  border-width: 1px;
  box-shadow: none;
}
.md-typeset :is(.note, .info, .tip, .abstract, .question) {
  border-color: var(--ihm-accent);
}
.md-typeset :is(.note, .info, .tip, .abstract, .question) > :is(.admonition-title, summary) {
  background-color: var(--ihm-tint);
}
.md-typeset :is(.note, .info, .tip, .abstract, .question) > :is(.admonition-title, summary)::before {
  background-color: var(--ihm-accent);
}
.md-typeset :is(.example, .quote) {
  border-color: var(--ihm-warm);
}
.md-typeset :is(.example, .quote) > :is(.admonition-title, summary) {
  background-color: var(--ihm-tint-warm);
}
.md-typeset :is(.example, .quote) > :is(.admonition-title, summary)::before {
  background-color: var(--ihm-warm);
}

/* --------------------------------------------------------------- chrome -- */
.md-nav__link--active,
.md-nav__link:is(:hover, :focus) {
  color: var(--ihm-accent);
}
.md-sidebar--secondary .md-nav__link--active {
  font-weight: 600;
}
.md-footer {
  border-top: 1px solid var(--ihm-border);
}
.md-footer-meta {
  background-color: var(--ihm-bg-alt);
}
.md-footer__link:is(:hover, :focus) {
  opacity: 1;
  color: var(--ihm-accent);
}
.md-copyright__highlight {
  color: var(--ihm-text-muted);
}
.md-social__link:is(:hover, :focus) {
  color: var(--ihm-accent);
}
:focus-visible {
  outline: 2px solid var(--ihm-accent);
  outline-offset: 3px;
}