/* District Frame - front-end shims for block-authored pages (site-wide).

   Seeded block markup reuses the theme's df-* classes, but a few core-block
   wrappers differ structurally from the legacy hand-written templates. Keep
   these shims TARGETED: a broad reset here once nuked every section's
   vertical padding (2026-07-09 pilot bug - .wp-block-group[class*="df-"]
   beat .df-page-hero's own padding). Never reset properties on the section
   groups themselves; the df-* classes own the section design. */

/* core/image figures INSIDE seeded group sections: no gutenberg gutter.
   Scoped to group-nested figures so Journal post images keep their default
   figure spacing. */
.df-main .wp-block-group figure.wp-block-image {
    margin: 0;
}
.df-main .wp-block-group figure.wp-block-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Kickers / labels authored as <p> blocks: the legacy markup used <span>,
   so contextual body-copy rules (".df-page-hero p", ".df-sd-areas-head p" -
   16px, wide margins, ch caps) would restyle them. Mirror the label type
   styles at higher specificity (body + p = 0,2,2 beats those 0,2,1 rules). */
body .df-main p.df-label,
body .df-main p.df-page-kicker,
body .df-main p.df-os-kicker-label {
    margin: 0;
    max-width: none;
    font-family: var(--df-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: inherit;
}
body .df-main p.df-page-kicker {
    display: block;
    margin: 0 0 22px;
    color: var(--df-ink-muted);
}

/* Per-kicker colors the generic p.df-label rule above (color: inherit)
   would otherwise flatten - each mirrors the template's span rule, which
   loses the specificity fight against body+p selectors. */
body .df-main p.df-sv-num {
    color: var(--df-ink-muted);
}
body .df-main p.df-ct-kicker {
    color: var(--df-ink-muted);
}
body .df-main p.df-home-section-kicker {
    display: block;
    margin: 0 0 22px;
    color: var(--df-paper-muted);
}
body .df-main .df-home-craft p.df-home-section-kicker {
    color: var(--df-ink-muted);
}

/* Dark CTA panel used by the starter page patterns (inc/df-starter-content.php).
   Sized for the .df-prose column on default-template pages: a padded panel,
   not a full-bleed band. .df-dark supplies background + text color. */
.df-main .df-page-band {
    padding: 44px 40px;
    margin: 56px 0 8px;
}
.df-main .df-page-band h2 {
    margin: 0 0 14px;
    font-size: clamp(24px, 3vw, 32px);
}
.df-main .df-page-band p {
    margin: 0 0 26px;
    color: var(--df-paper-muted);
}
@media (max-width: 640px) {
    .df-main .df-page-band {
        padding: 32px 24px;
    }
}

/* About hero kicker: the legacy markup carries a separate 44px rule
   <span>; the block version is a group + label paragraph, so the rule
   is drawn here instead. The group itself picks up the template's
   .df-os-kicker inline-flex + gap. */
.page-template-template-about .wp-block-group.df-os-kicker::after {
    content: "";
    width: 44px;
    height: 1px;
    background: var(--df-os-accent-bright, currentColor);
    opacity: 0.55;
}