/*
 * Targeted responsive safeguards for retained database-backed pages.
 * Keep every rule below a legacy wrapper so plugin-managed pages are untouched.
 */

.cs-legal,
.cs-legal :where(.cs-shell, .cs-layout, .cs-terms, .cs-sections, .cs-term, .cs-section),
.cs-faq,
.cs-faq :where(.cs-shell, .cs-fit-grid, .cs-section, .cs-faq-list, .cs-item, .cs-cta-grid),
.essay-page,
.essay-page :where(.essay-shell, .essay-hero, .essay-body, .essay-end) {
  min-width: 0;
}

.cs-legal .cs-hero h1,
.cs-faq .cs-hero h1,
.essay-page .essay-hero h1 {
  max-width: 100%;
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: normal;
}

.cs-legal :where(h2, h3, p, li, a, td, th, code),
.cs-faq :where(h2, h3, p, li, a, td, th, code),
.essay-page :where(h2, h3, p, li, a, td, th, code) {
  overflow-wrap: anywhere;
  word-break: normal;
}

.cs-legal :where(img, svg, video, iframe),
.cs-faq :where(img, svg, video, iframe),
.essay-page :where(img, svg, video, iframe) {
  max-width: 100%;
}

.cs-legal :where(pre, .cs-table),
.cs-faq :where(pre, table),
.essay-page :where(pre, table) {
  max-width: 100%;
  overflow-x: auto;
}

@media (max-width: 780px) {
  .cs-retained-content .cs-faq,
  .cs-retained-content .essay-page {
    padding-bottom: 0;
  }
}