/* Netzero documentation theme.
   Borrows the Claude docs palette (warm cream background, coral accent) and
   the floating pill nav from www.netzero.energy. Loaded after the GitHub
   Pages theme's style.css so rules below override defaults. */

:root {
  --nz-bg: #FAF9F5;
  --nz-text: #2C2825;
  --nz-text-muted: #6B655C;
  --nz-accent: #2B5F8C;
  --nz-accent-hover: #1F4B72;
  --nz-code-bg: #F0EDE5;
  --nz-border: rgba(0, 0, 0, 0.08);
  --nz-border-strong: rgba(0, 0, 0, 0.14);
}

html, body {
  background: var(--nz-bg) !important;
  color: var(--nz-text);
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.markdown-body {
  background: transparent !important;
  color: var(--nz-text) !important;
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  font-size: 16px;
  line-height: 1.65;
  max-width: 820px;
  padding: 8px 4px 24px;
}

/* Drop the GH Pages theme's heading underlines; switch to clean Inter. */
.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif !important;
  color: var(--nz-text) !important;
  border-bottom: none !important;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
}

.markdown-body h1 {
  font-size: 2.1em;
  font-weight: 600;
  letter-spacing: -0.025em;
  margin-top: 0.2em;
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--nz-border) !important;
}

.markdown-body h2 {
  font-size: 1.5em;
  margin-top: 2em;
  padding-bottom: 0.3em;
  border-bottom: 1px solid var(--nz-border) !important;
}

.markdown-body h3 { font-size: 1.2em; }
.markdown-body h4 { font-size: 1.05em; }

.markdown-body p,
.markdown-body li {
  color: var(--nz-text);
}

.markdown-body a {
  color: var(--nz-accent) !important;
  text-decoration: none;
  text-underline-offset: 2px;
}

.markdown-body a:hover {
  color: var(--nz-accent-hover) !important;
  text-decoration: underline;
}

.markdown-body code {
  background: var(--nz-code-bg);
  color: var(--nz-text);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

.markdown-body pre {
  background: var(--nz-code-bg) !important;
  border: 1px solid var(--nz-border);
  border-radius: 8px;
  padding: 14px 16px;
  line-height: 1.55;
}

.markdown-body pre code {
  background: transparent !important;
  padding: 0;
  font-size: 0.9em;
}

.markdown-body blockquote {
  border-left: 3px solid var(--nz-accent) !important;
  color: var(--nz-text-muted) !important;
  background: transparent !important;
  padding: 4px 0 4px 16px;
  margin: 16px 0;
}

.markdown-body hr {
  background: var(--nz-border) !important;
  border: none !important;
  height: 1px;
  margin: 36px 0;
}

.markdown-body table {
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--nz-border);
  border-radius: 8px;
  overflow: hidden;
}

.markdown-body table th,
.markdown-body table td {
  border: none;
  border-bottom: 1px solid var(--nz-border);
  border-right: 1px solid var(--nz-border);
  padding: 10px 14px;
  background: transparent !important;
}

.markdown-body table tr:last-child td { border-bottom: none; }
.markdown-body table tr th:last-child,
.markdown-body table tr td:last-child { border-right: none; }

.markdown-body table th {
  background: rgba(0, 0, 0, 0.025) !important;
  font-weight: 600;
}

.markdown-body img {
  max-width: 100%;
  border-radius: 8px;
  box-shadow: 0 6px 24px -10px rgba(0, 0, 0, 0.18);
}

/* Tighten the footer block on with_footer layouts. */
.markdown-body.footer {
  margin-top: 24px !important;
  padding-top: 16px;
  border-top: 1px solid var(--nz-border);
  color: var(--nz-text-muted);
}

/* Anchor links (anchor.js): keep the hover affordance, hide otherwise. */
.markdown-body .anchorjs-link {
  color: var(--nz-accent) !important;
  opacity: 0;
  transition: opacity 120ms ease;
}
.markdown-body h1:hover .anchorjs-link,
.markdown-body h2:hover .anchorjs-link,
.markdown-body h3:hover .anchorjs-link,
.markdown-body h4:hover .anchorjs-link,
.markdown-body h5:hover .anchorjs-link,
.markdown-body h6:hover .anchorjs-link {
  opacity: 1;
}

/* ---------- Pill nav (same shape as marketing, dark on cream) ---------- */
.nz-nav-host {
  padding: 24px 40px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 5;
  font-family: 'Inter', system-ui, sans-serif;
}

.nz-pill {
  width: 100%;
  max-width: 1100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  box-shadow:
    0 8px 22px -14px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nz-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--nz-text) !important;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.022em;
  text-decoration: none !important;
  padding: 4px 6px 4px 0;
}
.nz-brand:hover { color: var(--nz-text) !important; }

.nz-brand-logo {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}

.nz-links {
  display: flex;
  align-items: center;
  padding: 0 4px;
}
.nz-links a {
  position: relative;
  color: var(--nz-text-muted) !important;
  text-decoration: none !important;
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.003em;
  padding: 12px 22px;
  transition: color 160ms ease;
}
.nz-links a:hover { color: var(--nz-text) !important; }
.nz-links a.is-active { color: var(--nz-text) !important; }
.nz-links a + a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 30%;
  bottom: 30%;
  width: 1px;
  background: rgba(0, 0, 0, 0.07);
}
.nz-links a:hover::after,
.nz-links a.is-active::after {
  content: '';
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 6px;
  height: 1.5px;
  background: var(--nz-accent);
  border-radius: 2px;
}

.nz-menu-btn {
  display: none;
  width: 36px;
  height: 36px;
  background: rgba(0, 0, 0, 0.03);
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 50%;
  color: var(--nz-text);
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 160ms ease;
}
.nz-menu-btn:hover { background: rgba(0, 0, 0, 0.06); }
.nz-menu-icon { width: 18px; height: 18px; }
.nz-menu-icon-close { display: none; }
.nz-pill.is-open { border-radius: 22px; }
.nz-pill.is-open .nz-menu-icon-open { display: none; }
.nz-pill.is-open .nz-menu-icon-close { display: block; }

.nz-menu {
  width: 100%;
  max-width: 1100px;
  margin-top: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 8px;
  box-shadow:
    0 16px 40px -16px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
  display: flex;
  flex-direction: column;
}
.nz-menu a {
  color: var(--nz-text) !important;
  text-decoration: none !important;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 14px 16px;
  border-radius: 12px;
  transition: background 160ms ease;
}
.nz-menu a:hover { background: rgba(0, 0, 0, 0.04); }
.nz-menu a.is-active {
  background: rgba(0, 0, 0, 0.04);
  color: var(--nz-accent) !important;
}
.nz-menu a + a {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 0;
}
.nz-menu a:first-child { border-radius: 12px 12px 0 0; }
.nz-menu a:last-child { border-radius: 0 0 12px 12px; }

@media (max-width: 991.98px) {
  .nz-nav-host { padding: 16px 16px 0; }
  .nz-pill { padding: 6px 6px 6px 14px; }
  .nz-brand { font-size: 15px; gap: 10px; }
  .nz-brand-logo { width: 28px; height: 28px; border-radius: 7px; }
  .nz-links { display: none; }
  .nz-menu-btn { display: flex; }
}

@media (min-width: 992px) {
  .nz-menu { display: none; }
}

/* Tighten the GH Pages container; the nav already provides top spacing. */
.container-lg.markdown-body {
  margin-top: 16px !important;
}

@media (max-width: 767px) {
  .markdown-body { font-size: 15px; }
  .markdown-body h1 { font-size: 1.8em; }
  .markdown-body h2 { font-size: 1.35em; }
}