/* Shared styles for the legal pages (privacy, terms, accessibility).
   Builds on the .privacy__* block in styles.css. Text colors here are chosen
   to pass WCAG 2.2 AA (4.5:1) on the cream section background. */

.page-legal .section-label { color: var(--sage-deeper); }
.page-legal .privacy__effective { color: #655e57; }
.page-legal .nav__back-text,
.page-legal .nav__logo-text { color: #5f5953; }

.legal-skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 10000;
  background: var(--sage-deeper);
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
}
.legal-skip:focus { top: 16px; }

.page-legal a:focus-visible,
.page-legal button:focus-visible {
  outline: 2px solid var(--sage-deeper);
  outline-offset: 3px;
  border-radius: 2px;
}

.legal-toc {
  background: var(--warm-white);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 24px 28px;
  margin: 0 0 40px;
}
.legal-toc__title {
  font-weight: 700;
  margin-bottom: 10px !important;
}
.legal-toc ol {
  margin: 0;
  padding-left: 22px;
  columns: 2;
  column-gap: 32px;
}
.legal-toc li {
  margin-bottom: 6px;
  line-height: 1.5;
  break-inside: avoid;
}
@media (max-width: 600px) {
  .legal-toc ol { columns: 1; }
  .legal-toc { padding: 20px; }
}

.privacy__content h2[id],
.privacy__content h3[id] { scroll-margin-top: 96px; }

.legal-callout {
  background: var(--warm-white);
  border-left: 4px solid var(--sage-deeper);
  border-radius: 8px;
  padding: 18px 22px;
  margin: 20px 0 24px;
}
.legal-callout p:last-child { margin-bottom: 0; }

.legal-caps {
  text-transform: none;
  font-weight: 600;
}

.legal-choices {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px 28px;
  margin: 20px 0 28px;
}
.legal-choices__title { margin-bottom: 8px !important; }
.pc-status { margin-bottom: 14px !important; }
.pc-btn {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  background: var(--sage-deeper);
  color: #fff;
  border: 1px solid var(--sage-deeper);
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
}
.pc-btn:hover { background: #3f4c36; }

.legal-related {
  margin-top: 32px;
  font-size: 15px;
}