/* gdsgate brand theme for MkDocs Material.
 *
 * Brings the gdsgate landing aesthetic into the docs: a blue accent (not the
 * Material default), the same system font stacks the in-binary pages use (no
 * online fonts — Google Fonts is disabled via `theme.font: false`), a mono /
 * technical treatment for code and headings, and a near-black "slate" dark mode
 * that echoes the landing. Tuned to stay readable as documentation. */

:root {
  --gds-blue:      #4d9bff; /* bright accent (matches the landing + ceremony pages) */
  --gds-blue-deep: #2f6fed; /* header / primary on light backgrounds */
  --gds-blue-dark: #1f4fc0;
  --gds-ink:       #08090b; /* gdsgate near-black */

  /* Standard system stacks, closest to Space Grotesk / JetBrains Mono. */
  --md-text-font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --md-code-font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* ============================================================
   Accent — primary (header) + accent (links, active, focus)
   ============================================================ */
[data-md-color-primary="blue"] {
  --md-primary-fg-color:        var(--gds-blue-deep);
  --md-primary-fg-color--light: #5a8bf2;
  --md-primary-fg-color--dark:  var(--gds-blue-dark);
}
[data-md-color-accent="blue"] {
  --md-accent-fg-color:              var(--gds-blue-deep);
  --md-accent-fg-color--transparent: color-mix(in oklab, var(--gds-blue-deep) 12%, transparent);
}

.md-typeset a { color: var(--gds-blue-deep); }
.md-typeset a:hover,
.md-typeset a:focus { color: var(--gds-blue); }

/* Brand wordmark + nav in the mono face — a small technical cue. */
.md-header__title,
.md-nav__title,
.md-tabs__link { font-family: var(--md-code-font-family); letter-spacing: -0.01em; }

/* ============================================================
   Headings — tighter, with an accent rule before h2 (the
   landing's "eyebrow" motif).
   ============================================================ */
.md-typeset h1 { font-weight: 700; letter-spacing: -0.025em; }
.md-typeset h2 {
  font-weight: 700;
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.6em;
}
.md-typeset h2::before {
  content: "";
  flex: 0 0 auto;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--gds-blue);
}
.md-typeset h3 { font-weight: 600; letter-spacing: -0.01em; }

/* ============================================================
   Code — mono everywhere, a quiet blue tint for inline code,
   a refined panel for blocks.
   ============================================================ */
.md-typeset code { border-radius: 4px; }
.md-typeset :not(pre) > code {
  background-color: color-mix(in oklab, var(--gds-blue) 10%, transparent);
  color: var(--gds-blue-deep);
}
.md-typeset pre > code { border-radius: 8px; }
.md-typeset .highlight,
.md-typeset pre { border: 1px solid color-mix(in oklab, var(--gds-blue) 14%, transparent); border-radius: 8px; }
.md-typeset .highlight pre { border: 0; }

/* Inline-code inside links keeps the link colour, not the code tint. */
.md-typeset a code { color: inherit; background-color: transparent; }

/* ============================================================
   Admonitions / tables / buttons — blue brand accents.
   ============================================================ */
.md-typeset .admonition,
.md-typeset details {
  border-left-width: 3px;
  border-radius: 8px;
}
.md-typeset table:not([class]) th { font-family: var(--md-code-font-family); font-size: 0.78rem; letter-spacing: 0.02em; }
.md-typeset .md-button--primary {
  background-color: var(--gds-blue-deep);
  border-color: var(--gds-blue-deep);
}

/* Selection + focus ring in the brand colour. */
::selection { background: var(--gds-blue); color: var(--gds-ink); }

/* ============================================================
   Dark (slate) scheme — the gdsgate near-black landing look.
   ============================================================ */
[data-md-color-scheme="slate"] {
  --md-hue: 222;                          /* shift slate's grey toward blue-black */
  --md-default-bg-color:        var(--gds-ink);
  --md-default-bg-color--light: #0c0e11;
  --md-code-bg-color:           #0e1216;
  --md-accent-fg-color:         var(--gds-blue);
  --md-primary-fg-color:        #0d1014;
  --md-primary-fg-color--dark:  var(--gds-ink);
  --md-typeset-a-color:         var(--gds-blue);
}
[data-md-color-scheme="slate"] .md-typeset a       { color: var(--gds-blue); }
[data-md-color-scheme="slate"] .md-typeset a:hover { color: #82bbff; }
[data-md-color-scheme="slate"] .md-typeset :not(pre) > code {
  background-color: color-mix(in oklab, var(--gds-blue) 16%, transparent);
  color: #bcd6ff;
}
/* Faint dot-grid texture on the dark content area (landing signature). */
[data-md-color-scheme="slate"] .md-main {
  background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.022) 1px, transparent 0);
  background-size: 38px 38px;
}

/* ── the release, beside the product name in the header ─────────────────────
   Quieter than the name and lighter than it: this is a label on what the
   reader is looking at, not a second title. It follows the header's own text
   colour at reduced opacity, so it works in both colour schemes without a
   second rule, and it lifts to full opacity on hover to read as the link it
   is. Hidden on narrow screens — there the header has room for the page title
   and nothing else. */
.gdsgate-version {
  color: inherit;
  font-size: 0.66em;
  font-weight: 400;
  letter-spacing: 0;
  margin-left: 0.55em;
  opacity: 0.72;
  white-space: nowrap;
}

.gdsgate-version:hover,
.gdsgate-version:focus-visible {
  opacity: 1;
  text-decoration: underline;
}

@media screen and (max-width: 76.234375em) {
  .gdsgate-version {
    display: none;
  }
}