/*
Theme Name: Perfect Choice Home Solutions
Theme URI: https://www.perfectchoicehomesolutions.com/
Author: Home Service Marketing
Author URI: https://homeservicemarketing.ai/
Description: Custom block theme for Perfect Choice Home Solutions — roofing, siding, windows and bath remodeling across Central Illinois and Greater St. Louis.
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 8.1
Version: 0.1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pchs
Tags: block-theme, full-site-editing, business, one-column

All design tokens live in theme.json. This file carries the theme header plus
the handful of styles that theme.json cannot express. Prefer theme.json.
*/

/*
 * Template-part wrappers must not box in the sticky elements inside them.
 *
 * `wp:template-part` renders a wrapper element around the part's contents, and
 * `position: sticky` only travels within its containing block — which is that
 * wrapper, not the page. Measured on the home page at 390px, document height
 * 14,816px:
 *
 *   .pchs-site-header      sticky top: 0     wrapper 154px  -> sticks for 85px of
 *                                                              scroll, then is gone
 *                                                              for good
 *   .pchs-sticky-call-bar  sticky bottom: 0  wrapper 1422px -> first enters the
 *                                                              viewport at 89.7%
 *                                                              down the page
 *
 * So nothing on the site was actually sticky, and the persistent tap-to-call —
 * the primary path for an urgent mobile visitor — was absent until the very
 * bottom of the page.
 *
 * `display: contents` removes the wrapper's box and leaves its children in the
 * DOM, so their containing block becomes .wp-site-blocks and sticky spans the
 * whole document. Chosen over `position: fixed` because sticky keeps the call
 * bar in normal flow: it reserves its own space and never covers the last thing
 * on the page, which is the reason the block was written that way.
 *
 * Matched on the class, not on `header`/`footer`. The wrappers render as divs
 * now — the templates pass tagName: "div", because `display: contents` removes
 * an element's box but not the element, so a <header> wrapper kept exposing a
 * `banner` landmark and the page carried three of them. Selecting the tag here
 * would have made the sticky fix silently stop applying the moment that changed.
 *
 * Nothing else styles .wp-block-template-part — verified against the rendered
 * page — so no layout depends on these boxes existing.
 */
.wp-site-blocks > .wp-block-template-part {
	display: contents;
}

/*
 * A header that is genuinely sticky covers whatever an in-page anchor scrolls
 * to, so reserve its scrolled height plus a little air; by the time an anchor
 * lands the header has shrunk. Below the nav breakpoint the call bar is pinned
 * to the bottom edge, and a target near the end of the page must clear it too.
 */
html {
	scroll-padding-block-start: calc(var(--pchs-header-h-scrolled) + var(--wp--preset--spacing--30));
}

/*
 * Selection: green-tint on navy reads on both light and dark grounds without
 * inventing a one-off pair. No ::selection rule existed sitewide.
 */
::selection {
	background-color: var(--wp--preset--color--green-tint);
	color: var(--wp--preset--color--navy);
}

@media (max-width: 79.99em) {

	html {
		scroll-padding-block-end: calc(var(--pchs-callbar-h) + env(safe-area-inset-bottom));
	}
}

/*
 * The page title has to line up with the copy in the sections beneath it, and
 * "constrain then pad" and "pad then constrain" land 40px apart.
 *
 * Every full-bleed section on this site — feature-split, cta-band, breadcrumbs,
 * service-cards — does the first: cap at wide-size, centre, then inset by
 * --pchs-pad-x. At 1440 that puts their text at 160. A wrapper group in the
 * template can only do the second, because WordPress applies root padding to
 * the group and centres the child inside what is left, which puts the title at
 * 120. The title looked indented by 40px against every paragraph below it.
 *
 * So the title carries the same two lines the sections carry, rather than the
 * template trying to express them in block markup. The values are read off
 * breadcrumbs, which sits directly above it and had this right already.
 *
 * page.html only. single.html deliberately runs a 600px reading column and its
 * title is meant to align with that, not with wide-size.
 */
.pchs-page-title {
	--pchs-pad-x: var(--wp--preset--spacing--50);

	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--pchs-pad-x);
}

@media (min-width: 48em) {

	.pchs-page-title {
		--pchs-pad-x: var(--wp--preset--spacing--70);
	}
}

/*
 * Core-block prose inside a page body, held to the same gutter as everything
 * around it.
 *
 * post-content lays out as `constrained`, so a block with no alignment gets a
 * 760px column centred in the viewport — left edge 340 at 1440. Every pchs
 * section on the same page is full-bleed and starts its copy at 160, and so
 * does the page title. On /terms/, which is nothing but core blocks, the whole
 * document sat 180px right of its own heading with an empty column beside it.
 * On /about/ it was one group, "Who runs it", stepping right between two
 * sections that did not.
 *
 * Same two lines as .pchs-page-title and the sections: cap at wide-size,
 * centre, inset by --pchs-pad-x. The measure cap goes on the children instead,
 * so a paragraph still breaks at a readable length while the block it sits in
 * shares the page's edge.
 */
.pchs-prose {
	--pchs-pad-x: var(--wp--preset--spacing--50);

	box-sizing: border-box;
	max-width: var(--wp--style--global--wide-size);
	margin-inline: auto;
	padding-inline: var(--pchs-pad-x);
}

/*
 * /about/ puts "Two companies, one Perfect Choice" in an unpainted prose
 * group between two grey bands. With no padding of its own, the heading's
 * margin collapses through the group and the type sits on the colour change.
 */
.pchs-feature-split + .wp-block-group.alignfull:not(.has-background) {
	padding-block: var(--wp--custom--section--y-tight);
}

@media (min-width: 48em) {

	.pchs-prose {
		--pchs-pad-x: var(--wp--preset--spacing--70);
	}
}

/* About 73 characters a line at 18px Archivo; 68ch ran to 82 to 88. */
.pchs-prose > * {
	max-width: var(--wp--custom--measure--prose);
}

/* Rows lay themselves out; a measure cap would squeeze them into the gutter. */
.pchs-prose > .wp-block-columns {
	max-width: none;
}

/*
 * Office cards inside prose (/contact/, /careers/ "Ask about openings"): the
 * photo is a consistent band, not whatever aspect the upload happened to be.
 * St. Louis was 1024×473 against Peoria's 4:3 and left the two cards' copy on
 * different baselines before object-fit.
 */
.pchs-prose .pchs-card > .wp-block-image,
.pchs-prose .pchs-card > figure.wp-block-image {
	margin: calc( -1 * var(--pchs-card-pad) ) calc( -1 * var(--pchs-card-pad) ) 0;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md) var(--wp--custom--radius--md) 0 0;
}

.pchs-prose .pchs-card > .wp-block-image img,
.pchs-prose .pchs-card > figure.wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/*
	 * These cards use the Peoria / St. Louis team plates. 50% 35% clipped the
	 * back row on /contact/ (measured at 1280); top-bias matches the about hero.
	 */
	object-position: 50% 0%;
}

.pchs-prose .pchs-card > :where(h2, h3, .pchs-card-title) {
	text-wrap: balance;
}

/*
 * An article (single.html) is the one page that reads as a centred column
 * rather than on the wide grid: breadcrumbs, H1, meta and body all start at
 * the same left edge, one prose measure wide. The breadcrumbs block brings
 * its own wide-size cap and gutter, which inside this column would push the
 * trail 40px right of the title, so both are dropped here.
 */
.pchs-article {
	--pchs-pad-x: var(--wp--preset--spacing--50);

	box-sizing: border-box;
	max-width: calc(var(--wp--custom--measure--prose) + 2 * var(--pchs-pad-x));
	margin-inline: auto;
	padding-inline: var(--pchs-pad-x);
	padding-block-end: var(--wp--custom--section--y);
}

/* The H1 opens the page now that there are no breadcrumbs above it. */
main > .pchs-page-title:first-child,
.pchs-article > .wp-block-post-title:first-child {
	margin-block-start: var(--wp--preset--spacing--70);
}

/*
 * Soften the featured frame and in-body photos so the 576px column does not
 * read as a hard rectangle against the page. Matches .pchs-card's md radius.
 */
.pchs-article .wp-block-post-featured-image,
.pchs-article .wp-block-post-content .wp-block-image {
	overflow: hidden;
	border-radius: var(--wp--custom--radius--md);
}

.pchs-article .wp-block-post-featured-image {
	margin-block: var(--wp--preset--spacing--40) var(--wp--preset--spacing--60);
}

.pchs-article .wp-block-post-featured-image img,
.pchs-article .wp-block-post-content .wp-block-image img {
	display: block;
	max-width: 100%;
	height: auto;
	object-fit: cover;
	border-radius: inherit;
}

/* Date + service type under the H1 — keep them on one calm meta line. */
.pchs-article > .wp-block-group {
	align-items: baseline;
	margin-block: var(--wp--preset--spacing--20) 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.pchs-article .wp-block-post-terms a {
	color: var(--wp--preset--color--green);
	font-weight: var(--wp--custom--weight--bold);
	letter-spacing: var(--wp--custom--tracking--label);
	text-decoration: none;
	text-transform: uppercase;
}

.pchs-article .wp-block-post-terms a:hover {
	text-decoration: underline;
	text-underline-offset: var(--wp--custom--link--underline-offset);
}

/* Captions under in-body photos — quieter than body, still readable. */
.pchs-article .wp-block-post-content figcaption,
.pchs-prose figcaption {
	margin-block-start: var(--wp--preset--spacing--20);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--body);
	text-align: start;
}

/* Pull quotes when an editor uses a core quote block. */
.pchs-article .wp-block-post-content blockquote,
.pchs-prose blockquote {
	margin-block: var(--wp--preset--spacing--50);
	margin-inline: 0;
	padding-inline-start: var(--wp--preset--spacing--50);
	border-inline-start: 3px solid var(--wp--preset--color--green);
	color: var(--wp--preset--color--navy);
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--leading--prose);
}

.pchs-article .wp-block-post-content blockquote p,
.pchs-prose blockquote p {
	margin: 0;
}

.pchs-article .wp-block-post-content blockquote cite,
.pchs-prose blockquote cite {
	display: block;
	margin-block-start: var(--wp--preset--spacing--30);
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	font-style: normal;
	font-weight: var(--wp--custom--weight--ui);
}

/* Rare in this content, but imported posts bring tables. */
.pchs-article .wp-block-post-content table,
.pchs-prose table {
	width: 100%;
	margin-block: var(--wp--preset--spacing--50);
	border-collapse: collapse;
	font-size: var(--wp--preset--font-size--base);
	line-height: var(--wp--custom--leading--body);
}

.pchs-article .wp-block-post-content th,
.pchs-article .wp-block-post-content td,
.pchs-prose th,
.pchs-prose td {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-block-end: 1px solid var(--wp--preset--color--border);
	text-align: start;
	vertical-align: top;
}

.pchs-article .wp-block-post-content th,
.pchs-prose th {
	color: var(--wp--preset--color--navy);
	font-weight: var(--wp--custom--weight--bold);
}

@media (min-width: 48em) {

	.pchs-article {
		--pchs-pad-x: var(--wp--preset--spacing--70);
	}
}

/* The 404 and search results have no hero, so their copy carries the
   section's top spacing. */
.pchs-notfound,
.pchs-search {
	padding-block-start: var(--wp--custom--section--y);
	padding-block-end: var(--wp--preset--spacing--50);
}

.pchs-notfound > h1 {
	margin-block: 0 var(--wp--preset--spacing--40);
	text-wrap: balance;
}

.pchs-notfound > p {
	text-wrap: pretty;
}

/*
 * Core prints a visible "Search" label above the field while the button also
 * says Search, so the control read as an L on /does-not-exist/ (label at y=606,
 * field+button at y=628). Keep the label for assistive tech; hide it visually.
 */
.pchs-notfound .wp-block-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset( 50% );
	white-space: nowrap;
	border: 0;
}

/*
 * Match the prose measure above so the search row does not read as a short
 * orphan under two full-width paragraphs.
 */
.pchs-notfound .wp-block-search {
	position: relative;
	width: 100%;
	max-width: var(--wp--custom--measure--prose);
	margin-block-start: var(--wp--preset--spacing--50);
}

.pchs-notfound .wp-block-search__inside-wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
	align-items: stretch;
}

.pchs-notfound .wp-block-search__input {
	flex: 1 1 12rem;
	min-width: 0;
}

.pchs-notfound .wp-block-search__button {
	flex: 0 0 auto;
}

.pchs-search {
	padding-block-end: var(--wp--custom--section--y);
}

/* The "N results for" line under the search field (inc/search.php). */
.pchs-search-count {
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
}

.pchs-search-count:empty {
	display: none;
}

/*
 * Search results: a list, not a column of section headings. Each result is
 * a type label, a card-size title and two lines of excerpt, ruled off from
 * the next. The label comes from the post-type class core already puts on
 * each item, so the template needs no per-type markup; it shares the
 * .pchs-micro declarations above.
 */
.pchs-results {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pchs-results > li {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
	padding-block: var(--wp--preset--spacing--50);
}

.pchs-results > li + li {
	border-block-start: 1px solid var(--wp--preset--color--border-cool);
}

.pchs-results > li::before {
	color: var(--wp--preset--color--muted);
	content: "Page";
}

.pchs-results > li.type-post::before {
	content: "Article";
}

.pchs-results > li.type-pchs_location::before {
	content: "Town page";
}

.pchs-results > li.type-pchs_service::before {
	content: "Service";
}

.pchs-results > li.type-pchs_city_service::before {
	content: "Local service";
}

.pchs-results .pchs-card-title {
	margin: 0;
}

.pchs-results .pchs-card-title a {
	color: inherit;
	text-decoration: none;
}

.pchs-results .pchs-card-title a:hover {
	color: var(--wp--preset--color--green);
}

.pchs-results__excerpt {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--body);
}

.pchs-results__excerpt p {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

/* A phone number is one thing to tap; it never breaks across two lines. */
:where(a[href^="tel:"]) {
	white-space: nowrap;
}

/* Core search, drawn with the same field tokens as the site's forms. */
.wp-block-search__input {
	box-sizing: border-box;
	min-height: var(--pchs-btn-h);
	padding-inline: var(--wp--preset--spacing--40);
	border: 1px solid var(--wp--custom--color--border-cool-2);
	border-radius: var(--wp--custom--radius--sm);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--ink);
	font: inherit;
}

/*
 * A metric-matched stand-in for Archivo while the webfont loads.
 *
 * With the old stack, Android fell back to Roboto, which sets 8% narrower at
 * 400 and 14% narrower at 800, so the home h1 rewrapped the moment Archivo
 * arrived. Arial scaled to Archivo's advance widths and vertical metrics
 * (ascent 878, descent 210, 1000 units per em) holds the line breaks.
 */
@font-face {
	font-family: "Archivo Fallback";
	src: local("Arial"), local("Helvetica"), local("Liberation Sans");
	size-adjust: 98.6%;
	ascent-override: 89%;
	descent-override: 21.3%;
	line-gap-override: 0%;
}

/*
 * Type roles.
 *
 * One class per job a piece of text does, so an eyebrow is the same eyebrow
 * in every block. A block adds the class in its markup and keeps no font-size,
 * weight, line-height or tracking of its own for that element. Plain class
 * selectors, not :where(), because the role is the point: it should beat the
 * element defaults theme.json emits for h2, p and friends.
 *
 * Colours read the ground variables set by .pchs-on-dark (app.css), with the
 * light-ground value as the fallback.
 */
.pchs-eyebrow {
	color: var(--pchs-eyebrow-color, var(--wp--preset--color--green));
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--leading--title);
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}

.pchs-micro,
.pchs-results > li::before {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--leading--title);
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}

.pchs-section-title {
	color: var(--pchs-heading-color, var(--wp--preset--color--navy));
	font-size: var(--wp--preset--font-size--3-xl);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: var(--wp--custom--leading--heading);
	letter-spacing: var(--wp--custom--tracking--tight);
	text-wrap: balance;
}

.pchs-lead {
	max-width: var(--wp--custom--measure--lead);
	color: var(--pchs-lead-color, var(--wp--preset--color--muted));
	font-size: var(--wp--preset--font-size--md);
	font-weight: var(--wp--custom--weight--regular);
	line-height: var(--wp--custom--leading--prose);
	text-wrap: pretty;
}

.pchs-card-title {
	color: var(--pchs-heading-color, var(--wp--preset--color--navy));
	font-size: var(--wp--preset--font-size--lg);
	font-weight: var(--wp--custom--weight--bold);
	line-height: var(--wp--custom--leading--title);
	letter-spacing: var(--wp--custom--tracking--snug);
	text-wrap: balance;
}

.pchs-stat-value {
	font-size: var(--wp--preset--font-size--3-xl);
	font-weight: var(--wp--custom--weight--heavy);
	line-height: var(--wp--custom--leading--none);
	letter-spacing: var(--wp--custom--tracking--tight);
}

.pchs-stat-label {
	font-size: var(--wp--preset--font-size--sm);
	font-weight: var(--wp--custom--weight--regular);
	line-height: var(--wp--custom--leading--title);
}

/*
 * Global type rules.
 *
 * Zero specificity where the property has no competing core rule, so any
 * block overrides them with a plain class. The prose spacing and the prose h2
 * size are the exception: core's flow layout sets child margins at
 * `:root :where(.is-layout-flow) > *` (0,1,0) and the h2 element size at the
 * same weight, so a :where() rule there would read as right and never apply.
 * Those carry one class and one element, (0,1,1), just enough.
 *
 * "Prose" is the direct content of post-content and .pchs-prose, and of a
 * core group or column directly inside them. Direct children only, so the
 * paragraphs inside a block (a card blurb, the hero subcopy) keep their own
 * size.
 */
:where(h1, h2, h3, h4, h5, h6) {
	text-wrap: balance;
}

:where(p, li, dd, figcaption, blockquote) {
	text-wrap: pretty;
}

/* The tabular "1" leaves a gap in "100 years" and "Top 5" at display sizes. */
:where(h1, h2, .pchs-section-title, .pchs-stat-value) {
	font-variant-numeric: proportional-nums;
}

/* Bold inside a heading is already the heading's weight; `bolder` took an
   800 heading to 900, off the four-weight scale. */
:where(h1, h2, h3, h4, h5, h6) :where(strong, b) {
	font-weight: inherit;
}

/* Imported posts carry bare <img width="1920"> outside any figure; core only
   constrains figures, so one image widened the whole page. */
:where(.wp-block-post-content) img {
	max-width: 100%;
	height: auto;
}

/* Archivo ships no italic, and a synthesized slant looks broken. Emphasis is
   weight instead. */
body {
	font-synthesis-style: none;
}

:where(em) {
	font-style: normal;
	font-weight: var(--wp--custom--weight--ui);
}

:where(
	.wp-block-post-content,
	.pchs-prose,
	.wp-block-post-content > .wp-block-group,
	.pchs-prose > .wp-block-columns > .wp-block-column
) > :where(p, ul, ol) {
	font-size: var(--wp--preset--font-size--md);
	line-height: var(--wp--custom--leading--prose);
}

/* Links in running text are underlined at rest: colour alone is not a cue. */
:where(
	.wp-block-post-content,
	.pchs-prose,
	.wp-block-post-content > .wp-block-group,
	.pchs-prose > .wp-block-columns > .wp-block-column
) > :where(p, ul, ol) a:where(:not([class])) {
	text-decoration-line: underline;
	text-decoration-thickness: var(--wp--custom--link--thickness);
	text-underline-offset: var(--wp--custom--link--underline-offset);
}

:where(
	.wp-block-post-content,
	.pchs-prose,
	.wp-block-post-content > .wp-block-group,
	.pchs-prose > .wp-block-columns > .wp-block-column
) > :where(ul, ol) {
	padding-inline-start: 1.25em;
}

:where(
	.wp-block-post-content,
	.pchs-prose,
	.wp-block-post-content > .wp-block-group,
	.pchs-prose > .wp-block-columns > .wp-block-column
) > :where(ul, ol) > li + li {
	margin-block-start: var(--wp--preset--spacing--20);
}

:where(
	.wp-block-post-content,
	.pchs-prose,
	.wp-block-post-content > .wp-block-group,
	.pchs-prose > .wp-block-columns > .wp-block-column
) > :where(ul, ol) > li::marker {
	color: var(--wp--preset--color--green);
}

:where(
	.wp-block-post-content,
	.pchs-prose,
	.wp-block-post-content > .wp-block-group,
	.pchs-prose > .wp-block-columns > .wp-block-column
) > ol > li::marker {
	font-weight: var(--wp--custom--weight--bold);
}

/* A prose h2 is a sub-head inside the page, not a section title. One that
   carries the section-title role keeps the role's size. */
.wp-block-post-content > h2:not(.pchs-section-title),
.pchs-prose > h2:not(.pchs-section-title),
.wp-block-post-content > .wp-block-group > h2:not(.pchs-section-title) {
	font-size: var(--wp--preset--font-size--2-xl);
}

/* Headings in prose sit closer to what they introduce than to what came
   before, so they stop floating halfway between two paragraphs. */
.wp-block-post-content > :is(h2, h3, h4),
.pchs-prose > :is(h2, h3, h4),
.wp-block-post-content > .wp-block-group > :is(h2, h3, h4) {
	margin-block-start: var(--wp--preset--spacing--70);
}

/*
 * Tighten only the first non-heading after a heading. A following heading used
 * to match `+ *` too, so on /terms/ "Program Description" sat 16px under
 * "1.) SMS/MMS…" instead of the 40px heading rhythm (measured at 1440).
 */
.wp-block-post-content > :is(h2, h3, h4) + *:not(:is(h2, h3, h4)),
.pchs-prose > :is(h2, h3, h4) + *:not(:is(h2, h3, h4)),
.wp-block-post-content > .wp-block-group > :is(h2, h3, h4) + *:not(:is(h2, h3, h4)) {
	margin-block-start: var(--wp--preset--spacing--40);
}

/* A heading that opens its container has nothing above it to clear. */
.wp-block-post-content > :is(h2, h3, h4):first-child,
.pchs-prose > :is(h2, h3, h4):first-child,
.wp-block-post-content > .wp-block-group > :is(h2, h3, h4):first-child {
	margin-block-start: 0;
}

/*
 * City-service pages: the body sits on the wide grid's left edge (x=160 at
 * 1440), capped at the prose measure, like every other page. Only articles
 * run a centred column. The same arithmetic as .pchs-prose, written as a
 * margin because these children sit straight in post-content: the grid's
 * inset when the viewport is wider than wide-size, plus the gutter. The hero
 * is alignfull and keeps the full width.
 */
.single-pchs_city_service .wp-block-post-content {
	--pchs-pad-x: var(--wp--preset--spacing--50);
}

@media (min-width: 48em) {

	.single-pchs_city_service .wp-block-post-content {
		--pchs-pad-x: var(--wp--preset--spacing--70);
	}
}

.single-pchs_city_service .wp-block-post-content > :not(.alignfull, [class*="wp-block-pchs-"]) {
	box-sizing: border-box;
	max-width: min(var(--wp--custom--measure--prose), 100% - 2 * var(--pchs-pad-x));
	margin-inline: calc(max(0px, (100% - var(--wp--style--global--wide-size)) / 2) + var(--pchs-pad-x)) auto;
}

/* The copy under the hero opens a section, so it starts at the section
   rhythm, not at a prose heading's 40px. */
.single-pchs_city_service .wp-block-post-content > .alignfull + :not(.alignfull) {
	margin-block-start: var(--wp--custom--section--y);
}

/*
 * Source citations on city-service pages (a .pchs-sources group from
 * citygen). Its paragraphs are restated because the prose rule above sets
 * md on paragraphs inside a post-content group, which beats inheritance.
 */
.pchs-sources {
	padding-block-start: var(--wp--preset--spacing--40);
	border-block-start: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

.pchs-sources,
.pchs-sources > :where(p, ul, ol) {
	font-size: var(--wp--preset--font-size--sm);
	line-height: var(--wp--custom--leading--body);
}