/**
 * root Design System - documentation styles: content sections
 *
 * Linked by `scripts/_docs-shell.mjs` on every page. The rhythm between the sections a
 * heading opens and the demos inside them (ADR-029). Same constraints as the rest of the
 * shell: zero CSS classes - element, `[data-part]` and attribute selectors only - zero
 * inline styles, and every value a root foundation token.
 */

/* The foundations give consecutive siblings their rhythm through `+ &`, and grouping the
   content into sections cuts that adjacency: the first paragraph of a section follows
   nothing. The wrappers carry the space instead - one gap between demos, a wider one
   between the sections a heading opens. */
/* Every demo, not only the first or the ones that follow another: whatever precedes it -
   the heading, the section's lead paragraph, another demo - is a sibling it no longer
   touches. */
[data-part="demo"] {
  margin-block-start: var(--root-t--gap);
}

[data-part="section"] + [data-part="section"] {
  margin-block-start: calc(var(--root-t--gap) * 2);
}

/* A nested section opens with its own heading, which already carries the space above it. */
[data-part="section"] [data-part="section"] + [data-part="section"] {
  margin-block-start: var(--root-t--gap);
}