/**
 * WRC standard content container.
 *
 * Gives every ordinary page the same content width and left/right alignment as
 * the homepage. Only the container geometry is touched — no colours, fonts,
 * spacing between sections, or block structure.
 *
 * The standard is taken from the homepage (page 8538), where Elementor is set
 * to `--content-width: 1650px` with a 30px side gutter. Measured left gutters
 * before this file existed, at a 1440px viewport:
 *
 *     homepage        30  28  29  30  30  71   0
 *     about-us        71  10   0  10   0
 *     staff-profiles  43   0  43   0  43   0 ...
 *     careers         58  10
 *     contact-us      28
 *     partnerships    71  71  71   0
 *
 * Which page a rule applies to is decided structurally, by Elementor's own
 * boxed/full distinction:
 *
 *   - `.e-con-boxed` / `.elementor-section-boxed` at the top level of the page
 *     are ordinary content sections -> standardised here.
 *   - `.e-con-full` / `.elementor-section-full_width` / `-stretched` are the
 *     block-based, deliberately full-bleed pages (Media & Events, Research,
 *     Research Funding) -> never matched by anything below.
 *
 * Nested containers are matched by `>` only at the top level, so the internal
 * layout each page author built is left exactly as it is.
 *
 * Loaded after wrc-responsive.css, which it depends on: that file sets
 * `.e-con:not(...) { max-width: 100% }`, which outranks Elementor's own
 * `.e-con > .e-con-inner { max-width: var(--content-width) }` and so disables
 * the 1650px cap site-wide. Section 3 restores it for standardised pages.
 */

/* ==========================================================================
 * 1. The standard, taken from the homepage
 * ========================================================================== */

:root {
	/* Elementor's configured content width on the homepage. */
	--wrc-content-width: 1650px;

	/* The homepage's dominant side gutter on desktop and tablet. */
	--wrc-gutter: 30px;

	/*
	 * Distance from the edge of a full-bleed element to where standardised
	 * content starts — the alignment line the whole site shares.
	 *
	 * A standardised section is full width with `--wrc-gutter` of padding, and
	 * its inner wrapper is capped at `--wrc-content-width` and centred inside
	 * that, so content begins at:
	 *
	 *     max( gutter, ( viewport - content-width ) / 2 )
	 *
	 * Below the cap the `max()` picks the gutter and this is just the gutter.
	 *
	 * For full-bleed components that keep a background band running edge to
	 * edge but whose *content* must line up with the sections around them —
	 * see wrc-partners.css and wrc-contact.css. The `100%` resolves against the
	 * element it is used on, so only apply it to something full width.
	 */
	--wrc-content-inset: max(
		var( --wrc-gutter ),
		calc( ( 100% - var( --wrc-content-width ) ) / 2 )
	);
}

@media ( max-width: 767px ) {
	:root {
		/* Matches the 16px mobile gutter wrc-responsive.css already applies, so
		   text keeps the horizontal position it has on phones today. */
		--wrc-gutter: 16px;
	}
}

/* ==========================================================================
 * 2. Side gutters on top-level content sections
 *
 * Horizontal padding only. Vertical padding is section spacing the page author
 * chose and is deliberately left untouched.
 *
 * Elementor applies these as `.e-con { padding-inline-start: var(--padding-
 * inline-start) }` at (0,1,0); the selectors here are far more specific, so no
 * !important is needed.
 * ========================================================================== */

.wrc-std-width .elementor[data-elementor-type="wp-page"] > .e-con.e-con-boxed,
.wrc-std-width .elementor[data-elementor-type="wp-post"] > .e-con.e-con-boxed,
.wrc-std-width .elementor[data-elementor-type="wp-page"] > .elementor-section.elementor-section-boxed,
.wrc-std-width .elementor[data-elementor-type="wp-post"] > .elementor-section.elementor-section-boxed {
	padding-left: var( --wrc-gutter );
	padding-right: var( --wrc-gutter );
	box-sizing: border-box;
}

/* ==========================================================================
 * 3. Maximum content width, centred
 *
 * `min(100%, …)` so the cap can never make a container wider than the space it
 * has — on phones and tablets the 100% branch wins and this is a no-op.
 *
 * The inner wrapper carries no author-set horizontal padding (Elementor writes
 * padding onto the outer container, not this one), so zeroing it keeps the
 * gutter defined in exactly one place: `--wrc-gutter` above. Without this,
 * wrc-responsive.css's mobile `padding-left: 16px` on `.e-con > .e-con-inner`
 * would stack on top of the gutter.
 * ========================================================================== */

.wrc-std-width .elementor[data-elementor-type="wp-page"] > .e-con.e-con-boxed > .e-con-inner,
.wrc-std-width .elementor[data-elementor-type="wp-post"] > .e-con.e-con-boxed > .e-con-inner,
.wrc-std-width .elementor[data-elementor-type="wp-page"] > .elementor-section.elementor-section-boxed > .elementor-container,
.wrc-std-width .elementor[data-elementor-type="wp-post"] > .elementor-section.elementor-section-boxed > .elementor-container {
	max-width: min( 100%, var( --wrc-content-width ) );
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
	box-sizing: border-box;
}

/* ==========================================================================
 * 4. The page-title band
 *
 * The breadcrumb + page title sit outside Elementor, in the CityGov template's
 * own `.container` (max-width: 1180px, centred). That left the page title
 * indented well inside the content beneath it — 390px against 135px at a
 * 1920px viewport.
 *
 * The band keeps its full-bleed background and its own vertical padding; only
 * the horizontal inset moves onto the shared alignment line. `max-width: none`
 * plus the inset — rather than a 1650px cap plus a gutter — because the cap and
 * the gutter must not stack, or the title would sit one gutter further in than
 * the sections below it.
 *
 * `.container` is the theme's general-purpose wrapper, so this is scoped to the
 * page header specifically.
 * ========================================================================== */

.wrc-std-width .page-header > .container {
	max-width: none;
	padding-left: var( --wrc-content-inset );
	padding-right: var( --wrc-content-inset );
}

/* ==========================================================================
 * 5. Overflow guard
 *
 * wrc-responsive.css removes the usual causes of horizontal scrolling. This is
 * the container-level equivalent: a standardised section can never be wider
 * than the viewport, whatever a page author set on it.
 * ========================================================================== */

.wrc-std-width .elementor[data-elementor-type="wp-page"] > .e-con,
.wrc-std-width .elementor[data-elementor-type="wp-post"] > .e-con,
.wrc-std-width .elementor[data-elementor-type="wp-page"] > .elementor-section,
.wrc-std-width .elementor[data-elementor-type="wp-post"] > .elementor-section {
	max-width: 100%;
}

/* ==========================================================================
 * 6. Per-page alignment exceptions
 *
 * About Us (page 5984), the "Mandate" section.
 *
 * The section's container is correct — measured 124px from both edges at a
 * 1898px viewport, i.e. the standard 1650px content width. What was wrong is
 * inside it: the image is intrinsically 648px wide but sits in an ~825px flex
 * column, and Elementor's image widget defaults to `text-align: center`
 * (assets/css/widget-image.min.css). The 177px of slack was therefore split
 * either side of the image, putting ~85px of dead space in front of it.
 *
 * The result was a section that began 209px from the left while its own right
 * edge, and every other section on the site, sat on the 124px line — reading as
 * a lopsided left margin rather than as a centred image.
 *
 * Aligning the image to the start puts it back on the shared alignment line.
 * The slack moves to the gap between the image and the text, where it reads as
 * column spacing instead of a page margin. The image is not stretched: at 648px
 * it is already at its natural size and scaling it up to fill the column would
 * soften it.
 *
 * Scoped to this one widget, so no other image on the site is affected.
 * ========================================================================== */

/*
 * Desktop only. At <= 1024px the section stacks (Elementor switches it to
 * `column`, and to `column-reverse` at <= 767px), so the image is the full
 * width of the column and centring it is correct — left-aligning there would
 * push it off-centre on tablet and phone instead of fixing anything.
 */
@media ( min-width: 1025px ) {

	.wrc-std-width .elementor-5984 .elementor-element.elementor-element-5f6632f5 {
		text-align: left;
	}

	.wrc-std-width .elementor-5984 .elementor-element.elementor-element-5f6632f5 img {
		margin-left: 0;
		margin-right: auto;
	}
}