/**
 * BEATS GROUP — Detail CSS.
 * Loaded automatically in frontend AND editor iframe by functions.php
 * (enqueue_block_assets, glob over assets/css/*.css).
 *
 * Currently: narrower content column for the legal layout (Impressum,
 * Datenschutzerklärung) — analogous to the "prose-legal" Astro component in
 * the PoC. Own selectors wrapped in :root :where(...) (specificity 0, so
 * block supports/editor styles do not get overridden).
 */

:root :where(.legal-narrow) {
	/* 48rem like Astro's max-w-3xl. Unlike the section wrappers, this
	   container carries the page margin itself (has-global-padding), so the
	   max-width includes it — box-sizing is border-box. */
	max-width: 48rem;
	margin-inline: auto;
}

:root :where(.legal-narrow h2) {
	font-size: 1.5rem;
	font-weight: 800;
	margin-top: 2.5rem;
	margin-bottom: 0.75rem;
}

/* Core's flow layout zeroes the top margin of the first child. In the PoC
   the legal section is a plain <section> without this rule, so the first
   heading sits 40px lower there. */
:root .legal-narrow > h2:first-child {
	margin-block-start: 2.5rem;
}

:root :where(.legal-narrow h3) {
	font-size: 1.15rem;
	font-weight: 700;
	margin-top: 1.75rem;
	margin-bottom: 0.5rem;
}

:root :where(.legal-narrow p),
:root :where(.legal-narrow li) {
	color: color-mix(in srgb, var(--wp--preset--color--ink) 82%, transparent);
	margin-bottom: 0.75rem;
}

:root :where(.legal-narrow ul) {
	list-style: disc;
	padding-left: 1.5rem;
	margin-bottom: 1rem;
}

:root :where(.legal-narrow a) {
	color: var(--wp--preset--color--accent-text);
	font-weight: 600;
}

/* Cores constrained layout nulls the bottom margin of a group's last child
   (.is-layout-constrained > :last-child, specificity 0,2,0) - the PoC's
   section.prose-legal has no such rule, so its last paragraph/list keeps its
   own margin-bottom. Restored here so a legal text ending on a paragraph or
   a list keeps the same rhythm as the PoC (values match the .legal-narrow
   p/li rule above resp. the ul rule above: 0.75rem, 1rem). */
:root .legal-narrow > p:last-child,
:root .legal-narrow > li:last-child {
	margin-block-end: 0.75rem;
}

:root .legal-narrow > ul:last-child {
	margin-block-end: 1rem;
}

/* Nesting guard: once a page on the "Juristische Seite" template pairs its
   own .legal-narrow wrapper with a section-legal-block instance (which
   carries the same class), the inner instance must give up its column width
   and its own centering margin - otherwise the content sits one gutter too
   far in, the same failure mode home.css documents for the hero cover/group
   pairing (see the comment above .wp-block-cover.hero-video ... there). */
:root .legal-narrow .legal-narrow {
	max-width: none;
	margin-inline: 0;
}