/* ==========================================================================
   Textum Media — legal.css
   Shared page-only rules for /privacy, /cookies and /accessibility.
   Loaded after site.css.

   .legal itself (prose, headings, lists, measure) already lives in site.css
   section 26. This file only adds what long-form legal pages need on top:
   an in-page contents list, prose-sized tables, and a quieter closing band.
   No hex, no raw px except 1px hairlines.

   CONTENTS
     01 Page head
     02 In-page contents
     03 Prose tables
     04 Quiet CTA band
   ========================================================================== */


/* == 01 Page head ========================================================= */

/* The effective-date line sits under the lede in .page-head__inner. */
.legal-head__updated {
  padding-top: var(--space-1);
}


/* == 02 In-page contents ================================================== */

.legal-toc {
  max-width: var(--measure);
  margin-bottom: var(--space-8);
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-2);
  border: 1px solid var(--rule);
  border-radius: var(--r-md);
}

.legal-toc__title {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-mono);
  line-height: 1.4;
  color: var(--fg-2);
}

.legal-toc__list {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  counter-reset: legal-toc;
}

@media (min-width: 601px) {
  .legal-toc__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-4);
  }
}

.legal-toc__item {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  counter-increment: legal-toc;
}

/* The bracket motif, numbered automatically so the list can be reordered. */
.legal-toc__item::before {
  content: "[ " counter(legal-toc, decimal-leading-zero) " ]";
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-mono);
  color: var(--mark);
}

.legal-toc__link {
  font-size: var(--fs-sm);
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.legal-toc__link:hover {
  border-bottom-color: currentColor;
}

/* Headings are jump targets for the list above — keep them clear of the
   sticky nav when the browser scrolls to them. */
.legal h2 {
  scroll-margin-top: calc(var(--nav-h) + var(--space-4));
}


/* == 03 Prose tables ====================================================== */

.legal .table-wrap {
  margin-top: var(--space-4);
}

/* The shared .table sets min-width: 720px, which is right for the admin
   grid but forces a needless sideways scroll on a two-column prose table.
   30ch keeps both columns readable and fits any phone. .table-wrap stays in
   place so anything narrower still scrolls instead of overflowing. */
.legal-table {
  min-width: 30ch;
}

/* The shared .table th sets white-space: nowrap, which is right for the
   admin grid's short headers but forces a two-word header like "What's
   collected" to stay on one unbroken line here. On a narrow phone that
   single line is wider than the 30ch table itself, so the table (and its
   caption) render wider than .table-wrap and the overflow is clipped
   unreadable. Prose headers wrap like any other text. */
.legal-table th {
  white-space: normal;
}

.legal-table th:first-child,
.legal-table td:first-child {
  width: 34%;
}

.legal-table td:first-child {
  font-weight: var(--fw-semibold);
}


/* == 04 Quiet CTA band ==================================================== */

/* Legal pages close with a contact prompt, not a sales pitch, so the band is
   shorter and the headline drops a step. */
.cta-band--quiet {
  padding-block: var(--space-9);
}

.cta-band--quiet .cta-band__title {
  font-size: var(--fs-xl);
  max-width: 20ch;
}