/* ==========================================================================
   Legal pages — Impressum, Datenschutzerklärung, AGB and their EN and FR
   counterparts.

   These pages use page.php's document layout rather than its visual intro:
   no picture, the title at the top, then the clauses. The reference is the
   way the trade sets the same documents — flavex.com/en/gtc/ — where the
   page opens on the heading and the status line and goes straight into
   numbered sections at the full content width.

   Two things follow from that, and they are the whole of this file:

   1. The page has to open on the document. The section's top padding is cut
      and the title block is a plain header, so the first clause is visible
      without scrolling.

   2. The text runs the content column's width rather than a reading measure.
      A policy is scanned for the one clause that answers a question, not read
      end to end, and the wide setting is what the documents this one sits
      beside look like. Long lines are the cost; the section rhythm below is
      what keeps them navigable.

   Everything is scoped to .sec--doc or .art--legal, so no other page that
   renders post content changes.
   ========================================================================== */

/* --------------------------------------------------------------------------
   The document header.
   -------------------------------------------------------------------------- */
.sec--doc{padding-top:var(--s-7)}

.doc-head{margin:0 0 var(--s-6)}
.doc-head h1{margin:0}

/* The one-line summary of what the document covers. Kept, because a reader
   landing from a footer link is often not sure which of the three documents
   they want, but set at body size rather than as a lede — this is a reference
   page, not an introduction to one. */
.doc-lede{
  margin:var(--s-3) 0 0;max-width:80ch;
  font-size:var(--fs-small);line-height:var(--lh-small);color:var(--muted);
}

/* --------------------------------------------------------------------------
   The document body.
   -------------------------------------------------------------------------- */

/* Section headings. .art h2 is a page heading; here it is a clause heading,
   so it takes the smaller size and earns its separation from the space above
   rather than from weight. */
.art--legal > h2{
  margin-top:var(--s-6);margin-bottom:var(--s-3);
  font-size:var(--fs-h3);
}
.art--legal > h2:first-child{margin-top:0}

.art--legal > p{margin:0 0 var(--s-4)}

/* The "Stand / Last updated" line opens the document. It is metadata about
   the text, not part of it, so it takes the site's data face and steps back —
   the same treatment the reference gives its "Status:" line. */
.art--legal > p:first-child{
  margin:0 0 var(--s-6);
  font-family:var(--data);font-size:var(--fs-micro);font-weight:var(--fw-micro);
  letter-spacing:var(--ls-micro);line-height:var(--lh-micro);text-transform:uppercase;
  color:var(--sage);
}

/* The company-details table opens the Impressum and follows the status line
   on the other two. */
.art--legal > .wp-block-table{margin:0 0 var(--s-6)}

/* Pending register values are set in italics by the content. Give them the
   site's pending treatment instead, so a reader can see at a glance which
   fields are still outstanding. */
.art--legal em{font-style:normal;color:var(--muted)}
.art--legal td em{
  font-family:var(--data);font-size:var(--fs-micro);
  letter-spacing:var(--ls-micro);text-transform:uppercase;
}

@media (max-width:640px){
  .sec--doc{padding-top:var(--s-6)}
  .art--legal > h2{margin-top:var(--s-5)}
}