/* =============================================================================
 * Component Supply — single posts
 *
 * SOW §2.2, "Blog and posts". The 73 posts render through Elementor Theme
 * Builder Single Post template 778: a banner (the featured image), the title
 * and post info, the post content, then Related Posts (a loop grid of card
 * 1041). This sheet brings that template into the approved system
 * (visual-design-production-specs.md §3). Carry-through: the template's
 * structure is kept, nothing is redrawn.
 *
 * THE LAYOUT (HP-077; centred 30 Sep at Ivan's request, as production has it):
 *   - every section sits in the header's band: 1200px, 20px gutter (32px at
 *     tablet, 16px on a phone);
 *   - banner, title, post info and body share one 760px reading column,
 *     centred in the band. Title and post info are centred; the body is set
 *     left, as it is on production. 64 of 72 featured images are 1584px
 *     strips, the rest ~770px, so 760 never upscales one; at 1440×900 the
 *     title is above the fold;
 *   - Related Posts spans the band, under a hairline, its heading centred.
 *
 * HOW IT WINS: the template's compiled CSS is (0,3,0) — `.elementor-778
 * .elementor-element.elementor-element-{id}` — and mostly sets Elementor's own
 * container variables. This sheet sets the same variables one step above, and
 * type at (0,4,2) and higher. No !important, no element IDs.
 *
 * WHY POSITION, NOT WIDGET CLASS: the Related Posts cards also carry
 * .elementor-widget-image and .elementor-widget-heading. Every rule here is
 * anchored to the template's own top level (`> .e-con > .e-con-inner > …`),
 * which the cards, three levels deeper inside the loop grid, never match.
 * The cards themselves are styled with the blog index, which shares them.
 *
 * Tokens are literal (csc-shared.css scopes them to .csc-widget); each value
 * names its token. Loaded on single posts only — IFE_SO_Assets::enqueue_post().
 * ========================================================================== */


/* --- 1. The band ----------------------------------------------------------
 * Each top-level section: the header's 1200px band and gutter. */

body.single-post .elementor-location-single > .e-con {
	--content-width:   1200px;                  /* --csc-band */
	--padding-left:    20px;                    /* --csc-gutter */
	--padding-right:   20px;
}

/* The banner's section: room under the header. */
body.single-post .elementor-location-single > .e-con:has(> .e-con-inner > .elementor-widget-image) {
	--padding-top:     32px;
	--margin-bottom:   0px;
}

/* The title-and-content section. */
body.single-post .elementor-location-single > .e-con:has(> .e-con-inner > .e-con > .elementor-widget-theme-post-content) {
	--padding-bottom:  64px;
}

/* The reading column: was a 1000px panel with 20px corners and a 280px
 * minimum height. 760px now, still centred. */
body.single-post .elementor-location-single > .e-con > .e-con-inner > .e-con {
	--width:           min(760px, 100%);
	margin-inline:     auto;
	--min-height:      0px;
	--border-radius:   0px;
	--justify-content: flex-start;
	--align-items:     stretch;
	--container-widget-width: 100%;
	--row-gap:         0px;
}


/* --- 2. The banner ----------------------------------------------------------
 * The featured image, the reading column's width (was 70% of the page). */

body.single-post .elementor-location-single > .e-con > .e-con-inner > .elementor-widget-image {
	width:      100%;
	max-width:  760px;
	align-self: center;
	text-align: center;
}

body.single-post .elementor-location-single > .e-con > .e-con-inner > .elementor-widget-image img {
	display:       block;
	width:         100%;
	height:        auto;
	border-radius: 0;
	box-shadow:    none;
}


/* --- 3. Title and post info -------------------------------------------------
 * The spec's page H1 (§3.2): 44 / 34 / 28, light, ink. Was link blue at
 * 40/600, centred — a heading in the link colour reads as a link. */

body.single-post .elementor-location-single > .e-con > .e-con-inner > .e-con > .elementor-widget-heading h1.elementor-heading-title {
	margin:         32px 0 12px;
	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;
	text-align:     center;
}

/* Author and date: was the kit's accent green, #61BD69 — 2.43:1, a fail.
 * Secondary ink, centred under the title. */
body.single-post .elementor-location-single > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info {
	text-align: center;
}

body.single-post .elementor-location-single > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info .elementor-icon-list-items {
	justify-content: center;
	margin-inline:   0;
}

body.single-post .elementor-location-single > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info .elementor-icon-list-item {
	margin-inline:       10px;
	font-family:         'Roboto', Helvetica, Arial, sans-serif;
	font-size:           14px;
	font-weight:         400;
	line-height:         1.4;
}

body.single-post .elementor-location-single > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info .elementor-icon-list-text {
	padding-inline-start: 6px;
	color:                #5C6B7E;              /* --csc-ink-3  5.44:1 */
}

body.single-post .elementor-location-single > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info .elementor-icon-list-icon {
	width: 14px;
}

body.single-post .elementor-location-single > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info .elementor-icon-list-icon i {
	color:     #5C6B7E;
	font-size: 14px;
}

body.single-post .elementor-location-single > .e-con > .e-con-inner > .e-con > .elementor-widget-post-info .elementor-icon-list-icon svg {
	fill:                 #5C6B7E;
	--e-icon-list-icon-size: 14px;
}


/* --- 4. The body ------------------------------------------------------------
 * Long-form body, §3.2: 16 / 400 / 1.55, body ink. Was black at 16/28, the
 * full 1000px wide. */

body.single-post .elementor-location-single .elementor-widget-theme-post-content {
	margin-top:  32px;
	color:       #2E3F55;                       /* --csc-ink-2  10.72:1 */
	font-family: 'Roboto', Helvetica, Arial, sans-serif;
	font-size:   16px;
	font-weight: 400;
	line-height: 1.55;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content p {
	margin: 0 0 16px;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content strong,
body.single-post .elementor-location-single .elementor-widget-theme-post-content b {
	color:       #0E1A2A;
	font-weight: 700;
}

/* Sub-heads. Only three posts use a real heading; eighteen bold a paragraph
 * instead, which the rule above sets in ink. The spec's sub-head H2 is
 * 24 / 24 / 22, 700; h3 and h4 step down from it. */
body.single-post .elementor-location-single .elementor-widget-theme-post-content h2 {
	margin:      40px 0 12px;
	color:       #0E1A2A;
	font-size:   24px;
	font-weight: 700;
	line-height: 1.25;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content h3 {
	margin:      32px 0 8px;
	color:       #0E1A2A;
	font-size:   20px;
	font-weight: 700;
	line-height: 1.3;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content h4 {
	margin:      24px 0 8px;
	color:       #0E1A2A;
	font-size:   16px;
	font-weight: 700;
	line-height: 1.4;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content > :first-child,
body.single-post .elementor-location-single .elementor-widget-theme-post-content > .elementor-widget-container > :first-child {
	margin-top: 0;
}

/* Links in running text are underlined, so they never depend on colour
 * alone. The colour is the site's link colour (csc-global.css): the link-blue
 * contrast question is CSC's, and is not settled here. The two download
 * buttons are not links in this sense. */
body.single-post .elementor-location-single .elementor-widget-theme-post-content a:not(.wp-block-file__button):not(.csc-pdf-download__link) {
	text-decoration:           underline;
	text-decoration-thickness: 1px;
	text-underline-offset:     2px;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content :is(ul, ol) {
	margin:               0 0 16px;
	padding-inline-start: 24px;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content li {
	margin-bottom: 6px;
}

/* Many posts give every bullet its own list. Back to back, they close up to
 * the spacing of one list. */
body.single-post .elementor-location-single .elementor-widget-theme-post-content :is(ul, ol):has(+ :is(ul, ol)) {
	margin-bottom: 6px;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content blockquote {
	margin:               24px 0;
	padding:              0 0 0 20px;
	border:               0;
	border-inline-start:  2px solid #2D80C3;    /* --csc-blue: a rule, never a fill */
	color:                #0E1A2A;
	font-style:           normal;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content blockquote p:last-child {
	margin-bottom: 0;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content img {
	max-width: 100%;
	height:    auto;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content figure {
	margin: 0 0 24px;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content figcaption {
	margin-top:  8px;
	color:       #5C6B7E;
	font-size:   13px;
	line-height: 1.45;
	text-align:  start;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content .alignleft {
	float:  left;
	margin: 4px 24px 16px 0;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content .alignright {
	float:  right;
	margin: 4px 0 16px 24px;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content hr {
	margin:     32px 0;
	border:     0;
	border-top: 1px solid #D5DEE8;              /* --csc-rule */
}

/* One post has a table. Hairlines, figures that line up, and a scroll of
 * its own on a phone rather than a page that scrolls sideways. */
body.single-post .elementor-location-single .elementor-widget-theme-post-content .wp-block-table {
	overflow-x: auto;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content table {
	width:                100%;
	margin:               0 0 24px;
	border-collapse:      collapse;
	font-size:            14px;
	font-variant-numeric: tabular-nums;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content :is(th, td) {
	padding:       8px 12px;
	border:        0;
	border-bottom: 1px solid #D5DEE8;
	background:    transparent;
	text-align:    start;
	vertical-align: top;
}

body.single-post .elementor-location-single .elementor-widget-theme-post-content th {
	color:       #0E1A2A;
	font-weight: 700;
}

/* The content ends where the column does: a float never hangs into the next
 * section. */
body.single-post .elementor-location-single .elementor-widget-theme-post-content::after {
	content: "";
	display: block;
	clear:   both;
}


/* --- 5. Related Posts -------------------------------------------------------
 * A section H2 on a light ground, §3.2: 32 / 28 / 24, light, ink, centred as
 * on production. Was 34/700 black. A hairline separates it from the
 * post. The cards are the blog index's (card 1041) and are styled with it. */

body.single-post .elementor-location-single > .e-con:has(> .e-con-inner > .elementor-widget-loop-grid) > .e-con-inner {
	padding-top: 48px;
	border-top:  1px solid #D5DEE8;
}

body.single-post .elementor-location-single > .e-con > .e-con-inner > .elementor-widget-heading {
	text-align: center;
}

body.single-post .elementor-location-single > .e-con > .e-con-inner > .elementor-widget-heading h2.elementor-heading-title {
	margin:         0 0 8px;
	color:          #0E1A2A;
	font-family:    'Roboto', Helvetica, Arial, sans-serif;
	font-size:      32px;
	font-weight:    300;
	line-height:    1.15;
	letter-spacing: -0.01em;
}


/* --- 6. Tablet and phone ---------------------------------------------------- */

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

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

	body.single-post .elementor-location-single > .e-con > .e-con-inner > .elementor-widget-heading h2.elementor-heading-title {
		font-size: 28px;
	}
}

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

	body.single-post .elementor-location-single > .e-con:has(> .e-con-inner > .elementor-widget-image) {
		--padding-top: 16px;
	}

	body.single-post .elementor-location-single > .e-con > .e-con-inner > .e-con > .elementor-widget-heading h1.elementor-heading-title {
		margin-top: 24px;
		font-size:  28px;
		line-height: 1.12;
	}

	body.single-post .elementor-location-single > .e-con > .e-con-inner > .elementor-widget-heading h2.elementor-heading-title {
		font-size: 24px;
	}

	body.single-post .elementor-location-single .elementor-widget-theme-post-content h2 {
		font-size: 22px;
	}

	/* A 375px column cannot wrap text round a picture. */
	body.single-post .elementor-location-single .elementor-widget-theme-post-content :is(.alignleft, .alignright) {
		float:  none;
		margin: 0 0 16px;
	}
}