/* PR-I — Privacy + Terms (legal pages).
 * Phase 1 + Phase 2 redesign per docs/UI_UX_PAGE_REDESIGN.md:
 *   "Wrap copy in a max-width: 720px; margin-inline: auto .c-card. Use
 *    --lh-relaxed line-height. Visible TOC at top using .c-pill row."
 *
 * The same stylesheet is loaded by /static/css/terms.css (which @imports
 * this file) so both pages share chrome and typography.
 *
 * Constraints honoured:
 *   - No id / name attribute changes; selectors target classes + role/aria.
 *   - Reuses .c-card, .c-pill from _components.css (so dark-mode + brand
 *     tokens apply automatically).
 */

/* Page chrome -------------------------------------------------------------- */

.privacy-page,
.terms-page {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background-color: var(--bg-base);
  color: var(--text-primary);
}

.legal-brandstrip {
  background-color: var(--brand-primary-600);
  color: var(--text-inverse);
  padding: var(--space-3) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.legal-brandstrip__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.01em;
  color: var(--text-inverse);
  text-decoration: none;
}
.legal-brandstrip__title:hover,
.legal-brandstrip__title:focus { color: var(--text-inverse); text-decoration: none; opacity: 0.9; }

.legal-brandstrip__links {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}
.legal-brandstrip__links a {
  color: var(--text-inverse);
  text-decoration: none;
  font-size: var(--fs-sm);
  opacity: 0.9;
  transition: opacity 120ms ease;
}
.legal-brandstrip__links a:hover { opacity: 1; }
.legal-brandstrip__links a.is-active {
  text-decoration: underline;
  text-underline-offset: 4px;
  opacity: 1;
}

/* The shared language switcher ships as a navbar dropdown; tame it inside
   the slim brand strip so it doesn't try to position absolute under a navbar
   that isn't here. */
.legal-brandstrip .cf-langswitch {
  list-style: none;
  position: relative;
}
.legal-brandstrip .cf-langswitch .dropbtn {
  color: var(--text-inverse);
  text-decoration: none;
  font-size: var(--fs-sm);
  opacity: 0.9;
  cursor: pointer;
  background: transparent;
  padding: 0;
}
.legal-brandstrip .cf-langswitch .dropbtn:hover { opacity: 1; }
.legal-brandstrip .cf-langswitch .navdropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background-color: var(--bg-surface);
  color: var(--text-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  min-width: 140px;
  padding: 6px 0;
  z-index: 1000;
}
.legal-brandstrip .cf-langswitch:hover .navdropdown-content,
.legal-brandstrip .cf-langswitch:focus-within .navdropdown-content {
  display: block;
}
.legal-brandstrip .cf-langswitch .navdropdown-content a {
  display: block;
  padding: 6px 14px;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  opacity: 1;
}
.legal-brandstrip .cf-langswitch .navdropdown-content a:hover {
  background-color: var(--brand-primary-50);
}

/* Card shell --------------------------------------------------------------- */

.legal-shell {
  padding: var(--space-5) var(--space-3);
  display: flex;
  justify-content: center;
}

.legal-card {
  max-width: 720px;
  margin-inline: auto;
  width: 100%;
  padding: var(--space-5);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-base, 16px);
}

.legal-card__title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  text-align: center;
  margin: 0 0 var(--space-2);
  color: var(--text-primary);
}
.legal-card__company {
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.legal-card__credit {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  margin-top: var(--space-5);
}
.legal-card__credit a { color: var(--brand-primary-700); }

.legal-rule {
  border: 0;
  border-top: 1px solid var(--border-subtle);
  margin: var(--space-4) 0;
}

/* Table of contents -------------------------------------------------------- */

.legal-toc {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-4);
}
.legal-toc .c-pill {
  text-decoration: none;
}

/* Body typography ---------------------------------------------------------- */

.legal-card h2 {
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-6);
  margin-bottom: var(--space-3);
  color: var(--text-primary);
  /* anchor-link landing offset so :target headings clear the brand strip */
  scroll-margin-top: var(--space-6);
}
.legal-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-5);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
  scroll-margin-top: var(--space-6);
}
.legal-card h5 {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  margin-top: var(--space-4);
  margin-bottom: var(--space-2);
  color: var(--text-primary);
}
.legal-card p {
  margin-bottom: var(--space-3);
  color: var(--text-primary);
}
.legal-card ul {
  margin-bottom: var(--space-3);
  padding-left: var(--space-5);
}
.legal-card li {
  margin-bottom: var(--space-1, 4px);
  line-height: var(--lh-relaxed);
}
.legal-card a {
  color: var(--brand-primary-700);
}
.legal-card a:hover {
  color: var(--brand-primary-600);
}

.legal-card .text-center { text-align: center; }

/* Footer ------------------------------------------------------------------- */

.legal-footer {
  text-align: center;
  padding: var(--space-4) var(--space-3);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  border-top: 1px solid var(--border-subtle);
  background-color: var(--bg-surface);
}

/* Mobile ------------------------------------------------------------------- */

@media (max-width: 640px) {
  .legal-shell { padding: var(--space-3); }
  .legal-card { padding: var(--space-4); }
  .legal-card__title { font-size: var(--fs-xl); }
  .legal-card h2 { font-size: var(--fs-lg); margin-top: var(--space-5); }
  .legal-card h3 { font-size: var(--fs-md); }
  .legal-toc { gap: 6px; }
}