/* ==========================================================================
   FlowThrough · public/legal.css: the subpages (aviso legal, privacidad, cookies, 404). They wear the home's
   header and footer from styles.css; this file only sets the reading column. Tokens only.
   ========================================================================== */

/* the header is sticky and takes no flow height on the home (it overlays the hero), so the column starts below it */
.subpage-main {
  padding-top: calc(var(--header-h) + clamp(40px, 6vw, 80px));
  padding-bottom: var(--sp-section);
}

/* one readable column, starting at the page's text edge like the home's paragraph and footer */
.prose > * { max-width: 46rem; }
.prose h1 {
  margin: 0 0 32px;
  font-size: var(--fs-h2-soft);
  font-weight: var(--fw-display);
  line-height: 1.2;
}
.prose h2 {
  margin: 48px 0 12px;
  font-size: 1.25rem;
  font-weight: var(--fw-ui);
  line-height: 1.35;
}
.prose h3 {
  margin: 32px 0 8px;
  font-size: var(--fs-body);
  font-weight: var(--fw-ui);
}
.prose p, .prose ul, .prose ol, .prose table { margin: 0 0 16px; }
.prose ul, .prose ol { padding-left: 1.25em; }
.prose li { margin-bottom: 8px; }
.prose li > ul { margin: 8px 0 0; }
.prose strong { font-weight: var(--fw-ui); }

/* links inside running text are underlined, so they never rely on colour alone */
.prose a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere; }

/* a wide table scrolls inside its wrapper on a phone instead of widening the page; the table itself keeps its table
   semantics, and the wrapper is focusable so keyboards can scroll it */
.prose .table-scroll { max-width: 46rem; overflow-x: auto; margin: 0 0 16px; }
.prose .table-scroll table { margin: 0; }
.prose table {
  border-collapse: collapse;
  font-size: var(--fs-small);
  line-height: 1.5;
}
.prose th, .prose td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hair);
  text-align: left;
  vertical-align: top;
  min-width: 8rem;
}
.prose th { font-weight: var(--fw-ui); background: var(--ground-soft); }

.prose .updated { margin-top: 48px; font-size: var(--fs-small); color: var(--muted); }
.prose .btn { margin-top: 8px; }