/* Rimu Systems brand palette for Material for MkDocs.
   Values mirror the custom properties in static/css/style.css so the docs and
   the marketing site stay in step. Update both together.

   Material's own layout is left alone on purpose. The docs read as
   documentation - prose, procedures, code blocks and tables - rather than
   reusing the card components from the marketing pages. */

:root {
  --rimu-bg-primary: #0a1a3a;
  --rimu-bg-secondary: #0f3d7a;
  --rimu-text-primary: #ffffff;
  --rimu-text-secondary: #c7d0e0;
  --rimu-accent-cyan: #00e5ff;
  --rimu-border-subtle: #1f2b55;
  --rimu-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Material reads these blocks when palette.primary / palette.accent are set to
   "custom" in mkdocs.yml. The header stays brand navy in both schemes. */
[data-md-color-primary="custom"] {
  --md-primary-fg-color: var(--rimu-bg-secondary);
  --md-primary-fg-color--light: #1a56a8;
  --md-primary-fg-color--dark: var(--rimu-bg-primary);
  --md-primary-bg-color: var(--rimu-text-primary);
  --md-primary-bg-color--light: var(--rimu-text-secondary);
}

/* Dark scheme - matches the marketing site. */
[data-md-color-scheme="slate"] {
  --md-default-bg-color: var(--rimu-bg-primary);
  --md-default-fg-color: var(--rimu-text-primary);
  --md-default-fg-color--light: var(--rimu-text-secondary);
  --md-default-fg-color--lighter: #8d9ab5;
  --md-typeset-color: var(--rimu-text-secondary);
  --md-typeset-a-color: var(--rimu-accent-cyan);
  /* Clearly darker than the page so code blocks read as their own surface. */
  --md-code-bg-color: #050e20;
  --md-code-fg-color: #dde4f0;
  --md-footer-bg-color: #060f22;
  --md-footer-bg-color--dark: #050c1c;
}

[data-md-color-scheme="slate"][data-md-color-accent="custom"] {
  --md-accent-fg-color: var(--rimu-accent-cyan);
  --md-accent-fg-color--transparent: rgba(0, 229, 255, 0.1);
  --md-accent-bg-color: var(--rimu-bg-primary);
}

/* Light scheme - cyan is unreadable on white, so links use a darker teal. */
[data-md-color-scheme="default"] {
  --md-typeset-a-color: #0b6e8a;
  --md-code-bg-color: #f1f4f9;
}

[data-md-color-scheme="default"][data-md-color-accent="custom"] {
  --md-accent-fg-color: #0b6e8a;
  --md-accent-fg-color--transparent: rgba(11, 110, 138, 0.1);
  --md-accent-bg-color: #ffffff;
}

body,
.md-typeset {
  font-family: var(--rimu-font);
}

/* Give code blocks a visible edge in the dark scheme. */
[data-md-color-scheme="slate"] .md-typeset pre > code,
[data-md-color-scheme="slate"] .md-typeset .highlight {
  border: 1px solid var(--rimu-border-subtle);
  border-radius: 0.25rem;
}

/* Screenshots keep the framing and centering used on the Jinja pages. */
.md-typeset img.screenshot {
  border-radius: 0.5rem;
  border: 1px solid var(--rimu-border-subtle);
}

.md-typeset a.glightbox {
  display: block;
  margin: 1.5rem auto;
  text-align: center;
}

/* Material wraps the announce block in .md-banner__inner.md-grid.md-typeset,
   which constrains the width and applies typeset rules to its content. The
   site header must span the full width and keep its own styling, so those
   wrappers are neutralised here. The header itself is styled by
   static/css/header.css. */
.md-banner {
  /* The site header is translucent and composites over the body gradient on
     the Flask pages. Reproduce that ground, sized to a viewport height so the
     top slice matches, or the header tints differently here. */
  background: radial-gradient(circle at top, var(--rimu-bg-secondary), var(--rimu-bg-primary));
  background-size: 100% 100vh;
  background-repeat: no-repeat;
}

.md-banner .rimu-site-header {
  /* Material's own header is sticky at top:0. Two sticky bars would overlap,
     so the site header scrolls away and Material's stays. */
  position: static;
}

.md-banner .md-banner__inner {
  max-width: none;
  margin: 0;
  padding: 0;
  font-size: initial;
  line-height: normal;
}