/* =========================================================================
   LEGAL pages (/terms, /privacy, /cookies)
   One file for all three: they share a single layout (long-form document with
   a table of contents), so this follows the landing.css precedent — one page
   file serving several routes — rather than three near-identical files.
   Loaded after tokens.css + system.css.

   The shell (topbar, brand, language picker) and every control come from
   system.css; this file holds the document layout only.
   ========================================================================= */


/* --------------------------------------------------------------------------
   CHROME — moved to system.css as .doc-topbar / .doc-back
   It now serves two page families (the three legal documents and /faq, with
   /pricing and /learn to come), and DESIGN.md's rule is that a style used by 2+
   page CSS files belongs in system.css. The rationale for the component lives
   there with it.
   -------------------------------------------------------------------------- */


/* --------------------------------------------------------------------------
   LAYOUT
   Narrower than /account's 820px: this is prose, and a measure of ~70ch is
   what keeps long paragraphs readable. Normal document flow (no locked
   viewport) — these pages are meant to be scrolled and printed.
   -------------------------------------------------------------------------- */

.legal-main {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-lg) var(--space-xl) 4rem;   /* .doc-back is its first child */
}

.legal-head { margin-bottom: var(--space-xl); }

.legal-title {
  font-family: var(--heading);
  font-size: var(--text-4xl); font-weight: 700;
  color: var(--ink);
  margin-bottom: var(--space-xs);
}
/* Effective/updated date. A legal document is worthless without one, so it is
   part of the structure, not an afterthought. */
.legal-meta {
  font-family: var(--body);
  font-size: var(--text-xs);
  color: var(--ink-faded);
  letter-spacing: .04em; text-transform: uppercase;
}

/* Draft banner: deliberately loud. These pages ship with placeholder text, and
   the one failure mode that matters is publishing them as if they were final.
   Delete this block (and its markup) once the real content lands. */
.legal-draft {
  display: flex; align-items: flex-start; gap: var(--space-sm);
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: rgb(var(--burgundy-rgb) / .06);
  border: 1px dashed var(--burgundy);
  border-radius: var(--radius-md);
  font-family: var(--body);
  font-size: var(--text-sm); line-height: 1.5;
  color: var(--ink);
}
.legal-draft svg {
  width: 17px; height: 17px;
  flex-shrink: 0; margin-top: 1px;
  color: var(--burgundy);
}


/* --------------------------------------------------------------------------
   TABLE OF CONTENTS
   Composes the shared .card; only the list layout is local. Anchor links, so
   a lawyer's clause numbering stays navigable however long the page gets.
   -------------------------------------------------------------------------- */

.legal-toc { margin-bottom: 2rem; }
.legal-toc-title {
  font-family: var(--heading);
  font-size: var(--text-xl); font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}
.legal-toc ol {
  margin: 0; padding-left: 1.3rem;
  display: grid; gap: .2rem;
  font-family: var(--body); font-size: var(--text-base);
  color: var(--ink-soft);
}
.legal-toc a {
  color: var(--cocoa-dk); text-decoration: none;
  transition: color var(--dur-fast);
}
.legal-toc a:hover { color: var(--burgundy); text-decoration: underline; }


/* --------------------------------------------------------------------------
   SECTIONS
   Separated by spacing and a hairline, per the design system's "no dashed
   dividers" rule. scroll-margin-top keeps an anchored heading clear of the
   fixed topbar when jumped to from the ToC.
   -------------------------------------------------------------------------- */

.legal-section {
  padding-top: var(--space-xl);
  margin-top: var(--space-xl);
  border-top: 1px solid var(--line-soft);
  scroll-margin-top: calc(var(--topbar-height) + var(--space-lg));
}
.legal-section:first-of-type { border-top: none; margin-top: 0; padding-top: 0; }

.legal-section h2 {
  font-family: var(--heading);
  font-size: var(--text-2xl); font-weight: 600;
  color: var(--ink);
  margin-bottom: var(--space-sm);
}
/* Clause number: quiet, in front of the heading, so the lawyer's numbering is
   visible without being the loudest thing on the line. */
.legal-section h2::before {
  content: attr(data-num) '. ';
  color: var(--ink-faded);
  font-weight: 600;
}
.legal-section p {
  font-family: var(--body);
  font-size: var(--text-md); line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: var(--space-md);
}
.legal-section p:last-child { margin-bottom: 0; }
.legal-section ul, .legal-section ol {
  margin: 0 0 var(--space-md); padding-left: 1.3rem;
  font-family: var(--body);
  font-size: var(--text-md); line-height: 1.65;
  color: var(--ink-soft);
}
.legal-section li { margin-bottom: var(--space-xs); }
/* A defined term or a party name inside prose. */
.legal-section strong { color: var(--ink); font-weight: 600; }
/* Emphasis in prose: the heading face in burgundy. An <em> that renders upright
   is deliberate here - Outfit has no italic, so honouring the tag literally would
   ship a synthetic oblique on every defined term (tokens.css). */
.legal-section em {
  font-family: var(--heading); font-weight: 600;
  color: var(--burgundy);
}
/* Prose links only. `:not(.btn)` is load-bearing: an <a class="btn btn--primary">
   inside a clause (the withdrawal form's "send by email") is a BUTTON, and this
   selector is more specific than `.btn--primary` (0,1,1 vs 0,1,0) — so without the
   exclusion it repainted the label --cocoa-dk on the --ink pill and the button read
   as empty. The first legal page to carry a button found it; the next one would
   have found it again. */
.legal-section a:not(.btn) { color: var(--cocoa-dk); }
.legal-section a:not(.btn):hover { color: var(--burgundy); }


/* --------------------------------------------------------------------------
   THE STATUTORY MODEL FORM (/withdrawal, clause 9)
   The form of Annex I part B, which the law requires be PUBLISHED — so it is
   visible, not behind a disclosure widget.

   Deliberately NOT a .card. It was one, above the fillable form, and two cream
   paper-2 boxes of the same width read as a broken form stacked on a working one:
   its bracketed hints ("[nome e cognome]") look exactly like unfilled inputs.
   Two things make it read as a QUOTED DOCUMENT instead, subordinate to the form
   above it rather than competing with it:
     - `--surface-inset`, the palette's recessed-well tone (the same figure/ground
       inversion `.adv-group` uses in the designer) — distinct from both the page's
       --paper and the form card's --paper-2, so it is a third surface and not a
       second copy of either;
     - smaller, denser type: the lines are a form to copy, not prose to read.
   It is NOT narrowed: it was capped at 30rem to read as an inset quotation, and a
   box of a third width under a full-width card looked like a fragment rather than a
   deliberate step down. Full column width, like the form — the tone and the density
   carry the distinction on their own.
   -------------------------------------------------------------------------- */

.legal-model {
  margin-bottom: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-inset);
  border-radius: var(--radius-md);
}
/* Overrides .legal-section p, which is sized for prose: 1.65 line-height and a
   --space-md gap between eight short labelled lines is a page of air. */
.legal-section .legal-model p {
  font-size: var(--text-sm);
  line-height: 1.45;
  margin-bottom: var(--space-xs);
  color: var(--ink-soft);
}
.legal-section .legal-model p:last-child { margin-bottom: 0; }


/* --------------------------------------------------------------------------
   VALIDATION MESSAGE (/withdrawal form)
   The text is the BROWSER's own (`field.validationMessage`, see withdrawal.js),
   so it stays localized with no second set of strings to keep in step — only the
   presentation is ours, which is the whole point of suppressing the native bubble.

   Burgundy and upright, NOT .field-hint's faded italic: that is the voice of an
   explanation, and this is an alert. `:empty` collapses it so the resting form
   reserves no space for a message that is not there.
   -------------------------------------------------------------------------- */

.legal-error {
  font-family: var(--body);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--burgundy);
}
.legal-error:empty { display: none; }


/* --------------------------------------------------------------------------
   FOOTER: cross-links between the three documents
   No copyright line here — the brand is already in the chrome above, and these
   three links are the only thing a reader of one document needs next.
   -------------------------------------------------------------------------- */

.legal-footer {
  margin-top: 3rem;
  padding-top: var(--space-xl);
  border-top: 1px solid var(--line-soft);
  text-align: center;
}
.legal-footer-links {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 1.1rem;
}
.legal-footer-links a {
  font-family: var(--body);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--ink-soft); text-decoration: none;
}
.legal-footer-links a:hover { color: var(--ink); }
/* The document you are already on: marked, not linked away. */
.legal-footer-links a.active { color: var(--ink); text-decoration: underline; }


/* --------------------------------------------------------------------------
   PRINT
   Legal pages get printed and attached to things. Drop the chrome, keep the
   document; the ToC's anchors are useless on paper.
   -------------------------------------------------------------------------- */

@media print {
  .doc-topbar, .doc-back, .legal-toc, .legal-draft { display: none; }
  .legal-main { max-width: none; padding: 0; }
  body { background: #fff; background-image: none; }
  .legal-section { break-inside: avoid-page; }
}


/* --------------------------------------------------------------------------
   RESPONSIVE
   The shared topbar/brand/hamburger steps live in system.css.
   -------------------------------------------------------------------------- */

/* The .doc-topbar / .doc-back steps moved to system.css WITH the component: a
   page that uses the chrome without loading this file (/faq) would otherwise get
   a topbar that never shrinks on a phone. */
@media (max-width: 820px) {
  .legal-main { padding: var(--space-md) var(--space-lg) 3rem; }
  .legal-title { font-size: var(--text-3xl); }
}

@media (max-width: 480px) {
  .legal-main { padding: var(--space-sm) var(--space-md) 2.5rem; }
  .legal-section h2 { font-size: var(--text-xl); }
}