/*
BBQToolbox content-pages.css
Generated chart, guide, comparison, troubleshooting, reference, and shared article sections.
*/

.quick-answer,
.rule-of-thumb {
  margin-block: 1rem;
  padding: 1rem;
  border-left: 6px solid var(--accent);
  background: linear-gradient(90deg, var(--surface-warm), var(--surface));
}

.content-section,
.page-content,
.guide-content,
.related-links,
.causes,
.fixes,
.calculator-notes,
.notice-card,
.primary-table-section,
.assumptions-section,
.tips-section,
.takeaways-section,
.mistakes-section,
.definition-section,
.why-happens-section,
.why-matters-section,
.what-to-do-section,
.steps-section,
.why-section,
.winner-summary,
.best-for-section,
.breakdown-section,
.final-recommendation,
.recoverability-card,
.quick-diagnosis,
.right-now-section,
.causes-section,
.prevention-section,
.recommendations-section,
.reference-notes-section,
.faq-section,
.related-section,
.related-pages,
.important-notes,
.utility-panel,
.comparison-grid > section {
  margin-block: 1.25rem;
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.quick-answer h2,
.notice-card h2,
.rule-of-thumb h2,
.content-section h2,
.primary-table-section h2,
.assumptions-section h2,
.tips-section h2,
.takeaways-section h2,
.mistakes-section h2,
.definition-section h2,
.why-happens-section h2,
.why-matters-section h2,
.what-to-do-section h2,
.steps-section h2,
.why-section h2,
.winner-summary h2,
.best-for-section h2,
.breakdown-section h2,
.final-recommendation h2,
.recoverability-card h2,
.quick-diagnosis h2,
.right-now-section h2,
.causes-section h2,
.prevention-section h2,
.recommendations-section h2,
.reference-notes-section h2,
.faq-section h2,
.related-section h2,
.causes h2,
.fixes h2,
.related-links h2,
.calculator-notes h2,
.page-content h2,
.guide-content h2,
.related-pages h2,
.important-notes h2 {
  margin: 0 0 0.55rem;
  font-size: 1.18rem;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.quick-answer p,
.notice-card p,
.rule-of-thumb p,
.content-section p,
.page-content p,
.guide-content p {
  margin: 0;
}

.content-section p + p,
.page-content p + p,
.guide-content p + p,
.breakdown-section p + p,
.causes-section p + p,
.mistakes-section p + p {
  margin-top: 0.75rem;
}

.action-list,
.check-list,
.mistake-list,
.caution-list,
.notice-card ul,
.assumptions-section ul,
.tips-section ul,
.takeaways-section ul,
.what-to-do-section ul,
.steps-section ol,
.step-list,
.why-section ul,
.winner-summary ul,
.best-for-section ul,
.right-now-section ul,
.causes-section ul,
.prevention-section ul,
.recommendations-section ul,
.related-section ul,
.causes ul,
.fixes ol,
.related-links ul,
.important-notes ul,
.related-pages ul {
  margin: 0.35rem 0 0;
  padding-left: 1.25rem;
}

.action-list li,
.check-list li,
.mistake-list li,
.caution-list li,
.notice-card li,
.assumptions-section li,
.tips-section li,
.takeaways-section li,
.what-to-do-section li,
.steps-section li,
.step-list li,
.why-section li,
.winner-summary li,
.best-for-section li,
.right-now-section li,
.causes-section li,
.prevention-section li,
.recommendations-section li,
.related-section li,
.causes li,
.fixes li,
.related-links li,
.important-notes li,
.related-pages li {
  margin: 0.45rem 0;
}

.step-list {
  display: grid;
  gap: 0.5rem;
}

.step-list > li::marker,
.steps-section ol > li::marker {
  color: var(--accent-dark);
  font-weight: 800;
}

.mistakes-section section + section,
.breakdown-section section + section,
.causes-section section + section {
  margin-top: 0.85rem;
}

.mistakes-section h3,
.breakdown-section h3,
.causes-section h3,
.cause-card h3,
.step-list h3 {
  margin: 0.65rem 0 0.35rem;
  font-size: 1.05rem;
  line-height: 1.25;
}

.cause-card > h3 {
    margin-bottom: 0.75rem;
    font-size:1.1rem;
}

.cause-card h4 {
    margin: 0.75rem 0 0.35rem;
}

.cause-card ul {
    margin: 0.35rem 0 0.75rem;
    padding-left: 1.25rem;
}

.cause-card p {
    margin: 0.35rem 0 0.75rem;
}

.decision-grid,
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-block: 1rem;
}

.decision-card,
.cause-card {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.62);
}

.faq-section details {
  border-top: 1px solid var(--line);
  padding-block: 0.75rem;
}

.faq-section details:first-of-type {
  border-top: 0;
}

.faq-section summary {
  cursor: pointer;
  color: var(--text);
  font-weight: 750;
}

.faq-section p {
  margin: 0.55rem 0 0;
  color: var(--muted);
}

.related-section .related-group + .related-group,
.related-group + .related-group {
  margin-top: 1rem;
}

.related-section h3,
.related-group h3 {
  margin: 0.7rem 0 0.45rem;
  color: var(--accent-dark);
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.related-links ul {
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

.notes-list,
.assumptions-list,
.result-notes-list {
  margin: 0.65rem 0 0;
  padding-left: 1.2rem;
  color: var(--muted);
}

.reference-chart-section h2 {
  margin-top: 1.25rem;
}

.supporting-content .content-section,
.related-pages,
.important-notes {
  margin-block: 1rem;
  padding: 1rem;
}

.supporting-content .content-section h2,
.related-pages h2,
.important-notes h2 {
  margin: 0 0 0.5rem;
  font-size: 1.08rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.misconceptions-section
{
	margin-bottom:2rem;
}

.misconceptions-section > section {
    margin-bottom: 1.25rem;
}

.misconceptions-section > section:not(:last-child) {
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--line);
}

.misconceptions-section h3
{
	margin-bottom:0.25rem;
}

.misconceptions-section p
{
	margin:0.25rem 0;
}

@media (max-width: 600px) {
  .quick-answer,
  .notice-card,
  .utility-panel,
  .content-section,
  .rule-of-thumb,
  .primary-table-section,
  .calculator-notes,
  .comparison-grid > section,
  .causes,
  .fixes,
  .page-content,
  .guide-content,
  .related-links,
  .related-section,
  .faq-section,
  .assumptions-section,
  .tips-section,
  .takeaways-section,
  .mistakes-section,
  .definition-section,
  .why-happens-section,
  .why-matters-section,
  .what-to-do-section,
  .steps-section,
  .why-section,
  .winner-summary,
  .best-for-section,
  .breakdown-section,
  .final-recommendation,
  .recoverability-card,
  .quick-diagnosis,
  .right-now-section,
  .causes-section,
  .prevention-section,
  .recommendations-section,
  .reference-notes-section {
    border-radius: 12px;
  }
}

@media (min-width: 920px) {
  .quick-answer,
  .notice-card,
  .rule-of-thumb,
  .content-section,
  .page-content,
  .guide-content,
  .related-links,
  .causes,
  .fixes,
  .calculator-notes,
  .primary-table-section,
  .assumptions-section,
  .tips-section,
  .takeaways-section,
  .mistakes-section,
  .definition-section,
  .why-happens-section,
  .why-matters-section,
  .what-to-do-section,
  .steps-section,
  .why-section,
  .winner-summary,
  .best-for-section,
  .breakdown-section,
  .final-recommendation,
  .recoverability-card,
  .quick-diagnosis,
  .right-now-section,
  .causes-section,
  .prevention-section,
  .recommendations-section,
  .reference-notes-section,
  .faq-section,
  .related-section {
    padding: 1.25rem;
  }

  .comparison-grid,
  .decision-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media print {
  .quick-answer,
  .utility-panel,
  .content-section,
  .rule-of-thumb,
  .chart-table-wrap,
  .table-wrap {
    box-shadow: none;
  }
}