/* =============================================================================
 * Component Supply — Custom Fabrication, the rest
 *
 * SOW §2.2, "Custom Fabrication, the rest": the section home (/custom-fabrication/,
 * archive template 23986), Quality Materials and its size charts, the Idea
 * Gallery, Rapid Request Quote and Contact Us. Carry-through: every page keeps
 * its build and its CS Custom Fab cyan; what changes is what the new header,
 * the kit and the approved system make wrong (measured 7 Oct, staging against
 * production, 1440 / 1024 / 390):
 *
 *   - every section sat in a 1280px band with a 10px gutter, built against the
 *     old header; the new header's band is 1200px with a 20px gutter (32px at
 *     tablet, 16px on a phone), so the pages started 40px left of the logo;
 *   - the four single pages' H1s were Elementor's default heading colour, the
 *     link blue, at 40/600; the spec's page H1 is ink, 44 / 34 / 28, light;
 *   - Quality Materials' nine cards had 10px corners in a cyan rule, their
 *     photos 20px corners in a 4px cyan frame; surfaces are 2px with a
 *     hairline (the blog and Resource Center took the same change);
 *   - buttons kept Elementor's 3px corners (buttons are 4px, CSC 2 Oct);
 *   - the home page's checklist was set in black, not body ink.
 *
 * HOW IT WINS: each page's compiled CSS is (0,3,0) — `.elementor-{post}
 * .elementor-element.elementor-element-{id}` — and mostly sets Elementor's own
 * container variables. These rules set the same variables from (0,4,1) up,
 * anchored to each document's top level, and type at (0,7,2). No !important,
 * no element IDs, no template or post IDs: it survives a page being rebuilt.
 *
 * Loaded on those pages only, never on the capabilities index or a capability
 * page (IFE_SO_Assets::enqueue_custom_fab()). Tokens are literal (csc-shared.css
 * scopes them to .csc-widget); each value names its token.
 * ========================================================================== */


/* --- 1. The band ----------------------------------------------------------
 * The header's 1200px band and gutter. A section built narrower (the home
 * page's 1000px reading sections) keeps its width; a wider one comes in. */

body.post-type-archive-custom_fabrication .elementor-location-archive > .e-con,
body.single-custom_fabrication .page-content > .elementor > .e-con {
	--padding-left:  20px;                       /* --csc-gutter */
	--padding-right: 20px;
}

body.post-type-archive-custom_fabrication .elementor-location-archive > .e-con > .e-con-inner,
body.single-custom_fabrication .page-content > .elementor > .e-con > .e-con-inner {
	max-width: min(var(--content-width), 1200px); /* --csc-band */
}


/* --- 2. The page H1 ---------------------------------------------------------
 * The spec's page H1 (§3.2), as on single posts: 44 / 34 / 28, light, ink.
 * Was the link blue at 40/600 — a heading in the link colour reads as a link.
 * The home page's H1 is its hero's display line, set in the build, and stays. */

body.single-custom_fabrication .page-content > .elementor > .e-con > .e-con-inner > .elementor-widget-heading h1.elementor-heading-title {
	color:          #0E1A2A;                     /* --csc-ink */
	font-family:    'Roboto', Helvetica, Arial, sans-serif;
	font-size:      44px;
	font-weight:    300;
	line-height:    1.08;
	letter-spacing: -0.01em;
}


/* --- 3. Quality Materials' cards -------------------------------------------
 * A card is a section's one inner container. 2px and a hairline, like every
 * surface in the system; the photo square-cornered to match, out of its frame.
 * The cyan stays on the Request Quote buttons. */

body.single-custom_fabrication .page-content > .elementor > .e-con > .e-con-inner > .e-con {
	--border-radius: 2px;                        /* --csc-radius */
	border-color:    #D5DEE8;                    /* --csc-rule */
}

body.single-custom_fabrication .page-content > .elementor > .e-con > .e-con-inner > .e-con .elementor-widget-image img {
	border-width:  0;
	border-radius: 2px;
}


/* --- 4. Buttons and body ink ----------------------------------------------- */

body.post-type-archive-custom_fabrication .elementor-location-archive > .e-con .elementor-widget-button .elementor-button,
body.single-custom_fabrication .page-content > .elementor > .e-con .elementor-widget-button .elementor-button {
	border-radius: 4px;                          /* --csc-radius-btn */
}

body.post-type-archive-custom_fabrication .elementor-location-archive > .e-con .elementor-widget-icon-list .elementor-icon-list-text {
	color: #2E3F55;                              /* --csc-ink-2  10.72:1 */
}


/* --- 5. Tablet and phone ---------------------------------------------------- */

@media (max-width: 1024px) {
	body.post-type-archive-custom_fabrication .elementor-location-archive > .e-con,
	body.single-custom_fabrication .page-content > .elementor > .e-con {
		--padding-left:  32px;
		--padding-right: 32px;
	}

	body.single-custom_fabrication .page-content > .elementor > .e-con > .e-con-inner > .elementor-widget-heading h1.elementor-heading-title {
		font-size: 34px;
	}
}

@media (max-width: 767px) {
	body.post-type-archive-custom_fabrication .elementor-location-archive > .e-con,
	body.single-custom_fabrication .page-content > .elementor > .e-con {
		--padding-left:  16px;
		--padding-right: 16px;
	}

	body.single-custom_fabrication .page-content > .elementor > .e-con > .e-con-inner > .elementor-widget-heading h1.elementor-heading-title {
		font-size:   28px;
		line-height: 1.12;
	}
}