/* =========================================================================
   pc-blog.css — clean-path (non-WPBakery) single-post styling.

   SCOPE: every rule is prefixed with `body.pc-clean-post` so it can only ever
   affect clean posts. Legacy WPBakery posts never receive that body class.

   DEFENSIVE BASELINES: the site's 27k Customizer Additional CSS (#wp-custom-css)
   contains broad selectors (.single-post, .main-content, generic h2/p/img in
   post contexts, etc.). Rather than rely on inherited defaults, the clean
   layout sets explicit margins, colours, font sizes and display values on its
   own elements so stray rules have little to grab. The Additional CSS blob is
   NOT edited — everything here is neutralised locally.
   ========================================================================= */

/* ---- Wrapper + top clearance for the transparent header ------------------ */
/* Parity with legacy WPBakery posts (measured at 1920px, logged-out): the legacy
   layout is a full-width row with 6vw left/right padding (no fixed max-width),
   and the first content element (back-to-insights) sits 80px below the nav
   bottom. Mirror both: full-width wrap, 6vw side padding, 80px top clearance. */
body.pc-clean-post .pc-clean-post-wrap {
	max-width: none;
	width: 100%;
	margin: 0; /* fill the full content band (no auto-centering) so content sits at 6vw from the edge, matching legacy */
	padding: 80px 6vw 80px; /* top = measured 80px gap from nav bottom */
	box-sizing: border-box;
	color: #1e1e1e;
	font-family: inherit;
}

body.pc-clean-post .pc-clean-post-wrap * {
	box-sizing: border-box;
}

/* Sticky-sidebar prerequisite. Salient sets a global `body { overflow: hidden }`
   which makes <body> a (non-scrolling) scroll container — that silently
   disables position:sticky for everything inside, so the sidebar stopped
   pinning. Switch it to `overflow: clip` on clean posts only: clip still clips
   the full-bleed 100vw hero horizontally but does NOT create a scroll
   container, so html/viewport stays the scroller and the sticky inner pins to
   it. (overflow:visible would let the hero cause a horizontal scrollbar.) */
body.pc-clean-post {
	overflow: clip;
}

/* ---- Header -------------------------------------------------------------- */
body.pc-clean-post .pc-post-header {
	display: block;
	margin: 0 0 40px;
	padding: 0;
}

/* Back-to-insights is now the site's global nectar Legacy Button (markup +
   classes copied verbatim from legacy posts). This pc- wrapper only POSITIONS
   it; every pill / arrow / hover style comes from the global .nectar-button
   classes so it stays identical to legacy. */
body.pc-clean-post .pc-back-to-insights {
	margin: 0 0 40px;
}

body.pc-clean-post .pc-post-header__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	margin: 0 0 40px;
}

body.pc-clean-post .pc-post-header__lead {
	flex: 1 1 60%;
	min-width: 0;
	margin: 0;
	padding: 0;
}

body.pc-clean-post .pc-post-header__eyebrow {
	margin: 0 0 12px;
	padding: 0;
	font-size: 16px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: lowercase;
	color: #d63a3a;
}

body.pc-clean-post .pc-post-title {
	margin: 0;
	padding: 0;
	font-family: "swear-display", Georgia, serif;
	font-style: italic;
	font-weight: 400;
	font-size: 68px;
	line-height: 1.05;
	color: #1e1e1e;
	text-transform: none;
	letter-spacing: 0;
}
body.pc-clean-post .pc-post-title em {
	font-style: italic;
}

body.pc-clean-post .pc-post-header__meta {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	text-align: right;
	gap: 4px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	line-height: 1.4;
	color: #1e1e1e;
}
body.pc-clean-post .pc-post-header__author {
	font-weight: 600;
}

/* ---- Hero ---------------------------------------------------------------- */
/* Legacy renders the featured image full-bleed (100vw, edge to edge). Break the
   hero out of the 6vw-padded wrap with the 100vw centering technique so it spans
   the full viewport width like legacy, regardless of the wrap padding. */
body.pc-clean-post .pc-post-hero {
	display: block;
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-top: 0;
	margin-bottom: 40px;
	padding: 0;
}
body.pc-clean-post .pc-post-hero__img {
	display: block;
	width: 100%;
	height: auto;
	margin: 0;
	border-radius: 0;
}

/* ---- Two-column layout --------------------------------------------------- */
/* Two-column split matched to legacy proportions (measured @1920, 6vw band):
   text ~67.5%, gap ~7.5% (~126px), sidebar ~25% (~419px). Percentages so the
   ratio holds across widths. Text column no longer capped at 617px. */
body.pc-clean-post .pc-post-layout {
	display: flex;
	align-items: flex-start;
	gap: 7.5%;
	margin: 48px 0 0;
	padding: 0;
}

body.pc-clean-post .pc-post-content {
	flex: 1 1 auto;
	max-width: none;
	min-width: 0;
	margin: 0;
	padding: 0;
	font-size: 18px;
	line-height: 1.7;
	color: #1e1e1e;
}

/* Content baselines — explicit so Additional CSS post rules don't bleed. */
body.pc-clean-post .pc-post-content > * {
	max-width: 100%;
}
body.pc-clean-post .pc-post-content p {
	margin: 0 0 1.4em;
	padding: 0;
	font-size: 18px;
	line-height: 1.7;
	color: #1e1e1e;
}
body.pc-clean-post .pc-post-content h2 {
	margin: 1.6em 0 0.5em;
	padding: 0;
	font-family: inherit;
	font-weight: 700;
	font-size: 28.8px;
	line-height: 1.25;
	color: #d63a3a;
	text-transform: none;
}
body.pc-clean-post .pc-post-content h3 {
	margin: 1.4em 0 0.4em;
	padding: 0;
	font-size: 22px;
	line-height: 1.3;
	color: #1e1e1e;
	font-weight: 700;
}
body.pc-clean-post .pc-post-content a {
	color: #d63a3a;
	text-decoration: underline;
}
body.pc-clean-post .pc-post-content ul,
body.pc-clean-post .pc-post-content ol {
	margin: 0 0 1.4em;
	padding: 0 0 0 1.3em;
	font-size: 18px;
	line-height: 1.7;
	color: #1e1e1e;
}
body.pc-clean-post .pc-post-content li {
	margin: 0 0 0.5em;
}
body.pc-clean-post .pc-post-content blockquote {
	margin: 1.6em 0;
	padding: 0 0 0 24px;
	border-left: 3px solid #d63a3a;
	font-style: italic;
	color: #1e1e1e;
}
/* In-body images constrained to the text column. */
body.pc-clean-post .pc-post-content img,
body.pc-clean-post .pc-post-content .wp-block-image img,
body.pc-clean-post .pc-post-content figure {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 1.6em 0;
}
body.pc-clean-post .pc-post-content figure {
	margin-left: 0;
	margin-right: 0;
}
body.pc-clean-post .pc-post-content figcaption {
	margin: 8px 0 0;
	font-size: 14px;
	color: #666;
	text-align: left;
}

/* ---- Sidebar ------------------------------------------------------------- */
body.pc-clean-post .pc-post-sidebar {
	flex: 0 0 25%;
	min-width: 0;
	margin: 0;
	padding: 0;
	/* Stretch the column to the full row height (the layout uses
	   align-items:flex-start, which otherwise collapses it to its content
	   height) so the sticky __inner has room to travel. */
	align-self: stretch;
}
body.pc-clean-post .pc-post-sidebar__inner {
	/* Not sticky itself — it fills the full column height so the CTA (the only
	   sticky element) has room to travel to the article's end. height:100%
	   resolves against the stretched .pc-post-sidebar flex item; the read-more
	   cards above the CTA scroll away with the normal flow. */
	height: 100%;
	margin: 0;
	padding: 0;
}

body.pc-clean-post .pc-related {
	margin: 0 0 40px;
	padding: 0;
}
/* "read more" heading — matches legacy wp-read-more-container: swear-display
   (non-italic), down navigation arrow to the right, "(reading is good for you)"
   sub-line beneath. */
body.pc-clean-post .pc-related__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 24px;
	padding: 0;
}
body.pc-clean-post .pc-related__head-text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}
body.pc-clean-post .pc-related__title {
	margin: 0;
	padding: 0;
	font-family: "swear-display", Georgia, serif;
	font-style: normal;
	font-weight: 400;
	font-size: 34px;
	line-height: 1.05;
	color: #1e1e1e;
	text-transform: none;
}
body.pc-clean-post .pc-related__subtitle {
	margin: 0;
	padding: 0;
	font-family: "swear-display", Georgia, serif;
	font-style: normal;
	font-size: 15px;
	line-height: 1.2;
	color: #1e1e1e;
}
body.pc-clean-post .pc-related__arrow {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	color: #1e1e1e;
	opacity: 0.85;
	transition: transform 0.3s ease, opacity 0.3s ease;
}
body.pc-clean-post .pc-related__arrow svg {
	display: block;
	width: 24px;
	height: 24px;
}
body.pc-clean-post .pc-related-card {
	display: block;
	margin: 0 0 14px; /* legacy inter-card gap ~13px */
	padding: 0;
	text-decoration: none;
	color: #1e1e1e;
	border: 0;
}
/* Legacy related-card image is cropped ~419x324 (≈1.29:1), not the raw file
   aspect. Force that crop with a fixed ratio + object-fit cover. */
body.pc-clean-post .pc-related-card__media {
	display: block;
	margin: 0 0 12px;
	overflow: hidden;
	aspect-ratio: 419 / 324;
}
body.pc-clean-post .pc-related-card__img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}
body.pc-clean-post .pc-related-card__body {
	display: block;
}
body.pc-clean-post .pc-related-card__eyebrow {
	display: block;
	margin: 0 0 4px;
	font-size: 13px;
	font-weight: 600;
	text-transform: lowercase;
	color: #d63a3a;
}
body.pc-clean-post .pc-related-card__title {
	display: block;
	font-size: 17px;
	line-height: 1.35;
	font-weight: 600;
	color: #1e1e1e;
}
body.pc-clean-post .pc-related-card:hover .pc-related-card__title {
	color: #d63a3a;
}

/* CTA card now reuses the global nectar column classes (red #cf3339 bg, 50px
   radius, 80px vertical padding, centred light text, 5vw "let's talk") from the
   markup copied out of legacy posts. Only ensure it behaves as a full-width
   block in our flex sidebar — the WPBakery column globals otherwise assume a
   vc_row grid context. */
body.pc-clean-post .pc-cta-card {
	width: 100%;
	max-width: 100%;
	float: none;
	margin: 0;
	/* Only the CTA pins on scroll (read-more cards scroll away above it). Pins at
	   98px to match legacy exactly: fixed header bottom (66px) + 32px. Its
	   containing block is the full-height .pc-post-sidebar__inner, so it follows
	   for the rest of the article and releases at the layout end. */
	position: -webkit-sticky;
	position: sticky;
	top: 98px;
}
/* Salient normally emits the responsive inner padding (top_padding_desktop_80px)
   and the 5vw "let's talk" size (font_size_desktop_5vw) as PER-POST dynamic CSS
   from its WPBakery compiler — that generated CSS does not exist on our
   template-rendered clean page, so those two class hooks have no backing rule.
   Supply just those values so the global-classed card matches legacy exactly.
   Everything else (red #cf3339 bg, 50px radius, centring, 18px "got a project?",
   light text, arrow) comes from the reused global classes + inline attributes. */
body.pc-clean-post .pc-cta-card .vc_column-inner {
	padding: 80px 0;
	/* Salient's .column-bg-overlay uses z-index:-1, which only paints when no
	   opaque ancestor sits between it and the page — true on desktop but not in
	   the mobile stacking context, where the red vanished. Paint the red here so
	   it is reliable on every viewport (radius/overflow set inline in the markup). */
	background-color: #cf3339;
}
body.pc-clean-post .pc-cta-card .nectar-cta .link_text {
	font-size: clamp(38px, 5vw, 100px);
	line-height: 1.1;
}
/* The nectar-cta carries data-alignment="left"; legacy only centres it on
   desktop (force-desktop-text-align-center), leaving "let's talk" left-aligned
   on mobile. Centre it on every width so heading / "let's talk" / arrow all
   line up centred like the rest of the card. */
body.pc-clean-post .pc-cta-card .nectar-cta,
body.pc-clean-post .pc-cta-card .nectar-cta h2 {
	text-align: center;
}
/* Legacy's el_spacing_10px sets 10px gaps between the heading / "let's talk" /
   arrow and zeroes their default (WPBakery ~35px) child margins. Reproduce so
   the card height matches (80 pad + 24 + 10 + ~104 + 10 + 20 + 80 pad ≈ 328). */
body.pc-clean-post .pc-cta-card .wpb_text_column p,
body.pc-clean-post .pc-cta-card .nectar-cta h2 {
	margin: 0;
	padding: 0; /* the Additional-CSS blob puts 27px padding-bottom on post <p> */
}
body.pc-clean-post .pc-cta-card .wpb_wrapper > div {
	margin: 0 0 10px;
}
body.pc-clean-post .pc-cta-card .wpb_wrapper > div:last-child {
	margin-bottom: 0;
}

/* ---- Share row ----------------------------------------------------------- */
/* Share row — compact inline "share this article:" + buttons, matching legacy
   (inline <h4> label with the buttons immediately to its right). */
/* Legacy share row sits within the text column (left-aligned, ~text-column
   width), not centered. Match: left-aligned, capped to the text-column width. */
body.pc-clean-post .pc-share-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 12px;
	max-width: 67.5%;
	margin: 48px 0 0;
	padding: 20px 0 0;
	border-top: 1px solid #ececec;
}
body.pc-clean-post .pc-share-row__label {
	display: inline-block;
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	color: #1e1e1e;
	text-transform: none;
}
body.pc-clean-post .pc-share-row .share-buttons {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}
body.pc-clean-post .pc-share-row .share-buttons a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	font-size: 14px;
	color: #1e1e1e;
	border: 1px solid #d0d0d0;
	border-radius: 50%;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
body.pc-clean-post .pc-share-row .share-buttons a:hover {
	color: #fff;
	background: #cf3339;
	border-color: #cf3339;
}

/* ---- Responsive ---------------------------------------------------------- */
@media (max-width: 999px) {
	body.pc-clean-post .pc-post-title {
		font-size: 48px;
	}
}
@media (max-width: 768px) {
	body.pc-clean-post .pc-clean-post-wrap {
		padding: 80px 6vw 56px;
	}
	body.pc-clean-post .pc-post-layout {
		display: block;
	}
	body.pc-clean-post .pc-post-content,
	body.pc-clean-post .pc-share-row {
		max-width: 100%;
	}
	body.pc-clean-post .pc-post-sidebar {
		margin-top: 48px;
	}
	body.pc-clean-post .pc-post-sidebar__inner {
		height: auto;
	}
	body.pc-clean-post .pc-cta-card {
		position: static;
		top: auto;
	}
	body.pc-clean-post .pc-post-header__bar {
		flex-direction: column;
		align-items: flex-start;
	}
	body.pc-clean-post .pc-post-header__meta {
		align-items: flex-start;
		text-align: left;
	}
	body.pc-clean-post .pc-post-title {
		font-size: 40px;
	}
}