/* pyvider docs — color theme matching pyvider.com marketing site
 * Marketing site palette:
 *   bg: #0f172a  bg-deep: #080e1a  bg-raised: #111827
 *   accent: #3b82f6  accent-light: #60a5fa
 *   text: #e2e8f0  text-secondary: #94a3b8
 *   border: #1e293b
 *   fonts: Inter (body), JetBrains Mono (code), Chakra Petch (headings)
 */

/* ── Fonts matching pyvider.com ── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=fallback');

:root {
  --md-text-font: "Inter", system-ui, -apple-system, sans-serif;
  --md-code-font: "JetBrains Mono", "SFMono-Regular", monospace;
}

/* ── Hide provide-io logo; keep GitHub source widget visible ── */
/* Brand identity is the two-tone pyvider wordmark only */
.md-header__button.md-logo {
  display: none;
}
/* GitHub version/repo widget — keep visible, just small font */
.md-source__repository {
  font-size: 0.7rem;
}

/* ── Two-tone pyvider brand: "py" white, "vider" blue — matches pyvider.com nav ── */
.brand-py {
  color: #e2e8f0;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
}
.brand-vider {
  color: #3b82f6;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
}
.md-header__title a,
.md-header__title {
  font-family: "JetBrains Mono", monospace !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
}

/* Light mode: "py" must be dark (not invisible white on white) */
[data-md-color-scheme="default"] .brand-py {
  color: #0f172a;
}
[data-md-color-scheme="default"] .brand-vider {
  color: #2563eb;
}

/* ── Feature cards layout ── */
.md-typeset .feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}
/* Card is the <a> — entire surface is clickable */
.md-typeset .feature-card {
  display: block;
  background: var(--md-default-bg-color--light);
  border: 1px solid var(--md-default-bg-color--lightest);
  border-radius: 8px;
  padding: 1.25rem;
  color: inherit;
  text-decoration: none;
  transition: border-color 150ms, background-color 150ms;
}
.md-typeset .feature-card:hover {
  border-color: var(--md-primary-fg-color);
  background: var(--md-default-bg-color--lighter);
  color: inherit;
}
.md-typeset .feature-card h3 {
  font-size: 0.95rem;
  margin-bottom: 0.4rem;
}
.md-typeset .feature-card p {
  font-size: 0.875rem;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.5rem;
}
.md-typeset .feature-card .card-link {
  font-size: 0.8rem;
  color: var(--md-primary-fg-color);
}

/* ── Body text size: 16px (Material root is 125% = 20px, so 0.8rem = 16px) ── */
:root {
  --md-typeset-font-size: 0.8rem;
}
.md-typeset {
  font-size: 0.8rem;
  line-height: 1.7;
}

/* ── Minimum font size: 12px for labels/meta text ── */
.md-typeset small {
  font-size: 0.75rem;
}

/* ── Admonition (callout) body text 14px (0.7rem on 20px root) ── */
.md-typeset .admonition p,
.md-typeset .admonition li,
.md-typeset details p,
.md-typeset details li {
  font-size: 0.7rem !important;
  line-height: 1.6;
}

/* ── Dark mode overrides (slate scheme) ── */
[data-md-color-scheme="slate"] {
  /* Backgrounds */
  --md-default-bg-color:           #0f172a;
  --md-default-bg-color--light:    #111827;
  --md-default-bg-color--lighter:  #1a2236;
  --md-default-bg-color--lightest: #1e293b;

  /* Text */
  --md-default-fg-color:           #e2e8f0;
  --md-default-fg-color--light:    #94a3b8;
  --md-default-fg-color--lighter:  #64748b;
  --md-default-fg-color--lightest: #475569;

  /* Primary (header, nav active, links) */
  --md-primary-fg-color:           #3b82f6;
  --md-primary-fg-color--light:    #60a5fa;
  --md-primary-fg-color--dark:     #2563eb;
  --md-primary-bg-color:           #e2e8f0;
  --md-primary-bg-color--light:    rgba(226,232,240,0.7);

  /* Accent */
  --md-accent-fg-color:            #60a5fa;
  --md-accent-fg-color--transparent: rgba(96,165,250,0.1);
  --md-accent-bg-color:            #e2e8f0;

  /* Code blocks */
  --md-code-bg-color:              #111827;
  --md-code-fg-color:              #93c5fd;

  /* Sidebar / nav */
  --md-nav-item-fg-color:          #94a3b8;

  /* Footer */
  --md-footer-bg-color:            #080e1a;
  --md-footer-bg-color--dark:      #050a14;
  --md-footer-fg-color:            #94a3b8;
  --md-footer-fg-color--light:     #64748b;
  --md-footer-fg-color--lighter:   #475569;
}

/* Header background matches marketing site (with blur like main site nav) */
[data-md-color-scheme="slate"] .md-header {
  background-color: rgba(8,14,26,0.95);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid #1e293b;
}

/* Docs tab row — contrast, alignment, active underline */
/* Force tabs visible at all widths (Material hides them below ~960px) */
.md-tabs {
  display: block !important;
}
[data-md-color-scheme="slate"] .md-tabs {
  background-color: #111827;
  border-bottom: 1px solid #1e293b;
}
/* Align tabs with nav-inner (same max-width + padding) */
.md-tabs .md-grid {
  max-width: 1400px !important;
  padding: 0 !important;
}
.md-tabs__list {
  padding: 0 32px !important;
  margin: 0 !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  justify-content: flex-start;
}
.md-tabs__list::-webkit-scrollbar { display: none; }
/* Remove extra padding on first tab so "Home" aligns with "pyvider" */
.md-tabs__item:first-child { padding-left: 0 !important; }
/* Tab link styling */
.md-tabs__link {
  font-size: 14px !important;
  opacity: 0.7;
}
.md-tabs__link:hover {
  opacity: 1;
}
/* Active tab: bright + underline */
.md-tabs__item--active .md-tabs__link {
  opacity: 1;
  position: relative;
}
.md-tabs__item--active .md-tabs__link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: #3b82f6;
  border-radius: 1px;
}

/* Sidebar nav background */
[data-md-color-scheme="slate"] .md-sidebar {
  background-color: #0f172a;
}

/* Sidebar nav active item */
[data-md-color-scheme="slate"] .md-nav__item--active > .md-nav__link {
  color: #60a5fa;
}

/* Admonition (callout) colors for dark mode */
[data-md-color-scheme="slate"] .md-typeset .admonition,
[data-md-color-scheme="slate"] .md-typeset details {
  background-color: #111827;
  border-color: #3b82f6;
  color: #e2e8f0;
}

[data-md-color-scheme="slate"] .md-typeset .admonition p,
[data-md-color-scheme="slate"] .md-typeset .admonition li,
[data-md-color-scheme="slate"] .md-typeset details p,
[data-md-color-scheme="slate"] .md-typeset details li {
  color: #e2e8f0;
}

[data-md-color-scheme="slate"] .md-typeset .admonition-title,
[data-md-color-scheme="slate"] .md-typeset summary {
  background-color: rgba(59,130,246,0.15);
}

/* Warning callouts */
[data-md-color-scheme="slate"] .md-typeset .admonition.warning,
[data-md-color-scheme="slate"] .md-typeset .admonition.caution {
  border-color: #f59e0b;
}
[data-md-color-scheme="slate"] .md-typeset .admonition.warning > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.caution > .admonition-title {
  background-color: rgba(245,158,11,0.15);
}

/* Note callouts */
[data-md-color-scheme="slate"] .md-typeset .admonition.note {
  border-color: #3b82f6;
}
[data-md-color-scheme="slate"] .md-typeset .admonition.note > .admonition-title {
  background-color: rgba(59,130,246,0.15);
}

/* Info callouts */
[data-md-color-scheme="slate"] .md-typeset .admonition.info,
[data-md-color-scheme="slate"] .md-typeset .admonition.tip {
  border-color: #06b6d4;
}
[data-md-color-scheme="slate"] .md-typeset .admonition.info > .admonition-title,
[data-md-color-scheme="slate"] .md-typeset .admonition.tip > .admonition-title {
  background-color: rgba(6,182,212,0.15);
}

/* Code block syntax highlighting tweaks */
[data-md-color-scheme="slate"] .md-typeset pre,
[data-md-color-scheme="slate"] .md-typeset code {
  background-color: #111827;
}

/* Search */
[data-md-color-scheme="slate"] .md-search__form {
  background-color: #111827;
}

/* Tables */
[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
  background-color: #111827;
}
[data-md-color-scheme="slate"] .md-typeset table:not([class]) tr:hover {
  background-color: rgba(59,130,246,0.08);
}