/* ==========================================================================
   Legal pages (privacy.html, terms.html)

   Kept out of search-theme.css on purpose: that file is linked from
   index.html, so every visitor to every page downloads it. The legal pages
   are standalone static HTML outside the React SPA and are rarely visited,
   so their styles load only when someone opens them.

   Token fallbacks mirror search-theme.css :root, so a rebrand there carries
   through here; the fallback values keep the pages readable if that
   stylesheet ever fails to load.
   ========================================================================== */

.legal-page {
  background: var(--color-bg-primary, #f5efe6);
  color: var(--color-text, #1a1a1a);
  font-family: var(--font-body, 'Lato', sans-serif);
  font-weight: 400;
  line-height: 1.75;
  margin: 0;
}

/* ── Header / footer chrome ─────────────────────────────────────────────── */

.legal-header {
  background: var(--color-bg-footer, #0a0a0f);
  padding: 1.25rem var(--section-pad, 2rem);
}
.legal-header a {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
  color: var(--color-text-light, #f5efe6);
}
.legal-header img {
  width: 2rem;
  filter: brightness(0) invert(1);
}
.legal-header span {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: 1.35rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.legal-footer {
  background: var(--color-bg-footer, #0a0a0f);
  color: var(--color-text-light, #f5efe6);
  padding: 2rem var(--section-pad, 1.5rem);
  text-align: center;
  font-size: 0.95rem;
}
.legal-footer a {
  color: var(--color-text-light, #f5efe6);
  margin: 0 0.6rem;
}
.legal-footer p {
  margin: 0.75rem 0 0;
  color: #9a9490;
}

/* ── Document body ──────────────────────────────────────────────────────── */

.legal-wrap {
  max-width: 52rem;
  margin: 0 auto;
  padding: 3rem var(--section-pad, 1.5rem) 4rem;
}
.legal-wrap h1 {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: clamp(2rem, 5vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 0 0 0.5rem;
  color: var(--color-text, #1a1a1a);
}
.legal-wrap h2 {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 3rem 0 0.75rem;
  color: var(--color-text, #1a1a1a);
  scroll-margin-top: 1.5rem;
}
.legal-wrap h3 {
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-size: 1.13rem;
  font-weight: 500;
  margin: 2rem 0 0.5rem;
  color: var(--color-text, #1a1a1a);
}
.legal-wrap p,
.legal-wrap li {
  font-size: 1.02rem;
}
.legal-wrap ul,
.legal-wrap ol {
  padding-left: 1.35rem;
}
.legal-wrap li {
  margin-bottom: 0.45rem;
}
.legal-wrap a {
  color: var(--color-accent, #b83225);
}
.legal-wrap a:hover {
  color: var(--color-accent-hover, #8f2319);
}
.legal-wrap code {
  background: var(--color-bg-secondary, #ede3d8);
  border-radius: 3px;
  padding: 0.1em 0.35em;
  font-size: 0.92em;
}

.legal-meta {
  color: var(--color-muted, #6b5f58);
  font-size: 0.95rem;
  margin: 0 0 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--color-border, #d4c5b5);
}

/* ── Components ─────────────────────────────────────────────────────────── */

.legal-callout {
  background: var(--color-card-bg, #fff9f4);
  border: 1px solid var(--color-border, #d4c5b5);
  border-left: 4px solid var(--color-accent, #b83225);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.legal-callout p:last-child {
  margin-bottom: 0;
}

.legal-toc {
  background: var(--color-card-bg, #fff9f4);
  border: 1px solid var(--color-border, #d4c5b5);
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 3rem;
}
.legal-toc h2 {
  margin: 0 0 0.75rem;
  font-size: 1.1rem;
}
.legal-toc ol {
  margin: 0;
  padding-left: 1.25rem;
}
.legal-toc li {
  margin-bottom: 0.2rem;
}

/* Wide tables scroll inside their own container so the page body never does. */
.legal-table-wrap {
  overflow-x: auto;
  margin: 1.25rem 0;
}
.legal-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
  min-width: 34rem;
}
.legal-table th,
.legal-table td {
  border: 1px solid var(--color-border, #d4c5b5);
  padding: 0.6rem 0.85rem;
  text-align: left;
  vertical-align: top;
}
.legal-table th {
  background: var(--color-bg-secondary, #ede3d8);
  font-family: var(--font-heading, 'Oswald', sans-serif);
  font-weight: 500;
}

@media print {
  .legal-header,
  .legal-footer {
    display: none;
  }
  .legal-page {
    background: #fff;
  }
}