/* ==========================================================================
   VOY — interior pages
   --------------------------------------------------------------------------
   Blog, archives, single posts, search results and the 404: everything that
   runs one of Salient's own templates rather than a Figma landing design.

   There is no Figma frame for any of this, so nothing here is a pixel
   translation. It is the landing pages' design system — the tokens declared in
   app.css's :root — applied to Salient's existing markup, so an interior page
   reads as the same website rather than as the theme's defaults.

   Everything is scoped to `body.voy-interior` (set by voy_is_interior() in
   interior.php) so no rule here can reach a verified landing page. The only
   deliberate exceptions are marked SITEWIDE.

   Loaded after app.css, so it inherits every token and wins on ties.
   ========================================================================== */

body.voy-interior {
	background: var(--voy-cream);
	font-family: var(--voy-font-body);
	color: var(--voy-text);
}

/* Salient's own footer is emptied via its `disable-copyright-footer-area`
   option; the VOY footer is printed just above it by voy_interior_footer().
   This hides the leftover empty shell so it cannot contribute stray spacing. */
body.voy-interior #footer-outer {
	display: none;
}
body.voy-interior .voy-interior-footer .voy-footer {
	margin-top: 0;
}
/* The footer sits outside the landing template's wrapper here, so it inherits
   Salient's own container padding on top of .voy-container's — the wordmark
   landed at x=58 instead of the x=30 content edge every other page uses. */
body.voy-interior .voy-interior-footer .voy-container {
	/* Same arithmetic as app.css's .voy-container: the max-width has to INCLUDE
	   both gutters, or the padding is added on top of an already-narrower box and
	   the wordmark lands at x=60 instead of the x=30 content edge. */
	max-width: calc(var(--voy-content-max) + var(--voy-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--voy-gutter);
}

/* --------------------------------------------------------------------------
   Header
   The landing header floats transparently over a dark hero photograph, which is
   why its logo and controls are white. Interior pages have no hero, so that
   same header would be white-on-cream — invisible. Give them the solid navy bar
   instead: the same treatment the landing pages adopt once you scroll.
   -------------------------------------------------------------------------- */
body.voy-interior #header-outer,
body.voy-interior #header-outer.small-nav {
	background-color: var(--voy-navy) !important;
	position: relative;
	top: 0 !important;
}
body.voy-interior #header-space {
	display: none;
}
body.voy-interior #header-outer .container {
	max-width: 1440px;
	padding: 0 var(--voy-gutter);
}
/* Salient sizes the logo from two-ID selectors, so a single class loses. */
body.voy-interior #header-outer #logo img,
body.voy-interior #top #logo img {
	height: 28px;
	width: auto;
}
body.voy-interior #top nav > ul > li > a,
body.voy-interior #top nav .sf-menu > li > a {
	color: #fff;
}

/* Primary navigation — interior pages only.
   The approved Figma frames have no nav menu, so the landing pages stay as
   designed (app.css hides it under .page-template-template-voy-landing). But a
   blog post, an archive or a 404 with no navigation leaves a visitor with
   nowhere to go but the logo, and those are exactly the pages people arrive on
   from search. So the menu is shown here and only here.
   voy_interior_absolute_anchors() rewrites the menu's bare `#about` fragments
   to absolute homepage URLs so they still work from these pages. */
body.voy-interior #top nav > ul > li {
	display: inline-block;
}
body.voy-interior #top nav > ul > li > a {
	font-family: var(--voy-font-body);
	font-size: 15px;
	font-weight: 400;
	color: #fff;
	padding: 0 16px;
}
body.voy-interior #top nav > ul > li > a:hover,
body.voy-interior #top nav > ul > li.current-menu-item > a {
	color: var(--voy-accent);
}
/* Salient underlines the active item with an ::after bar; the landing template
   kills it with display:none, which would also kill the Contact pill's square. */
body.voy-interior #top nav > ul > li:not(.voy-nav-cta) > a::after {
	background-color: var(--voy-accent) !important;
}

/* THE HOVER UNDERLINE IS A BORDER ON A DIFFERENT ELEMENT.
   The rule above targets `> a::after` and sets `background-color` — neither is
   where Salient actually draws the animated underline, so it did nothing and a
   stock-blue bar (#3452FF, hardcoded at salient/css/custom.php:2930) slid in
   under lime text on every hover, on every interior page.
   The real thing is `.menu-title-text::after`, a zero-height element whose
   `border-top` IS the line, scaled in from scaleX(0) on hover.
   Not scoped to .voy-interior: the same element draws the mobile header's
   underline, and the nav is only hidden on the landing template by CSS — if
   that rule is ever lifted the blue would come straight back. */
#header-outer nav > ul > li > a .menu-title-text::after,
#header-outer .mobile-header li:not([class*="button_"]) > a .menu-title-text::after,
#header-outer[data-lhe="animated_underline"] nav > ul > li > a .menu-title-text::after {
	border-top-color: var(--voy-accent) !important;
	border-bottom-color: var(--voy-accent) !important;
}

/* --------------------------------------------------------------------------
   Page header band
   Salient renders #page-header-bg on search and (optionally) archives. Restyle
   it as the navy band the landing pages use for their contact section, so an
   interior page opens with a recognisable VOY element.
   -------------------------------------------------------------------------- */
/* #page-header-wrap is Salient's outer shell for the band and keeps the fixed
   height its data-height attribute asked for, while the band inside collapses
   to its content — leaving a ~98px white strip under the navy. Both need to be
   navy and auto-height, not just the band. */
body.voy-interior #page-header-wrap {
	background: var(--voy-navy);
	height: auto !important;
	min-height: 0;
}
body.voy-interior #page-header-bg,
body.voy-interior .voy-page-head {
	background: var(--voy-navy);
	height: auto !important;
	min-height: 0;
	padding: clamp(3rem, 6vw, 5.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}
body.voy-interior #page-header-bg .container,
body.voy-interior .voy-page-head > .voy-container {
	max-width: var(--voy-content-max);
	padding: 0 var(--voy-gutter);
	margin: 0 auto;
}
/* Salient's page-header script vertically centres the title block by writing an
   inline `top` plus a matching negative translateY (measured here: top 114.078px,
   translateY(-114.086px)). That maths assumes the site header is TRANSPARENT and
   overlays the band. Interior pages use an opaque in-flow header, so the offset
   dragged the block up over it — the post's category badge ended up tucked
   behind the logo. Cancel it and let the band's own padding do the spacing. */
body.voy-interior #page-header-bg .section-title,
body.voy-interior #page-header-bg .row {
	top: 0 !important;
	transform: none !important;
}
body.voy-interior #page-header-bg .row,
body.voy-interior #page-header-bg .col,
body.voy-interior #page-header-bg .inner-wrap {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
	text-align: left;
	float: none;
}
body.voy-interior #page-header-bg h1,
body.voy-interior .voy-page-head__title {
	font-family: var(--voy-font-heading);
	font-weight: 400;
	font-size: clamp(2.25rem, 4.1667vw, 3.75rem);
	line-height: 1.08;
	letter-spacing: -0.01em;
	color: #fff;
	margin: 0;
	text-transform: none;
}
body.voy-interior #page-header-bg h1 span {
	color: var(--voy-accent);
}
body.voy-interior #page-header-bg .result-num,
body.voy-interior .voy-page-head__meta {
	display: block;
	margin-top: 14px;
	font-family: var(--voy-font-body);
	font-size: 15px;
	color: var(--voy-muted-invert);
	opacity: 1;
}
body.voy-interior #page-header-bg .voy-eyebrow,
body.voy-interior .voy-page-head .voy-eyebrow {
	color: #fff;
	margin-bottom: 14px;
}
/* Salient's page-header subheading/breadcrumb row adds a second, competing
   title treatment; app.css already suppresses #breadcrumbs on landing pages. */
body.voy-interior #page-header-bg #breadcrumbs,
body.voy-interior #breadcrumbs {
	display: none;
}

/* --------------------------------------------------------------------------
   Content column
   -------------------------------------------------------------------------- */
body.voy-interior .container-wrap {
	background: var(--voy-cream);
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(3rem, 6vw, 5.5rem);
}
body.voy-interior .container-wrap > .container,
body.voy-interior .container-wrap > .main-content > .container,
body.voy-interior .main-content > .container {
	max-width: var(--voy-content-max);
	padding-left: var(--voy-gutter);
	padding-right: var(--voy-gutter);
}

body.voy-interior h1,
body.voy-interior h2,
body.voy-interior h3,
body.voy-interior h4 {
	font-family: var(--voy-font-heading);
	font-weight: 400;
	color: var(--voy-text);
	letter-spacing: -0.01em;
}
body.voy-interior p,
body.voy-interior li,
body.voy-interior .post-content {
	font-family: var(--voy-font-body);
	color: var(--voy-text);
}

/* --------------------------------------------------------------------------
   Blog + archive listing
   Salient's standard blog markup: .posts-container > article.post, each with
   .post-header, .post-featured-img and .post-content / .excerpt.
   -------------------------------------------------------------------------- */
body.voy-interior .posts-container article.post {
	background: var(--voy-white);
	border: 1px solid var(--voy-border);
	border-radius: var(--voy-radius);
	overflow: hidden;
	margin-bottom: 28px;
	padding: 0;
	box-shadow: none;
}
body.voy-interior .posts-container article.post .post-featured-img,
body.voy-interior .posts-container article.post .post-featured-img-wrap {
	margin: 0;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
}
body.voy-interior .posts-container article.post .post-featured-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s cubic-bezier(.2,.7,.3,1);
}
body.voy-interior .posts-container article.post:hover .post-featured-img img {
	transform: scale(1.03);
}
/* Salient still reserves the image column when a post has no featured image,
   which renders as a grey placeholder block. A post without a picture should
   simply be full width rather than advertising the gap. */
body.voy-interior .posts-container article.post .post-featured-img:not(:has(img)) {
	display: none;
}
body.voy-interior .posts-container article.post.no-post-thumb .post-featured-img,
body.voy-interior .posts-container article.post .post-featured-img:empty {
	display: none;
}
body.voy-interior .posts-container article.post .post-header,
body.voy-interior .posts-container article.post .content-inner,
body.voy-interior .posts-container article.post .post-content {
	padding: 0 clamp(20px, 2.2vw, 32px);
	border: 0;
	margin: 0;
}
body.voy-interior .posts-container article.post .post-header {
	padding-top: clamp(20px, 2.2vw, 30px);
}
body.voy-interior .posts-container article.post .post-content {
	padding-bottom: clamp(20px, 2.2vw, 30px);
}
body.voy-interior .posts-container article.post .post-header h2,
body.voy-interior .posts-container article.post .post-header h3 {
	font-family: var(--voy-font-heading);
	font-size: clamp(1.375rem, 1.9444vw, 1.75rem);
	line-height: 1.2;
	margin: 0 0 10px;
}
body.voy-interior .posts-container article.post .post-header h2 a,
body.voy-interior .posts-container article.post .post-header h3 a,
body.voy-interior .posts-container article.post .post-header a {
	color: var(--voy-text);
	text-decoration: none;
}
body.voy-interior .posts-container article.post .post-header h2 a:hover,
body.voy-interior .posts-container article.post .post-header h3 a:hover {
	color: var(--voy-navy);
	text-decoration: underline;
	text-underline-offset: 4px;
}
/* Salient indents .post-header independently of the meta row above it, so the
   headline sat ~20px right of its own eyebrow. Align every element in the card
   to one left edge. */
body.voy-interior .posts-container article.post .post-header,
body.voy-interior .posts-container article.post .post-header h2,
body.voy-interior .posts-container article.post .post-header h3,
body.voy-interior .posts-container article.post .meta-category,
body.voy-interior .posts-container article.post .excerpt,
body.voy-interior .posts-container article.post .grav-wrap {
	margin-left: 0;
	padding-left: 0;
	text-indent: 0;
}
body.voy-interior .posts-container article.post .post-content-wrap {
	padding: clamp(20px, 2.2vw, 30px) clamp(20px, 2.2vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 10px;
	justify-content: center;
}

/* The byline shows a default Gravatar for an author who has never set one — a
   grey silhouette that reads as a broken image rather than a person. The date is
   the useful half of that row, so keep it and drop the avatar. */
body.voy-interior .grav-wrap img,
body.voy-interior .grav-wrap .avatar,
body.voy-interior .grav-wrap > a {
	display: none;
}
body.voy-interior .grav-wrap {
	margin: 4px 0 0;
	padding: 0;
	min-height: 0;
}
body.voy-interior .grav-wrap .text,
body.voy-interior .grav-wrap .text a {
	margin: 0;
	padding: 0;
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--voy-muted);
}

/* Salient prints the byline/date row as .meta-author / .meta-date / .meta-category */
body.voy-interior .post .meta-author,
body.voy-interior .post .meta-date,
body.voy-interior .post .meta-category,
body.voy-interior .post .meta-comment-count {
	font-family: var(--voy-font-body);
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--voy-muted);
}
body.voy-interior .post .meta-category a {
	color: var(--voy-eyebrow-color);
	font-weight: 600;
}
body.voy-interior .post .excerpt,
body.voy-interior .post .post-content p {
	font-size: 16px;
	line-height: 1.7;
	color: var(--voy-muted);
}

/* Salient's "read more" link */
body.voy-interior .more-link,
body.voy-interior .post .more-link span {
	font-family: var(--voy-font-body);
	font-weight: 500;
	font-size: 15px;
	color: var(--voy-navy);
	border: 0;
}
body.voy-interior .more-link:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Empty state — an archive with nothing in it should look intentional. */
body.voy-interior .voy-empty {
	background: var(--voy-white);
	border: 1px solid var(--voy-border);
	border-radius: var(--voy-radius);
	padding: clamp(2rem, 4vw, 3.5rem);
	text-align: center;
}
body.voy-interior .voy-empty h2 {
	font-size: clamp(1.5rem, 2.4vw, 2rem);
	margin: 0 0 10px;
}
body.voy-interior .voy-empty p {
	color: var(--voy-muted);
	margin: 0 auto 22px;
	max-width: 46ch;
}

/* --------------------------------------------------------------------------
   Single post
   -------------------------------------------------------------------------- */
body.voy-interior.single-post .container-wrap .post .post-content,
body.voy-interior.single-post article.post {
	background: transparent;
	border: 0;
}
body.voy-interior.single-post .post-area,
body.voy-interior.single-post #single-below-header + .row .col.section-title,
body.voy-interior.single-post .content-inner > p,
body.voy-interior.single-post .content-inner > ul,
body.voy-interior.single-post .content-inner > ol,
body.voy-interior.single-post .content-inner > blockquote,
body.voy-interior.single-post .content-inner > h2,
body.voy-interior.single-post .content-inner > h3 {
	max-width: 72ch;
}
body.voy-interior.single-post .content-inner > p {
	font-size: 18px;
	line-height: 1.75;
	margin: 0 0 1.35em;
}
body.voy-interior.single-post .content-inner > h2 {
	font-size: clamp(1.625rem, 2.6vw, 2.25rem);
	margin: 1.8em 0 .5em;
}
body.voy-interior.single-post .content-inner > h3 {
	font-size: clamp(1.25rem, 1.9vw, 1.5rem);
	margin: 1.6em 0 .45em;
}
body.voy-interior.single-post blockquote {
	border-left: 3px solid var(--voy-accent);
	background: var(--voy-white);
	border-radius: 0 var(--voy-radius) var(--voy-radius) 0;
	margin: 2em 0;
	padding: 22px 26px;
	font-family: var(--voy-font-heading);
	font-size: 20px;
	line-height: 1.5;
	color: var(--voy-text);
}
body.voy-interior.single-post .post-featured-img img,
body.voy-interior.single-post .nectar-post-header img {
	border-radius: var(--voy-radius);
}

/* --------------------------------------------------------------------------
   Legal pages (Privacy, Terms)
   Long documents nobody enjoys reading: a narrow measure, generous leading and
   clear section breaks do more for these than any decoration.

   SCOPED TO body.voy-legal > .main-content > .row, which is where the content
   actually lands. Salient emits a plain page's content directly into that row —
   there is no `.content-inner` and no `.post-area` on these templates, so the
   earlier `.content-inner p { max-width: 76ch }` rules never matched anything
   and the prose ran the full 1320px column.
   -------------------------------------------------------------------------- */
body.voy-legal .container.main-content {
	/* Breathing room under the navy page-header band, and before the footer. */
	padding-top: clamp(2.5rem, 5vw, 4.5rem);
	padding-bottom: clamp(2rem, 4vw, 3.5rem);
}
body.voy-legal .container.main-content > .row {
	max-width: 76ch;
}
/* Kept at .row-level specificity so the generic paragraph rule below — which is
   more specific than a bare class selector — cannot flatten the lede back to
   body size. */
body.voy-interior .voy-legal-lede,
body.voy-legal .main-content > .row p.voy-legal-lede {
	font-size: 19px;
	line-height: 1.65;
	color: var(--voy-text);
	margin: 0 0 2em;
	padding-bottom: 1.6em;
	border-bottom: 1px solid var(--voy-border);
}
body.voy-legal .main-content > .row h2,
body.voy-interior .content-inner h2 {
	font-family: var(--voy-font-heading);
	font-weight: 400;
	font-size: clamp(1.375rem, 2.1vw, 1.75rem);
	line-height: 1.25;
	margin: 2.2em 0 .6em;
	color: var(--voy-text);
}
body.voy-legal .main-content > .row h2:first-child,
body.voy-interior .content-inner h2:first-child {
	margin-top: 0;
}
body.voy-legal .main-content > .row p,
body.voy-interior .content-inner p {
	font-size: 17px;
	line-height: 1.75;
	margin: 0 0 1.2em;
}
body.voy-legal .main-content > .row ul {
	margin: 0 0 1.4em;
	padding-left: 1.25em;
	list-style: disc;
}
body.voy-legal .main-content > .row li {
	font-size: 17px;
	line-height: 1.75;
	margin-bottom: .5em;
}
body.voy-legal .main-content > .row strong {
	font-weight: 600;
	color: var(--voy-text);
}
/* Legal documents are exactly where an unmarked link is a problem — the reader
   needs to see that "Privacy Policy" is the other document, not a phrase. */
body.voy-legal .main-content > .row a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(26, 37, 54, .35);
}
body.voy-legal .main-content > .row a:hover {
	text-decoration-color: var(--voy-navy);
}
/* Placeholder paragraphs are visibly unfinished on purpose: these documents
   carry legal weight, so the sections that still need the client's counsel must
   never be mistakable for approved wording. */
body.voy-interior .voy-legal-placeholder {
	background: rgba(232, 249, 136, .28);
	border-left: 3px solid var(--voy-accent);
	border-radius: 0 8px 8px 0;
	padding: 12px 16px;
	margin-bottom: 1.6em;
	color: #4a4a3d;
	font-size: 15px;
	line-height: 1.6;
	font-style: italic;
}

/* --------------------------------------------------------------------------
   Single post — header meta order
   Salient's page-header helper only puts the category in the meta line when the
   header style is NOT `default_minimal`; on this style it emits the category as
   a separate pill ABOVE the title and shows the comment count in the meta line
   instead (nectar/helpers/page-header.php ~line 538). That helper is not a
   template part, so a child-theme override cannot reach it — but the pill and
   the meta bar are siblings inside .inner-wrap, so `order` puts the category
   after the byline without touching any markup.
   -------------------------------------------------------------------------- */
body.voy-interior.single-post #page-header-bg .inner-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
}
body.voy-interior.single-post #page-header-bg .inner-wrap > h1 {
	order: 1;
}
body.voy-interior.single-post #page-header-bg .inner-wrap > #single-below-header {
	order: 2;
}
body.voy-interior.single-post #page-header-bg .inner-wrap > a {
	order: 3;
	margin: 16px 0 0;
	border-radius: var(--voy-radius-pill);
	border-color: rgba(255, 255, 255, .45);
	font-family: var(--voy-font-body);
	font-weight: 500;
	font-size: 13px;
	letter-spacing: .02em;
}
body.voy-interior.single-post #page-header-bg .inner-wrap > a:hover {
	background: var(--voy-accent);
	border-color: var(--voy-accent) !important;
	color: var(--voy-accent-ink);
}
/* The date is wrapped in a link by voy_interior_link_post_date(). */
body.voy-interior #single-below-header .voy-date-link {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, .35);
}
body.voy-interior #single-below-header .voy-date-link:hover {
	color: var(--voy-accent);
	border-bottom-color: var(--voy-accent);
}

/* --------------------------------------------------------------------------
   Single post — bottom of the article
   Salient's single.php emits, inside one .row: next/prev navigation, related
   posts, the author bio, then .comments-section. Next/prev before the comments
   means the reader is offered the exit before the discussion; it belongs at the
   very end.

   Reordered with flexbox rather than by forking single.php — they are already
   siblings, so `order` moves them with no template copy to maintain. The row is
   addressed as the last one in .main-content (the sidebar lives in the row
   above, which must stay untouched).
   -------------------------------------------------------------------------- */
body.voy-interior.single-post .main-content > .row:last-child {
	display: flex;
	flex-direction: column;
}
body.voy-interior.single-post .main-content > .row:last-child .comments-section {
	order: 1;
}
body.voy-interior.single-post .main-content > .row:last-child .blog_next_prev_buttons {
	order: 2;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* Next / previous cards.
   Real markup (checked against the served HTML, not assumed):
     li > div.post-bg-img          the neighbouring post's photograph
        > a[aria-label]            EMPTY overlay link covering the card
        > h3 > span                "Previous Post" / "Next Post"
             > span.text           the post title + an arrow svg
   An earlier pass styled the <a> and hid a `span.background-image` that does
   not exist here — the link is empty, so all that produced was a blank 104px
   box. Keep Salient's photograph and treat the whole li as the card. */
/* Salient ships this block as `full-width-content standard_section` — a
   full-bleed band, but it breaks out of the column with `position:relative;
   left:50%` plus a compensating negative margin, which is measured against
   Salient's OWN container, not this theme's 1380px one. Left alone it landed
   half off-screen; an earlier pass therefore pulled it back into the content
   column entirely. It reads better as the full-width band it was meant to be,
   so re-establish the bleed from this layout's real geometry instead:
   `width:100vw` centred on the parent with `margin-left: calc(50% - 50vw)`,
   which is independent of whatever offsets Salient computed. Both halves of
   Salient's own pattern still have to be zeroed first — leaving `left:50%`
   behind is what shoved it 660px right last time.

   body has overflow-x:hidden (Salient sets it), so 100vw crossing the scrollbar
   cannot introduce a horizontal scroll. */
body.voy-interior .blog_next_prev_buttons {
	background: none !important;
	position: relative;
	left: 0 !important;
	right: auto !important;
	width: 100vw;
	max-width: 100vw;
	margin: 0 0 0 calc(50% - 50vw) !important;
	/* Standard section rhythm underneath, so the band never butts into the
	   footer — same token every other section on the site uses. */
	padding: clamp(2rem, 4vw, 3.25rem) 0 var(--voy-section-y);
	/* No hairline: a 1px rule spanning the full viewport above a full-bleed navy
	   band reads as a stray line. The band's own edge is the separation. */
	border-top: 0;
	box-sizing: border-box;
}
body.voy-interior .blog_next_prev_buttons > .row,
body.voy-interior .blog_next_prev_buttons .container {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0;
}
/* Edge to edge, no gutter between the two tiles — the split down the middle is
   the divider. */
body.voy-interior .blog_next_prev_buttons ul.controls {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.voy-interior .blog_next_prev_buttons ul.controls > li {
	position: relative;
	margin: 0;
	padding: 0;
	list-style: none;
	width: auto;
	float: none;
	min-height: 0;
	height: clamp(220px, 22vw, 300px);
	border-radius: 0;
	overflow: hidden;
	background: var(--voy-navy);
	isolation: isolate;
}
body.voy-interior .blog_next_prev_buttons ul.controls > li.next-post {
	box-shadow: inset 1px 0 0 rgba(255, 255, 255, .14);
}
body.voy-interior .blog_next_prev_buttons ul.controls > li .post-bg-img {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: .45;
	transition: transform .6s cubic-bezier(.2,.7,.3,1), opacity .3s ease;
}
body.voy-interior .blog_next_prev_buttons ul.controls > li:hover .post-bg-img {
	transform: scale(1.04);
	opacity: .6;
}
/* The link is empty and exists only to make the whole card clickable. */
body.voy-interior .blog_next_prev_buttons ul.controls > li > a {
	position: absolute;
	inset: 0;
	z-index: 3;
	background: none !important;
	min-height: 0;
	height: auto;
	padding: 0;
}
body.voy-interior .blog_next_prev_buttons ul.controls > li h3 {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	margin: 0;
	/* 30px side padding = the site's --voy-gutter, so on a full-bleed band the
	   "previous" label still starts on the content column's left edge and the
	   "next" one still ends on its right edge. */
	padding: 28px 30px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	background: linear-gradient(to top, rgba(26,37,54,.92), rgba(26,37,54,0));
}
body.voy-interior .blog_next_prev_buttons ul.controls > li h3 > span:first-child {
	font-family: var(--voy-font-body);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--voy-accent);
}
body.voy-interior .blog_next_prev_buttons ul.controls > li h3 span.text {
	font-family: var(--voy-font-heading);
	font-weight: 400;
	font-size: clamp(1rem, 1.4vw, 1.25rem);
	line-height: 1.3;
	color: #fff;
	display: block;
}
/* Salient hardcodes stroke="#ffffff;" (note the stray semicolon, which makes the
   attribute invalid) on the arrow, so colour it from CSS instead. */
body.voy-interior .blog_next_prev_buttons svg.next-arrow line {
	stroke: var(--voy-accent);
	stroke-width: 1.5;
}
/* Salient right-aligns everything in these cards by default (its own layout puts
   them either side of a centred divider). Align each card to its own outer edge
   instead: previous reads left-to-right, next mirrors it. */
body.voy-interior .blog_next_prev_buttons ul.controls > li.previous-post,
body.voy-interior .blog_next_prev_buttons ul.controls > li.previous-post h3,
body.voy-interior .blog_next_prev_buttons ul.controls > li.previous-post h3 > span {
	text-align: left;
}
body.voy-interior .blog_next_prev_buttons ul.controls > li.previous-post h3 {
	align-items: flex-start;
}
body.voy-interior .blog_next_prev_buttons ul.controls > li.next-post,
body.voy-interior .blog_next_prev_buttons ul.controls > li.next-post h3,
body.voy-interior .blog_next_prev_buttons ul.controls > li.next-post h3 > span {
	text-align: right;
}
body.voy-interior .blog_next_prev_buttons ul.controls > li.next-post h3 {
	align-items: flex-end;
}

@media (max-width: 690px) {
	body.voy-interior .blog_next_prev_buttons ul.controls {
		grid-template-columns: 1fr;
	}
	body.voy-interior .blog_next_prev_buttons ul.controls > li,
	body.voy-interior .blog_next_prev_buttons ul.controls > li.next-post {
		text-align: left;
		height: 170px;
	}
	body.voy-interior .blog_next_prev_buttons ul.controls > li.next-post {
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
	}
	body.voy-interior .blog_next_prev_buttons ul.controls > li.next-post h3 {
		align-items: flex-start;
	}
}

/* --------------------------------------------------------------------------
   Search results
   Salient's default search layout prints each hit as a bordered card with the
   post type beneath the title.
   -------------------------------------------------------------------------- */
/* The card is article.result > .inner-wrap, and Salient borders BOTH — styling
   the outer one as well produced a card inside a card. The inner element is the
   visible card; the outer is just the grid cell. */
body.voy-interior.search .result {
	background: transparent;
	border: 0;
	box-shadow: none;
}
body.voy-interior.search .result .inner-wrap {
	background: var(--voy-white);
	border: 1px solid var(--voy-border);
	border-radius: 10px;
	box-shadow: none;
	height: 100%;
	transition: border-color .2s ease, transform .2s ease;
}
body.voy-interior.search .result:hover .inner-wrap {
	border-color: var(--voy-navy);
	transform: translateY(-2px);
}
body.voy-interior.search .result .title h3,
body.voy-interior.search .result h3 {
	font-family: var(--voy-font-heading);
	font-size: 19px;
	line-height: 1.3;
}
/* Salient paints result links with its accent from generated CSS that outranks
   a plain class here (same cause as the submit buttons above). */
body.voy-interior.search .result .title h3 a,
body.voy-interior.search .result a {
	color: var(--voy-text) !important;
}
body.voy-interior.search .result .title h3 a:hover {
	color: var(--voy-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}
body.voy-interior.search .result .bottom-meta,
body.voy-interior.search .result span.bottom-meta {
	font-family: var(--voy-font-body);
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--voy-muted);
}

/* --------------------------------------------------------------------------
   404
   Markup comes from voy_interior_404_content(); Salient skips its own when the
   nectar_hook_404_content action has a listener.
   -------------------------------------------------------------------------- */
body.voy-interior #error-404,
body.error404 .voy-404 {
	max-width: 720px;
	margin: 0 auto;
	padding: clamp(2rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem);
	text-align: center;
}
body.error404 .voy-404 .voy-eyebrow {
	justify-content: center;
	display: inline-flex;
}
body.error404 .voy-404__title {
	font-family: var(--voy-font-heading);
	font-weight: 400;
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	line-height: 1.06;
	letter-spacing: -0.01em;
	margin: 12px 0 18px;
	color: var(--voy-text);
}
body.error404 .voy-404__body {
	font-size: 17px;
	line-height: 1.7;
	color: var(--voy-muted);
	margin: 0 auto 30px;
	max-width: 52ch;
}
body.error404 .voy-404__actions {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 28px;
}
.voy-btn--ghost {
	background: transparent;
	color: var(--voy-navy);
	border: 1px solid var(--voy-border-rule);
}
.voy-btn--ghost:hover {
	background: var(--voy-white);
	border-color: var(--voy-navy);
}

/* --------------------------------------------------------------------------
   Search form (404 page + widget)
   -------------------------------------------------------------------------- */
.voy-searchform {
	display: flex;
	gap: 8px;
	max-width: 460px;
	margin: 0 auto;
}
.voy-searchform input[type="search"],
body.voy-interior .widget_search input[type="text"],
body.voy-interior .widget_search input[type="search"],
body.voy-interior #searchform input[type="text"] {
	flex: 1 1 auto;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	font-family: var(--voy-font-body);
	font-size: 15px;
	color: var(--voy-text);
	background: var(--voy-white);
	border: 1px solid var(--voy-border-rule);
	border-radius: var(--voy-radius-pill);
	outline: none;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.voy-searchform input[type="search"]:focus,
body.voy-interior .widget_search input[type="text"]:focus,
body.voy-interior #searchform input[type="text"]:focus {
	border-color: var(--voy-navy);
	box-shadow: 0 0 0 3px rgba(26, 37, 54, .12);
}
.voy-searchform button,
body.voy-interior .widget_search input[type="submit"],
body.voy-interior #searchform input[type="submit"],
body.voy-interior #searchform button {
	height: 48px;
	padding: 0 24px;
	font-family: var(--voy-font-body);
	font-weight: 500;
	font-size: 15px;
	color: #fff;
	background: var(--voy-navy);
	border: 0;
	border-radius: var(--voy-radius-pill) !important;
	cursor: pointer;
	transition: background .18s ease;
}
.voy-searchform button:hover,
body.voy-interior .widget_search input[type="submit"]:hover,
body.voy-interior #searchform input[type="submit"]:hover {
	background: #232f45;
}

/* --------------------------------------------------------------------------
   Sidebar widgets
   -------------------------------------------------------------------------- */
body.voy-interior #sidebar .widget,
body.voy-interior div[id*="widget"] .widget {
	background: var(--voy-white);
	border: 1px solid var(--voy-border);
	border-radius: var(--voy-radius);
	padding: 22px 24px;
	margin-bottom: 22px;
}
body.voy-interior #sidebar .widget h4,
body.voy-interior #sidebar .widget .widgettitle,
body.voy-interior #sidebar .widget h2 {
	font-family: var(--voy-font-heading);
	font-weight: 400;
	font-size: 20px;
	line-height: 1.25;
	margin: 0 0 14px;
	padding: 0;
	color: var(--voy-text);
	border: 0;
}
body.voy-interior #sidebar .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}
body.voy-interior #sidebar .widget ul li {
	padding: 9px 0;
	border-bottom: 1px solid var(--voy-border);
	font-size: 15px;
	line-height: 1.5;
}
body.voy-interior #sidebar .widget ul li:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}
body.voy-interior #sidebar .widget a {
	color: var(--voy-text);
	text-decoration: none;
}
body.voy-interior #sidebar .widget a:hover {
	color: var(--voy-navy);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Pagination
   -------------------------------------------------------------------------- */
/* Salient styles pagination through `nav#pagination` — an id, so it outranks any
   class selector here no matter how many are stacked. Everything below goes
   through that id. Note also that `.page-numbers` is on the <ul> as well as on
   each link, so styling the bare class puts a pill border around the whole row. */
body.voy-interior #pagination ul.page-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}
body.voy-interior #pagination ul.page-numbers > li {
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	list-style: none;
}
body.voy-interior #pagination .page-numbers:not(ul),
body.voy-interior .pagination a,
body.voy-interior .pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	margin: 0 4px;
	font-family: var(--voy-font-body);
	font-size: 15px;
	border-radius: var(--voy-radius-pill);
	border: 1px solid var(--voy-border-rule);
	background: var(--voy-white);
	color: var(--voy-text);
	text-decoration: none;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}
body.voy-interior #pagination .page-numbers.current,
body.voy-interior .pagination .current {
	background: var(--voy-navy) !important;
	border-color: var(--voy-navy) !important;
	color: #fff !important;
}
body.voy-interior #pagination a.page-numbers:hover,
body.voy-interior .pagination a:hover {
	border-color: var(--voy-navy);
	background: var(--voy-accent);
	color: var(--voy-accent-ink);
}

/* --------------------------------------------------------------------------
   Comments
   -------------------------------------------------------------------------- */
body.voy-interior #respond input[type="text"],
body.voy-interior #respond input[type="email"],
body.voy-interior #respond textarea {
	background: var(--voy-white);
	border: 1px solid var(--voy-border-rule);
	border-radius: 10px;
	padding: 12px 16px;
	font-family: var(--voy-font-body);
	font-size: 15px;
	color: var(--voy-text);
}
body.voy-interior #respond input:focus,
body.voy-interior #respond textarea:focus {
	border-color: var(--voy-navy);
	outline: none;
	box-shadow: 0 0 0 3px rgba(26, 37, 54, .12);
}
body.voy-interior #respond #submit,
body.voy-interior #respond button[type="submit"] {
	background: var(--voy-navy);
	color: #fff;
	border: 0;
	border-radius: var(--voy-radius-pill) !important;
	padding: 0 28px;
	height: 48px;
	font-family: var(--voy-font-body);
	font-weight: 500;
}
body.voy-interior .comment-wrap,
body.voy-interior ol.commentlist > li {
	background: var(--voy-white);
	border: 1px solid var(--voy-border);
	border-radius: var(--voy-radius);
	padding: 20px 22px;
	margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   SITEWIDE — Salient's stock blue
   These few are intentionally NOT scoped to .voy-interior. Salient paints its
   accent-color onto elements that appear on landing pages too (the search
   overlay, the back-to-top chip), and a blue chip on a cream-and-navy page is
   the single most obvious "this is a theme demo" tell. The Redux accent-color
   option is set to navy as well (interior.php), which covers generated CSS;
   these cover the hardcoded cases.
   -------------------------------------------------------------------------- */
/* Search: the header magnifier and the full-screen overlay it opens. Both ship
   in Salient's own greys/blue and are reachable from every page, landing pages
   included — hence no .voy-interior scope. */
/* THE BACKDROP IS A PSEUDO-ELEMENT, not the div.
   Salient's material skin paints the overlay panel with `#search-outer::before`
   (a white 1440x315 box), and leaves the div itself only as the positioning
   context. Colouring `#search-outer` alone therefore does nothing visible — the
   white ::before sits on top of it. Verified by walking the open overlay's
   pseudo-elements in the live DOM; nothing in the CSS source hints at it. */
#search-outer {
	background: var(--voy-navy) !important;
}
#search-outer::before {
	background: var(--voy-navy) !important;
}
#search-outer #search input[type="text"],
#search-outer input[type="text"] {
	font-family: var(--voy-font-body) !important;
	color: #fff !important;
	background: none !important;
	/* The rule underneath the field is a border on the INPUT, not on the form —
	   an earlier pass set it on the form and left Salient's stock blue 2px line
	   showing right across the overlay. */
	border-bottom: 1px solid rgba(255, 255, 255, .35) !important;
}
#search-outer #search input[type="text"]:focus,
#search-outer input[type="text"]:focus {
	border-bottom-color: var(--voy-accent) !important;
	box-shadow: none !important;
	outline: none !important;
}
#search-outer #search input[type="text"]::placeholder,
#search-outer input[type="text"]::placeholder {
	color: rgba(255, 255, 255, .5) !important;
}
#search-outer #search form,
#search-outer form {
	border-bottom: 0 !important;
}
/* "Hit enter to search or ESC to close" — a bare <span> inside the form.
   It was caught by a blanket `#search .span_12 span { background-color: accent }`
   written for the close icon, which rendered it as a solid lime block with lime
   text inside. Only elements that are meant to BE a shape get a background. */
#search-outer #search .span_12 span,
#search-outer form > span {
	background: none !important;
	color: rgba(255, 255, 255, .5) !important;
	font-family: var(--voy-font-body) !important;
	font-size: 13px !important;
	letter-spacing: .02em;
}
#search-outer .search-icon {
	color: var(--voy-accent) !important;
}
/* Submit control: Salient hides it until the field has focus/content. */
#search-outer .search-box__button {
	background-color: var(--voy-accent) !important;
	color: var(--voy-navy) !important;
	font-family: var(--voy-font-body) !important;
	border: 0 !important;
	border-radius: var(--voy-radius-pill) !important;
	padding: 0 22px !important;
}
/* The magnifier in the header bar. Salient draws it as an icon font glyph, so
   it takes `color`; the lime hover matches the Contact Us control beside it. */
#header-outer #search-btn a,
#header-outer .nectar-header-text-content a,
#header-outer li#search-btn a span,
body.voy-interior #header-outer #search-btn a .icon-salient-search {
	color: #fff !important;
}
#header-outer #search-btn a:hover,
#header-outer #search-btn a:hover span,
#header-outer #search-btn a:focus span {
	color: var(--voy-accent) !important;
}
#to-top,
#to-top:hover {
	background-color: var(--voy-navy) !important;
	border-radius: 999px;
}
/* Salient's floating share widget on single posts (.nectar-social.fixed — a
   50px toggle pinned bottom-right that fans out four network links). Every one
   of the five carries the stock accent blue #3452FF on `color`, which is what
   drives the icon-font glyphs. It floats over the footer, so navy-on-navy is
   not an option: give the chip its own surface. */
.nectar-social.fixed .nectar-social-inner > a,
.nectar-social.fixed .nectar-sharing,
.nectar-social.fixed > a {
	color: #fff !important;
	background-color: var(--voy-navy) !important;
	border-radius: 999px;
	box-shadow: 0 2px 10px rgba(26, 37, 54, .25);
}
.nectar-social.fixed .nectar-social-inner > a:hover,
.nectar-social.fixed .nectar-sharing:hover,
.nectar-social.fixed > a:hover {
	color: var(--voy-accent) !important;
	background-color: #232f45 !important;
}
.nectar-social.fixed i,
.nectar-social.fixed span {
	color: inherit !important;
}
/* Salient's overlay chrome keeps the stock blue. These are invisible in normal
   browsing, which is why they survived every visual pass — but the skip link
   appears the moment someone tabs into the page, and the close control appears
   whenever the search overlay opens. Both are on the approved landing pages too,
   hence no .voy-interior scope. */
.nectar-skip-to-content,
.nectar-skip-to-content:focus {
	color: var(--voy-navy) !important;
	background: var(--voy-accent) !important;
	font-family: var(--voy-font-body);
}
#search-outer .close-wrap a,
#search-outer #close a,
a.slide_out_area_close,
a.mobile-search,
#toggle-nav a,
.slide-out-widget-area-toggle a {
	color: #fff !important;
}
/* The close control is an X drawn from two rotated <span class="close-line">
   bars inside a <span class="close-wrap"> container, with a circular hit-state
   painted by `a::before`. Only the two bars are shapes: giving the wrap (or the
   screen-reader span, which the old `#close a span` selector also matched) a
   background turned the X into a filled lime square sitting in a pale disc. */
#search-outer #close a .close-wrap {
	background: none !important;
	width: 20px !important;
	height: 20px !important;
}
#search-outer #close a .close-line {
	position: absolute;
	top: 9px;
	left: 0;
	width: 20px !important;
	height: 2px !important;
	border-radius: 2px;
	background-color: #fff !important;
}
/* Salient's hit-state disc is rgba(0,0,0,.05) — invisible-to-muddy on navy. */
#search-outer #close a::before {
	background-color: rgba(255, 255, 255, .08) !important;
}
#search-outer #close a:hover::before,
#search-outer #close a:focus::before {
	background-color: rgba(232, 249, 136, .18) !important;
}
#search-outer #close a:hover .close-line {
	background-color: var(--voy-accent) !important;
}
/* Body links.
   SCOPED TO THE CONTENT REGION, deliberately. This started as a blanket
   `body.voy-interior a` with a :not() exclusion list, and that approach failed
   twice: it painted the 404's navy button navy-on-navy (label invisible), and
   then — because the exclusion guessed a class name that does not exist
   (`.voy-footer__link`; the real markup is bare <a> inside `.voy-footer__links`)
   — it did the same to the Privacy and Terms links in the footer, on every
   interior page. Enumerating exceptions to a sitewide element selector is the
   wrong shape: a navy-on-navy component only has to be missed once to disappear.
   Colour the content region instead, and let each component own its own links. */
body.voy-interior .container-wrap a:not(.voy-btn):not(.nectar-button),
body.voy-interior #page-header-bg .container a {
	color: var(--voy-navy);
}
body.voy-interior .container-wrap a:not(.voy-btn):not(.nectar-button):hover {
	color: #232f45;
}
body.voy-interior .voy-btn--dark {
	color: #fff;
}
/* The footer is a navy component and owns its own link colour (app.css:866).
   Re-asserted here so nothing in this file can strand it on its own background. */
/* #858585 rather than the base --voy-muted-invert: that is the value the eight
   standard frames use (app.css's body.voy-contact-std block, verified against
   Figma). Interior pages are not .voy-contact-std, so without this they picked
   up the base token and the footer read a different grey from the homepage. */
body.voy-interior .voy-footer a,
body.voy-interior .voy-footer__links a,
body.voy-interior .voy-footer__copy {
	color: #858585;
}
body.voy-interior .voy-footer a:hover,
body.voy-interior .voy-footer__links a:hover {
	color: var(--voy-text-invert);
}
body.voy-interior .voy-footer__links {
	gap: 20px;
	font-size: 15px;
	line-height: 19.65px;
}
/* Same geometry as the approved frames (app.css's body.voy-contact-std block):
   two equal tracks, no hairline above the legal row, flush to the wordmark.
   Interior pages carry the same [voy_footer] block but not that body class, so
   without this they kept the generic bar's divider and top padding and read as
   a different footer from the homepage's. */
body.voy-interior .voy-footer__bar {
	align-items: start;
	gap: 0;
	padding-top: 0;
	border-top: 0;
}
@media (max-width: 900px) {
	body.voy-interior .voy-footer__bar {
		grid-template-columns: 1fr;
		gap: 1rem;
	}
}

/* Salient paints its accent onto submit buttons and post meta from generated
   CSS (wp-content/uploads/salient/salient-dynamic-styles.css) that does not
   reliably regenerate from a CLI-only option edit, and its rules carry enough
   weight to beat a plain class here. The Redux accent-color IS set to navy for
   anything regenerated later; these keep the blue off the page meanwhile. */
body.voy-interior .widget_search input[type="submit"],
body.voy-interior #searchform input[type="submit"],
body.voy-interior #sidebar .widget input[type="submit"],
body.voy-interior #sidebar .widget button[type="submit"],
.voy-searchform button {
	background-color: var(--voy-navy) !important;
	color: #fff !important;
	border-color: var(--voy-navy) !important;
}
body.voy-interior .widget_search input[type="submit"]:hover,
body.voy-interior #sidebar .widget input[type="submit"]:hover,
.voy-searchform button:hover {
	background-color: #232f45 !important;
}
body.voy-interior .post .meta-category a,
body.voy-interior .meta-category a,
body.voy-interior .posts-container .post .meta-category a {
	color: var(--voy-eyebrow-color) !important;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	body.voy-interior #page-header-bg,
	body.voy-interior .voy-page-head {
		padding: clamp(2.25rem, 8vw, 3.5rem) 0 clamp(1.75rem, 6vw, 2.5rem);
	}
	body.voy-interior #sidebar {
		margin-top: 32px;
	}
}

@media (max-width: 690px) {
	.voy-searchform {
		flex-direction: column;
	}
	.voy-searchform button {
		width: 100%;
	}
	body.error404 .voy-404__actions .voy-btn {
		width: 100%;
		justify-content: center;
	}
	body.voy-interior .pagination a,
	body.voy-interior .page-numbers {
		min-width: 38px;
		height: 38px;
		margin: 0 3px 6px;
	}
}

/* -----------------------------------------------------------------------------
   Builder content on a CONTAINED template  (body.voy-vc-content)
   --------------------------------------------------------------------------
   Salient renders every template except `template-voy-landing.php` inside
   `.container.main-content` — its own 1425/90 grid, the same one the header uses
   and a different one from the 1380/30 column every VOY section is drawn on.
   Four things broke as a result on any page or post the client builds with
   WPBakery outside the landing template:

     - `type="full_width_background"` rows rendered CONTAINED. Salient's
       `.full-width-section` has no width of its own; it relies on nothing
       constraining it, which `.container` does.
     - `.voy-container` on a column double-padded against Salient's container,
       putting section content at x90 instead of x30.
     - the content column sat 30px in from where every landing page draws it, so
       a hand-built page never lined up with a designed one.
     - on a single post the 72ch prose measure applied to builder sections too,
       capping a full page design at ~1000px.

   These rules live HERE rather than in app.css for two reasons: they only apply
   on interior templates (a landing page has no `.container` to fight), and
   interior.css is enqueued with app.css as a dependency, so it is the only one
   of the two that can outrank the prose-measure rules above.

   Scoped to `voy-vc-content`, set in functions.php only when the post content
   really contains `[vc_row`, so the blog, the archives and the legal pages keep
   the reading measure they were designed with.
   -------------------------------------------------------------------------- */
body.voy-vc-content .container-wrap > .container.main-content {
	width: 100%;
	max-width: calc(var(--voy-content-max) + var(--voy-gutter) * 2);
	padding-left: var(--voy-gutter);
	padding-right: var(--voy-gutter);
}

/* The prose measure is right for a written post and wrong for a built one.
   The 1000px cap is SALIENT's, not ours — `single.css` sets it through
   `body[data-ext-responsive="true"].single-post .container-wrap.no-sidebar
   .post-area`, five classes plus an attribute. Our own 72ch rule above never
   won it either. The attribute has to be carried here or the release loses. */
body[data-ext-responsive="true"].single-post.voy-vc-content .container-wrap .post-area,
body.voy-interior.single-post.voy-vc-content .post-area,
body.voy-interior.single-post.voy-vc-content .content-inner,
body.voy-interior.single-post.voy-vc-content article.post {
	max-width: none;
}

/* Break a full-width row back out to the viewport. Salient's own reset uses
   left:50% plus a negative margin; both halves have to be neutralised first or
   the row lands 50vw to the right. Same technique as the next/prev bar above.

   Only in a FULL-WIDTH column, though. On one of Salient's sidebar templates the
   content sits in `.span_9` and a row breaking out to 100vw lands at x-217,
   straight over the sidebar. The two selectors below say "directly in the row"
   (a page) or "inside the full-width column" (a post, whose `.post-area` carries
   `span_12`); with a sidebar the ancestor is `.span_9` and neither matches, so
   the row correctly stays in its column. Position is used rather than `:has()`
   because the failure mode of an unsupported `:has()` here is a broken layout,
   not a cosmetic one. */
body.voy-vc-content .container.main-content > .row > .full-width-section,
body.voy-vc-content .container.main-content > .row > .span_12 .full-width-section,
body.voy-vc-content .container.main-content > .row > .full-width-section[data-vc-full-width],
body.voy-vc-content .container.main-content > .row > .span_12 .vc_row[data-vc-full-width] {
	position: relative;
	left: 0 !important;
	right: auto !important;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: 0 !important;
	box-sizing: border-box;
}

/* Inside a full-width row the VOY column re-establishes the content grid, so it
   keeps its own padding — and needs !important, because Salient's
   `.vc_column_container` padding rules outrank a single class. Inside a
   CONTAINED row the ancestor already supplies the gutter and a second one would
   indent the content twice. */
/* Salient's column wrapper carries a ~14px negative gutter margin on each side.
   Harmless inside its own grid; inside a stretched row it shifts the VOY column
   left by that much, so the content landed at x16 instead of x30. */
body.voy-vc-content .full-width-section > .row_col_wrap_12 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
/* `.voy-container` re-establishes the 1380/30 grid, which is exactly right on a
   landing page where nothing else does it — and one gutter too many here, where
   `.container.main-content` above has already supplied it. So it is neutral by
   default on these templates and only re-applies inside a stretched row, which
   really has escaped the container. Written this way round so it also covers a
   bare `[voy_*]` block dropped straight into the content, not only one inside a
   VC column: both render their own `.voy-container`.

   !important on both — Salient's `.vc_column_container` padding rules outrank a
   single class, the same trap the home-2 build hit.

   The paired selectors are not redundant: app.css restores the gutter through
   `.vc_row > .row_col_wrap_12 > .voy-container` (0,3,0), so taking it back off
   here needs to match or beat that, and putting it back on inside a stretched
   row needs to beat the rule that took it off. */
body.voy-vc-content .vc_row > .row_col_wrap_12 > .voy-container,
body.voy-vc-content .voy-container {
	max-width: none;
	padding-inline: 0 !important;
}
body.voy-vc-content .full-width-section > .row_col_wrap_12 > .voy-container,
body.voy-vc-content .full-width-section .voy-container {
	max-width: calc(var(--voy-content-max) + var(--voy-gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--voy-gutter) !important;
}

/* A built page supplies its own opening section, so Yoast's breadcrumb bar would
   push it down exactly the way it did on the landing pages — the same root cause
   as the transparent-header bug written up in the voy-wp-build skill. */
body.voy-vc-content #breadcrumbs { display: none !important; }