/*
  Veyra legal documents.
  ==========================================================================

  privacy.html, terms.html, refunds.html and cookies.html share this file and
  nothing else. It adds no colours, no type sizes and no spacing values of its
  own: every value below is a token from veyra-core.css, and the page furniture
  (.site-header, .shell, .site-footer, .button) is the marketing site's own,
  loaded from styles.css. So these pages cannot drift away from the homepage,
  and a change to the palette reaches them for free.

  The one thing a legal page needs that the marketing site does not is a
  READING MEASURE. Marketing copy is short and can sit in a wide column;
  fourteen screens of clauses cannot. Everything here serves that: a 68ch
  column, a standing table of contents beside it, and generous space between
  clauses so the eye can find its place again after looking away.

  Warm paper ground, deliberately. The navy is where the product lives; the
  words live on paper, which is the same split index.html already makes.
*/

/* ==========================================================================
   Document head
   ========================================================================== */

.legal-hero {
  padding: var(--space-20) 0 var(--space-12);
  border-bottom: 1px solid var(--rule);
}

.legal-eyebrow {
  margin: 0 0 var(--space-5);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-strong);
}

.legal-title {
  max-width: 24ch;
  margin: 0;
  font-size: clamp(2.25rem, 6vw, 3.25rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: var(--text);
}

.legal-lead {
  max-width: 64ch;
  margin: var(--space-6) 0 0;
  font-size: var(--text-lg);
  line-height: 1.55;
  color: var(--muted);
}

/*
  Effective date and reading time, on one hairline row. A legal document that
  does not say when it was last changed is not much use to the person who
  agreed to the previous version.
*/
.legal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
  margin: var(--space-8) 0 0;
  padding-top: var(--space-5);
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: var(--text-xs);
  letter-spacing: 0.04em;
  color: var(--muted);
}

.legal-meta dt {
  display: inline;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.legal-meta dd {
  display: inline;
  margin: 0 0 0 var(--space-2);
  color: var(--text);
}

.legal-meta > div {
  display: flex;
  align-items: baseline;
}

/* ==========================================================================
   Layout: contents beside the document
   ========================================================================== */

.legal-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 68ch);
  gap: var(--space-16);
  align-items: start;
  padding: var(--space-16) 0 var(--space-24);
}

.legal-toc {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.legal-toc-label {
  margin: 0 0 var(--space-1);
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-toc a {
  font-size: var(--text-sm);
  line-height: 1.4;
  color: var(--muted);
  border-left: 1px solid var(--rule);
  padding-left: var(--space-3);
  transition: color var(--duration-base) var(--ease),
    border-color var(--duration-base) var(--ease);
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: var(--text);
  border-left-color: var(--accent-strong);
}

/* ==========================================================================
   The document itself
   ========================================================================== */

.legal-doc > section + section {
  margin-top: var(--space-16);
}

/*
  Numbered headings, from a counter rather than typed into the markup: a
  clause inserted at 4 must not leave the author renumbering nine others,
  and a wrong number in a legal document is worse than no number.
*/
.legal-doc {
  counter-reset: clause;
}

.legal-doc h2 {
  display: flex;
  gap: var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: var(--text-2xl);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--text);
  counter-increment: clause;
  /* room for the anchor to land under the sticky header */
  scroll-margin-top: 104px;
}

.legal-doc h2::before {
  content: counter(clause, decimal-leading-zero);
  flex: none;
  padding-top: 0.42em;
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--accent-strong);
}

.legal-doc h3 {
  margin: var(--space-8) 0 var(--space-3);
  font-size: var(--text-md);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--text);
}

.legal-doc p {
  margin: 0 0 var(--space-4);
  font-size: var(--text-md);
  line-height: 1.68;
  color: var(--muted);
}

.legal-doc h2 + p,
.legal-doc h3 + p {
  color: var(--text);
}

.legal-doc a {
  color: var(--accent-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.legal-doc a:hover,
.legal-doc a:focus-visible {
  color: var(--primary);
}

.legal-doc strong {
  font-weight: 600;
  color: var(--text);
}

.legal-doc ul,
.legal-doc ol {
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.legal-doc li {
  margin-bottom: var(--space-3);
  font-size: var(--text-md);
  line-height: 1.6;
  color: var(--muted);
}

.legal-doc li::marker {
  color: var(--muted);
}

.legal-doc li > strong:first-child {
  color: var(--text);
}

.legal-doc code {
  padding: 2px 6px;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface-soft);
  font-family: var(--mono);
  font-size: 0.85em;
  color: var(--primary);
  /* a cookie name or storage key must be able to break rather than push the
     column sideways on a phone */
  overflow-wrap: anywhere;
}

/* --------------------------------------------------------------- a callout */

/*
  Used for the things a reader must not miss: what this document does NOT
  promise, and where a plain-language summary is only a summary.
*/
.legal-callout {
  margin: 0 0 var(--space-6);
  padding: var(--space-5) var(--space-6);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--accent-strong);
  border-radius: var(--radius-panel);
  background: var(--surface-soft);
}

.legal-callout :last-child {
  margin-bottom: 0;
}

/* ----------------------------------------------------------------- a table */

/*
  Every table on these pages is a register: cookies and what they are for,
  providers and what reaches them. The wrapper scrolls rather than the page,
  so a narrow screen never gets a horizontal body scroll.
*/
.legal-table-wrap {
  margin: 0 0 var(--space-6);
  overflow-x: auto;
  border: 1px solid var(--rule);
  border-radius: var(--radius-panel);
  background: var(--surface);
}

.legal-table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.legal-table caption {
  padding: var(--space-4) var(--space-5) 0;
  font-size: var(--text-sm);
  color: var(--muted);
  text-align: left;
}

.legal-table th,
.legal-table td {
  padding: var(--space-3) var(--space-5);
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--rule);
}

.legal-table thead th {
  font-family: var(--mono);
  font-size: var(--text-2xs);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-table tbody th {
  font-family: var(--mono);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--text);
  overflow-wrap: anywhere;
}

.legal-table td {
  color: var(--muted);
  line-height: 1.55;
}

.legal-table tbody tr:last-child th,
.legal-table tbody tr:last-child td {
  border-bottom: 0;
}

/* -------------------------------------------------------- closing contact */

.legal-contact {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: 1px solid var(--rule);
}

.legal-contact p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-md);
  color: var(--muted);
}

.legal-contact a {
  color: var(--accent-strong);
}

/* --------------------------------------------------- the other documents */

.legal-siblings {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.legal-siblings a {
  padding: var(--space-2) var(--space-4);
  border: 1px solid var(--rule);
  border-radius: var(--radius-control);
  font-size: var(--text-sm);
  color: var(--text);
  text-decoration: none;
  transition: border-color var(--duration-base) var(--ease),
    color var(--duration-base) var(--ease);
}

.legal-siblings a:hover,
.legal-siblings a:focus-visible {
  border-color: var(--accent-strong);
  color: var(--accent-strong);
}

/* ==========================================================================
   Narrow screens
   ==========================================================================
   The contents list stops standing beside the document and becomes a block
   above it. It is not hidden: on a phone it is the only way to get from
   clause 1 to clause 12 without a lot of scrolling.
   ========================================================================== */

@media (max-width: 900px) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-10);
    padding-top: var(--space-12);
  }

  .legal-toc {
    position: static;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--rule);
  }

  .legal-hero {
    padding-top: var(--space-16);
  }
}

@media (max-width: 520px) {
  .legal-doc h2 {
    font-size: var(--text-xl);
  }

  .legal-meta {
    gap: var(--space-2);
    flex-direction: column;
  }
}