/* ============================================================
   WOODLEY COLLISION — LEGAL PAGE TEMPLATE
   Reusable layout for Privacy Policy, Terms of Use, and any
   long-form policy page: breadcrumb, a title block, a two-column
   body (prose + sticky table of contents), and prose styling
   (headings, paragraphs, bulleted lists). Single column on mobile
   with the TOC hidden.
   ============================================================ */

/* ---- Section wrapper ---- */
.legal {
  padding-top: var(--sp-16);
  padding-bottom: 120px;
}
.legal__inner {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: flex-start;
  gap: 100px;
}

/* ---- Main prose column ---- */
.legal__main {
  flex: 0 1 820px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-32);
}

.legal__header {
  display: flex;
  flex-direction: column;
  gap: var(--sp-24);
}
.legal__title-block {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}
.legal__title {
  font-size: clamp(2.5rem, 1.6rem + 2.8vw, 3.875rem);   /* 40 -> 62px */
  font-weight: 600;
  line-height: 1.06;
  color: var(--gray-900);
}
.legal__updated {
  font-size: var(--fs-body);    /* 16px */
  font-weight: 400;
  line-height: 1.5;
  color: #717171;
}

/* ---- Centered page header (title + subtitle above the content columns).
        Used by the Legal template only; the plain .legal__header on the
        search/fallback screens keeps its left-aligned layout. ---- */
.legal__header--centered {
  max-width: var(--container-outer);
  margin-inline: auto;
  padding-inline: var(--gutter);
  align-items: center;
  text-align: center;
  margin-bottom: var(--sp-32);
}
.legal__header--centered .legal__title-block {
  align-items: center;
}
.legal__intro {
  font-size: var(--fs-body);    /* 16px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-700);
}

/* ---- A policy section (heading + body) ---- */
.legal__section {
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
  scroll-margin-top: calc(var(--header-h) + var(--sp-24));   /* anchor offset under sticky header */
}
.legal__section-title {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);   /* 20 -> 24px */
  font-weight: 600;
  line-height: 1.18;
  color: var(--gray-900);
}
.legal__section-body {
  display: flex;
  flex-direction: column;
  gap: var(--sp-16);
  font-size: var(--fs-body);    /* 16px */
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-700);
}
.legal__section-body p { margin: 0; }
.legal__section-body ul {
  margin: 0;
  padding-left: 24px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.legal__section-body li { padding-left: var(--sp-4); }
/* a group = lead line + its list, tighter than the 16px section gap */
.legal__group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

/* ---- Table of contents (sticky, desktop only) ---- */
.legal__toc {
  flex: 0 0 320px;
  position: sticky;
  top: calc(var(--header-h) + var(--sp-32));
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}
.legal__toc-link {
  font-size: var(--fs-body);    /* 16px */
  font-weight: 400;
  line-height: 1.5;
  color: #717171;
  transition: color var(--dur) var(--ease), font-weight var(--dur) var(--ease);
}
.legal__toc-link:hover { color: var(--gray-900); }
.legal__toc-link.is-active {
  color: var(--gray-900);
  font-weight: 500;
}

/* ============================================================
   MOBILE  (single column, TOC hidden)
   ============================================================ */
@media (max-width: 1000px) {
  .legal { padding-bottom: 60px; }
  .legal__inner { gap: 0; }
  .legal__toc { display: none; }
  .legal__main { flex: 1 1 auto; }
}

@media (max-width: 600px) {
  .legal__title {
    font-size: clamp(2.125rem, 1.75rem + 1.6vw, 2.25rem);
    line-height: 1.1;
  }
}