/* Vereen Injury Medical Group — legal document pages
   Shared by privacy-policy.html and terms-of-service.html.

   WHY A SEPARATE STYLESHEET, NOT index.html's inline block: index.html carries
   ~150KB of inline CSS built for one long marketing page — a hero canvas, scroll
   reveals, vignette consoles, an accordion. A legal page needs none of it, and
   copying it would mean two places to fix every token drift. This file styles
   exactly what these two pages are: a nav, a long readable document, a footer.
   It consumes assets/css/tokens.css and declares no colour of its own.

   GROUND IS IVORY, NOT NAVY. The marketing page is a dark luminous field; a
   10,000-word contract set in ivory-on-navy is punishing to read and worse to
   print. Navy text on ivory is 14.8:1, the nav and footer stay navy, and the
   brand reads as one object across both surfaces. */

/* ---------- 1. RESET ---------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-ivory-100);
  color: var(--color-navy-700);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }

/* ---------- 2. BASE ELEMENTS ---------- */
a { color: var(--color-gold-700); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--color-navy-700); }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-gold-700);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ---------- 3. LAYOUT ---------- */
/* One left edge, matching index.html's spine. */
.container {
  width: 100%;
  max-width: 84rem;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: fixed; top: var(--space-3); left: var(--space-3); z-index: 100;
  transform: translateY(calc(-100% - var(--space-3)));
  padding: 9px 15px; border-radius: var(--radius-sm);
  background: var(--color-navy-900); color: var(--color-gold-300);
  border: 1px solid rgb(198 166 98 / 0.4);
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  transition: transform var(--duration-ui) var(--ease);
}
.skip-link:focus, .skip-link:focus-visible { transform: none; }

/* ---------- 4. NAV ---------- */
/* Deliberately simpler than the homepage nav: no section links (there are no
   sections here), no mobile overlay, no burger. Brand out, one way back in. */
.nav { position: sticky; top: 0; z-index: 50; background: var(--color-navy-900); }
.nav-in {
  display: flex; align-items: center; gap: var(--space-6);
  min-height: var(--nav-offset);
  width: 100%; max-width: 84rem; margin-inline: auto;
  padding-inline: var(--gutter);
}
.nav .brand { display: block; text-decoration: none; }
.nav .brand img { width: 168px; height: auto; }
.navcta { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-4); }
.navcta a {
  font-size: var(--text-sm); font-weight: 600; text-decoration: none;
  transition: color var(--duration-fast) var(--ease), background var(--duration-fast) var(--ease);
}
.navcta .back { color: var(--color-ivory-100); }
.navcta .back:hover { color: var(--color-gold-300); }
.navcta .demo {
  padding: 10px 18px; border-radius: var(--radius-btn);
  background: var(--color-gold-500); color: var(--color-navy-900);
}
.navcta .demo:hover { background: var(--color-gold-300); }

/* ---------- 5. DOC HEADER ---------- */
.doc-head { padding-block: var(--space-16) var(--space-12); border-bottom: 1px solid rgb(14 39 64 / 0.12); }
.kicker {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  color: var(--color-gold-700);
}
.doc-head h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(var(--text-2xl), 5vw, var(--text-4xl));
  line-height: 1.08;
  letter-spacing: -0.01em;
}
.doc-dates {
  margin: var(--space-6) 0 0;
  font-size: var(--text-sm); color: var(--color-slate-500);
}
.doc-dates strong { color: var(--color-navy-700); font-weight: 600; }
.doc-lede {
  margin: var(--space-6) 0 0; max-width: 68ch;
  font-size: var(--text-lg); line-height: 1.6; color: var(--color-slate-500);
}

/* ---------- 6. DOC BODY + TOC ---------- */
.doc-wrap {
  display: grid; gap: var(--space-16);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--space-12) var(--space-24);
}
@media (min-width: 1041px) {
  .doc-wrap { grid-template-columns: 17rem minmax(0, 1fr); gap: var(--space-16); }
  .toc { position: sticky; top: calc(var(--nav-offset) + var(--space-8)); align-self: start; max-height: calc(100vh - var(--nav-offset) - var(--space-16)); overflow-y: auto; }
}
.toc h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  color: var(--color-slate-500);
}
.toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.toc li { counter-increment: toc; }
.toc a {
  display: flex; gap: var(--space-3); padding: 5px 0;
  font-size: var(--text-sm); line-height: 1.45;
  color: var(--color-slate-500); text-decoration: none;
}
.toc a::before { content: counter(toc) "."; flex: none; color: var(--color-gold-700); font-variant-numeric: tabular-nums; }
.toc a:hover { color: var(--color-navy-700); }

.doc { max-width: 74ch; }
.doc > section { scroll-margin-top: var(--anchor-offset); padding-block: var(--space-8); }
.doc > section + section { border-top: 1px solid rgb(14 39 64 / 0.1); }
.doc h2 {
  margin: 0 0 var(--space-4);
  font-family: var(--font-display); font-weight: 400;
  font-size: var(--text-xl); line-height: 1.2;
}
.doc h2 .num { color: var(--color-gold-700); font-variant-numeric: tabular-nums; }
.doc h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--text-base); font-weight: 700; line-height: 1.35;
}
.doc h4 {
  margin: var(--space-6) 0 var(--space-2);
  font-size: var(--text-sm); font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--color-slate-500);
}
.doc p, .doc li { max-width: 74ch; }
.doc p { margin: 0 0 var(--space-4); }
.doc ul, .doc ol { margin: 0 0 var(--space-4); padding-inline-start: var(--space-6); }
.doc li { margin-bottom: var(--space-2); }
.doc li > ul, .doc li > ol { margin-top: var(--space-2); }
.doc strong { font-weight: 700; }
.doc dl { margin: 0 0 var(--space-4); }
.doc dt { font-weight: 700; margin-top: var(--space-3); }
.doc dd { margin: 0 0 var(--space-2); padding-inline-start: 0; color: var(--color-slate-500); }

/* Callout — the clauses a reader must not skim past. */
.callout {
  margin: 0 0 var(--space-6); padding: var(--space-6);
  background: var(--color-ivory-50);
  border: 1px solid rgb(14 39 64 / 0.12);
  border-left: 3px solid var(--color-gold-500);
  border-radius: var(--radius-md);
}
.callout > :last-child { margin-bottom: 0; }
.callout h3 { margin-top: 0; }

/* Uppercase legal blocks (disclaimers, liability caps). Kept at body size —
   all-caps at small sizes is the classic unreadable-contract failure. */
.legalese { text-transform: uppercase; font-size: var(--text-sm); letter-spacing: 0.01em; }

/* Data table — the CCPA category disclosure. Scrolls in its own box so the
   page body never scrolls sideways. */
.table-scroll { overflow-x: auto; margin: 0 0 var(--space-6); border: 1px solid rgb(14 39 64 / 0.12); border-radius: var(--radius-md); }
table { border-collapse: collapse; width: 100%; min-width: 42rem; font-size: var(--text-sm); }
caption { text-align: left; padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--color-slate-500); }
th, td { text-align: left; vertical-align: top; padding: var(--space-3) var(--space-4); border-bottom: 1px solid rgb(14 39 64 / 0.1); }
thead th { background: var(--color-parchment-200); font-weight: 700; }
tbody tr:last-child td { border-bottom: 0; }

/* Fill-in marker — deliberately loud. These are facts only the owner or counsel
   can supply; shipping the page with one still visible should be impossible to
   miss in review. Delete the <mark> tags, not just the styling. */
mark.fillin {
  background: #ffe9a8; color: #5c4200;
  padding: 1px 6px; border-radius: var(--radius-sm);
  font-weight: 700; font-size: 0.95em;
}

/* ---------- 7. FOOTER ---------- */
footer { background: var(--color-navy-900); color: var(--color-ivory-100); padding-block: var(--space-16) var(--space-8); }
footer a { color: var(--color-ivory-100); text-decoration: none; }
footer a:hover { color: var(--color-gold-300); text-decoration: underline; }
.foot-top { display: grid; gap: var(--space-12); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .foot-top { grid-template-columns: 1.6fr repeat(3, 1fr); } }
.foot-brand img { width: 200px; height: auto; }
.foot-desc { margin: var(--space-4) 0 0; max-width: 34ch; font-size: var(--text-sm); color: rgb(251 247 238 / 0.66); }
.foot-col h4 {
  margin: 0 0 var(--space-4);
  font-size: var(--text-xs); font-weight: 700;
  letter-spacing: var(--tracking-kicker); text-transform: uppercase;
  color: var(--color-gold-300);
}
.foot-col ul { margin: 0; padding: 0; list-style: none; }
.foot-col li { margin-bottom: var(--space-2); font-size: var(--text-sm); }
.foot-bar {
  display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-8);
  align-items: center;
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid rgb(251 247 238 / 0.14);
  font-size: var(--text-sm); color: rgb(251 247 238 / 0.62);
}
.foot-bar p { margin: 0; }
.foot-bar-nav { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); }
.foot-bar-nav a[aria-current="page"] { color: var(--color-gold-300); }
.foot-legal { margin-inline-start: auto; text-align: right; }
.foot-note { display: block; }

/* ---------- 8. RESPONSIVE ---------- */
@media (max-width: 1040px) {
  :root { --gutter: 24px; --nav-offset: 70px; }
  .navcta .back { display: none; }   /* the logo is the way home on small screens */
  .toc { padding-bottom: var(--space-8); border-bottom: 1px solid rgb(14 39 64 / 0.12); }
  .foot-legal { margin-inline-start: 0; text-align: left; }
}

/* ---------- 9. MOTION + PRINT ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; transition-duration: 1ms !important; }
}
@media print {
  .nav, .toc, .skip-link, footer { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .doc-wrap { display: block; padding: 0; }
  .doc, .doc p, .doc li { max-width: none; }
  .doc > section { break-inside: auto; page-break-inside: auto; }
  .doc h2 { break-after: avoid; page-break-after: avoid; }
  a { color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}