/**
 * @file
 * Bundle-agnostic styles for the p_rich_text paragraph variants.
 * Bundle-specific typography (e.g. programmatic_advertising H2/H3 sizes)
 * lives in the per-bundle section file.
 *
 * Editor usage (full_html bodies):
 * - Text alignment: CKEditor 5 Alignment dropdown (left/center/right/justify).
 *   Adds `.text-align-*` classes — styled by CKEditor 5's bundled CSS.
 * - Multi-column layouts (e.g. image + text side-by-side that stacks on mobile):
 *   CKEditor 5 Advanced Container button (drupal/ckeditor_advanced_container).
 *   Click into the container to configure columns, gap, background, borders,
 *   per-breakpoint widths, and auto-stack behavior.
 * - Dark panel background on the whole paragraph: toggle `field_dark` on the
 *   paragraph entity (rendered via `.p-rich-text--dark` below).
 * - Light-gray table body rows: toggle `field_gray_rows` on the paragraph
 *   entity (rendered via `.p-rich-text--gray-rows` below). Repaints every
 *   table body row var(--grayMoreLight); the blue header row is unaffected.
 *   Works for both real `<table>` markup and the promotion-table div grid
 *   (`.views-field-field-promotion-tbl-data`), e.g. node 418's campaign-scales
 *   table.
 * - Collapse bottom spacing (glue this paragraph to the block that follows it):
 *   toggle `field_collapse_bottom` on the paragraph entity. Zeros the section's
 *   outer bottom padding; the `--dark` band's inner padding is preserved so the
 *   gray panel still reads as a distinct band when stacked.
 */

/* Headings inside a rich-text body are bare <h2>/<h3> (no .rmaa-h* class on
   editor markup), so they fall back to Bootstrap sizing + the legacy
   `body { color:#3b3b3b }` gray and lose the Figma tracking. Re-apply the
   design-system heading recipe here (mirrors `.rmaa-h2` / `.rmaa-h3` in
   base/typography.css) so section headings authored in CKEditor match the
   rest of the site. */
.p-rich-text__body h2,
.p-rich-text__body h3 {
    font-family: var(--font);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    color: var(--black);
}

.p-rich-text__body h2 {
    font-size: var(--H2);
    letter-spacing: var(--ls-tight2);
}

.p-rich-text__body h3 {
    font-size: var(--H3);
    letter-spacing: var(--ls-snug);
}

.p-rich-text--dark {
    background-color: var(--grayMoreLight);
    box-shadow: 0 0 0 100vmax var(--grayMoreLight);
    clip-path: inset(0 -100vmax);
}

.p-rich-text--dark .p-rich-text__body {
    padding-block: 80px;
}

@media (max-width: 767px) {
    .p-rich-text--dark .p-rich-text__body {
        padding-block: 56px;
    }
}

/* !important is intentional — overrides per-bundle `.node--type-X .p-rich-text`
   rules (equal specificity, declared later in style.css import order). */
.p-rich-text--collapse-bottom {
    padding-bottom: 0 !important;
}

/* field_gray_rows: repaint table body rows light gray. The extra
   `.p-rich-text--gray-rows` ancestor outranks the shared white-row selectors
   in wysiwyg-tables.css, so this wins regardless of stylesheet load order.
   Header rows (thead / the first row of headerless tables) keep their blue
   background — those selectors aren't matched here. */
.p-rich-text--gray-rows .p-rich-text__body table:has(thead) tbody td,
.p-rich-text--gray-rows .p-rich-text__body table:has(thead) tbody th,
.p-rich-text--gray-rows .p-rich-text__body table:not(:has(thead)) tbody tr:not(:first-child) td,
.p-rich-text--gray-rows .p-rich-text__body table:not(:has(thead)) tbody tr:not(:first-child) th {
    background-color: var(--grayMoreLight);
}

/* Same toggle for the promotion-table div grid (column-major subgrid; see
   views-blocks.css). There are no DOM rows — the body of each column is the
   white `.content` slab. Repaint those slabs gray so the whole table body
   reads gray, leaving the blue `.tbl-label` header untouched. The faint
   inter-cell hairlines (var --voc_content_item_border) still separate rows.
   4 classes outrank the white-slab rule in views-blocks.css regardless of
   load order. */
.p-rich-text--gray-rows .p-rich-text__body .vocabulary-table-data-how-promotion-works > .content {
    background-color: var(--grayMoreLight);
}