/*!
 * Component: Legal Document
 *
 * Typography + TOC + print-stylesheet styles for the single `legal/document.php`
 * template that backs all four legal pages (Privacy, Terms, Cookie Policy,
 * Impressum). Scoped under `.mw-page-legal` (set on `<main>` in the template)
 * so the rules cannot bleed into other pages that also use the `body` section
 * partial.
 *
 * Tier targets:
 *
 *   .mw-page-legal .mw-section--body .mw-section__content
 *       Long-form prose surface — paragraphs, headings, lists, links.
 *
 * Closure-respecting: this file styles existing partial markup only — no new
 * BEM blocks are introduced for non-existing sections.
 *
 * @package Mystwood_Studios_AB
 * @since   Topic 20 LAUNCH-WP1
 */

/* --- Prose typography ------------------------------------------------- */

/*
 * 65ch max-width is the canonical readable measure for body prose. Centered
 * via auto margins inside the existing .mw-section__content wrapper, which
 * already lives inside .mw-section__inner (the partial's outer rail).
 */
.mw-page-legal .mw-section--body .mw-section__content {
	max-width: 65ch;
	margin-left: auto;
	margin-right: auto;
	line-height: 1.7;
	font-size: 1.0625rem;
}

.mw-page-legal .mw-section--body .mw-section__content p {
	margin: 0 0 1.25em;
}

.mw-page-legal .mw-section--body .mw-section__content h2 {
	margin: 2.5em 0 0.75em;
	font-size: 1.5rem;
	line-height: 1.3;
}

.mw-page-legal .mw-section--body .mw-section__content h3 {
	margin: 2em 0 0.5em;
	font-size: 1.25rem;
	line-height: 1.35;
}

.mw-page-legal .mw-section--body .mw-section__content h4 {
	margin: 1.75em 0 0.5em;
	font-size: 1.1rem;
	line-height: 1.4;
}

.mw-page-legal .mw-section--body .mw-section__content ul,
.mw-page-legal .mw-section--body .mw-section__content ol {
	margin: 0 0 1.25em;
	padding-left: 1.5em;
}

.mw-page-legal .mw-section--body .mw-section__content li {
	margin-bottom: 0.5em;
}

.mw-page-legal .mw-section--body .mw-section__content li > ul,
.mw-page-legal .mw-section--body .mw-section__content li > ol {
	margin-top: 0.5em;
	margin-bottom: 0;
}

.mw-page-legal .mw-section--body .mw-section__content a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.mw-page-legal .mw-section--body .mw-section__content a:hover,
.mw-page-legal .mw-section--body .mw-section__content a:focus-visible {
	text-decoration-thickness: 2px;
}

.mw-page-legal .mw-section--body .mw-section__content blockquote {
	margin: 1.5em 0;
	padding: 0.5em 1em;
	border-left: 3px solid currentColor;
	opacity: 0.85;
	font-style: italic;
}

.mw-page-legal .mw-section--body .mw-section__content code {
	font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	font-size: 0.9em;
	padding: 0.1em 0.35em;
	background: rgba(0, 0, 0, 0.12);
	border-radius: 3px;
}

.mw-page-legal .mw-section--body .mw-section__content hr {
	margin: 2.5em 0;
	border: 0;
	border-top: 1px solid currentColor;
	opacity: 0.25;
}

/* --- TOC jump-link list ---------------------------------------------- */

/*
 * Skip-nav style table of contents. Editors author this as a regular WordPress
 * list block at the top of the post body wrapped with class `legal-toc`:
 *
 *   <ul class="legal-toc">
 *       <li><a href="#data-we-collect">Data we collect</a></li>
 *       ...
 *   </ul>
 *
 * Plain WordPress list markup with a single class on the <ul> — no editor
 * gymnastics, no plugin, no new partial. Falls back to a normal list if the
 * class is omitted.
 */
.mw-page-legal .mw-section--body .mw-section__content .legal-toc {
	margin: 0 0 2.5em;
	padding: 1.25em 1.5em;
	background: rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	list-style: none;
}

.mw-page-legal .mw-section--body .mw-section__content .legal-toc li {
	margin-bottom: 0.5em;
}

.mw-page-legal .mw-section--body .mw-section__content .legal-toc li:last-child {
	margin-bottom: 0;
}

.mw-page-legal .mw-section--body .mw-section__content .legal-toc a {
	text-decoration: none;
	font-weight: 600;
}

.mw-page-legal .mw-section--body .mw-section__content .legal-toc a:hover,
.mw-page-legal .mw-section--body .mw-section__content .legal-toc a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/*
 * Below 720px collapse the TOC into a <details> if the editor used one
 * (`<details class="legal-toc">...<ul>...</ul></details>`). Plain list TOCs
 * stay expanded; collapse logic is editor-opt-in.
 */
.mw-page-legal .mw-section--body .mw-section__content details.legal-toc > summary {
	cursor: pointer;
	font-weight: 600;
	list-style-position: outside;
}

@media (max-width: 720px) {

	.mw-page-legal .mw-section--body .mw-section__content .legal-toc {
		padding: 1em 1.25em;
	}
}

/* --- RTL parity ------------------------------------------------------- */

[dir="rtl"] .mw-page-legal .mw-section--body .mw-section__content ul,
[dir="rtl"] .mw-page-legal .mw-section--body .mw-section__content ol {
	padding-left: 0;
	padding-right: 1.5em;
}

[dir="rtl"] .mw-page-legal .mw-section--body .mw-section__content blockquote {
	border-left: 0;
	border-right: 3px solid currentColor;
}

[dir="rtl"] .mw-page-legal .mw-section--body .mw-section__content .legal-toc {
	text-align: right;
}

/* --- Copy-address control --------------------------------------------- *
 * Topic 33 FIX-WP11 Task H (item 9). Injected by assets/js/copy-email.js
 * immediately after each `mailto:` anchor in the prose. It does not exist in
 * the static HTML, so nothing below affects a JS-off render.
 *
 * Everything derives from `currentColor` on purpose. The prose links carry no
 * colour of their own (see the `a` rule above — underline only), so the control
 * inherits the band's text colour and stays legible on every surface the legal
 * template may sit on, without restating a palette here.
 *
 * The border is full-strength `currentColor` rather than a softened tint: WCAG
 * 1.4.11 wants 3:1 on the boundary that identifies a control, and a faded
 * hairline is exactly what fails it. Topic 33's contrast audit found twelve such
 * failures already — not adding a thirteenth for the sake of a quieter chip.
 */
.mw-page-legal .mw-section--body .mw-section__content .mw-copy-email {
	display: inline-block;
	margin-left: 0.4em;
	padding: 0.05em 0.5em;
	border: 1px solid currentColor;
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.8em;
	line-height: 1.6;
	text-decoration: none;
	cursor: pointer;
	vertical-align: baseline;
}

.mw-page-legal .mw-section--body .mw-section__content .mw-copy-email:hover {
	background: rgba(255, 255, 255, 0.14);
}

/* Matches the reshaped ring shipped for `.mw-btn--outline` in _button.css —
 * thin, tight, and following the control's own radius. Never `outline: none`. */
.mw-page-legal .mw-section--body .mw-section__content .mw-copy-email:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* Copied state. Colour alone must not be the signal (WCAG 1.4.1), and it is
 * not: the label text itself swaps to "Copied", and the live region announces. */
.mw-page-legal .mw-section--body .mw-section__content .mw-copy-email.is-copied {
	background: rgba(255, 255, 255, 0.22);
}

/* --- Print stylesheet ------------------------------------------------- */

/*
 * Editors and lawyers print legal pages for sign-off. Hide chrome (header,
 * footer, CTA bands, dividers); force black-on-white prose; flatten the body
 * background; let the prose breathe at full page width.
 */
@media print {

	.mw-page-legal .site-header,
	.mw-page-legal .site-footer,
	.mw-page-legal .mw-section--hero,
	.mw-page-legal .mw-section--cta-band,
	.mw-page-legal .mw-divider,
	.mw-page-legal .skip-link,
	/* A clipboard control is meaningless on paper. The address it sits beside
	 * is prose and prints normally. (Topic 33 FIX-WP11 Task H.) */
	.mw-page-legal .mw-copy-email {
		display: none !important;
	}

	.mw-page-legal,
	.mw-page-legal .mw-section--body,
	.mw-page-legal .mw-section__inner {
		background: #fff !important;
		color: #000 !important;
	}

	.mw-page-legal .mw-section--body .mw-section__content {
		max-width: none;
		margin: 0;
		font-size: 11pt;
		line-height: 1.55;
		color: #000;
	}

	.mw-page-legal .mw-section--body .mw-section__content a {
		color: #000;
		text-decoration: underline;
	}

	/* Print URL after each link so the paper copy is self-contained. */
	.mw-page-legal .mw-section--body .mw-section__content a[href^="http"]::after {
		content: " (" attr(href) ")";
		font-size: 0.85em;
		word-break: break-all;
	}

	.mw-page-legal .mw-section--body .mw-section__content h2,
	.mw-page-legal .mw-section--body .mw-section__content h3 {
		page-break-after: avoid;
	}

	.mw-page-legal .mw-section--body .mw-section__content p,
	.mw-page-legal .mw-section--body .mw-section__content li {
		orphans: 3;
		widows: 3;
	}

	.mw-page-legal .mw-section--body .mw-section__content .legal-toc {
		background: transparent;
		border: 1px solid #000;
		padding: 0.75em 1em;
	}
}