/* RMINT legal documents — shared brand stylesheet.
   Served raw from /public, outside the Next.js/Tailwind pipeline, so every
   value here is hardcoded from tailwind.config.js. Keep them in sync by hand. */

@font-face {
  font-family: "Public Sans";
  src: url("/assets/fonts/public-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --lp-bg: #FFF6F1;
  --lp-ink: #2D2D2D;
  --lp-accent: #FF0000;
  --lp-accent-hover: #E53935;
  --lp-rule: rgba(45, 45, 45, 0.06);
  --lp-rule-strong: rgba(45, 45, 45, 0.16);
  --lp-muted: rgba(45, 45, 45, 0.62);
  --lp-surface: rgba(255, 255, 255, 0.55);
  --lp-shell: 1320px;
  --lp-measure: 760px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.lp-shell {
  max-width: var(--lp-shell);
  margin: 0 auto;
  min-height: 100vh;
  border-left: 1px solid var(--lp-rule);
  border-right: 1px solid var(--lp-rule);
}

/* ---------- header ---------- */
.lp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 40px;
  border-bottom: 1px solid var(--lp-rule);
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 246, 241, 0.92);
  backdrop-filter: blur(8px);
}
.lp-brand { display: inline-flex; align-items: center; }
.lp-brand img { display: block; height: 28px; width: auto; }
.lp-home {
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-accent);
  text-decoration: none;
}
.lp-home:hover { color: var(--lp-accent-hover); text-decoration: underline; }

/* ---------- layout ---------- */
.lp-main {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 48px;
  padding: 40px;
  align-items: start;
}
/* delete.html omits the sidebar entirely and opts out explicitly. */
.lp-main--solo { grid-template-columns: minmax(0, 1fr); }
/* Fallback: sidebar present but left hidden (e.g. too few headings, or JS failed). */
.lp-main:has(.lp-toc[hidden]) { grid-template-columns: minmax(0, 1fr); }

/* ---------- table of contents ---------- */
.lp-toc {
  position: sticky;
  top: 96px;
  max-height: calc(100vh - 128px);
  overflow-y: auto;
}
.lp-toc-details > summary { list-style: none; cursor: default; }
.lp-toc-details > summary::-webkit-details-marker { display: none; }
.lp-toc-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-muted);
  padding-bottom: 12px;
  border-bottom: 1px solid var(--lp-rule-strong);
  margin-bottom: 12px;
}
.lp-toc-list { list-style: none; margin: 0; padding: 0; }
.lp-toc-item a {
  display: block;
  padding: 6px 10px;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--lp-muted);
  text-decoration: none;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
}
.lp-toc-item a:hover { color: var(--lp-ink); background: var(--lp-surface); }
.lp-toc-h3 a { padding-left: 24px; font-size: 12.5px; }
.lp-toc-item a.lp-toc-active {
  color: var(--lp-accent);
  border-left-color: var(--lp-accent);
  font-weight: 600;
}

/* ---------- document ---------- */
.lp-doc { max-width: var(--lp-measure); }
.lp-doc > *:first-child { margin-top: 0; }

.lp-doc h1 {
  font-size: 40px;
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}
.lp-doc h2 {
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 48px 0 12px;
  padding-top: 24px;
  border-top: 1px solid var(--lp-rule-strong);
}
.lp-doc h3 {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 600;
  margin: 28px 0 8px;
}
/* Any anchor target — not just headings — must clear the sticky header on jump. */
.lp-doc [id] { scroll-margin-top: 96px; }
.lp-doc p, .lp-doc li { font-size: 16px; }
.lp-doc p { margin: 0 0 16px; }
.lp-doc ul, .lp-doc ol { margin: 0 0 16px; padding-left: 22px; }
.lp-doc li { margin-bottom: 8px; }
.lp-doc strong { font-weight: 700; }
.lp-doc .subtitle { color: var(--lp-muted); font-size: 14px; margin-bottom: 32px; }

.lp-doc a { color: var(--lp-accent); text-decoration: underline; text-underline-offset: 2px; }
.lp-doc a:hover { color: var(--lp-accent-hover); }

.lp-doc blockquote {
  margin: 0 0 16px;
  padding: 12px 18px;
  border-left: 3px solid var(--lp-accent);
  background: var(--lp-surface);
  color: var(--lp-muted);
}

/* Emphasized legal callouts (e.g. the AI-disclaimer box). Source docs mark
   these with class="highlight"; re-expressed here in the brand palette
   instead of the old pink/crimson inline styles they used to carry. */
.lp-doc .highlight {
  background: rgba(255, 0, 0, 0.05);
  border-left: 4px solid var(--lp-accent);
  padding: 0.75rem 1rem;
  margin: 1rem 0;
  border-radius: 0 4px 4px 0;
}

/* Source docs still carry a legacy hand-written table of contents
   (class="toc"). The generated sidebar (.lp-toc) replaces it; hide the
   legacy markup in place rather than editing the HTML. */
.lp-doc .toc { display: none; }

/* ---------- tables (wrapper injected by legal.js) ---------- */
.lp-tablewrap { overflow-x: auto; margin: 0 0 20px; -webkit-overflow-scrolling: touch; }
.lp-doc table { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 14.5px; }
.lp-doc th, .lp-doc td {
  text-align: left;
  vertical-align: top;
  padding: 10px 14px;
  border-bottom: 1px solid var(--lp-rule-strong);
}
.lp-doc th {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-muted);
  background: var(--lp-surface);
  white-space: nowrap;
}
.lp-doc tbody tr:last-child td { border-bottom: none; }

/* ---------- forms (delete.html) ---------- */
.lp-doc .box {
  border: 1px solid var(--lp-rule-strong);
  border-radius: 10px;
  padding: 20px;
  margin: 20px 0;
  background: var(--lp-surface);
}
.lp-doc input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  font: inherit;
  padding: 10px 12px;
  border: 1px solid var(--lp-rule-strong);
  border-radius: 8px;
  background: #fff;
  color: var(--lp-ink);
  max-width: 320px;
  width: 100%;
}
.lp-doc button {
  font: inherit;
  font-weight: 600;
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  background: var(--lp-ink);
  color: #fff;
  cursor: pointer;
}
.lp-doc button:hover { background: #000; }
.lp-doc .ok  { color: #0A7A3C; font-weight: 600; }
.lp-doc .err { color: #D40000; font-weight: 600; }

/* ---------- footer ---------- */
.lp-footer {
  padding: 32px 40px 48px;
  border-top: 1px solid var(--lp-rule-strong);
}
.lp-footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 16px; }
.lp-footer-nav a {
  font-size: 14px;
  font-weight: 600;
  color: var(--lp-ink);
  text-decoration: none;
}
.lp-footer-nav a:hover { color: var(--lp-accent); text-decoration: underline; }
.lp-copyright { margin: 0; font-size: 13px; color: var(--lp-muted); }

/* ---------- responsive ---------- */
@media (max-width: 1023px) {
  .lp-header { padding: 16px 20px; }
  .lp-main { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 24px 20px; }
  .lp-toc {
    position: sticky;
    top: 88px;
    z-index: 20;
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--lp-rule-strong);
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--lp-surface);
  }
  .lp-toc-details > summary { cursor: pointer; }
  .lp-toc-title { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .lp-toc-details[open] .lp-toc-title { border-bottom: 1px solid var(--lp-rule-strong); margin-bottom: 8px; padding-bottom: 10px; }
  .lp-doc h1 { font-size: 30px; }
  .lp-doc h2 { font-size: 21px; margin-top: 36px; }
  .lp-footer { padding: 24px 20px 36px; }
}

/* ---------- print ---------- */
@media print {
  .lp-header, .lp-toc, .lp-footer { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .lp-shell { border: none; max-width: none; }
  .lp-main { display: block; padding: 0; }
  .lp-doc { max-width: none; }
  .lp-doc h2 { break-after: avoid; border-top: 1px solid #999; }
  .lp-doc h3 { break-after: avoid; }
  .lp-doc table, .lp-tablewrap { break-inside: auto; overflow: visible; }
  .lp-doc a { color: #000; text-decoration: underline; }
  .lp-doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; word-break: break-all; }
}
