/*
 * emo2026, document register.
 *
 * Loaded by inc/document-pages.php on the legal corpus only
 * (Datenschutzerklärung, AGB, Impressum, Widerrufsbelehrung, the online
 * withdrawal form, and their EN twins). Everything is scoped under the
 * `emo-doc` body class that file adds, so no other page pays for it.
 *
 * What it does: content.css dresses .content-prose for MARKETING, 21px on
 * 1.75 leading in a 720px column with 40px h2s. That is the right register
 * for a news post and the wrong one for a 47,000-character statute, which is
 * exactly the owner's complaint ("smaller text and decent headers"). Here the
 * body steps DOWN to 16px on 1.65, the column widens to 800px because smaller
 * type wants a slightly longer line, the paragraph rhythm tightens, and the
 * heading levels are rebuilt as document hierarchy: h2 = part title with a
 * hairline above and much more space above than below, h3 = numbered clause.
 *
 * It also styles the three pieces of furniture inc/document-pages.php
 * introduces: .doc-index (the table of contents), .doc-chip (the rendered
 * legacy [button] / [ga-opt-out] tags) and .doc-cta (the seeded
 * "widerrufen online" call to action on the Widerruf pages), plus
 * .doc-form-sample, the statutory Muster-Widerrufsformular panel.
 *
 * Tokens come from tokens.css. Only geometry that is genuinely document-only
 * stays local at the top. Plain CSS, no preprocessor, no nesting.
 *
 * NOTE: the theme has no global border-box reset, so every box here that
 * combines a width/max-width with padding sets its own box-sizing.
 */

:root {
	/* 16px type reads well a little wider than the 720px marketing column;
	   820px is the top of content.css's own editorial range. */
	--doc-column:            800px;

	/* Document body. 1.65 sits between the token base (1.5) and loose
	   (1.75): dense enough to scan a statute, open enough to read one. */
	--doc-line-height:       1.65;

	/* Anchor landing offset: clear the sticky navbar plus breathing room,
	   so a jumped-to heading is not welded under the chrome. */
	--doc-anchor-offset:     calc(var(--nav-height, 48px) + var(--space-6));

	/* Index panel. Quiet furniture: paper surface, hairline, small type. */
	--doc-index-bg:          var(--color-bg-elevated);
	--doc-index-border:      var(--color-border-hairline);

	/* Below this the index goes single-column, matching the theme's usual
	   phone/tablet cutover. */
	--doc-narrow-breakpoint: 833px;
}

/* ============================================================
 * 1. The column itself
 *
 * Every selector below is prefixed with .emo-doc, which makes it
 * (0,2,x) against content.css's (0,1,x) counterpart. Specificity,
 * not stylesheet order, is what guarantees these win.
 * ============================================================ */

.emo-doc .content-prose {
	max-width: var(--doc-column);
	font-size: var(--font-size-16);
	line-height: var(--doc-line-height);
	/* DESIGN-SPEC.md section 6: tracking is size-specific and body sits
	   near zero. content.css's -0.01em belongs to its 21px setting; at
	   16px it tightens the text past comfortable. */
	letter-spacing: 0;
	color: var(--color-text-primary);
}

/* Tighter default rhythm than the marketing 28px: a legal page is mostly
   consecutive paragraphs and the wide gaps made it read as a list of
   disconnected statements. */
.emo-doc .content-prose > * + * {
	margin-top: var(--space-4);
}

/* ============================================================
 * 2. Hierarchy
 *
 * h2 = part ("AGB für den Online-Verkauf", "Folgen des Widerrufs").
 * h3 = numbered clause ("1. Begriffsbestimmungen", "IV. Verpackungs-
 * und Versandkosten"). Both get tight leading and, crucially, far
 * more space above than below, so a heading binds to the text it
 * introduces instead of floating between two blocks.
 * ============================================================ */

.emo-doc .content-prose > h2 {
	margin-top: var(--space-9);
	padding-top: var(--space-5);
	/* A hairline, not a rule: it separates parts without drawing a box. */
	border-top: 1px solid var(--color-border-hairline);
	font-size: var(--font-size-28);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
}

/* The first heading sits directly under the index panel, which already
   ends in its own border. Two hairlines a few pixels apart read as a
   mistake, so the opening part title drops the rule. */
.emo-doc .content-prose > .doc-index + h2,
.emo-doc .content-prose > .doc-index + h3 {
	margin-top: var(--space-8);
	padding-top: 0;
	border-top: 0;
}

.emo-doc .content-prose > h3 {
	margin-top: var(--space-7);
	font-size: var(--font-size-21);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: var(--letter-spacing-base);
}

.emo-doc .content-prose > h4 {
	margin-top: var(--space-6);
	font-size: var(--font-size-16);
	font-weight: 600;
	line-height: var(--line-height-tight);
	letter-spacing: 0;
}

/* Bind each heading to whatever follows it, not just to a paragraph:
   in this corpus a clause title is followed by an <ol> as often as by
   a <p>. */
.emo-doc .content-prose > h2 + *,
.emo-doc .content-prose > h3 + *,
.emo-doc .content-prose > h4 + * {
	margin-top: var(--space-3);
}

/* Jump targets clear the sticky navbar. */
.emo-doc .content-prose h2,
.emo-doc .content-prose h3,
.emo-doc .content-prose h4,
.emo-doc .content-prose [id] {
	scroll-margin-top: var(--doc-anchor-offset);
}

/* ============================================================
 * 3. Lists
 *
 * The AGB is almost entirely numbered clauses (24 sections of <ol>),
 * so the marker column has to be deliberate: enough indent that the
 * number sits outside the text block, a quiet marker colour so the
 * numbering supports the text instead of competing with it.
 * ============================================================ */

.emo-doc .content-prose ul,
.emo-doc .content-prose ol {
	padding-left: 1.8em;
}

.emo-doc .content-prose li {
	margin-top: var(--space-2);
	padding-left: 0.2em;
}

.emo-doc .content-prose li::marker {
	color: var(--color-text-muted);
}

.emo-doc .content-prose li > ul,
.emo-doc .content-prose li > ol {
	margin-top: var(--space-2);
}

/* ============================================================
 * 4. Blocks: preformatted address panels, quoted documents, tables
 * ============================================================ */

/* The Widerruf pages hold the company address in a <pre> so the line
   breaks survive. Monospace is wrong for a postal address, and a fixed
   pre also forced a sideways scroll on phones, so this keeps the line
   breaks but reads as an address block. */
.emo-doc .content-prose pre {
	box-sizing: border-box;
	padding: var(--space-4) var(--space-5);
	background-color: var(--color-bg-elevated);
	border-radius: var(--radius-block);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	line-height: var(--line-height-base);
	white-space: pre-wrap;
	overflow-wrap: break-word;
}

/* Quoted document panel. content.css sets blockquote as a 28px italic
   pull-quote, which is exactly wrong for the statutory
   Muster-Widerrufsformular: that block is a form to be filled in and
   returned, not a flourish. Upright, boxed, body-sized. */
.emo-doc .content-prose blockquote,
.emo-doc .content-prose .doc-form-sample {
	box-sizing: border-box;
	padding: var(--space-5) var(--space-6);
	background-color: var(--color-bg-elevated);
	border: 1px solid var(--color-border-hairline);
	border-left: 3px solid var(--color-brand-muted);
	border-radius: var(--radius-panel);
	font-size: var(--font-size-16);
	font-style: normal;
	font-weight: 400;
	line-height: var(--doc-line-height);
	letter-spacing: 0;
	color: var(--color-text-primary);
}

.emo-doc .content-prose blockquote p {
	margin-top: var(--space-3);
}

.emo-doc .content-prose blockquote p:first-child {
	margin-top: 0;
}

/* The fill-in lines of the Muster-Widerrufsformular. They were authored
   as em-dash-prefixed <br> runs, which rendered as a grey italic smear;
   they are a real <ul> now, and the dashed baseline is what makes the
   panel read as the form it legally is. */
.emo-doc .content-prose .doc-form-sample__fields {
	list-style: none;
	margin-top: var(--space-4);
	padding-left: 0;
}

.emo-doc .content-prose .doc-form-sample__fields li {
	margin-top: var(--space-3);
	padding-left: 0;
	padding-bottom: var(--space-2);
	border-bottom: 1px dashed var(--color-border-hairline);
	color: var(--color-text-secondary);
}

.emo-doc .content-prose table {
	font-size: var(--font-size-14);
}

.emo-doc .content-prose hr {
	margin: var(--space-8) 0;
}

/* ============================================================
 * 5. The index
 *
 * Document furniture, not a marketing card: paper surface, hairline
 * border, uppercase micro-label, 14px links on generous leading.
 * Two columns once the list is long (the Datenschutzerklärung lists
 * 16 sections), one column on narrow viewports.
 * ============================================================ */

.emo-doc .doc-index {
	box-sizing: border-box;
	margin-top: var(--space-7);
	padding: var(--space-5) var(--space-6);
	background-color: var(--doc-index-bg);
	border: 1px solid var(--doc-index-border);
	border-radius: var(--radius-panel);
	scroll-margin-top: var(--doc-anchor-offset);
}

.emo-doc .doc-index__label {
	margin: 0 0 var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--font-size-12);
	font-weight: 600;
	line-height: var(--line-height-base);
	/* Small label, wide tracking (DESIGN-SPEC.md section 6). */
	letter-spacing: var(--letter-spacing-wide);
	text-transform: uppercase;
	color: var(--color-text-muted);
}

.emo-doc .doc-index__list {
	margin: 0;
	padding: 0;
	/* Ordered for semantics, unmarked for presentation: several of these
	   headings already carry their own number in the text ("1.
	   Begriffsbestimmungen"), and a list marker beside it would number
	   the page twice. */
	list-style: none;
	font-size: var(--font-size-14);
	line-height: var(--line-height-base);
}

.emo-doc .doc-index__item {
	/* Symmetric padding rather than margin-top: inside a multi-column
	   flow a first-child margin reset only clears the first column. */
	margin-top: 0;
	padding: var(--space-1) 0;
	break-inside: avoid;
}

.emo-doc .doc-index__link {
	display: inline-block;
	color: var(--color-link);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color var(--motion-duration-fast) var(--motion-ease-standard),
		border-color var(--motion-duration-fast) var(--motion-ease-standard);
}

.emo-doc .doc-index__link:hover,
.emo-doc .doc-index__link:focus-visible {
	color: var(--color-link-hover);
	border-bottom-color: var(--color-link-hover);
}

/* Feedback on pointer-DOWN, under 100ms (DESIGN-SPEC.md section 1). */
.emo-doc .doc-index__link:active {
	opacity: 0.55;
	transition-duration: var(--motion-duration-press);
}

.emo-doc .doc-index__link:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 3px;
	border-radius: var(--radius-sm);
}

@media (min-width: 834px) {
	.emo-doc .doc-index--long .doc-index__list {
		columns: 2;
		column-gap: var(--space-8);
	}
}

/* ============================================================
 * 6. Chips, the rendered legacy shortcodes
 *
 * [button title="…" link="#tc-os"] was the AGB's original jump
 * index; [ga-opt-out] was the analytics opt-out. Both are quiet
 * outline chips: a legal page should not sprout marketing pills.
 * ============================================================ */

.emo-doc .content-prose .doc-chip-row {
	display: block;
}

.emo-doc .doc-chip {
	display: inline-block;
	margin: 0;
	padding: var(--space-2) var(--space-5);
	font-family: var(--font-sans);
	font-size: var(--font-size-14);
	font-weight: 600;
	line-height: var(--line-height-base);
	letter-spacing: 0;
	text-align: left;
	text-decoration: none;
	color: var(--color-link);
	background-color: var(--color-bg-base);
	border: 1px solid var(--color-border-hairline);
	border-radius: var(--radius-chip);
	cursor: pointer;
	transition: color var(--motion-duration-fast) var(--motion-ease-standard),
		border-color var(--motion-duration-fast) var(--motion-ease-standard),
		background-color var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.emo-doc .doc-chip:hover,
.emo-doc .doc-chip:focus-visible {
	color: var(--color-link-hover);
	border-color: var(--color-link);
	background-color: var(--color-bg-elevated);
}

.emo-doc .doc-chip:active {
	transform: scale(0.97);
	transition-duration: var(--motion-duration-press);
}

.emo-doc .doc-chip:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 3px;
}

/* ============================================================
 * 7. The withdrawal call to action
 *
 * Seeded into the Widerruf pages by docker/gzd-setup.php, per
 * language, pointing at /vertrag-widerrufen/ or
 * /en/withdraw-from-contract/. This one IS a real CTA: it is the
 * action the whole page exists to enable, so it takes the theme's
 * EMO HARMONY pill with deep-petrol ink (--color-cta / --color-cta-ink,
 * 6.49:1, DESIGN-SPEC.md section 11).
 * ============================================================ */

.emo-doc .content-prose .doc-cta-row {
	margin-top: var(--space-6);
}

/* Hoisted above the index by inc/document-pages.php: the page's primary
   action leads, centered, then the index. */
.emo-doc .doc-cta-row {
	margin: 0 auto var(--space-6);
	max-width: var(--doc-column, 820px);
	padding: 0 var(--content-gutter, var(--space-5));
	text-align: center;
}

.emo-doc .doc-cta {
	display: inline-block;
	padding: 12px var(--space-7);
	font-family: var(--font-sans);
	font-size: var(--font-size-16);
	font-weight: 600;
	line-height: var(--line-height-base);
	letter-spacing: 0;
	text-decoration: none;
	color: var(--color-cta-ink);
	background-color: var(--color-cta);
	border: 0;
	border-bottom: 0;
	border-radius: var(--radius-control);
	cursor: pointer;
	transition: background-color var(--motion-duration-fast) var(--motion-ease-standard),
		transform var(--motion-duration-fast) var(--motion-ease-standard);
}

.emo-doc .doc-cta:hover,
.emo-doc .doc-cta:focus-visible {
	color: var(--color-cta-ink);
	background-color: var(--color-cta-hover);
	border-bottom-color: transparent;
}

/* Press on pointer-down, under 100ms, matching the withdrawal form's own
   submit button in germanized.css so the two read as one system. */
.emo-doc .doc-cta:active {
	background-color: color-mix(in srgb, var(--color-cta) 88%, #000);
	transform: scale(0.98);
	transition-duration: var(--motion-duration-press);
}

.emo-doc .doc-cta:focus-visible {
	outline: 2px solid var(--color-link);
	outline-offset: 3px;
}

/* ============================================================
 * 8. Narrow viewports
 * ============================================================ */

@media (max-width: 833px) {
	.emo-doc .doc-index {
		padding: var(--space-4) var(--space-5);
	}

	/* Single column, whatever the length. */
	.emo-doc .doc-index--long .doc-index__list {
		columns: 1;
	}

	.emo-doc .content-prose > h2 {
		margin-top: var(--space-8);
		font-size: var(--font-size-21);
	}

	.emo-doc .content-prose > h3 {
		margin-top: var(--space-6);
		font-size: var(--font-size-18);
	}

	.emo-doc .content-prose blockquote {
		padding: var(--space-4) var(--space-5);
	}
}

/* ============================================================
 * 9. Reduced motion (DESIGN-SPEC.md section 7)
 *
 * Nothing here slides, but the hover/press micro-feedback and the
 * smooth anchor scroll both need the opt-out. The smooth scroll is
 * only ever enabled behind no-preference, so the reduce branch has
 * nothing to undo there.
 * ============================================================ */

@media (prefers-reduced-motion: no-preference) {
	/* Scoped to document pages: the index is the only place in the theme
	   that navigates by fragment, and a hard jump loses the reader's
	   place in a 47,000-character statute. Browsers without :has() simply
	   keep the instant jump. */
	html:has(body.emo-doc) {
		scroll-behavior: smooth;
	}
}

@media (prefers-reduced-motion: reduce) {
	.emo-doc .doc-index__link,
	.emo-doc .doc-chip,
	.emo-doc .doc-cta {
		transition-duration: 0.01ms;
	}

	.emo-doc .doc-chip:active,
	.emo-doc .doc-cta:active {
		transform: none;
	}
}

/* ============================================================
 * 10. Contrast fallback (DESIGN-SPEC.md section 9)
 * ============================================================ */

@media (prefers-contrast: more) {
	.emo-doc .doc-index,
	.emo-doc .content-prose blockquote,
	.emo-doc .content-prose pre {
		background-color: var(--color-bg-base);
		border: 1px solid var(--color-text-primary);
	}

	.emo-doc .doc-chip {
		border-color: var(--color-text-primary);
		color: var(--color-text-primary);
	}

	.emo-doc .doc-index__link {
		text-decoration: underline;
		text-underline-offset: 2px;
	}
}

/* ============================================================
 * 11. Print
 *
 * These are the pages people actually print. The index is
 * navigation and carries nothing on paper; the chips are jump
 * links to sections that are right there.
 * ============================================================ */

@media print {
	.emo-doc .doc-index,
	.emo-doc .content-prose .doc-chip-row,
	.emo-doc .content-prose .doc-cta-row {
		display: none;
	}

	.emo-doc .content-prose {
		max-width: none;
		font-size: 11pt;
	}

	.emo-doc .content-prose > h2,
	.emo-doc .content-prose > h3 {
		break-after: avoid;
	}
}