/* ============================================================
   KBilling Docs – shared styles (loads after ../assets/css/style.css)
   ============================================================ */

/* Hero (docs home) */
.docs-hero { text-align: center; padding-block: var(--space-14) var(--space-6); }
.docs-hero h1 {
  font-size: clamp(var(--text-3xl), 5vw, var(--text-5xl));
  font-weight: var(--fw-extra);
  letter-spacing: -.02em;
  margin-bottom: var(--space-4);
}
.docs-hero p { color: var(--color-muted); font-size: var(--text-lg); max-width: 620px; margin-inline: auto; }

/* Guide cards grid */
.docs-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  padding-bottom: var(--space-8);
}
.docs-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}
.docs-card:hover { border-color: #2563EB; transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.docs-card__icon {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(56,189,248,.12));
  color: #1D4ED8;
  font-weight: var(--fw-extra);
  font-size: var(--text-lg);
}
.docs-card__title { font-weight: var(--fw-bold); font-size: var(--text-lg); }
.docs-card__desc { color: var(--color-muted); font-size: var(--text-sm); }
.docs-card__link { margin-top: auto; color: #2563EB; font-weight: var(--fw-semi); font-size: var(--text-sm); }

/* Note box */
.docs-note {
  border: 1px solid rgba(37,99,235,.3);
  border-radius: var(--radius-md);
  background: rgba(37,99,235,.06);
  padding: var(--space-5) var(--space-6);
  margin-bottom: var(--space-12);
  font-size: var(--text-sm);
}
.docs-note h2 { font-size: var(--text-base); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.docs-note ul { margin: 0 0 var(--space-3) 1.3em; }
.docs-note li { margin-bottom: var(--space-1); }
.docs-note p { margin: 0; color: var(--color-muted); }
.docs-note a { color: #2563EB; }
.docs-note--warn { border-color: rgba(245,158,11,.4); background: rgba(245,158,11,.08); }

/* Layout: sidebar + content */
.docs-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--space-10);
  padding-block: var(--space-10) var(--space-20);
  align-items: start;
}

/* Sidebar */
.docs-sidebar {
  position: sticky;
  top: calc(var(--nav-h) + var(--space-5));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
}
.docs-sidebar__heading {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: var(--space-3);
}
.docs-sidebar a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  color: var(--color-primary);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
}
.docs-sidebar a:hover { background: var(--color-surface2); }
.docs-sidebar a.active {
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(56,189,248,.12));
  color: #1D4ED8;
  font-weight: var(--fw-bold);
}

/* Content */
.docs-content { max-width: 760px; }
.docs-crumb { font-size: var(--text-sm); color: var(--color-muted); margin-bottom: var(--space-4); }
.docs-crumb a { color: var(--color-muted); }
.docs-crumb a:hover { color: #1D4ED8; }
.docs-content h1 {
  font-size: clamp(var(--text-3xl), 4vw, var(--text-4xl));
  font-weight: var(--fw-extra);
  letter-spacing: -.02em;
  margin-bottom: var(--space-4);
}
.docs-content .docs-lead {
  font-size: var(--text-lg);
  color: var(--color-muted);
  margin-bottom: var(--space-8);
}
.docs-content h2 {
  font-size: var(--text-2xl);
  font-weight: var(--fw-bold);
  margin: var(--space-10) 0 var(--space-4);
  scroll-margin-top: calc(var(--nav-h) + var(--space-6));
}
.docs-content h3 {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  margin: var(--space-6) 0 var(--space-3);
}
.docs-content p { margin-bottom: var(--space-4); }
.docs-content ul, .docs-content ol { margin: 0 0 var(--space-5) 1.4em; }
.docs-content ul { list-style: disc; }
.docs-content ol { list-style: decimal; }
.docs-content li { margin-bottom: var(--space-2); }
.docs-content a { color: #2563EB; text-decoration: underline; text-underline-offset: 3px; }
.docs-content a:hover { color: #1D4ED8; }
.docs-content strong { font-weight: var(--fw-bold); }
.docs-content code {
  padding: .15em .45em;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .875em;
  color: #1D4ED8;
}

/* TOC */
.docs-toc {
  border: 1px solid var(--color-border);
  border-left: 3px solid #2563EB;
  border-radius: var(--radius-md);
  background: var(--color-surface2);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-8);
}
.docs-toc p { font-weight: var(--fw-bold); font-size: var(--text-sm); margin-bottom: var(--space-2); }
.docs-toc ol { margin: 0 0 0 var(--space-5); color: var(--color-muted); font-size: var(--text-sm); }
.docs-toc a { color: var(--color-muted); text-decoration: none; }
.docs-toc a:hover { color: #2563EB; text-decoration: underline; }

/* Code blocks */
.docs-code {
  margin: 0 0 var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: #0B1220;
  color: #E2E8F0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: var(--text-sm);
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}
.docs-code code, .docs-code .cmd { color: #7DD3FC; }

/* Tables (compare plans etc.) */
.docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--space-6);
}
.docs-table th, .docs-table td {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.docs-table th { font-weight: var(--fw-bold); background: var(--color-surface2); }
.docs-table tr:hover td { background: rgba(37,99,235,.04); }

/* FAQ list */
.docs-faq dt { font-weight: var(--fw-bold); margin-top: var(--space-5); }
.docs-faq dd { color: var(--color-muted); margin: var(--space-1) 0 0; }

/* Next-page card */
.docs-next {
  margin-top: var(--space-12);
  padding: var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  text-align: center;
}
.docs-next p { font-weight: var(--fw-semi); margin-bottom: var(--space-4); color: var(--color-muted); }

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  .docs-code { border-color: #1E293B; }
}

/* Mobile */
@media (max-width: 900px) {
  .docs-layout { grid-template-columns: 1fr; gap: var(--space-6); }
  .docs-sidebar { position: static; }
  .docs-sidebar a { display: inline-block; margin: 2px 4px 2px 0; }
  .docs-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .docs-hero { padding-block: var(--space-10) var(--space-4); }
  .docs-grid { grid-template-columns: 1fr; }
  .docs-content h1 { font-size: var(--text-2xl); }
  .docs-content h2 { font-size: var(--text-xl); }
}

.docs-note__title { font-size: var(--text-base); font-weight: var(--fw-bold); margin-bottom: var(--space-2); }
.docs-note ul { margin: 0 0 var(--space-2) var(--space-5); }
.docs-note li { margin-bottom: var(--space-1); }
.docs-note p { margin: 0; color: var(--color-muted); }

/* Bare pre/code blocks in guide bodies */
.docs-content pre {
  background: #0B1220;
  color: #E2E8F0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4) var(--space-5);
  overflow-x: auto;
  font-size: var(--text-sm);
  line-height: 1.7;
  margin: 0 0 var(--space-5);
}
.docs-content pre code {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: inherit;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre;
}
/* inline code */
.docs-content code {
  background: var(--color-surface2);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 1px 6px;
  font-size: .92em;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}