/* ==========================================================================
   Policy pages (V2): privacy-policy, refund-policy, terms, termination-policy.
   Requires tokens.css, site-nav.css, home-hero.css and program-hero.css.
   Layout: dark short hero, then a sticky "On this page" list beside the
   reading column. The list is built by js/legal-toc.js from the h2[id]s.
   ========================================================================== */

body.tp-legal-page {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

/* ---------- Hero: short, plus a switcher for the other policies ---------- */
/* Smaller than the program/contact heroes: policy text is the content here */
.tp-hero--legal .tp-hero__title,
.tp-hero--sitemap .tp-hero__title { max-width: 820px; font-size: clamp(1.625rem, 1.35rem + 1.1vw, 2.25rem); }
.tp-hero--legal .tp-hero__lead,
.tp-hero--sitemap .tp-hero__lead { max-width: 600px; font-size: var(--text-body); line-height: var(--leading-body); }

.tp-legal-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-1);
  margin: var(--space-5) auto 0;
  padding: 0;
  list-style: none;
  animation: tp-rise 700ms var(--ease-out) 340ms both;
}
.tp-legal-switch a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-ui);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast);
}
.tp-legal-switch a:hover { background: var(--color-surface-hover); color: var(--color-heading); }
.tp-legal-switch a[aria-current="page"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-on-accent);
}
.tp-legal-switch a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: var(--focus-offset); }

/* ---------- Body: contents + reading column ---------- */
.tp-legal {
  padding: var(--space-10) var(--gutter) var(--section-y);
  background: var(--color-bg);
}
.tp-legal *,
.tp-legal *::before,
.tp-legal *::after { box-sizing: border-box; }
.tp-legal__inner {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-10);
  max-width: var(--container);
  margin: 0 auto;
  align-items: start;
}

/* Contents list */
.tp-legal__toc {
  position: sticky;
  top: calc(var(--nav-h-sticky) + var(--space-3));
  max-height: calc(100vh - var(--nav-h-sticky) - var(--space-6));
  overflow-y: auto;
  overscroll-behavior: contain;
}
.tp-legal__toc-head {
  margin: 0 0 var(--space-2);
  font-size: var(--text-eyebrow);
  line-height: var(--leading-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  color: var(--color-accent-text);
}
.tp-legal__toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  border-left: 1px solid var(--color-border);
}
.tp-legal__toc a {
  display: block;
  margin-left: -1px;
  padding: 7px var(--space-2);
  border-left: 2px solid transparent;
  color: var(--color-text-secondary);
  font-size: var(--text-body-sm);
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--duration-fast), border-color var(--duration-fast), background var(--duration-fast);
}
.tp-legal__toc a:hover { color: var(--color-heading); background: var(--color-surface-hover); }
.tp-legal__toc a[aria-current="true"] {
  border-left-color: var(--color-accent);
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
}
.tp-legal__toc a:focus-visible { outline: var(--focus-ring); outline-offset: -2px; }

/* Mobile: the list becomes a disclosure above the text (js sets [data-mobile]) */
.tp-legal__toc-toggle { display: none; }

/* Reading column */
.tp-legal__content {
  max-width: 76ch;
  min-width: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body-lg);
  color: var(--color-text);
}
.tp-legal__content :where(p, h2, h3) { margin: 0; }
.tp-legal__content p + p { margin-top: var(--space-2); }
.tp-legal__content a {
  color: var(--color-accent-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tp-legal__content a:hover { color: var(--color-heading); }
.tp-legal__content a:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); border-radius: 2px; }

.tp-legal__sec { scroll-margin-top: calc(var(--nav-h-sticky) + var(--space-3)); }
.tp-legal__sec + .tp-legal__sec,
.tp-legal__group + .tp-legal__sec,
.tp-legal__sec + .tp-legal__group,
.tp-legal__sec + .tp-legal__note,
.tp-legal__note + .tp-legal__sec {
  margin-top: var(--space-8);
  padding-top: var(--space-8);
  border-top: 1px solid var(--color-border);
}
.tp-legal__group > .tp-legal__sec + .tp-legal__sec { margin-top: var(--space-8); padding-top: var(--space-8); border-top: 1px solid var(--color-border); }
.tp-legal__group > .tp-legal__sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.tp-legal__sec:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* The opening paragraphs, before the first heading, read as a lead */
.tp-legal__sec--intro { font-size: var(--text-body); line-height: var(--leading-body-lg); color: var(--color-text-secondary); }

.tp-legal__h2 {
  font-family: inherit;
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  letter-spacing: var(--tracking-h3);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
  margin-bottom: var(--space-3);
  scroll-margin-top: calc(var(--nav-h-sticky) + var(--space-3));
  text-wrap: balance;
}
.tp-legal__h3 {
  margin: var(--space-4) 0 var(--space-1);
  font-family: inherit;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  font-weight: var(--weight-bold);
  color: var(--color-heading);
}
.tp-legal__h2 + .tp-legal__h3 { margin-top: 0; }
.tp-legal__em { font-weight: var(--weight-bold); color: var(--color-heading); }
.tp-legal__text { margin: 0; }

/* Lists: each item is a row with a gold tick */
.tp-legal__list {
  display: grid;
  gap: var(--space-1-5);
  margin: var(--space-2) 0 0;
  padding: 0;
}
.tp-legal__li {
  position: relative;
  padding: var(--space-1-5) var(--space-2) var(--space-1-5) calc(var(--space-2) + 28px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-alt);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
}
.tp-legal__li::before {
  content: "";
  position: absolute;
  left: var(--space-2);
  top: calc(var(--space-1-5) + 5px);
  width: 14px;
  height: 14px;
  border-radius: var(--radius-round);
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-accent-soft);
}
.tp-legal__li p { margin-top: var(--space-0-5); font-size: var(--text-body-sm); line-height: var(--leading-body-sm); color: var(--color-text-secondary); }
.tp-legal__li .tp-legal__em { display: block; }
.tp-legal__list > .tp-legal__li > .tp-legal__em + p { margin-top: var(--space-0-5); }

/* Callouts (refund: info boxes and the closing note) */
.tp-legal__note {
  margin-top: var(--space-4);
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-accent);
  border-radius: var(--radius-lg);
  background: var(--color-accent-soft);
}
.tp-legal__note .tp-legal__li { background: var(--color-surface); }
.tp-legal__note > .tp-legal__h3:first-child { margin-top: 0; }
.tp-legal__note--warn { border-color: var(--gold-700); }
.tp-legal__note p { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }

/* Numbered items (terms, termination): the number is part of the heading text */
.tp-legal__body > .tp-legal__list:first-child { margin-top: 0; }

/* Contact / acknowledgement cards */
.tp-legal__content .tp-legal__card {
  margin-top: var(--space-8);
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  background: var(--color-bg-alt);
}
.tp-legal__content .tp-legal__card .tp-legal__h2 { font-size: var(--text-body); margin-bottom: var(--space-2); }
.tp-legal__card p { font-size: var(--text-body-sm); line-height: var(--leading-body-sm); }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .tp-legal { padding-left: var(--space-3); padding-right: var(--space-3); }
  .tp-legal__inner { gap: var(--space-6); grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .tp-legal { padding: var(--space-6) var(--space-2) var(--space-8); }
  .tp-legal__inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .tp-legal__toc { position: static; max-height: none; overflow: visible; }
  .tp-legal__toc-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: var(--touch);
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border-control);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-heading);
    font: inherit;
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
    cursor: pointer;
  }
  .tp-legal__toc-toggle:focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); }
  .tp-legal__toc-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--duration-base); }
  .tp-legal__toc-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
  .tp-legal__toc-head { display: none; }
  .tp-legal__toc-list { margin-top: var(--space-1); }
  .tp-legal__toc-list[hidden] { display: none; }
  .tp-legal__content .tp-legal__card { padding: var(--space-3); }
}

@media (prefers-reduced-motion: reduce) {
  .tp-legal-switch { animation: none; }
}

/* ---------- Print ---------- */
@media print {
  .tp-nav, .tp-nav-dim, .tp-drawer, .tp-footer, .tp-legal__toc, .tp-legal-switch, .tp-hero__deco { display: none !important; }
  .tp-hero { background: none !important; color: #000 !important; padding: 0 0 16px !important; }
  .tp-hero * { color: #000 !important; }
  .tp-legal { padding: 0; }
  .tp-legal__inner { display: block; }
  .tp-legal__content { max-width: none; font-size: 11pt; }
  .tp-legal__li, .tp-legal__note, .tp-legal__card { break-inside: avoid; background: none; }
}