/* TripMate Legal Centre — shared layout for the Privacy Policy and Terms
   pages (pages/privacy.php, pages/terms.php). Reuses the global tokens,
   .listing-hero, .container and button styles; adds only the two-column
   reading layout, the table of contents and the document/callout typography.
   Both legal pages set body class `legal-page` and load this file so they
   read as two pages from one centre. */

/* Sticky-header-aware anchoring: smooth scroll only on the legal pages, and
   disabled when the visitor prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.legal-page) { scroll-behavior: smooth; }
}

.legal-hero .container { max-width: 900px; }
.legal-hero__lead {
  color: rgba(255, 255, 255, .82);
  max-width: 68ch;
  font-size: var(--fs-lg);
  line-height: 1.6;
  margin: 0 0 var(--sp-5);
}
.legal-hero__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, .82);
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--r-pill);
  padding: .35rem .85rem;
  margin: 0;
}

/* --- Full-width notice above the layout (glance / platform-role) ------ */
.legal-note {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--sky-100);
  border: 1px solid var(--line-200);
  border-left: 4px solid var(--teal-600);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-6);
}
.legal-note__icon { color: var(--teal-700); flex-shrink: 0; margin-top: 2px; }
.legal-note p { margin: 0; color: var(--ink-700); line-height: 1.6; }
.legal-note strong { color: var(--tm-text-primary); }

/* --- Two-column layout ---------------------------------------------- */
.legal-layout {
  display: grid;
  grid-template-columns: 264px minmax(0, 1fr);
  gap: var(--sp-6);
  align-items: start;
}

/* --- Table of contents ---------------------------------------------- */
.legal-toc {
  background: var(--surface);
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: calc(var(--header-h) + var(--sp-4));
  overflow: hidden;
}
/* Desktop keeps the list open and non-collapsible; the summary is a label. */
.legal-toc__summary {
  list-style: none;
  cursor: default;
  pointer-events: none;
  padding: var(--sp-4) var(--sp-5) var(--sp-2);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.legal-toc__summary::-webkit-details-marker { display: none; }
.legal-toc__chevron { transition: transform .2s ease; display: none; }
.legal-toc__nav { padding: 0 var(--sp-3) var(--sp-3); max-height: calc(100vh - var(--header-h) - var(--sp-8)); overflow-y: auto; }
/* Desktop: the panel is held open (see markup `open` + the pointer-events
   lock above), so the list shows without fighting the native <details>
   content-visibility that hides closed content in modern browsers. */

.legal-toc__nav ol {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
}
.legal-toc__link {
  counter-increment: toc;
  display: flex;
  gap: var(--sp-2);
  padding: .5rem .7rem;
  border-radius: var(--r-sm);
  color: var(--ink-700);
  text-decoration: none;
  font-size: var(--fs-sm);
  line-height: 1.35;
  border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.legal-toc__link::before {
  content: counter(toc);
  color: var(--ink-500);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xs);
  min-width: 1.4em;
  text-align: right;
  padding-top: 1px;
}
.legal-toc__link:hover { background: var(--surface-2); color: var(--tm-text-primary); }
.legal-toc__link:focus-visible { outline: 2px solid var(--tm-secondary); outline-offset: 2px; }
.legal-toc__link.is-current {
  background: var(--sky-100);
  color: var(--teal-700);
  border-left-color: var(--teal-600);
  font-weight: 600;
}
.legal-toc__link.is-current::before { color: var(--teal-700); }

/* --- Content panel --------------------------------------------------- */
.legal-content {
  background: var(--surface);
  border: 1px solid var(--line-200);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(var(--sp-5), 2vw + 1rem, var(--sp-7));
}
.legal-section { scroll-margin-top: calc(var(--header-h) + var(--sp-5)); }
.legal-section > h2 {
  font-size: var(--fs-xl);
  letter-spacing: -0.01em;
  color: var(--tm-text-primary);
  margin: 0 0 var(--sp-3);
}
.legal-section h3 {
  font-size: var(--fs-base);
  color: var(--tm-text-primary);
  margin: var(--sp-5) 0 var(--sp-2);
}
.legal-section p {
  color: var(--ink-700);
  line-height: 1.7;
  margin: 0 0 var(--sp-3);
  max-width: 72ch;
}
.legal-section p:last-child { margin-bottom: 0; }
/* Scoped to paragraph links only, so it never recolours the .btn button or
   the .legal-card__link (which carry their own colours). */
.legal-section p a { color: var(--tm-link); }

.legal-list {
  list-style: none;
  margin: 0 0 var(--sp-3);
  padding: 0;
  display: grid;
  gap: .4rem;
  max-width: 72ch;
}
.legal-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--ink-700);
  line-height: 1.6;
}
.legal-list li::before {
  content: '';
  position: absolute;
  left: .2rem;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--tm-accent);
}
/* Two-column list on wide screens for the longer lists. */
.legal-list--cols {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem var(--sp-5);
}

.legal-sep {
  border: 0;
  border-top: 1px solid var(--line-200);
  margin: var(--sp-6) 0;
}

/* --- Inline callouts (one-line statements) --------------------------- */
.legal-callout {
  display: flex;
  gap: var(--sp-3);
  align-items: flex-start;
  border-radius: var(--r-md);
  padding: var(--sp-4);
  margin: var(--sp-4) 0;
  border: 1px solid transparent;
  line-height: 1.6;
}
.legal-callout svg { flex-shrink: 0; margin-top: 2px; }
.legal-callout p { margin: 0; max-width: none; color: inherit; }
.legal-callout--good {
  background: var(--success-100);
  border-color: #A7E3BC;
  color: #14532D;
}
.legal-callout--good svg { color: var(--success-600); }
.legal-callout--good strong { color: #0F3D22; }
.legal-callout--info {
  background: var(--sky-100);
  border-color: #B9D2FC;
  color: #1E3A8A;
}
.legal-callout--info svg { color: var(--teal-700); }
.legal-callout--info strong { color: var(--tm-text-primary); }
.legal-callout--neutral {
  background: var(--surface-2);
  border-color: var(--line-200);
  color: var(--ink-700);
}
.legal-callout--neutral svg { color: var(--ink-500); }

/* --- Titled information card (heading + text, optional link) ---------- */
.legal-card {
  display: flex;
  gap: var(--sp-4);
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--line-200);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  margin: var(--sp-4) 0;
}
.legal-card__icon {
  flex-shrink: 0;
  color: var(--tm-accent-text);
  margin-top: 2px;
}
.legal-card__body { min-width: 0; }
.legal-card h3 {
  margin: 0 0 var(--sp-1);
  font-size: var(--fs-base);
  color: var(--tm-text-primary);
}
.legal-card p { margin: 0; color: var(--ink-700); line-height: 1.65; max-width: 68ch; }
.legal-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  margin-top: var(--sp-3);
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--tm-link);
  text-decoration: none;
}
.legal-card__link:hover { text-decoration: underline; }

/* --- Closing contact card (navy) ------------------------------------- */
.legal-contact {
  margin-top: var(--sp-6);
  background: linear-gradient(135deg, var(--tm-primary), var(--tm-text-primary));
  border-radius: var(--r-lg);
  padding: clamp(var(--sp-5), 3vw, var(--sp-7));
  text-align: center;
  color: #fff;
  box-shadow: var(--shadow-md);
}
.legal-contact__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .12);
  color: #fff;
  margin-bottom: var(--sp-3);
}
.legal-contact h2 { color: #fff; margin: 0 0 var(--sp-2); font-size: var(--fs-xl); }
.legal-contact p {
  color: rgba(255, 255, 255, .82);
  max-width: 56ch;
  margin: 0 auto var(--sp-5);
  line-height: 1.65;
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 980px) {
  .legal-layout { grid-template-columns: minmax(0, 1fr); }

  /* Table of contents collapses into a native dropdown; native open/closed
     state controls visibility, so no display overrides are needed. */
  .legal-toc { position: static; margin-bottom: var(--sp-5); }
  .legal-toc__nav { max-height: none; overflow-y: visible; }
  .legal-toc__summary { cursor: pointer; pointer-events: auto; padding-bottom: var(--sp-4); }
  .legal-toc__chevron { display: block; }
  .legal-toc[open] .legal-toc__chevron { transform: rotate(180deg); }
}

@media (max-width: 620px) {
  .legal-list--cols { grid-template-columns: minmax(0, 1fr); }
  .legal-note { flex-direction: column; gap: var(--sp-3); }
  .legal-card { flex-direction: column; gap: var(--sp-3); }
}