/*============================================================================================*/
/* WEBHOOKS (USVN)                                                                            */
/*============================================================================================*/
:root{
  --usvn-primary:#0d6efd;
  --usvn-primary-600:#0b5ed7;
  --usvn-text:#1f2937;
  --usvn-muted:#6b7280;
  --usvn-border:#e5e7eb;
  --usvn-bg:#ffffff;

  /* Code theme */
  --usvn-code-bg:#1e293b;     /* dark blue-gray */
  --usvn-code-border:#0f172a; /* deeper border */
  --usvn-code-text:#f8fafc;   /* near-white */
}

/* Base layout */
.usvn-webhook-docs{
  color:var(--usvn-text);
  font-size:16px;
  line-height:1.6;
  margin-bottom:4rem;
}
.usvn-webhook-docs h2{
  font-size:2rem;
  font-weight:700;
  color:#1a1a1a;
  margin:0 0 1.5rem;
}
.usvn-webhook-docs h3{
  margin:3rem 0 1rem;
  font-size:1.5rem;
  font-weight:600;
  color:#333;
  border-bottom:2px solid #eee;
  padding-bottom:.4rem;
}
.usvn-webhook-docs h4{
  margin:2rem 0 .8rem;
  font-size:1.125rem;
  font-weight:600;
  color:#444;
}
.usvn-webhook-docs p,
.usvn-webhook-docs ul{ margin-bottom:1.2rem; }
.usvn-webhook-docs ul{
  padding-left:1.4rem;
  list-style:disc;
}
.usvn-webhook-docs li code{
  background:#f3f4f6;
  border:1px solid var(--usvn-border);
  padding:2px 6px;
  border-radius:6px;
}

/* Event cards */
.usvn-webhook-events{ margin-top:16px; }
.usvn-webhook-event{
  background:var(--usvn-bg);
  border:1px solid var(--usvn-border);
  border-radius:14px;
  padding:16px 18px;
  box-shadow:0 2px 10px rgba(0,0,0,.03);
  margin-bottom:14px;
}
.usvn-webhook-event h4{
  margin:0 0 8px;
  display:flex;
  gap:10px;
  align-items:center;
}
.usvn-webhook-event code{
  padding:2px 8px;
  border-radius:999px;
  font-size:12px;
}
.usvn-webhook-event details{
  margin-top:10px;
  border-top:1px dashed var(--usvn-border);
  padding-top:10px;
}
.usvn-webhook-event summary{
  cursor:pointer;
  font-weight:600;
}
.usvn-webhook-event summary::-webkit-details-marker{ display:none; }
.usvn-webhook-event summary::after{
  content:"▾";
  margin-left:6px;
  color:var(--usvn-muted);
}

/* TOC / toolbar */
.usvn-webhook-docs__toolbar{
  display:flex;
  justify-content:flex-end;
  margin:10px 0 6px;
}
.usvn-webhook-toc{
  background:#f9f9f9;
  border:1px solid var(--usvn-border);
  border-radius:12px;
  padding:12px;
  margin:10px 0 18px;
}
.usvn-webhook-toc strong{
  display:block;
  margin-bottom:.6rem;
}
.usvn-webhook-toc ul{
  margin:0;
  padding-left:1.2rem;
  columns:2;
  column-gap:24px;
}
.usvn-webhook-toc li{ margin:.3rem 0; }
.usvn-webhook-toc a{
  text-decoration:none;
  color:var(--usvn-text);
}
.usvn-webhook-toc a:hover{ color:var(--usvn-primary); }

/* Heading anchor (#) */
.usvn-webhook-event h4 .usvn-anchor{
  margin-left:8px;
  opacity:0;
  transition:opacity .15s ease;
  font-size:13px;
  text-decoration:none;
  color:#999;
}
.usvn-webhook-event h4:hover .usvn-anchor{
  opacity:.9;
}
.usvn-anchor:hover{ color:#0073aa; }

/* Copy button */
.usvn-webhook-docs .button.usvn-copy{
  margin:6px 0 8px;
  background:var(--usvn-primary);
  border:1px solid var(--usvn-primary);
  color:#fff;
  border-radius:10px;
  padding:6px 10px;
  font-size:12px;
  cursor:pointer;
}
.usvn-webhook-docs .button.usvn-copy:hover{
  background:var(--usvn-primary-600);
  border-color:var(--usvn-primary-600);
}

/* Dark code blocks */
.usvn-webhook-docs pre{
  background:var(--usvn-code-bg);
  color:var(--usvn-code-text);
  border-radius:12px;
  padding:14px;
  overflow:auto;
  margin-bottom:1.5rem;
  font-size:.9rem;
  line-height:1.5;
  border:1px solid var(--usvn-code-border);
}
.usvn-webhook-docs pre code{
  background:transparent !important;
  color:inherit !important;
  font-family:Consolas, Monaco, 'Courier New', monospace;
  font-size:.9rem;
  white-space:pre;
}

/* Optional: basic token colors if a highlighter adds .token* classes */
.usvn-webhook-docs pre code .token.comment{ color:#94a3b8; }
.usvn-webhook-docs pre code .token.punctuation{ color:#cbd5e1; }
.usvn-webhook-docs pre code .token.property,
.usvn-webhook-docs pre code .token.tag,
.usvn-webhook-docs pre code .token.constant,
.usvn-webhook-docs pre code .token.symbol,
.usvn-webhook-docs pre code .token.deleted{ color:#f87171; }
.usvn-webhook-docs pre code .token.selector,
.usvn-webhook-docs pre code .token.attr-name,
.usvn-webhook-docs pre code .token.string,
.usvn-webhook-docs pre code .token.char,
.usvn-webhook-docs pre code .token.builtin,
.usvn-webhook-docs pre code .token.inserted{ color:#34d399; }
.usvn-webhook-docs pre code .token.operator,
.usvn-webhook-docs pre code .token.entity,
.usvn-webhook-docs pre code .token.url,
.usvn-webhook-docs pre code .language-css .token.string,
.usvn-webhook-docs pre code .style .token.string{ color:#facc15; }
.usvn-webhook-docs pre code .token.atrule,
.usvn-webhook-docs pre code .token.attr-value,
.usvn-webhook-docs pre code .token.keyword{ color:#60a5fa; }
.usvn-webhook-docs pre code .token.function,
.usvn-webhook-docs pre code .token.class-name{ color:#f472b6; }
.usvn-webhook-docs pre code .token.regex,
.usvn-webhook-docs pre code .token.important,
.usvn-webhook-docs pre code .token.variable{ color:#facc15; }

/* Responsive tweaks */
@media (max-width: 768px){
  .usvn-webhook-event{ padding:14px; }
  .usvn-webhook-docs h2{ font-size:24px; }
  .usvn-webhook-docs h3{ font-size:20px; }
  .usvn-webhook-toc ul{ columns:1; }
}

/* --- Two-column docs layout --- */
.usvn-docs-layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap:28px;
  align-items:start;
}

/* Sidebar TOC */
.usvn-docs-toc{
  position:sticky;
  top:90px;                /* adjust if your header is taller */
  max-height: calc(100vh - 120px);
  overflow:auto;
  border:1px solid var(--usvn-border);
  border-radius:12px;
  background:#fafafa;
  padding:14px;
}
.usvn-docs-toc h5{
  margin:0 0 8px;
  font-size:13px;
  color:var(--usvn-muted);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.usvn-docs-toc ul{
  list-style:none;
  margin:0;
  padding:0;
}
.usvn-docs-toc li{ margin:6px 0; }
.usvn-docs-toc a{
  display:block;
  text-decoration:none;
  color:var(--usvn-text);
  padding:6px 8px;
  border-radius:8px;
}
.usvn-docs-toc a:hover{ background:#f0f4ff; color:var(--usvn-primary); }
.usvn-docs-toc a.is-active{
  background:var(--usvn-chip-bg);
  color:var(--usvn-chip-text);
  font-weight:600;
}

/* Main column */
.usvn-docs-main{ min-width:0; }

/* Mobile: fall back to single column */
@media (max-width: 992px){
  .usvn-docs-layout{ grid-template-columns: 1fr; }
  .usvn-docs-toc{ position:static; max-height:none; }
}

/* Heading offset so scrollIntoView lands nicely below sticky bars */
.usvn-docs-main h3[id],
.usvn-webhook-event h4[id]{
  scroll-margin-top: 75px; /* adjust to your header height */
}

/* Optional: visual active state for sidebar links */
#usvn-toc a.is-active { color: var(--usvn-primary); font-weight: 600; }
/* indent nested event items a bit and reduce size slightly */
.usvn-docs-toc ul .usvn-toc-sub {
  margin-top: 6px;
  margin-left: 14px;
  padding-left: 12px;
  border-left: 1px solid var(--usvn-border, #e5e7eb);
}
.usvn-docs-toc ul .usvn-toc-sub a {
  font-size: 0.95em;
  opacity: .95;
}