/* =============================================================
   LEGAL PAGES — ERStyles.com
   Shared styles for the long-form policy pages (Terms of Use,
   Privacy Policy, Cookie Policy, Refund Policy).

   Design goals:
     - A narrower reading column than .container allows. Legal
       text is dense; long lines make it exhausting to read.
     - Clear visual rhythm between numbered sections.
     - A "plain-English summary" box so visitors can get the
       gist without reading every clause.
   ============================================================= */

.legal-page {
  padding: var(--space-lg) 0 var(--space-xl);
}

/* Cap the reading column well below the site-wide .container width.
   ~70 characters per line is the comfortable ceiling for body text. */
.legal-page__container {
  max-width: 780px;
}

.legal-page h1 {
  font-size: var(--text-h1);
  margin-bottom: var(--space-xs);
}

/* "Last updated" line directly under the title. */
.legal-page__updated {
  color: var(--color-text-muted);
  font-size: var(--text-small);
  margin-bottom: var(--space-lg);
}

/* Plain-English summary box at the top of each policy. */
.legal-page__summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-lg);
}

.legal-page__summary h2 {
  font-size: var(--text-h4);
  margin-bottom: var(--space-sm);
}

.legal-page__summary ul {
  padding-left: var(--space-md);
}

.legal-page__summary li + li {
  margin-top: var(--space-xs);
}

/* Section headings — numbered in the HTML, not via CSS counters,
   so anchors/links and skim-reading stay predictable. */
.legal-page h2 {
  font-size: var(--text-h3);
  margin: var(--space-lg) 0 var(--space-sm);
}

.legal-page h3 {
  font-size: var(--text-h4);
  margin: var(--space-md) 0 var(--space-xs);
}

.legal-page p {
  margin-bottom: var(--space-sm);
}

.legal-page ul,
.legal-page ol {
  padding-left: var(--space-md);
  margin-bottom: var(--space-sm);
}

.legal-page li {
  margin-bottom: var(--space-xs);
}

.legal-page a {
  color: var(--color-steel-blue);
}

/* Tables (service-provider list, cookie list). On phones the table
   scrolls sideways inside its wrapper instead of breaking the page. */
.legal-page__table-wrap {
  overflow-x: auto;
  margin-bottom: var(--space-sm);
}

.legal-page table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-small);
}

.legal-page th,
.legal-page td {
  text-align: left;
  vertical-align: top;
  padding: var(--space-xs) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

.legal-page th {
  font-weight: var(--font-weight-semibold);
  background: var(--color-surface);
}

/* Inline code style for cookie / localStorage key names. */
.legal-page code {
  font-size: 0.85em;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
  word-break: break-all;
}

/* Emphasis box for the not-medical-advice warning in the Terms. */
.legal-page__notice {
  background: var(--color-coral-pastel);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
}