/* ============================================
   Legal page — long-form prose styling.

   Scoped via .gs-legal-body so generic base.css typography stays
   untouched. The legal text is dense (60+ subsections, many
   inline links to GDPR articles and 3rd-party policies), so we
   bias toward:
     - Narrow column (≈720px) for line-length readability
     - Generous heading top-margin to chunk the doc visually
     - Smaller h4 (subsections) than h3 (top-level sections)
     - Visible blue links since the page is mostly functional
       cross-references, not editorial prose
     - scroll-margin-top on anchored elements so in-page jumps
       (e.g. clicking #imprint from a TOC) clear the sticky
       page header
   ============================================ */

/* No separate hero — the page title sits at the top of the body
   column. Top padding clears the fixed page header (~60px) plus
   enough breathing room that the title doesn't feel pinned. */
.gs-legal-body {
  padding-top: 7rem;
  padding-bottom: 6rem;
}

/* Inner column — narrow for prose readability. var(--content-narrow)
   = 720px in tokens.css, which matches the canonical "blog post"
   width and reads comfortably for legal text. Center within the
   white section. */
.gs-legal-body__inner {
  max-width: var(--content-narrow);
  margin: 0 auto;
}

/* Page title — large, sits at top of the body. No bottom border
   here: the first <h3> below already has a `border-top` that
   creates the divider line visible between the title and the
   first section ("Imprint"). */
.gs-legal-body__title {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  line-height: var(--leading-tight);
  margin: 0 0 2.5rem;
  text-wrap: balance;
}

/* ─── Headings ───────────────────────────────────────────────
   - h3: top-level sections (Imprint, Terms, Privacy Policy)
   - h4: numbered subsections (1. Backups, 2. Links, …)
   - <p><strong>: in-section labels (Publisher, Copyright, etc.)
     are left as-is so the live page's anchor IDs keep working;
     they read as bold leads, not headings.
   ──────────────────────────────────────────────────────────── */
.gs-legal-body h3 {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 4rem 0 1.25rem;
  /* Section borders separate the three top-level sections */
  padding-top: 2rem;
  border-top: 1px solid var(--color-border);
}

/* First h3 doesn't need a top border — it's right under the hero. */
.gs-legal-body h3:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.gs-legal-body h4 {
  font-size: var(--text-h5);
  font-weight: var(--weight-bold);
  color: var(--color-fg);
  margin: 2.5rem 0 0.75rem;
}

/* ─── Body text ──────────────────────────────────────────────
   Paragraphs at base size, comfortable line height for long
   reading. Bold "labels" (e.g., <p><strong>Publisher</strong></p>)
   that punctuate the imprint section get a bit more breathing
   room above. */
.gs-legal-body p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0 0 1rem;
  text-wrap: pretty;
}

/* A paragraph that's just a <strong> label acts as a mini-header. */
.gs-legal-body p > strong:only-child {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-fg);
}

/* Address-like content (street / postal info) — preserve line
   breaks from the source <br> tags; no italic. */
.gs-legal-body address {
  font-style: normal;
  margin: 0 0 1rem;
}

/* ─── Lists ──────────────────────────────────────────────────
   GDPR-style lists of 3rd-party services / cookies — keep the
   indent generous so list bullets sit clearly to the left of
   text, but not so far that wrapped lines lose their indent. */
.gs-legal-body ul,
.gs-legal-body ol {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}
.gs-legal-body li {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-fg-body);
  margin: 0 0 0.5rem;
}

/* ─── Links ──────────────────────────────────────────────────
   Prose-link convention from .gs-wgs-section__lede: inherit
   text color, underlined at rest, coral on hover. Reads as
   functional cross-references rather than "click me here" UI. */
.gs-legal-body a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}
.gs-legal-body a:hover {
  color: var(--color-brand-accent);
}

/* ─── Anchor offsets ─────────────────────────────────────────
   Many paragraphs and headings have ids (#imprint, #copyright,
   #1-our-commitment-to-data-protection, …). When deep-linked,
   the target needs to clear the fixed page header (~60px) or it
   ends up hidden beneath the chrome. */
.gs-legal-body [id] {
  scroll-margin-top: 5rem;
}