/* ============================================================
   Align the docs with pglifecycle.com, whose "Documentation" link
   lands here: PostgreSQL blue on warm paper, Space Grotesk headings,
   IBM Plex for text and code, dark ink code blocks.

   Tokens copied from the marketing site's styles.css. Keep them in
   step with it -- they are the same visual system, not two.
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap");

:root {
  --pg: #336791;
  --pg-deep: #244c6c;
  --pg-darker: #18374f;
  --pg-bright: #5b9bc9;
  --pg-tint: #e8eef3;

  --ink: #0d141b;
  --ink-soft: #121b24;
  --ink-line: #243341;

  --paper: #f3f2ec;
  --paper-2: #eceae1;

  --text: #15202b;
  --text-2: #4a5b68;
  --text-ondark: #e7eef4;
  --text-ondark-2: #9fb2c2;
  --text-ondark-3: #6c8194;

  --line: rgba(24, 55, 79, 0.13);

  --green: #1f8f63;
  --amber: #b9772a;
  --red: #c14b38;

  --font-display: "Space Grotesk", system-ui, sans-serif;
  --radius: 10px;

  /* Material's own code font stack, so inline code matches the site */
  --md-code-font: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* --- light: paper, not white ------------------------------------- */

[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--paper);
  --md-default-fg-color: var(--text);
  --md-default-fg-color--light: var(--text-2);
  --md-default-fg-color--lighter: rgba(21, 32, 43, 0.4);
  --md-default-fg-color--lightest: var(--line);

  --md-typeset-color: var(--text);
  --md-typeset-a-color: var(--pg);

  /* the site's nav is translucent paper with ink text, not a bar of
     brand color; in Material, primary-fg is the header background */
  --md-primary-fg-color: var(--paper);
  --md-primary-fg-color--light: var(--paper-2);
  --md-primary-fg-color--dark: var(--paper-2);
  --md-primary-bg-color: var(--text);
  --md-primary-bg-color--light: var(--text-2);

  --md-accent-fg-color: var(--pg-deep);
  --md-accent-bg-color: #fff;

  --md-code-bg-color: var(--paper-2);
  --md-code-fg-color: var(--pg-darker);

  --md-footer-bg-color: var(--ink);
  --md-footer-bg-color--dark: var(--ink-soft);
}

/* --- dark: the site's ink surfaces ------------------------------- */

[data-md-color-scheme="slate"] {
  --md-hue: 210;
  --md-default-bg-color: var(--ink);
  --md-default-fg-color: var(--text-ondark);
  --md-default-fg-color--light: var(--text-ondark-2);
  --md-default-fg-color--lighter: var(--text-ondark-3);
  --md-default-fg-color--lightest: var(--ink-line);

  --md-typeset-color: var(--text-ondark);
  --md-typeset-a-color: var(--pg-bright);

  --md-primary-fg-color: var(--ink-soft);
  --md-primary-bg-color: var(--text-ondark);
  --md-primary-bg-color--light: var(--text-ondark-2);

  --md-accent-fg-color: var(--pg-bright);

  --md-code-bg-color: var(--ink-soft);
  --md-code-fg-color: #c3d0db;

  --md-footer-bg-color: #080e13;
}

/* --- type ------------------------------------------------------- */

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4,
.md-header__topic,
.md-nav__title {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}

.md-typeset h1 {
  font-weight: 600;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 600;
  margin-top: 2.2em;
}

/* the site's wordmark: pg light, lifecycle bold; it links out to
   pglifecycle.com (see overrides/partials/header.html) but reads as the
   title, not as a link */
.md-header__topic .md-ellipsis {
  font-weight: 600;
}

/* the logo and the wordmark are one lockup: Material's default 1rem
   gutter pushes them apart */
.md-header__title,
[dir="ltr"] .md-header__title {
  margin-left: 0.1rem;
}

.md-header__topic .pgl-wordmark {
  color: inherit;
  text-decoration: none;
}

.md-header__topic .pgl-wordmark:hover {
  color: var(--md-accent-fg-color);
}

/* --- header: a paper strip with a hairline, not a colored bar ---- */

.md-header {
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}

.md-header--shadow {
  box-shadow: 0 0 0.2rem rgba(24, 55, 79, 0.08);
}

[data-md-color-scheme="slate"] .md-header {
  border-bottom-color: var(--ink-line);
}

.md-tabs {
  border-bottom: 1px solid var(--line);
}

[data-md-color-scheme="slate"] .md-tabs {
  border-bottom-color: var(--ink-line);
}

/* mono nav labels, as on the site */
.md-tabs__link,
.md-nav__link {
  font-family: var(--md-code-font);
  font-size: 0.72rem;
}

.md-nav__title {
  font-family: var(--font-display);
  font-size: 0.75rem;
}

/* search: a paper field on a paper header, not a dark slab */

.md-search__form {
  background: rgba(24, 55, 79, 0.06);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
}

.md-search__form:hover {
  background: rgba(24, 55, 79, 0.09);
}

[data-md-toggle="search"]:checked ~ .md-header .md-search__form {
  background: #fff;
  border-radius: var(--radius) var(--radius) 0 0;
}

.md-search__input {
  font-family: var(--md-code-font);
  font-size: 0.72rem;
}

.md-search__input::placeholder,
.md-search__icon {
  color: var(--text-2);
}

[data-md-color-scheme="slate"] .md-search__form {
  background: rgba(231, 238, 244, 0.07);
  border-color: var(--ink-line);
}

[data-md-color-scheme="slate"] [data-md-toggle="search"]:checked
  ~ .md-header .md-search__form {
  background: var(--ink-soft);
}

[data-md-color-scheme="slate"] .md-search__input::placeholder,
[data-md-color-scheme="slate"] .md-search__icon {
  color: var(--text-ondark-2);
}

.md-search-result__meta {
  font-family: var(--md-code-font);
}

/* --- code: dark ink terminals in both schemes -------------------- */

/* Scope the ink palette to the block itself by redefining Material's own
   code tokens, so everything the theme draws from them -- the pre
   background, the copy button, line numbers, and every highlight class --
   follows the dark surface instead of the light page around it. */
.md-typeset .highlight,
.md-typeset pre > code,
.md-typeset .highlighttable {
  --md-code-bg-color: var(--ink);
  --md-code-fg-color: #c3d0db;

  /* the copy/select button tray floats on the block: keep it ink too */
  --md-code-bg-color--light: rgba(231, 238, 244, 0.1);
  --md-code-bg-color--lighter: rgba(231, 238, 244, 0.05);

  --md-default-fg-color--light: var(--text-ondark-2);
  --md-default-fg-color--lighter: var(--text-ondark-3);
  --md-default-fg-color--lightest: rgba(231, 238, 244, 0.16);
  --md-accent-fg-color: var(--pg-bright);

  --md-code-hl-color: rgba(91, 155, 201, 0.25);
  --md-code-hl-number-color: #8fd0ae;
  --md-code-hl-special-color: #d98a8a;
  --md-code-hl-function-color: #b79bd6;
  --md-code-hl-constant-color: #8fd0ae;
  --md-code-hl-keyword-color: #6fa8d6;
  --md-code-hl-string-color: #d9a45e;
  --md-code-hl-name-color: #c3d0db;
  --md-code-hl-operator-color: #9fb2c2;
  --md-code-hl-punctuation-color: #9fb2c2;
  --md-code-hl-comment-color: #5d7384;
  --md-code-hl-generic-color: #9fb2c2;
  --md-code-hl-variable-color: #7fb6df;
}

[data-md-color-scheme="slate"] .md-typeset .highlight,
[data-md-color-scheme="slate"] .md-typeset pre > code,
[data-md-color-scheme="slate"] .md-typeset .highlighttable {
  --md-code-bg-color: var(--ink-soft);
}

/* the rounded corner belongs to the code element; the wrapper must not
   paint a light rectangle behind it */
.md-typeset .highlight,
.md-typeset .highlighttable {
  background: transparent;
}

.md-typeset pre > code {
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
}

.md-typeset .highlight > pre,
.md-typeset .highlighttable pre {
  background: transparent;
}

/* line numbers sit on the same ink, divided by a hairline */
.md-typeset .highlighttable .linenos {
  background: var(--md-code-bg-color);
  border-radius: var(--radius) 0 0 var(--radius);
}

.md-typeset .highlight span.filename {
  background: var(--ink-soft);
  color: var(--text-ondark);
  border: 1px solid var(--ink-line);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  font-family: var(--md-code-font);
}

.md-typeset .highlight span.filename + pre > code {
  border-radius: 0 0 var(--radius) var(--radius);
}

/* inline code stays a paper tint: it is type, not a terminal */
.md-typeset code {
  border-radius: 4px;
  padding: 0.1em 0.35em;
}

.md-typeset a > code,
.md-typeset td code,
.md-typeset li > code,
.md-typeset p > code {
  background: var(--paper-2);
  color: var(--pg-darker);
}

[data-md-color-scheme="slate"] .md-typeset a > code,
[data-md-color-scheme="slate"] .md-typeset td code,
[data-md-color-scheme="slate"] .md-typeset li > code,
[data-md-color-scheme="slate"] .md-typeset p > code {
  background: var(--ink-soft);
  color: #c3d0db;
}

/* --- tables: the reference lives in them ------------------------- */

.md-typeset table:not([class]) {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 0.72rem;
  line-height: 1.5;
}

.md-typeset table:not([class]) th {
  background: var(--paper-2);
  color: var(--text);
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) {
  border-color: var(--ink-line);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background: var(--ink-soft);
  color: var(--text-ondark);
}

/* the Property column is the row's subject: keep it unbroken */
.md-typeset table:not([class]) td:first-child,
.md-typeset table:not([class]) td:nth-child(3) {
  white-space: nowrap;
}

/* --- buttons and admonitions ------------------------------------ */

.md-typeset .md-button {
  border-radius: var(--radius);
  font-family: var(--md-code-font);
  font-size: 0.7rem;
}

.md-typeset .md-button--primary {
  background: var(--pg);
  border-color: var(--pg);
  color: #fff;
}

.md-typeset .admonition,
.md-typeset details {
  border-radius: var(--radius);
  border-left-width: 3px;
  font-size: 0.75rem;
}

.md-typeset .admonition.note,
.md-typeset .admonition.info {
  border-color: var(--pg);
}

/* a translucent brand tint, so the title text keeps the page's own
   foreground colour in both schemes */
.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title {
  background: rgba(51, 103, 145, 0.12);
}

.md-typeset .admonition.warning {
  border-color: var(--amber);
}

.md-typeset .admonition.danger {
  border-color: var(--red);
}

.md-typeset .admonition.tip,
.md-typeset .admonition.success {
  border-color: var(--green);
}