/* =============================================================================
   PILATES HUNTER — Terms & Conditions page (terms.html)
   -----------------------------------------------------------------------------
   Used twice: terms.html (the standalone URL for the Xendit review) and the
   #terms section of index.html, which carries the same clauses. Clause
   headings are h2 on the first and h3 under the section h2 on the second,
   so everything here is styled by class, never by heading level.

   A document, not a landing section: someone reads it to find one clause,
   so it gets a sticky table of contents, numbered parts and a comfortable
   measure. Uses ONLY the tokens in css/styles.css :root — the sage palette,
   serif headings and pill/radius language are the home page's, so the two
   pages read as one site.
   ========================================================================== */

/* The home page tucks its hero under the header; this page has no hero, so
   the section simply starts below it. Less top padding than a home-page
   section: there is no section above to separate from. */
.legal { padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem); }

/* --- head ---------------------------------------------------------------- */
.legal__head {
  max-width: 48rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.legal__crumbs {
  margin-bottom: 1.75rem;
  font-size: 0.82rem;
  color: var(--mist);
}
.legal__crumbs a {
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.legal__crumbs a:hover { color: var(--accent); border-color: var(--accent); }
.legal__crumbs span { padding: 0 0.4em; }

.legal__title {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-weight: 470;
  font-size: clamp(2.3rem, 1.5rem + 3vw, 3.6rem);
  line-height: 1.08;
  letter-spacing: -0.015em;
  text-wrap: balance;
}
.legal__head .lead { margin-top: 1.1rem; }

.legal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem clamp(1.5rem, 4vw, 3rem);
  margin: 1.75rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.legal__meta dt,
.legal__contact dt,
.legal__account dt {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.legal__meta dd { margin: 0; font-size: 0.95rem; color: var(--ink); }

/* --- layout -------------------------------------------------------------- */
.legal__layout {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

/* Sticky, clearing the sticky site header, so the clause list stays one
   click away however far down the document the reader is. */
.legal__toc {
  position: sticky;
  top: 6.5rem;
  padding: 1.25rem 1.25rem 1.35rem;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.legal__toc-label {
  margin-bottom: 0.75rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist);
}
.legal__toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.15rem;
  counter-reset: toc;
}
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: flex;
  gap: 0.6rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
  line-height: 1.4;
  color: var(--ink-soft);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.legal__toc a::before {
  content: counter(toc);
  flex: none;
  min-width: 1rem;
  font-weight: 700;
  color: var(--accent);
}
.legal__toc a:hover,
.legal__toc a:focus-visible { background: var(--paper); color: var(--accent-deep); }

/* --- document ------------------------------------------------------------ */
.legal__doc { max-width: 46rem; }

.legal__part {
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  scroll-margin-top: 6rem;
}
.legal__part:first-child { padding-top: 0; border-top: 0; }

.legal__part-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.1rem;
  font-family: var(--serif);
  font-weight: 470;
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  line-height: 1.2;
  letter-spacing: -0.01em;
}
/* Same numbered pill as the booking steps (.booking__num). */
.legal__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.92rem;
}

.legal__sub {
  margin: 1.75rem 0 0.6rem;
  font-family: var(--sans);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.legal__part p { color: var(--ink-soft); }
.legal__part p + .legal__list,
.legal__list + p,
.legal__table-wrap + .legal__list { margin-top: 1rem; }
.legal__part strong { color: var(--ink); font-weight: 600; }
.legal__part a:not(.btn) {
  color: var(--accent-deep);
  border-bottom: 1px solid currentColor;
  transition: color 0.2s var(--ease);
}
.legal__part a:not(.btn):hover { color: var(--accent); }

.legal__list {
  padding-left: 1.2rem;
  display: grid;
  gap: 0.6rem;
  color: var(--ink-soft);
  line-height: 1.65;
}
.legal__list li::marker { color: var(--accent); }
.legal__list--ordered li::marker { font-weight: 700; }

/* Key facts a customer acts on (the account, the only cancellation channel)
   sit on the pale sage ground used for the booking total. */
.legal__account,
.legal__callout {
  margin: 1.1rem 0;
  padding: 1rem 1.25rem;
  background: var(--accent-soft);
  border-radius: var(--radius-sm);
}
.legal__account {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  gap: 0.9rem 1.5rem;
}
.legal__account dd {
  margin: 0;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.legal__callout { border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.legal__callout p { color: var(--ink); }
.legal__callout a:not(.btn) { font-weight: 600; white-space: nowrap; }

.legal__table-wrap { overflow-x: auto; margin-top: 1.1rem; }
.legal__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}
.legal__table th,
.legal__table td {
  padding: 0.75rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.legal__table thead th {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.legal__table tbody th { font-weight: 500; color: var(--ink); }
.legal__table td {
  text-align: right;
  white-space: nowrap;
  font-weight: 600;
  color: var(--accent-deep);
  font-variant-numeric: tabular-nums;
}
.legal__table thead th:last-child { text-align: right; }

.legal__contact {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem 2rem;
  margin: 1.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.legal__contact dd { margin: 0; font-size: 0.97rem; color: var(--ink-soft); line-height: 1.55; }

/* index.html #terms: the line under the section head. */
.terms__meta {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--mist);
}
.terms__meta a {
  color: var(--accent-deep);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

/* --- responsive ---------------------------------------------------------- */
@media (max-width: 900px) {
  .legal__layout { grid-template-columns: 1fr; }
  /* A sticky box in a single column would sit over the text being read. */
  .legal__toc { position: static; }
}

@media (max-width: 620px) {
  .legal__contact { grid-template-columns: 1fr; }
}

@media print {
  .legal__toc, .site-footer__social { display: none; }
  .legal__layout { display: block; }
  .legal__part { break-inside: avoid; }
}