/* Helderberg Social: the legal pages (legal.html and the pages it lists).
   Built on site.css's tokens, so both themes follow the rest of the site. */

.legal-nav { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.legal-nav a { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--text); text-decoration: none; font-size: .9rem; background: var(--surface); }
.legal-nav a:hover, .legal-nav a:focus-visible { border-color: var(--brand); color: var(--brand); }
.legal-nav a[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: var(--surface); }

.legal-meta { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; margin: -.4rem 0 1.4rem; font-size: .88rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.legal-meta b { color: var(--text); font-weight: 600; }

.legal-doc h2 { font-size: 1.3rem; margin: 2rem 0 .6rem; text-wrap: balance; scroll-margin-top: 5rem; }
.legal-doc h2:first-of-type { margin-top: .6rem; }
.legal-doc h3 { font-size: 1.05rem; margin: 1.2rem 0 .4rem; }
.legal-doc p, .legal-doc li { max-width: 68ch; }
.legal-doc ul, .legal-doc ol { padding-left: 1.3rem; }
.legal-doc li + li { margin-top: .3rem; }
.legal-doc .clause { display: grid; grid-template-columns: 2.2rem 1fr; gap: 0 .4rem; }
.legal-doc .clause > .n { font-weight: 700; color: var(--brand); font-variant-numeric: tabular-nums; padding-top: .05rem; }
.legal-doc .clause > div > :first-child { margin-top: 0; }

.legal-toc { columns: 2 16rem; column-gap: 2rem; margin: 0; padding-left: 1.2rem; font-size: .95rem; }
.legal-toc li { break-inside: avoid; }

.legal-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.legal-table-wrap { overflow-x: auto; margin: .6rem 0 1rem; }
.legal-table th, .legal-table td { text-align: left; vertical-align: top; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.legal-table th { font-weight: 600; white-space: nowrap; }

.legal-docs { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); margin: 1rem 0 0; padding: 0; list-style: none; }
.legal-docs li { margin: 0; }
.legal-docs a.card { display: flex; flex-direction: column; gap: .3rem; height: 100%; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); text-decoration: none; }
.legal-docs a.card:hover, .legal-docs a.card:focus-visible { border-color: var(--brand); }
.legal-docs .card b { color: var(--brand); font-size: 1.05rem; }
.legal-docs .card span { color: var(--muted); font-size: .92rem; }
.legal-docs .card small { margin-top: auto; padding-top: .3rem; color: var(--muted); font-size: .8rem; font-variant-numeric: tabular-nums; }

.legal-note { border-left: 3px solid var(--accent); padding: .2rem 0 .2rem .9rem; margin: 1rem 0; }

.copybox { position: relative; margin: .8rem 0; }
.copybox pre { white-space: pre-wrap; word-wrap: break-word; max-height: 26rem; overflow: auto; margin: 0; padding: 1rem 1.1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface-2, var(--surface)); color: var(--text); font: .88rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.copybox button { margin-top: .5rem; }

@media print {
  .legal-nav, [data-hs-header], [data-hs-footer], .copybox button, .skip { display: none !important; }
  .legal-doc a { color: inherit; }
}