/*
 * Section rhythm and spacing (VISUAL_ACCEPTANCE.md RY01–RY06, T03;
 * FCT_WEB_SPEC.md §7).
 *
 * One section space, fluid from 48 px at 320 to 120 px at 1440: inside RY03's
 * mobile 48–72 px and desktop 80–128 px (spacing preset "section").
 *
 * Group styles give the rhythm its fields; they do not make every section the
 * same (RY02):
 *   section          Warm White with the paper texture showing through
 *   section-sage     a quiet Soft Sage field for supporting content
 *   section-forest   a Deep Forest Teal field; text, links and focus turn light
 * Gold stays an intervention inside a section, never a section colour (RY04).
 *
 * Reading measure: body paragraphs stop near 65 characters (T03) and stay on
 * the content's left edge. The reference compositions are left-aligned and
 * asymmetric, so the measure is not centred.
 */

:is(.is-style-section, .is-style-section-sage, .is-style-section-forest) {
	padding-block: var(--wp--preset--spacing--section);
}

/* Consecutive sections meet edge to edge: the padding is the rhythm. */
:is(.is-style-section, .is-style-section-sage, .is-style-section-forest) + :is(.is-style-section, .is-style-section-sage, .is-style-section-forest) {
	margin-block-start: 0;
}

.is-style-section-sage {
	background-color: var(--wp--preset--color--sage);
}

.is-style-section-forest {
	background-color: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--warm-white);
}

.is-style-section-forest :is(h1, h2, h3, h4, .fct-eyebrow, .is-style-eyebrow) {
	color: var(--wp--preset--color--warm-white);
}

.is-style-section-forest a:where(:not(.wp-block-button__link, .fct-button)) {
	color: var(--wp--preset--color--warm-white);
}

.is-style-section-forest :focus-visible {
	outline-color: var(--wp--preset--color--warm-white);
}

/* The outline button reads light on the dark field. */
.is-style-section-forest .wp-block-button.is-style-outline > .wp-block-button__link {
	border-color: var(--wp--preset--color--warm-white);
	color: var(--wp--preset--color--warm-white);
}

.is-style-section-forest .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--charcoal);
}

/* Eyebrow: the small tracked label that opens a section in R3–R8. */
.is-style-eyebrow {
	margin-block-end: var(--wp--preset--spacing--xs);
	color: var(--wp--preset--color--forest);
	font-family: var(--wp--preset--font-family--display);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.2;
	text-transform: uppercase;
}

/*
 * Reading measure (T03, 60–70 characters), anchored to the content column's left edge. In a
 * constrained layout the column is centred with auto margins; this keeps the
 * left margin of that column and lets the right side stay open.
 */
.is-layout-constrained > :is(p, ul, ol):not(.alignwide, .alignfull, [class*="is-style-note"], .is-style-eyebrow) {
	/* 33em, not 68ch: ch is the width of "0", wider than an average Inter
	   letter, so 68ch held ≈84 characters. Measured: 33em ≈ 65. */
	max-width: min(33em, var(--wp--style--global--content-size, 1200px));
	margin-inline-start: max(0px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2)) !important;
	margin-inline-end: auto !important;
}