/* ============================================================
   Content page layout (articles)
   ============================================================ */

/* Page content wrapper — adds breathing room for content pages only */
.page-content {
  padding-block: var(--space-xl) var(--space-2xl);
}

/* Article prose — full container width; width:100% overrides any inherited size constraint */
.prose {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Ensure all direct block children of prose also use the full width */
.prose > p,
.prose > h1,
.prose > h2,
.prose > h3,
.prose > h4,
.prose > h5,
.prose > h6,
.prose > ul,
.prose > ol,
.prose > blockquote,
.prose > table,
.prose > .fr-code-block,
.prose > .table-scroll,
.prose > .related-nav,
.prose > details {
  width: 100%;
  box-sizing: border-box;
}
.prose > h1:first-child { margin-top: 0; }
.prose h2 {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 2px solid var(--color-border-light);
}
.prose h2:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }
.prose h3 { margin-top: var(--space-xl); }

/* Lists inside prose */
.prose ul, .prose ol {
  padding-left: var(--space-lg);
  margin-bottom: var(--space-md);
}
.prose li {
  margin-bottom: var(--space-xs);
  line-height: 1.75;
}
/* Style list bullets to accent colour */
.prose ul > li::marker { color: var(--color-accent); }
.prose ol > li::marker { color: var(--color-accent); font-weight: 600; }

/* Ordered list inside numbered steps */
.prose ol li { counter-increment: none; }

/* Related links box */
.related-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin: var(--space-xl) 0;
  padding: var(--space-lg);
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}
.related-nav-label {
  width: 100%;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: var(--space-xs);
}
.related-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.85rem;
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  color: var(--color-accent-alt);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.related-nav a:hover { background: var(--color-accent-alt); color: #fff; border-color: var(--color-accent-alt); }

/* Common Pitfalls section heading */
.pitfalls-section h2, .pitfalls-section h3 { color: #8b3a3a; }