/*
 * Prose: the legal pages and Careers.
 *
 * These are the only pages on the site whose content is written in the block
 * editor rather than laid out in PHP, and the only pages likely to be printed.
 * Everything a German legal text actually contains is styled here: numbered
 * clauses, cookie and shipping tables, address blocks, the Muster-Widerrufs-
 * formular, footnote markers, and long unbreakable strings like an IBAN or a
 * VAT number.
 *
 * Loaded twice, on purpose, and from this one file both times: once on the front
 * end after base.css, and once into the block editor canvas by
 * cof_editor_prose_styles() in inc/editor.php, which reads this file and rewrites
 * its `.cof-prose` scope to `body` because the canvas has no such wrapper. So
 * what the client types is what the visitor gets, and there is no second copy of
 * these rules anywhere to fall out of step.
 *
 * @package COF
 */

/* ------------------------------------------------------------------ Flow --- */

.cof-prose {
  max-width: 76ch;
  font-size: 16px;
  line-height: 1.7;
  color: var(--cof-body);
}
.cof-prose > * + * { margin-top: 1.1em; }

/*
 * The child combinator above only reaches the top level. Content inside a group,
 * a list item, a table cell or a quote gets no spacing at all without this, and
 * the Muster-Widerrufsformular is a group, so it would otherwise collapse into
 * one wall of text.
 */
.cof-prose li > * + *,
.cof-prose blockquote > * + *,
.cof-prose td > * + *,
.cof-prose .wp-block-group > * + * { margin-top: 0.9em; }

/* ------------------------------------------------------------- Headings --- */

/*
 * Serif, and set here rather than in theme.json's styles.elements. Putting
 * headings in theme.json applied them site-wide and turned eight COFocus
 * headings and the Cafe address serif, which is the bug that removed them.
 * Scoped to .cof-prose they reach only the pages that want them.
 */
.cof-prose :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--cof-serif);
  font-weight: 400;
  color: var(--cof-ink);
  /* Inherited 1.7 from the body gave a wrapped German heading 51px of leading. */
  line-height: 1.25;
  text-wrap: balance;
}
.cof-prose h1 { font-size: 34px; margin-top: 1.6em; }
.cof-prose h2 { font-size: 30px; margin-top: 1.8em; }
.cof-prose h3 { font-size: 23px; margin-top: 1.5em; }
/* An AGB runs to three heading levels. Below h3 the serif stops earning its
   keep at small sizes, so h4 to h6 step down into the sans face instead of
   shrinking past legibility. */
.cof-prose :is(h4, h5, h6) {
  font-family: var(--cof-sans);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 1.4em;
}
.cof-prose h4 { font-size: 17px; }
.cof-prose h5 { font-size: 15px; }
.cof-prose h6 { font-size: 14px; text-transform: uppercase; letter-spacing: 0.09em; }

/* An anchored clause should not land under the sticky nothing at the top. */
.cof-prose :target { scroll-margin-top: 120px; }

/* ---------------------------------------------------------------- Lists --- */

/*
 * No CSS counters. German legal text numbers its own clauses (1., 1.1, 1.1.1)
 * because the numbers are cited in other documents and in the text itself, so
 * they arrive typed. A counter on top of typed numbers prints "1.1 1.1", and
 * nobody would see it until the lawyer's text landed.
 */
.cof-prose :is(ul, ol) { padding-left: 1.4em; }
.cof-prose ul { list-style: disc; }
.cof-prose ol { list-style: decimal; }
.cof-prose li + li { margin-top: 0.4em; }
.cof-prose li > :is(ul, ol) { margin-top: 0.4em; }

/* Definition lists carry the Impressum's field/value pairs. */
.cof-prose dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4em 1.4em; }
.cof-prose dt { font-weight: 600; color: var(--cof-ink); }
.cof-prose dd { margin: 0; }

/* --------------------------------------------------------------- Tables --- */

/*
 * The Datenschutz cookie table and the Versand rate table. Wrapped in its own
 * scroller because a four-column rate table does not fit a phone, and the
 * alternative is a page that scrolls sideways.
 */
.cof-prose :is(table, .wp-block-table table) {
  width: 100%;
  /*
   * min-width is what makes the scroller above actually scroll. width: 100%
   * alone means the table always fits its container, so overflow-x: auto has
   * nothing to overflow and a five-column cookie table on a phone squeezes to
   * about 40px a column instead.
   */
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 15px;
}
.cof-prose .wp-block-table { overflow-x: auto; }
/*
 * Core paints a 3px bar in currentColor under every thead. `.cof-prose thead`
 * ties with `.wp-block-table thead` on specificity, and ties are decided by
 * source order, which is not something to rely on when one of the two sheets is
 * injected inline by WordPress. One extra class settles it.
 */
.cof-prose .wp-block-table thead,
.cof-prose thead { border-bottom: 1px solid var(--cof-hairline); }
.cof-prose :is(th, td) {
  padding: 10px 14px;
  border: 1px solid var(--cof-hairline);
  text-align: left;
  vertical-align: top;
}
.cof-prose th { background: var(--cof-card); font-weight: 600; color: var(--cof-ink); }
.cof-prose caption,
.cof-prose figcaption { font-size: 14px; color: var(--cof-muted); margin-top: 0.6em; text-align: left; }

/* ------------------------------------------------------------ Set pieces --- */

/* The trader identity in the Impressum, and again inside the model form. */
.cof-prose address { font-style: normal; line-height: 1.8; }

.cof-prose blockquote {
  padding-left: 20px;
  border-left: 2px solid var(--cof-rule);
  color: var(--cof-muted);
}

.cof-prose :is(hr, .wp-block-separator) {
  height: 1px;
  background: var(--cof-hairline);
  border: 0;
  margin-block: 2em;
}

/*
 * The Muster-Widerrufsformular. A group with this class is delimited by a real
 * border AND by the rules the pattern puts either side of it, because the same
 * text has to survive being pasted into the order confirmation email, where the
 * stylesheet does not travel.
 */
.cof-prose .cof-formbox,
.cof-prose .wp-block-group.cof-formbox {
  padding: 26px 28px;
  border: 1px solid var(--cof-control);
  border-radius: var(--cof-r-thumb);
  background: var(--cof-card);
}

.cof-prose sup, .cof-prose sub { font-size: 0.72em; line-height: 0; }
.cof-prose strong { font-weight: 600; color: var(--cof-ink); }
.cof-prose a { text-decoration: underline; text-underline-offset: 3px; }
.cof-prose :is(code, pre) { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.92em; }
.cof-prose pre { padding: 16px; background: var(--cof-card); overflow-x: auto; }

/*
 * An IBAN, a VAT number or a support URL is one unbreakable token. body carries
 * overflow-x: hidden, so without this it is not scrolled to, it is simply cut
 * off the side of a phone and gone.
 */
.cof-prose { overflow-wrap: anywhere; }
.cof-prose :is(dd, li) { overflow-wrap: anywhere; }
/*
 * Cells get break-word rather than the inherited anywhere. `anywhere` counts
 * toward an element's min-content width, so it let every cell shrink to one
 * character and the table squeezed to fit the phone instead of scrolling, with
 * ordinary words broken mid-syllable. `break-word` breaks only a token that
 * genuinely cannot fit, and leaves the table's natural width alone.
 */
.cof-prose :is(th, td) { overflow-wrap: break-word; }

/* ------------------------------------------------------------ Empty page --- */

/*
 * Six of these pages are published with no content. An empty page returning 200
 * with a heading and a divider over nothing reads as finished. It is not, and
 * saying so is the one thing that can be said here without inventing legal text.
 */
.cof-prose__pending {
  padding: 20px 24px;
  border: 1px dashed var(--cof-flag);
  border-radius: var(--cof-r-input);
  color: var(--cof-flag);
  font-size: 15px;
  line-height: 1.6;
  max-width: 62ch;
}
.cof-prose__pending strong { color: var(--cof-flag); font-weight: 600; }