/* #####################################################################
   MONARCH DESIGN SYSTEM v0.8.1
   MODULE: Flow
   PURPOSE: Semantic, responsive vertical rhythm between direct siblings.
   DEPENDENCIES: flow-tokens.php, fonts.css, lists.css
   PRINCIPLE: Layout organizes space. Flow organizes rhythm.
   ##################################################################### */

/* Elements own intrinsic appearance; Flow owns exterior relationships. */
h1, h2, h3, h4, h5, h6,
p, figure, blockquote {
    margin-block: 0;
}

/* Explicit semantic Flow containers. */
.flow,
.flow-reading,
.flow-documentation,
.flow-form,
.flow-card,
.flow-dashboard {
    --flow-space: var(--space-md);
    --flow-heading-major-space: var(--space-xl);
    --flow-heading-minor-space: var(--space-lg);
}

.flow > * + *,
.flow-reading > * + *,
.flow-documentation > * + *,
.flow-form > * + *,
.flow-card > * + *,
.flow-dashboard > * + * {
    margin-block-start: var(--flow-space);
}

.flow > * + :is(h1, h2),
.flow-reading > * + :is(h1, h2),
.flow-documentation > * + :is(h1, h2),
.flow-form > * + :is(h1, h2),
.flow-card > * + :is(h1, h2),
.flow-dashboard > * + :is(h1, h2) {
    margin-block-start: var(--flow-heading-major-space);
}

.flow > * + :is(h3, h4, h5, h6),
.flow-reading > * + :is(h3, h4, h5, h6),
.flow-documentation > * + :is(h3, h4, h5, h6),
.flow-form > * + :is(h3, h4, h5, h6),
.flow-card > * + :is(h3, h4, h5, h6),
.flow-dashboard > * + :is(h3, h4, h5, h6) {
    margin-block-start: var(--flow-heading-minor-space);
}

/* Component integration: semantic components inherit rhythm automatically. */
.card-body > * + *,
article:not(.no-flow) > * + * {
    margin-block-start: var(--flow-space);
}

.card-body > * + :is(h1, h2),
article:not(.no-flow) > * + :is(h1, h2) {
    margin-block-start: var(--flow-heading-major-space);
}

.card-body > * + :is(h3, h4, h5, h6),
article:not(.no-flow) > * + :is(h3, h4, h5, h6) {
    margin-block-start: var(--flow-heading-minor-space);
}

.form-grid {
    gap: var(--flow-space, var(--space-lg));
}

.form-field {
    gap: var(--flow-field-space, var(--space-xs));
}

/* A deliberate escape hatch for authored or third-party content. */
.no-flow > * {
    margin-block-start: revert;
    margin-block-end: revert;
}