/**
 * ERS Services page — section framing.
 * Scoped to the Services template's <main> + its `.ers-services-section--*`
 * wrappers, so it never affects other pages. Each section is a WHITE ROUNDED
 * CARD on the off-white page — the section heading lives INSIDE the card (it is
 * the first child of the section group in the template). The module blocks
 * render only their content (no card of their own) and their vertical section
 * padding is neutralised here so the card padding is the single source of space.
 * NO typography is set on any textual element — text keeps the theme default.
 */

/* Page background: off-white so the white section cards read as cards. */
.ers-services__main {
	background: var(--wp--preset--color--off-white);
	/* Single source of truth for the content inset: the horizontal gutter every
	 * section's content wrapper uses below the wide width. Change it here once. */
	--ers-content-gutter: var(--wp--custom--spacing--lg);
}
.ers-services__main h3{
	text-transform: none;
}
/* Consistent vertical rhythm: NO WP flow block-gap margin-top; a single
 * margin-bottom (= xxl) is the ONLY spacer between every top-level section
 * (banner, 2-col body, full-width bands) AND between the cards. The extra class
 * in each selector makes these 0-2-0 so they beat the theme's block-spacing rule
 * `body .is-layout-flow > * + *` (0-1-1). */
.ers-services__main.wp-block-group > *,
.ers-services__main .ers-services-section {
	margin-block-start: 0;
	margin-block-end: var(--wp--custom--spacing--xxl);
}
/* `xxl` is a desktop band spacer — it was 48px until 2026-08-19, and at phone
 * width 80px between sections reads as a hole rather than as rhythm. One step
 * down the scale on mobile, applied to the same selector so the "one spacer,
 * everywhere" rule above still holds — just tighter.
 * MUST stay directly under that rule: the exceptions below zero this margin at
 * the same 0-2-0 specificity, so they only keep winning while they come later. */
@media (max-width: 781px) {
	.ers-services__main.wp-block-group > *,
	.ers-services__main .ers-services-section {
		margin-block-end: var(--wp--custom--spacing--xl);
	}
}
/* No padding-top. It had 20px (Stephanie's 74a38a3) to match the sidebar card's
 * own 20px, so the intro's first LINE sat level with the first line inside the
 * card. But the card's top EDGE is what the eye aligns to on this layout -- the
 * right column has no card of its own -- so that padding read as the content
 * starting 20px low. Eliezer's call, on both desktop and mobile. */
.ers-services__main .wp-block-group.intro{
	margin-block-end: var(--wp--custom--spacing--lg);
}
/* The last card in the column drops its bottom margin — the 2-col body's own
 * margin-bottom is the single spacer down to the first full-width band. */
.ers-services__main .ers-services-section:last-child {
	margin-block-end: 0;
}
/* Work With Us (full-bleed blue band) sits flush — no spacer margins at all.
 * 0-3-0 beats the general 0-2-0 spacer rule above. */
.ers-services__main.wp-block-group > .ers-form-section {
	margin-block-start: 0;
	margin-block-end: 0;
}

/* Every card section (How We Help / Our Impact / Our Partnerships) = a white
 * rounded card; the heading sits inside it. */
.ers-services-section {
	background: #fff;
	border-radius: 16px;
	padding: var(--wp--custom--spacing--xl);
}

.ers-services-section > :first-child {
	margin-top: 0;
}

/* No lime heading underline inside the card sections (How We Help / Our Impact /
 * Our Partnerships) — the bar stays on the full-width bands only. */
.ers-services-section .bc-content :is(h1, h2, h3, h4, h5, h6)::after {
	content: none;
}

/* A module block inside a section card must not add its own vertical section
 * padding or re-inset its container — the card padding already spaces it. */
.ers-services-section > .ers-media-text,
.ers-services-section > .ers-partners,
.ers-services-section > .ers-featured-related,
.ers-services-section > .ers-sibling-cards,
.ers-services-section > .ers-team,
.ers-services-section > .ers-accordion-list,
.ers-services-section > .ers-content-list,
.ers-services-section > .ers-text-block {
	padding-top: 0;
	padding-bottom: 0;
}
/* Higher specificity so the card's container stays full-width inside the card,
 * overriding the shared `.ers-services__main .container` width below. */
.ers-services__main .ers-services-section .container {
	max-width: none;
	padding-inline: 0;
	margin-inline: 0;
}

/* THE content wrapper for the whole page. The full-width bands' `.container` AND
 * the 2-column body (alignwide columns) share the same wide width (1140) and the
 * same horizontal gutter, so their content lines up at every screen size. Below
 * the wide width the gutter insets them from the screen edges so the page bg
 * shows on the sides — this is what gives the mobile the gray margins (the 2-col
 * body + sidebar were going 100% edge-to-edge). One rule, one gutter variable. */
.ers-services__main .container,
.ers-services__main .wp-block-columns.alignwide {
	max-width: 1140px;
	margin-inline: auto;
	box-sizing: border-box;
	gap: 40px;
}
@media (max-width: 1180px) {
	.ers-services__main .container,
	.ers-services__main .wp-block-columns.alignwide {
		padding-inline: var(--ers-content-gutter);
	}
}
/* Below 782px the two columns stack AND the sidebar becomes an off-canvas
 * drawer. Its <aside> deliberately keeps no box of its own (block-ers-sidebar
 * .css), but the `.wp-block-column` wrapping it is still a flex item — so the
 * 40px row-gap after a zero-height sibling is still drawn, as dead space at the
 * very top of the content. Not `display: none` on that column: the drawer's
 * panel lives inside it, and a display:none ancestor takes fixed-position
 * descendants down with it. `:has(.is-drawer)` keys this to the drawer really
 * being active — with JS off the sidebar stays a card and keeps its gap. */
@media (max-width: 781px) {
	.ers-services__main .wp-block-columns.alignwide:has(.ers-sidebar.is-drawer) {
		row-gap: 0;
	}
}

/* Related Tools reads as a white full-width section. */
.ers-services__main > .ers-featured-related {
	background: var(--wp--preset--color--white);
	margin-bottom: 0;
}

/* Our Impact — square top-left + bottom-right corners with accent brackets
 * (dark-blue top-left, lime bottom-right). */
.ers-services-section--our-impact {
	position: relative;
	border-radius: 0 16px 0 16px;
}
.ers-services-section--our-impact::before,
.ers-services-section--our-impact::after {
	content: "";
	position: absolute;
	width: 46px;
	height: 46px;
	pointer-events: none;
}
.ers-services-section--our-impact::before {
	top: -3px;
	left: -3px;
	border-top: 6px solid var(--wp--preset--color--core-values-blue);
	border-left: 6px solid var(--wp--preset--color--core-values-blue);
}
.ers-services-section--our-impact::after {
	bottom: -3px;
	right: -3px;
	border-bottom: 6px solid var(--wp--preset--color--ers-light-green);
	border-right: 6px solid var(--wp--preset--color--ers-light-green);
}

/* Blockquotes: the Our Partnerships callout moved to blocks.css (2026-09-10).
 * It was template-scoped here, which meant a quote in one of our blocks on any
 * OTHER template got no styling at all — exactly what happened on Who We Work
 * With. The rule now lists our block roots alongside `.ers-services__main`, so
 * one definition serves both and this template behaves identically. */

/* Anchor targets stop a little below the viewport edge rather than flush against
 * it, so a smooth-scrolled section doesn't read as clipped. */
.ers-services__main [id] {
	scroll-margin-top: var(--wp--custom--spacing--lg);
}

/* Same default for headings that sit outside a block root on this template —
 * the editable intro (post-content) and the section groups. */
.ers-services__main h2 {
	color: var(--wp--preset--color--primary-blue);
}