/* =========================================================
   LEGAL / PUBLIC-DOCUMENT PAGES - shared stylesheet
   Used by: about.html, privacy-policy.html, terms-of-service.html,
            risk-disclaimer.html, refund-policy.html, contact.html

   Additive only - every value below reads the same CSS custom
   properties defined in assets/css/main.css (:root and
   [data-theme=dark]), so these pages automatically match the
   app's light/dark identity. Nothing in main.css is modified by
   this file - it only centralizes markup that used to be
   duplicated as an inline <style> block on every legal page.
   ========================================================= */

body.pub-body {
  margin: 0;
  background: var(--background-color);
  color: var(--default-color);
  font-family: var(--default-font);
}

.pub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px;
  border-bottom: 1px solid var(--border-color);
}
.pub-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 18px;
  color: var(--heading-color);
  text-decoration: none;
}
.pub-logo i { color: var(--accent-color); }
.pub-header a.pub-back {
  color: var(--muted-color);
  text-decoration: none;
  font-size: 14px;
}
.pub-header a.pub-back:hover { color: var(--accent-color); }

/* Short centered intro (icon + H1 + one-line summary) at the top of every legal page */
.pub-main { max-width: 720px; margin: 0 auto; padding: 60px 24px 0; text-align: center; }
.pub-main i.pub-icon { font-size: 40px; color: var(--muted-color); margin-bottom: 14px; display: inline-block; }
.pub-main h1 { font-family: var(--heading-font); color: var(--heading-color); margin-bottom: 10px; }
.pub-main p { color: var(--muted-color); line-height: 1.7; }
.pub-meta {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 14px;
  border-radius: 999px;
  border: 1px solid var(--border-color);
  background: var(--surface-color);
  color: var(--muted-color);
  font-size: 12.5px;
  font-weight: 600;
}

.pub-footer { border-top: 1px solid var(--border-color); padding: 24px; text-align: center; color: var(--muted-color); font-size: 13px; }
.pub-footer a { color: var(--muted-color); text-decoration: none; margin: 0 8px; }
.pub-footer a:hover { color: var(--accent-color); }

/* ---------- Long-form policy body (Privacy / Terms / Risk / About) ---------- */
.legal-body {
  max-width: 780px;
  margin: 40px auto 0;
  padding: 0 24px 90px;
  color: var(--default-color);
  line-height: 1.75;
  font-size: 15px;
}
.legal-body h2 {
  font-family: var(--heading-font);
  color: var(--heading-color);
  font-size: 1.25rem;
  margin: 40px 0 12px;
  padding-top: 8px;
  scroll-margin-top: 90px;
}
.legal-body h2:first-of-type { margin-top: 24px; }
.legal-body h3 {
  font-family: var(--heading-font);
  color: var(--heading-color);
  font-size: 1.02rem;
  margin: 22px 0 8px;
}
.legal-body p { margin: 0 0 14px; color: var(--default-color); }
.legal-body p.legal-muted { color: var(--muted-color); font-size: 13.5px; }
.legal-body ul, .legal-body ol { margin: 0 0 14px; padding-left: 22px; color: var(--default-color); }
.legal-body li { margin-bottom: 7px; }
.legal-body strong { color: var(--heading-color); }
.legal-body a { color: var(--accent-color); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }
.legal-body hr {
  border: none;
  border-top: 1px solid var(--border-color);
  margin: 32px 0;
}

/* Section divider used between numbered clauses on longer documents */
.legal-section { padding-top: 4px; }
.legal-section + .legal-section { margin-top: 4px; }

/* Table of contents */
.legal-toc {
  background: var(--surface-color);
  border: 1px solid var(--border-color);
  border-radius: 14px;
  padding: 18px 22px;
  margin: 28px 0 8px;
}
.legal-toc h2 { margin: 0 0 10px; font-size: 0.95rem; }
.legal-toc ol {
  columns: 2;
  column-gap: 24px;
  margin: 0;
  padding-left: 20px;
  font-size: 13.5px;
}
.legal-toc li { margin-bottom: 6px; break-inside: avoid; }
.legal-toc a { color: var(--default-color); }
.legal-toc a:hover { color: var(--accent-color); }
@media (max-width: 560px) {
  .legal-toc ol { columns: 1; }
}

/* Highlighted callout box (used for the risk disclaimer + key warnings embedded in Terms) */
.legal-callout {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  background: color-mix(in srgb, var(--warning-color, #f59e0b) 10%, var(--surface-color));
  border: 1px solid color-mix(in srgb, var(--warning-color, #f59e0b) 35%, var(--border-color));
  border-radius: 14px;
  padding: 16px 18px;
  margin: 20px 0;
}
.legal-callout i {
  font-size: 20px;
  color: var(--warning-color, #f59e0b);
  flex-shrink: 0;
  margin-top: 2px;
}
.legal-callout p { margin: 0; font-size: 14px; }
.legal-callout p + p { margin-top: 8px; }

/* Plain-language placeholder for facts that don't exist yet in the project
   (legal entity name, registered address, jurisdiction, refund terms, etc.)
   Intentionally styled as a placeholder, not asserted as fact. */
.legal-placeholder {
  color: var(--muted-color);
  font-style: italic;
}

/* Small "Contents" jump-links row for shorter pages */
.legal-updated {
  color: var(--muted-color);
  font-size: 13px;
  margin-top: 4px;
}