/**
 * QDS Documentation Layout Styles
 *
 * This stylesheet provides consistent layout for all QDS documentation pages.
 * It ensures the toolbar is full-width while content is centered with a max-width.
 */

/* Reset body margins/padding for docs */
body {
  margin: 0;
  padding: 0;
  background-color: var(--theme-background-tertiary);
}

/* Toolbar should always be full width */
qds-docs-toolbar {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Content wrapper for centered, constrained content */
.docs-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--theme-background-primary);
}

/* Ensure examples and sections have consistent spacing */
.example {
  margin: 40px 0;
}

.example h2 {
  margin-bottom: 10px;
  color: var(--theme-text-primary);
}

.example p {
  color: var(--theme-text-secondary);
  font-style: italic;
  margin-bottom: 20px;
}

/* Page headings */
.docs-content h1 {
  color: var(--theme-text-primary);
  margin-top: 0;
  padding-top: 20px;
}

/* Code examples in docs */
.docs-content pre {
  background-color: var(--theme-background-tertiary);
  padding: 16px;
  border-radius: 4px;
  overflow-x: auto;
}

.docs-content code {
  background-color: var(--theme-background-tertiary);
  padding: 2px 6px;
  border-radius: 3px;
  font-family: 'IBM Plex Mono', monospace;
}

/* Tables in documentation */
.docs-content table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
}

.docs-content table th,
.docs-content table td {
  padding: 12px;
  text-align: left;
  border-bottom: 1px solid var(--theme-border-primary);
}

.docs-content table th {
  background-color: var(--theme-background-secondary);
  font-weight: 600;
  color: var(--theme-text-primary);
}

.docs-content table td {
  color: var(--theme-text-secondary);
}