/* ============================================================
   legal.css - one stylesheet shared by two pages: /privacy/ and
   /terms/. Shared prose template: a single narrow 820px column of
   a heading block, a hairline and stacked sections.
   Reuses shared tokens and classes from tokens.css/base.css/
   components.css; only the layout below is page-specific. All
   classes prefixed legal- to avoid collisions.
   Copy note: both pages carry the client's supplied legal text
   (August 2025); edits happen in the two page HTML files, this
   CSS should rarely need to change. (The former /impressum/ page
   was removed at the client's request; its .legal-row styles were
   deleted with it and live in git history if ever needed again.)
   How to edit: add a section by duplicating a .legal-section block
   (title + body) in the page HTML; the column gap spaces it
   automatically.
   ============================================================ */

/* Body wrapper. Figma: pt 110px, pb 120px, centered narrow column. */
.legal-body {
  padding-top: 110px;
  padding-bottom: var(--space-28); /* 120px */
}

/* Narrow content column. Figma width 820px, centered inside the container.
   30px vertical rhythm between every block (heading, hairline, sections). */
.legal-col {
  max-width: 820px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8); /* 30px target; 32px token is the nearest step */
}

/* Mini hero heading block: eyebrow + title + subhead, 20px internal gap. */
.legal-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-5); /* 20px */
}

/* Hero eyebrow: the shared 12px uppercase label, recolored to accent. */
.legal-hero__eyebrow {
  color: var(--accent);
  letter-spacing: 0.12em; /* Figma tracking 1.44px on 12px */
}

/* Page title. Figma: 44px, tracking -1px, display font (Switzer/Manrope). */
.legal-hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -1px;
  color: var(--text-primary);
}

/* Subhead. Figma: Inter 17px, secondary, line-height 1.55. */
.legal-hero__sub {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Hairline separating hero from prose. Figma: #e1e9f0 (--border-card). */
.legal-rule {
  height: 1px;
  border: 0;
  background: var(--border-card);
}

/* A prose section: bold title + secondary body. Figma gap 10px. */
.legal-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3); /* 12px target; nearest to Figma 10px */
}
.legal-section__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.3;
  color: var(--text-primary);
}
.legal-section__body {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
}
.legal-section__body a {
  color: var(--accent);
}
.legal-section__body a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Extra spacing when a section stacks several paragraphs. */
.legal-section__body + .legal-section__body {
  margin-top: 12px;
}

/* Small muted meta line (Last updated / Effective date), sits under the
   hairline above the intro. */
.legal-meta {
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--text-muted);
}

/* Bulleted list inside a section. The global reset removes list markers,
   so disc is re-enabled here; markers use the accent colour. */
.legal-list {
  margin: 0;
  padding-left: 20px;
  list-style: disc;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.75;
  color: var(--text-secondary);
}
.legal-list li::marker {
  color: var(--accent);
}
.legal-list a {
  color: var(--accent);
}

/* Responsive: relax the top padding on small screens. */
@media (max-width: 768px) {
  .legal-body {
    padding-top: var(--space-14); /* 64px */
    padding-bottom: var(--space-14);
  }
  .legal-hero__title {
    font-size: clamp(32px, 8vw, 40px);
  }
}