/* AI-Generated Code - 2026-05-02 - Claude Opus 4.7 */
/* =========================================================
   Page-content overrides for the reference's .content styles
   (the original CSS forces pre/blockquote to 50% width because
    it's tuned for the API-reference 2-column layout — we want
    full-width docs).
   ========================================================= */

/* Make body a flex column so footer hugs the bottom on short pages */
body.versions { display: flex; flex-direction: column; min-height: 100vh; }
body.versions .page-wrapper { flex: 1 0 auto; }

/* Restore full-width content blocks */
.content pre,
.content blockquote,
.page-wrapper .dark-box,
.content > h1, .content > h2, .content > h3, .content > h4, .content > h5, .content > h6,
.content > p, .content > table, .content > ul, .content > ol, .content > aside, .content > dl,
#content pre,
#content blockquote,
#content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
#content p, #content table, #content ul, #content ol, #content aside, #content dl {
  width: auto !important;
  margin-right: 0 !important;
}

/* Headings — match the family/colors used elsewhere on the portal */
.content h1, #content h1 {
  font-size: 36px !important;
  font-weight: 600 !important;
  color: #155aca;
  padding-top: 20px !important;
  padding-bottom: 16px !important;
  margin-top: 0;
}
/* AI-Generated Code - 2026-05-05 - Claude: extra vertical rhythm between major doc sections */
.content h2, #content h2 {
  font-size: 28px !important;
  font-weight: 700 !important;
  color: #cf322c;
  margin-top: 3rem;
  margin-bottom: 1rem;
  padding-bottom: 4px;
}
.content h3, #content h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #025e8c;
  margin-top: 2.75rem;
  margin-bottom: 0.75rem;
  padding-bottom: 4px;
  border-bottom: 1px solid #ececec;
}
.content h4, #content h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #3399cc;
  margin-top: 22px;
  margin-bottom: 8px;
}
.content h2, .content h3, .content h4, .content h5,
#content h2, #content h3, #content h4, #content h5 {
  scroll-margin-top: 90px;
}

.content > p, .content p, #content p { font-size: 16px; line-height: 1.6; color: #28323a; margin: 0 0 1rem; }
.content ul, .content ol, #content ul, #content ol { padding-left: 1.5rem; margin-bottom: 1rem; }
.content li, #content li { font-size: 16px; line-height: 1.55; }

.content hr, #content hr { border: 0; border-top: 1px solid #ececec; margin: 3.25rem 0; }

.content a, #content a { color: #2164b2; }
.content a:hover, #content a:hover { color: #144278; text-decoration: underline; }

/* Inline code */
.content :not(pre) > code, #content :not(pre) > code {
  background: #f6f8fa;
  border: 1px solid #e5e7eb;
  color: #24292e;
  padding: 1px 5px;
  border-radius: 3px;
  font-size: .9em;
}

/* Code blocks — light theme, easier to read in docs context */
.content pre, #content pre {
  background: #f6f8fa !important;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #2164b2;
  border-radius: 4px;
  padding: 14px 18px !important;
  margin: 14px 0 18px;
  overflow-x: auto;
  color: #24292e;
}
.content pre code, #content pre code {
  background: transparent;
  border: 0;
  padding: 0;
  color: inherit;
  font-size: 14px;
}

/* Tables — keep Bootstrap base + tighten */
.content .table-responsive, #content .table-responsive { margin: 12px 0 20px; }
.content table, #content table { font-size: 15px; }
.content table thead th, #content table thead th {
  background: #f4f5f7;
  color: #1f2933;
  font-weight: 600;
  border-bottom: 2px solid #e5e7eb;
  vertical-align: middle;
}
.content table tbody td, #content table tbody td {
  vertical-align: top;
}

/* Callouts */
.op-callout {
  background: #f0f6ff;
  border-left: 4px solid #155aca;
  padding: 12px 14px;
  border-radius: 4px;
  margin: 14px 0 18px;
  font-size: 15px;
  line-height: 1.55;
}
.op-callout.warn   { background: #fff7e6; border-left-color: #d97706; }
.op-callout.danger { background: #fdecec; border-left-color: #cf322c; }
.op-callout p:last-child { margin-bottom: 0; }
.op-callout ul:last-child { margin-bottom: 0; }

/* Status badges */
.op-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 12px;
  vertical-align: middle;
  margin-left: 6px;
}
.op-badge.current     { background: #e6f3eb; color: #15803d; }
.op-badge.deprecated  { background: #fff4e5; color: #b45309; }
.op-badge.eol         { background: #fdecec; color: #b91c1c; }
.op-badge.upcoming    { background: #e6f0ff; color: #1d4ed8; }
.op-badge.breaking    { background: #fdecec; color: #b91c1c; }

/* Sidebar (left nav) — active link highlight */
.tocify-wrapper .menu li a.active {
  background: #e3e6ea;
  color: #28323a !important;
  font-weight: 600;
}

/* Constrain main content width on very wide screens for readability */
@media (min-width: 1400px) {
  #content { max-width: 1180px; }
}

/* On small screens, override the reference's mobile content padding so
   our markdown blocks (callouts, tables) keep some breathing room */
@media (max-width: 767px) {
  .content, #content { padding: 10px 20px !important; }
  .content > h1, .content > h2, .content > h3, .content > h4,
  .content > p, .content > table, .content > ul, .content > ol,
  #content h1, #content h2, #content h3, #content h4,
  #content p, #content table, #content ul, #content ol {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .content pre, #content pre, .op-callout { padding-left: 14px !important; padding-right: 14px !important; }
}