/**
 * Section rhythm and container context.
 *
 * Single source of truth for the vertical gap between top-level page sections
 * (docs/css-conventions.md rule #2), and the container-query root for all
 * descendant blocks using @container (rule #4).
 */

/* Page-level section rhythm. Originally sampled from Figma at 52px;
 * reduced to 40px on 2026-04-19 after sections felt over-spaced in
 * context with the tightened H2 typography. Not exposed via theme.json
 * to keep it out of the editor's spacing dropdown; content authors
 * shouldn't be picking "section rhythm" as a block margin. */
:root {
    --section-gap: 1.75rem; /* 28px */
}

/* Vertical gap between top-level page sections — the direct children of
 * <main> (hero, columns, authors-card, etc.). NOT applied to paragraphs
 * or headings inside .wp-block-post-content; those get the default
 * blockGap / typography margins, since "paragraph" is not a "section".
 *
 * The `:root` prefix raises specificity to 0-2-0 so we beat WordPress's
 * auto-generated blockGap rule (`:root :where(.is-layout-flow) > *`,
 * specificity 0-1-0) without needing !important.
 */
:root main.wp-block-group > * + * {
    margin-block-start: var(--section-gap);
}

/* Heading clings to the content it introduces. A top-level heading gets
 * the big section-gap ABOVE it (to separate it from the previous section)
 * but the element that follows the heading overrides its own top margin
 * back down to a small "caption-under-heading" value. Sampled from Figma:
 * inside-section title → content gaps average 24px.
 */
:root main.wp-block-group > :is(h1, h2, h3, h4, h5, h6) + * {
    margin-block-start: var(--wp--preset--spacing--20);
}

/* Same section rhythm applied inside the FSE post-content wrapper.
 *
 * On pages like Home where every block is composed at the top of the
 * page, main has a single child (<div class="wp-block-post-content">)
 * and every "section" is actually a child of that wrapper. We need the
 * gap rule to reach inside.
 *
 * On article pages, body prose (paragraphs, lists, h4-h6) lives at the
 * same level alongside widget blocks, so we can't use a blanket rule.
 * The selector below targets only elements that function as section
 * dividers: headings (h1-h3), core group/columns wrappers, our
 * custom betupmedia widgets, and wide/full-bleed images. Body prose is
 * unaffected — paragraphs keep their default blockGap.
 *
 * The heading-cling rule resets the margin on whatever follows an
 * h1/h2/h3 inside post-content, mirroring the top-level behaviour.
 */
:root main .wp-block-post-content > * + :where(
    h1, h2, h3,
    .wp-block-group,
    .wp-block-columns,
    [class*="wp-block-betupmedia-"],
    .wp-block-image.alignwide,
    .wp-block-image.alignfull
) {
    margin-block-start: var(--section-gap);
}

/* `:where()` on the section-gap rule above keeps its specificity flat
 * (0,2,2) so this cling rule — also 0,2,2 but later in source order —
 * wins ties and overrides the margin on the element immediately after
 * a section heading. */
:root main .wp-block-post-content > :is(h1, h2, h3) + * {
    margin-block-start: var(--wp--preset--spacing--20);
}

/* Extend the same section rhythm inside section-with-sidebar's main
 * column. Without this, h2s and widget blocks inside the sidebar main
 * inherit only the tighter default block-gap (~24px) and read as
 * visually inconsistent with section heads directly in post-content.
 * The sidebar column is the "main content" context for pages that
 * use the sidebar pattern, so it should share the page-level rhythm.
 */
:root main .section-with-sidebar__main > * + :where(
    h1, h2, h3,
    .wp-block-group,
    .wp-block-columns,
    [class*="wp-block-betupmedia-"],
    .wp-block-image.alignwide,
    .wp-block-image.alignfull
) {
    margin-block-start: var(--section-gap);
}

:root main .section-with-sidebar__main > :is(h1, h2, h3) + * {
    margin-block-start: var(--wp--preset--spacing--20);
}

/* Enables @container queries across the site. Any descendant block that
 * wants responsive layout via container queries resolves to main as its
 * nearest containment context.
 */
main.wp-block-group {
    container-type: inline-size;
}