:root {
  --brand: #213f85;
  --brand-soft: #2a4b8c;
  --brand-tint: #e8eef7;
}

[data-theme="light"], :root:not([data-theme="dark"]) {
  --pico-primary: var(--brand);
  --pico-primary-hover: #1a3068;
  --pico-primary-focus: rgba(33, 63, 133, 0.25);
}

/* Top nav */
body > header.site-header {
  border-bottom: 1px solid var(--pico-muted-border-color);
  margin-bottom: 0;
  padding: 0.6rem 0;
}
body > header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
body > header.site-header .brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  color: var(--brand);
  text-decoration: none;
  font-size: 1.15rem;
}
body > header.site-header .brand img,
body > header.site-header .brand svg { height: 28px; width: auto; }
body > header.site-header nav ul {
  display: flex;
  gap: 0.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: wrap;
}
body > header.site-header nav a {
  display: inline-block;
  padding: 0.4rem 0.8rem;
  border-radius: 0.4rem;
  text-decoration: none;
  color: var(--pico-color);
}
body > header.site-header nav a:hover { background: var(--brand-tint); }
body > header.site-header nav a.disabled,
body > header.site-header nav a.disabled:hover {
  color: var(--pico-muted-color);
  background: transparent;
  cursor: not-allowed;
  opacity: 0.55;
  pointer-events: none;
}
body.page-home    nav a[data-nav="home"],
body.page-features nav a[data-nav="features"],
body.page-examples nav a[data-nav="examples"],
body.page-api      nav a[data-nav="api"],
body.page-download nav a[data-nav="download"] {
  background: var(--brand);
  color: #fff;
}

/* Hero */
.hero {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-soft) 100%);
  color: #fff;
  padding: 4rem 0 3rem;
  margin-bottom: 2rem;
}
.hero h1 { color: #fff; font-size: clamp(2rem, 5vw, 3.4rem); margin: 0 0 0.6rem; }
.hero p.lead { font-size: 1.15rem; opacity: 0.92; max-width: 56ch; margin-bottom: 1.5rem; }
.hero .actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }
.hero .actions a.button-secondary {
  background: rgba(255,255,255,0.15);
  color: #fff;
  border-color: rgba(255,255,255,0.4);
}
.hero .actions a.button-secondary:hover { background: rgba(255,255,255,0.25); }

/* Card grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}
.card-grid > article { margin: 0; }
.card-grid > article h3 { color: var(--brand); margin-top: 0; font-size: 1.1rem; }

/* Code blocks */
pre {
  position: relative;
  margin: 1rem 0 1.5rem;
  border-radius: 0.5rem;
}
pre[class*="language-"] { padding: 1rem 1rem; }
.copy-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: rgba(255, 255, 255, 0.1);
  color: #ddd;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.3rem;
  padding: 0.2rem 0.6rem;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: var(--pico-font-family-sans-serif);
  transition: background 0.15s, color 0.15s;
}
.copy-btn:hover { background: rgba(255, 255, 255, 0.2); color: #fff; }
.copy-btn.copied { background: #2a8a4d; color: #fff; border-color: #2a8a4d; }

/* API reference table */
.api-table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 2rem;
  font-size: 0.95rem;
}
.api-table th, .api-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--pico-muted-border-color);
  vertical-align: top;
}
.api-table th { background: var(--brand-tint); color: var(--brand); }
.api-table code { white-space: nowrap; }

/* Anchor offset for sticky-feeling deep links */
.anchor-target { scroll-margin-top: 1rem; }

/* Footer */
body > footer.site-footer {
  border-top: 1px solid var(--pico-muted-border-color);
  margin-top: 3rem;
  padding: 1.5rem 0;
  font-size: 0.9rem;
  color: var(--pico-muted-color);
}
body > footer.site-footer .container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Tighter list spacing inside feature cards */
.card-grid ul { margin: 0; padding-left: 1.1rem; }
.card-grid ul li { margin: 0.25rem 0; }

/* Numbered example titles */
.example h3 .num {
  display: inline-block;
  background: var(--brand);
  color: #fff;
  border-radius: 50%;
  width: 1.7em;
  height: 1.7em;
  line-height: 1.7em;
  text-align: center;
  font-size: 0.85em;
  margin-right: 0.5em;
  font-weight: 700;
}

/* Compact contrast variant for callouts */
.callout {
  background: var(--brand-tint);
  border-left: 4px solid var(--brand);
  padding: 0.75rem 1rem;
  border-radius: 0.4rem;
  margin: 1rem 0;
}