/*
 * patterns/rich-text.css — "Rich Text"
 * Markup: wp-content/themes/fcs/patterns/rich-text.php
 * Root:   .fcs-rich-text
 *
 * Figma 10517:13666 (Privacy), 10517:13334 (Accessibility), 8071:10891 (Daily
 * Schedule), 10109:14052 (Imagine), 10114:14854 (Careers). Desktop only.
 *
 * STRUCTURE
 * ---------
 *   .fcs-rich-text   alignfull section, constrained layout — core caps and
 *                    centres every child at the Content width (1024px default)
 *     …any blocks    headings, paragraphs, lists, buttons, images, tables
 *
 * SECTION SPACING AND BACKGROUND — EDITOR-OWNED AT EVERY SIZE
 * -----------------------------------------------------------
 * Unlike every other section, Rich Text is NOT listed in layout/spacing.css.
 * Its sidebar (fcs-core/src/rich-text.js) has a Mobile and a Desktop tab, and
 * inc/rich-text.php writes the values onto the section as custom properties:
 *
 *   --fcs-rt-pt-sm  --fcs-rt-pr-sm  --fcs-rt-pb-sm  --fcs-rt-pl-sm   padding
 *   --fcs-rt-mt-sm  --fcs-rt-mb-sm                                   margin
 *   --fcs-rt-bg-sm                                                   background
 *   …and the same set ending -lg for 768px and up.
 *
 * Custom properties are VALUES, not declarations, so the rules below still
 * decide which applies where — mobile-first, with no !important, because
 * nothing inline competes. Core's own Dimensions and Background controls are
 * hidden on this block for that reason. Each fallback is the pattern default,
 * used when an editor clears a field.
 *
 * "Desktop" starts at Medium (768px), matching the split in CLAUDE.md §
 * "Section padding": Medium and Large share the editor's desktop value.
 *
 * WHY .wp-block-group.fcs-rich-text AND NOT .fcs-rich-text
 * --------------------------------------------------------
 * Core gives every constrained group the class .has-global-padding, and the
 * global styles (printed AFTER this file) carry
 *
 *     .has-global-padding { padding-right: var(--wp--style--root--padding-right); … }
 *
 * which is 0px on this site. At an equal (0,1,0) that rule wins on order and
 * zeroes the left/right padding at every size. Two classes (0,2,0) beat it on
 * weight, without !important.
 */

.wp-block-group.fcs-rich-text {
	padding-top: var( --fcs-rt-pt-sm, 32px );
	padding-right: var( --fcs-rt-pr-sm, 20px );
	padding-bottom: var( --fcs-rt-pb-sm, 32px );
	padding-left: var( --fcs-rt-pl-sm, 20px );
	margin-top: var( --fcs-rt-mt-sm, 0 );
	margin-bottom: var( --fcs-rt-mb-sm, 0 );

	/* Mobile background unset = "Same as desktop". */
	background-color: var( --fcs-rt-bg-sm, var( --fcs-rt-bg-lg, transparent ) );
}

@media ( min-width: 768px ) {
	.wp-block-group.fcs-rich-text {
		padding-top: var( --fcs-rt-pt-lg, 64px );
		padding-right: var( --fcs-rt-pr-lg, 20px );
		padding-bottom: var( --fcs-rt-pb-lg, 64px );
		padding-left: var( --fcs-rt-pl-lg, 20px );
		margin-top: var( --fcs-rt-mt-lg, 0 );
		margin-bottom: var( --fcs-rt-mb-lg, 0 );
		background-color: var( --fcs-rt-bg-lg, transparent );
	}
}

/* Prose rhythm --------------------------------------------------------- */

/*
 * Every block is optional and the order is the editor's, so all spacing is
 * margin on the element that FOLLOWS, never a gap on the parent. Deleting a
 * block never leaves a hole.
 *
 * Fixed here rather than through core's Block spacing control: that writes one
 * uniform gap, and the design needs different gaps after a heading, a paragraph
 * and before a new group.
 *
 *   paragraph / list → next   24px  Figma's blank line between paragraphs
 *   → a heading               40px  the gap between groups in 10109:14052
 *   H2 → next                 20px  Figma Padding-MD (10109:14052)
 *   H3–H5 → next               8px  subhead over its copy (10517:13666 sets
 *                                   them tight; 8px keeps them from touching)
 *   → buttons                 28px  Figma Padding-LG, as in Text Banner
 *
 * .fcs-rich-text > * is (0,1,0), which is enough to beat core's zero-weight
 * :where(.is-layout-constrained) > * block gap without !important.
 */
.fcs-rich-text > * {
	margin-block: 0;
}

.fcs-rich-text > * + * {
	margin-block-start: 24px;
}

.fcs-rich-text > * + :is( h1, h2, h3, h4, h5, h6 ) {
	margin-block-start: 40px;
}

.fcs-rich-text > h2 + * {
	margin-block-start: 20px;
}

.fcs-rich-text > :is( h3, h4, h5, h6 ) + * {
	margin-block-start: 8px;
}

.fcs-rich-text > * + .wp-block-buttons {
	margin-block-start: 28px;
}

/*
 * Heading type is NOT set here — theme.json owns the scale (H5 is Figma's bold
 * 18/28 subhead). Lists keep the global 1.5em indent from base/typography.css,
 * which is what the design shows, and links keep the site link animation.
 */

/* Media ---------------------------------------------------------------- */

/* Images an editor adds get the 12px radius used across the design. */
.fcs-rich-text .wp-block-image img {
	border-radius: 12px;
}