/* ==========================================================================
   SmithChevyLand — legal pages
   Loaded after main.css. A 76ch reading column; from 1024px the contents list
   sits beside it and stays in view (scroll-spy in js/scroll-spy.js).
   ========================================================================== */

.legal {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
  /* The footer wave is drawn up over the bottom of the page. */
  padding-block: clamp(2rem, 5vw, 3.5rem) calc(var(--space-section) + var(--divider-h));
}

@media (min-width: 1024px) {
  .legal {
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 76ch);
    justify-content: center;
    align-items: start;
    column-gap: clamp(3rem, 5vw, 4.5rem);
  }
}

/* Contents ---------------------------------------------------------------- */

.legal__toc {
  padding: 1.25rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: var(--c-surface-alt);
}

@media (min-width: 1024px) {
  .legal__toc {
    position: sticky;
    inset-block-start: calc(var(--header-h-stuck) + 1.5rem);
    max-block-size: calc(100vh - var(--header-h-stuck) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.legal__toc-title {
  margin-block-end: .75rem;
  padding-inline: .75rem;
  color: var(--c-muted-strong);
  font-size: .8rem;
  letter-spacing: .12em;
}

/* Column flow keeps the numbers reading downwards, not across. */
@media (min-width: 600px) and (max-width: 1023px) {
  .legal__toc-list {
    columns: 2;
    column-gap: 1rem;
  }

  .legal__toc-list li {
    break-inside: avoid;
  }
}

.legal__toc-link {
  display: flex;
  gap: .5rem;
  padding: .4rem .75rem;
  border-inline-start: 3px solid transparent;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.35;
  text-decoration: none;
  transition:
    background-color var(--dur-fast) var(--ease),
    border-color var(--dur-fast) var(--ease);
}

.legal__toc-link .legal__num {
  flex: none;
  min-inline-size: 1.6em;
  color: var(--c-blue);
  font-variant-numeric: tabular-nums;
}

.legal__toc-link:hover {
  background: var(--c-surface);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.legal__toc-link[aria-current] {
  border-inline-start-color: var(--c-blue);
  background: var(--c-surface);
  font-weight: 700;
}

/* Document body ----------------------------------------------------------- */

.legal__body {
  max-inline-size: 76ch;
  min-inline-size: 0;
}

/* Padding rather than margins: sections touch, which the scroll-spy relies on. */
.legal__section:not(:last-child) {
  padding-block-end: clamp(2rem, 4vw, 2.75rem);
}

.legal__section + .legal__section {
  padding-block-start: clamp(2rem, 4vw, 2.75rem);
  border-block-start: 1px solid var(--c-line);
}

.legal__section > * + * {
  margin-block-start: 1rem;
}

.legal__heading {
  margin-block-end: 1.25rem;
  font-size: clamp(1.25rem, 2vw, 1.625rem);
}

.legal__section > .legal__subheading {
  margin-block: 2rem .75rem;
  font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
}

.legal__subheading + * {
  margin-block-start: 0;
}

.legal__num {
  color: var(--c-blue);
}

.legal__body ul {
  display: grid;
  gap: .5rem;
  padding-inline-start: 1.25rem;
}

.legal__body li::marker {
  color: var(--c-blue);
}

.legal__body a {
  color: var(--c-blue);
  font-weight: 600;
  text-underline-offset: .2em;
  overflow-wrap: anywhere;
}

.legal__body a:hover {
  color: var(--c-navy);
}

/* Tables ------------------------------------------------------------------ */

/* Scrolls sideways on narrow screens; focusable so the keyboard can scroll it too. */
.legal__table {
  overflow-x: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
}

.legal__table table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

.legal__table th,
.legal__table td {
  padding: .7rem 1rem;
  border-block-end: 1px solid var(--c-line);
  text-align: start;
  vertical-align: top;
}

.legal__table th {
  background: var(--c-surface-alt);
  font-family: var(--font-display);
  white-space: nowrap;
}

.legal__table tbody tr:last-child td {
  border-block-end: 0;
}