:root > * {
  --md-primary-fg-color:        #0178a3;
  --md-primary-fg-color--light: #4FA3C4;
  --md-primary-fg-color--dark:  #015E80;
  --md-accent-fg-color:         #0178a3;
}

/* ── Dark / light mode logo swap ────────────────────────────────────────── */

/* Default (light mode) — logo already set via zensical.toml */
[data-md-color-scheme="default"] .md-header__button.md-logo img {
  content: url("../assets/sidelink-logo-black.svg");
}

/* Dark mode — swap to dark variant */
[data-md-color-scheme="slate"] .md-header__button.md-logo img {
  content: url("../assets/sidelink-logo-white.svg");
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.md-grid {
  max-width: 1600px;
}

.md-sidebar--secondary {
  width: 14rem;
}

/* Ensure abbr tooltips render */
.md-content abbr {
  text-decoration: underline dotted;
  cursor: help;
}

/* ── Fonts ───────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Overpass:wght@600;700&family=Maven+Pro:wght@400;500&display=swap');

/* Body / normal text — Maven Pro 10pt equivalent */
.md-content,
.md-content p,
.md-content li,
.md-content td,
.md-content th {
  font-family: "Maven Pro", sans-serif;
  font-size: 0.8125rem; /* 13px ≈ 10pt at 96dpi */
  line-height: 1.6;
}

/* ── Headings ────────────────────────────────────────────────────────────── */

.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4,
.md-content h5,
.md-content h6 {
  font-family: "Overpass", sans-serif;
}

/* h1 — 20pt ≈ 1.5625rem at 96dpi */
.md-content h1 {
  font-size: 1.5625rem;
  color: #0187a3 !important;
  font-weight: 700;
}

/* h2 — 14pt ≈ 1.09375rem */
.md-content h2 {
  font-size: 1.09375rem;
  color: #133048 !important;
  font-weight: 700;
}

/* h3 — 12pt ≈ 0.9375rem */
.md-content h3 {
  font-size: 0.9375rem;
  color: #0187a3 !important;
  font-weight: 700;
}

/* h4 — 11pt ≈ 0.859375rem */
.md-content h4 {
  font-size: 0.859375rem;
  color: #666666 !important;
  font-weight: 700;
}

/* ── Permalink anchor icon on hover ─────────────────────────────────────── */

.md-content .headerlink {
  color: #0178a3;
  opacity: 0;
  transition: opacity 0.2s;
}

.md-content h1:hover .headerlink,
.md-content h2:hover .headerlink,
.md-content h3:hover .headerlink {
  opacity: 1;
}

/* ── Tables ──────────────────────────────────────────────────────────────── */

.md-content table:not([class]) {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  border-collapse: collapse;
  border-spacing: 0;
  overflow: hidden;
  font-family: "Maven Pro", sans-serif;
  font-size: 0.8125rem;
}

.md-content table:not([class]) th {
  background-color: #0178a3 !important;
  color: #ffffff !important;
  font-family: "Maven Pro", sans-serif;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.75em 1em;
}

.md-content table:not([class]) td {
  padding: 0.6em 1em;
  border-top: 1px solid #e0e0e0;
}

.md-content table:not([class]) tr:nth-child(even) {
  background-color: #f8fafb;
}

.md-content table:not([class]) tr:hover {
  background-color: #eef6f9;
}

.md-content table:not([class]) th,
.md-content table:not([class]) td {
  border: 1px solid #000;
  padding: 0.75em 1em;
}

/* ── Mermaid diagram lightbox ────────────────────────────────────────────── */

dialog[aria-label="Diagram viewer"] {
  border: none;
  border-radius: 8px;
  padding: 2rem;
  width: 92vw;
  height: 90vh;
  max-width: 92vw;
  max-height: 90vh;
  background: var(--md-default-bg-color);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
}

dialog[aria-label="Diagram viewer"]::backdrop {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(3px);
}

.mermaid-lightbox-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: none;
  border: none;
  font-size: 1.25rem;
  color: var(--md-default-fg-color);
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
}

.mermaid-lightbox-close:hover {
  opacity: 1;
}

.mermaid-lightbox-content {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.mermaid-lightbox-content svg {
  max-width: 100%;
  max-height: 100%;
}