/* LEGAL CENTER — the shared layout for approved legal documents.
 *
 * A NEW FILE, NOT AN EDIT TO pages.css
 *   The legal document layout is a surface the placeholder pages never had — a
 *   hero, a two-column reading layout, a sticky contents list and a print
 *   stylesheet. Adding it as its own file means the other twenty-odd pages that
 *   load pages.css are byte-identical, and the concurrent frontend work in the
 *   shared stylesheets is untouched.
 *
 *   Only the legal document pages load it (see scripts/_legal-document.js).
 *
 * IT INHERITS THE DESIGN LANGUAGE
 *   Type, spacing and layout follow the content pages. Colour follows them too,
 *   including the dark scheme — see the token block immediately below, which is
 *   the one part of this file worth reading before changing anything.
 */

/* ── COLOUR ───────────────────────────────────────────────────────────────────
 *
 * READ THIS BEFORE USING `var(--muted, …)` ANYWHERE IN THIS FILE.
 *
 * `--muted` is not declared anywhere in this codebase — every use of it in
 * pages.css is really the literal fallback. And `.page` carries a
 * `prefers-color-scheme: dark` rule in pages.css that flips the body to
 * #111827/#f3f4f6, so a grey chosen against the light surface lands on a dark
 * one for any visitor whose system is set to dark. Measured, that is 2.48:1
 * against a 4.5:1 requirement — secondary text a lot of people simply cannot
 * read, and invisible to anyone reviewing on a light machine.
 *
 * So the muted colour and the hairline are declared here as local tokens with a
 * dark-scheme counterpart, matching how pages.css already handles .page-lede
 * and .page-prose. Everything below uses the tokens; nothing below reaches for
 * --muted or --line directly.
 *
 *   light  #4b5563 on #faf7f1 → 6.9:1        hairline rgba(18,33,28,.14)
 *   dark   #d1d5db on #111827 → 11.4:1       hairline #374151
 * ------------------------------------------------------------------------- */

.legal-doc {
  --legal-muted: #4b5563;
  --legal-line: rgba(18, 33, 28, 0.14);
  --legal-tint: rgba(18, 33, 28, 0.04);
  --legal-accent: #7B592F;
}

@media (prefers-color-scheme: dark) {
  .legal-doc {
    --legal-muted: #d1d5db;
    --legal-line: #374151;
    --legal-tint: rgba(255, 255, 255, 0.06);
    /* --brass-lt rather than --brass-ink: the dark-scheme surface is #111827,
       and the light-surface brass drops to about 2:1 against it. */
    --legal-accent: #D1B07D;
  }
}

/* ── hero ─────────────────────────────────────────────────────────────────── */

.legal-doc {
  display: block;
  padding: 0 0 4rem;
}

.legal-doc__hero {
  border-bottom: 1px solid var(--legal-line);
  padding: 3.5rem 0 2.25rem;
  margin-bottom: 2.5rem;
}

.legal-doc__eyebrow {
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

.legal-doc__title {
  margin: 0 0 1.5rem;
  /* Scales with the viewport but never below a comfortable reading size and
     never so large that a 26-word legal title wraps to four lines on a phone. */
  font-size: clamp(1.75rem, 1.15rem + 2.6vw, 2.75rem);
  line-height: 1.15;
  max-width: 22ch;
  overflow-wrap: anywhere;
}

/* The framework line some approved documents print under the title. */
.legal-doc__subtitle {
  margin: -1rem 0 1.5rem;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

.legal-doc__meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem 2rem;
  margin: 0 0 1.75rem;
  padding: 0;
  max-width: 60rem;
}

.legal-doc__meta-item { min-width: 0; }

.legal-doc__meta dt {
  margin: 0 0 0.15rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

.legal-doc__meta dd {
  margin: 0;
  font-size: 0.9375rem;
  /* Version strings and email addresses are long and unbreakable; without this
     they push the page into horizontal overflow at 390px. */
  overflow-wrap: anywhere;
}

.legal-doc__actions { margin: 0; }

/* ── layout ───────────────────────────────────────────────────────────────── */

.legal-doc__layout {
  display: grid;
  gap: 2.5rem;
  align-items: start;
}

@media (min-width: 60rem) {
  .legal-doc__layout {
    grid-template-columns: minmax(15rem, 18rem) minmax(0, 1fr);
    gap: 3.5rem;
  }
}

/* ── contents ─────────────────────────────────────────────────────────────── */

.legal-doc__toc { min-width: 0; }

@media (min-width: 60rem) {
  .legal-doc__toc {
    position: sticky;
    /* Clears the site header, which is fixed on scroll. */
    top: 5.5rem;
    /* The Privacy Policy has 26 entries. Letting the list scroll inside itself
       keeps the whole contents reachable on a 900px-tall window instead of
       clipping the last third of it. */
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

.legal-doc__toc-panel {
  border: 1px solid var(--legal-line);
  border-radius: 0.5rem;
  padding: 0.25rem 1rem 0.75rem;
}

@media (min-width: 60rem) {
  .legal-doc__toc-panel {
    border: 0;
    border-left: 2px solid var(--legal-line);
    border-radius: 0;
    padding: 0 0 0 1.25rem;
  }
}

.legal-doc__toc-summary {
  cursor: pointer;
  list-style: none;
  padding: 0.75rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
}

.legal-doc__toc-summary::-webkit-details-marker { display: none; }

.legal-doc__toc-summary::after {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-0.15rem, -0.15rem);
  transition: transform 150ms ease;
  flex: none;
}

.legal-doc__toc-panel[open] > .legal-doc__toc-summary::after {
  transform: rotate(-135deg) translate(-0.15rem, -0.15rem);
}

/* On desktop the contents are always open, so the disclosure affordance would
   be a control that promises something the layout does not do. */
@media (min-width: 60rem) {
  .legal-doc__toc-summary {
    cursor: default;
    padding: 0 0 0.5rem;
  }
  .legal-doc__toc-summary::after { display: none; }
}

.legal-doc__toc-title {
  margin: 0;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

.legal-doc__toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}

.legal-doc__toc-list li { margin: 0; }

.legal-doc__toc-list a {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  gap: 0.35rem;
  /* 44px minimum target height including the gap between rows. */
  padding: 0.55rem 0.25rem;
  min-height: 2.75rem;
  align-content: center;
  text-decoration: none;
  color: inherit;
  border-radius: 0.25rem;
}

.legal-doc__toc-list a:hover,
.legal-doc__toc-list a:focus-visible { text-decoration: underline; }

.legal-doc__toc-n {
  color: var(--legal-muted);
  font-variant-numeric: tabular-nums;
}

.legal-doc__toc-label { min-width: 0; }

/* The section currently being read. Marked with aria-current by legal-doc.js,
   so the styling and the accessible state are the same fact. */
.legal-doc__toc-list a[aria-current="true"] {
  font-weight: 600;
  text-decoration: underline;
}

/* ── the document body ────────────────────────────────────────────────────── */

.legal-doc__body {
  min-width: 0;
  /* A comfortable measure. Legal prose is dense and long lines make it worse. */
  max-width: 46rem;
  font-size: 1rem;
  line-height: 1.7;
}

.legal-doc__notice {
  border: 1px solid var(--legal-line);
  border-left-width: 3px;
  border-radius: 0.375rem;
  padding: 1rem 1.25rem;
  margin: 0 0 2.5rem;
}

.legal-doc__notice-title {
  margin: 0 0 0.35rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

.legal-doc__notice p { margin: 0; font-size: 0.9375rem; }

/* The approved conspicuous notice a document opens with.
   Distinguished by a rule and a tint, never by shrinking it — a notice that
   says "read this carefully" set smaller than the text around it is arguing
   with itself. Full body size, deliberately. */
.legal-doc__important {
  border-left: 3px solid var(--legal-accent, #7B592F);
  background: var(--legal-tint);
  padding: 1rem 1.25rem;
  margin: 0 0 2.5rem;
  border-radius: 0 0.375rem 0.375rem 0;
}

.legal-doc__important p { margin: 0; font-size: 1rem; }

.legal-doc__section { margin: 0 0 2.5rem; }

.legal-doc__h2 {
  margin: 0 0 0.85rem;
  font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  line-height: 1.3;
  /* The site header is fixed once the page scrolls; without this an anchor lands
     with its own heading hidden behind it. */
  scroll-margin-top: 6rem;
}

.legal-doc__h3 {
  margin: 1.75rem 0 0.6rem;
  font-size: 1.0625rem;
  line-height: 1.35;
  scroll-margin-top: 6rem;
}

.legal-doc__n {
  color: var(--legal-muted);
  font-variant-numeric: tabular-nums;
}

.legal-doc__body p { margin: 0 0 1rem; }

.legal-doc__list {
  margin: 0 0 1rem;
  padding-left: 1.35rem;
}

.legal-doc__list li { margin: 0 0 0.55rem; }

.legal-doc__address {
  font-style: normal;
  margin: 0 0 1rem;
  padding: 0.9rem 1.1rem;
  border-left: 2px solid var(--legal-line);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

/* ── the rest of the Legal Center ─────────────────────────────────────────── */

.legal-doc__related {
  margin: 3rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--legal-line);
}

.legal-doc__related-title {
  margin: 0 0 0.75rem;
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--legal-muted);
}

.legal-doc__related-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.9375rem;
}

.legal-doc__related-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.35rem 0;
  min-height: 2.75rem;
}

.legal-doc__related-list a { align-self: center; }

/* "Under Development" is TEXT, not a colour.
   A tint alone would carry the distinction only for people who can see it, and
   the distinction here is whether a document has been legally approved. */
.legal-doc__pending {
  align-self: center;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--legal-muted);
  border: 1px solid var(--legal-line);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}

.legal-doc__back {
  margin: 2.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--legal-line);
  font-size: 0.9375rem;
}

/* ── motion ───────────────────────────────────────────────────────────────── */

/* Smooth scrolling for the contents links. Declared on the root because that is
   the scrolling element, and withdrawn for anyone who has asked the system to
   reduce motion — a long document scrolled smoothly is exactly the kind of
   movement that setting exists for. */
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .legal-doc__toc-summary::after { transition: none; }
}

/* ── print ────────────────────────────────────────────────────────────────── */

/* A legal document is a thing people print and file. What survives the page is
   the document; what does not is every control that cannot be used on paper. */
@media print {
  .page-head,
  .page-foot,
  .legal-doc__toc,
  .legal-doc__actions,
  .legal-doc__back,
  .skip-link,
  .mrw,
  .mr-topbar {
    display: none !important;
  }

  .legal-doc,
  .legal-doc__hero {
    padding: 0;
    margin: 0 0 1rem;
    border: 0;
  }

  .legal-doc__layout {
    display: block;
    max-width: none;
    padding: 0;
  }

  .legal-doc__body {
    max-width: none;
    font-size: 11pt;
    line-height: 1.5;
  }

  .legal-doc__title { font-size: 20pt; }
  .legal-doc__h2 { font-size: 13pt; }
  .legal-doc__h3 { font-size: 11.5pt; }

  /* A heading orphaned at the foot of a page, or a section split mid-clause,
     is how a printed policy loses a provision in a filing cabinet. */
  .legal-doc__h2,
  .legal-doc__h3 { break-after: avoid; page-break-after: avoid; }

  .legal-doc__section { break-inside: auto; }
  .legal-doc__list li,
  .legal-doc__address { break-inside: avoid; page-break-inside: avoid; }

  .legal-doc__notice,
  .legal-doc__important {
    border: 1px solid #000;
    background: none;
    padding: 0.5rem 0.75rem;
  }

  /* The Legal Center cross-nav is navigation, and navigation does not print.
     The document itself is what goes in the filing cabinet. */
  .legal-doc__related { display: none !important; }

  /* No `content: attr(href)` rule here on purpose: every link in the approved
     document already prints its own destination as its label — the contact
     block writes out reservations@invstur.com in full — so appending the href
     would print the same address twice. */
  a { color: #000; text-decoration: underline; }
}