/* Match bpg.sh dark theme */

:root,
[data-md-color-scheme="slate"] {
  /* Background layers */
  --md-default-bg-color: #0A0A0B;
  --md-default-bg-color--light: #111113;
  --md-default-bg-color--lighter: #18181B;
  --md-default-bg-color--lightest: #27272A;

  /* Text */
  --md-default-fg-color: #E2E8F0;
  --md-default-fg-color--light: #A1A1AA;
  --md-default-fg-color--lighter: #878790;
  --md-default-fg-color--lightest: #52525B;

  /* Primary (cyan) — header, links */
  --md-primary-fg-color: #06B6D4;
  --md-primary-fg-color--light: #22D3EE;
  --md-primary-fg-color--dark: #0891B2;
  --md-primary-bg-color: #E2E8F0;
  --md-primary-bg-color--light: #A1A1AA;

  /* Accent (emerald) — hover, focus */
  --md-accent-fg-color: #10B981;
  --md-accent-fg-color--transparent: rgba(16, 185, 129, 0.1);
  --md-accent-bg-color: #0A0A0B;

  /* Code blocks */
  --md-code-bg-color: #18181B;
  --md-code-fg-color: #E2E8F0;
  --md-code-hl-color: rgba(6, 182, 212, 0.15);

    /* Footer — Zensical uses --md-default-bg-color for .md-footer
     and --md-default-fg-color--lightest for .md-footer-meta */
  --md-footer-bg-color: #0A0A0B;
  --md-footer-bg-color--dark: #0A0A0B;
  --md-footer-fg-color: #A1A1AA;
  --md-footer-fg-color--light: #878790;
  --md-footer-fg-color--lighter: #52525B;

  /* Typography — sans-serif for body, monospace for code only */
  --md-text-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --md-code-font: "JetBrains Mono", monospace;

  /* Admonition colors */
  --md-admonition-bg-color: #111113;
}

/* Self-hosted JetBrains Mono */
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Footer — match old Material for MkDocs dark style */
.md-footer {
  background: #0A0A0B;
  color: #A1A1AA;
}

.md-footer-meta {
  background: #0A0A0B;
}

.md-footer-meta.md-typeset,
.md-footer-meta.md-typeset a {
  color: #52525B;
  font-size: .64rem;
}

.md-footer-meta.md-typeset a:hover {
  color: #A1A1AA;
}

/* Announcement banner */
.md-banner {
  background: #18181B;
  color: #A1A1AA;
  font-size: 0.75rem;
  border-bottom: 1px solid #27272A;
}

.md-banner a {
  color: var(--md-primary-fg-color--light);
}

/* Header bar */
.md-header {
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Navigation tabs bar — match header */
.md-tabs {
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid #27272A;
}

/* Pill-style nav tabs */
.md-tabs__list {
  display: flex;
  gap: 0.25rem;
  padding: 0.4rem 0;
}

.md-tabs__link {
  border: 1px solid #52525B;
  border-radius: 999px;
  padding: 0.3rem 1rem;
  font-weight: 500;
  color: #A1A1AA;
  transition: all 0.2s;
}

.md-tabs__link:hover {
  color: #E2E8F0;
  border-color: #A1A1AA;
}

.md-tabs__item--active {
  border-bottom: none;  /* Zensical adds a fg-color underline; hide it — pill gradient is the indicator */
}

.md-tabs__item--active .md-tabs__link {
  background: linear-gradient(135deg, #10B981, #06B6D4);
  color: #0A0A0B;
  border-color: transparent;
}

/* Navigation sidebar */
.md-sidebar {
  background: #0A0A0B;
}

/* Subtle border on sidebar */
.md-sidebar--primary {
  border-right: 1px solid #27272A;
}

/* Link colors — color-only highlight, no underline */
.md-typeset a {
  color: var(--md-primary-fg-color);
  text-decoration: none;
}

.md-typeset a:hover {
  color: var(--md-accent-fg-color);
  text-decoration: none;
}

/* Code inline styling */
.md-typeset :not(pre) > code {
  background: #1E1E24;
  border: 1px solid #27272A;
  border-radius: 4px;
  color: #22D3EE;
  padding: 0.1em 0.4em;
}

/* Registry buttons in header */
.md-header__registry {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  margin: 0 0.5rem;
  flex-shrink: 0;
}

.registry-btn {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.7rem;
  border: 1px solid #52525B;
  border-radius: 999px;
  color: #A1A1AA;
  font-size: 0.7rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
}

.registry-btn:hover {
  color: #E2E8F0;
  border-color: #A1A1AA;
}

.sponsor-btn {
  margin-left: 0.4rem;
  color: #10B981;
  border-color: #10B981;
}

.sponsor-btn:hover {
  color: #34D399;
  border-color: #34D399;
}

/* Hide label text on small screens, keep icon */
@media (max-width: 960px) {
  .registry-btn__label {
    display: none;
  }
  .registry-btn {
    padding: 0.25rem;
  }
}

/* Hide entirely on very small screens */
@media (max-width: 600px) {
  .md-header__registry {
    display: none;
  }
}

/* Search bar */
.md-search__input {
  background: #18181B;
}

/* Table styling */
.md-typeset table:not([class]) {
  border: 1px solid #27272A;
}

.md-typeset table:not([class]) th {
  background: #18181B;
}

.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border-color: #27272A;
}

/* Tone down admonition title bars — less saturated against dark bg */
.md-typeset .admonition,
.md-typeset details {
  border-color: #27272A;
}

/* Logo in header */
.md-header__button.md-logo img {
  height: 2.4rem;
  width: auto;
}

/* Compact header title so other elements have room */
.md-header__title {
  flex-shrink: 1;
  min-width: 0;
}

/* Vertically center all header children */
.md-header__inner {
  align-items: center;
}

/* Content max-width — wider for reference docs with deep nesting */
.md-grid {
  max-width: 1440px;
}

/* Restore Material 9.x h1/h2 typography — Zensical changed to 700/bold */
.md-typeset h1 {
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color--light);
}

.md-typeset h2 {
  font-weight: 300;
  letter-spacing: -0.01em;
}