/* ==========================================================================
   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;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}
body.voy-interior #header-space {
	/* display: none; -- removed: fixed header needs spacer */
}
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;
}
/* voy-round9-2026-08-14 -- `background` and `color` are !important here now.
   Salient's accent-colour block ships `background-color: #1A2536 !important` on
   a long selector list that catches this pill, so the un-flagged fill above
   lost while the navy ink applied: navy-on-navy, luminance delta 0.000, and the
   label vanished. Only `border-color` survived, because it was already flagged
   -- which is why the artefact was a lime outline around an empty navy box
   rather than nothing at all. Values unchanged; this is the lime-pill /
   navy-ink inversion that was always intended. Keep the two flagged together:
   flagging the fill alone would be enough today, but the pair coming apart is
   what produced an invisible control in the first place. */
body.voy-interior.single-post #page-header-bg .inner-wrap > a:hover,
body.voy-interior.single-post #page-header-bg .inner-wrap > a:focus-visible {
	background: var(--voy-accent) !important;
	background-color: var(--voy-accent) !important;
	border-color: var(--voy-accent) !important;
	color: var(--voy-accent-ink) !important;
}
/* 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;
}
/* voy_blog_nav_fix_2026_08_17 — custom post-nav removed; using Salient's native fullwidth_next_prev
   style (matches allround-edu.com pattern). Only keeping edge-case rules. */

/* Salient's native post nav needs no custom layout from us. Just ensure:
   - It appears below the author bio (order)
   - The .only case spans full width
   - The .hidden case is hidden */
body.voy-interior.single-post .main-content > .row:last-child .blog_next_prev_buttons {
	order: 2;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

/* --------------------------------------------------------------------------
   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
   -------------------------------------------------------------------------- */
/* voy-offcanvas-widget-2026-08-14 -- `div[id*="widget"]` also matched
   #slide-out-widget-area (the off-canvas menu's own id contains "widget"), so
   this white card was painted onto an empty widget wrapper inside the navy
   mobile menu. Name the sidebar containers instead of pattern-matching the id. */
body.voy-interior #sidebar .widget,
body.voy-interior #page-sidebar .widget,
body.voy-interior #nectar-extra-sidebar .widget,
body.voy-interior .blog-sidebar .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: var(--voy-text-invert) !important;
}
/* voy-round11-2026-08-17 -- the burger's three bars are `background-color` on
   pseudo-elements, so the `color` rule above never reached them and they kept
   Salient's default #999: a grey burger next to a white search glyph on the navy
   header. Both are now the palette's on-navy off-white (#F4F2ED), per the
   client's 2026-08-17 note. `.lines` itself is transparent in Salient's `x2`
   style -- the visible bars are `.lines::before`, `.lines::after` and
   `.lines-button::after`, so all three have to be named. */
#header-outer .lines-button .lines,
#header-outer .lines-button .lines::before,
#header-outer .lines-button .lines::after,
#header-outer .lines-button::after,
#header-outer .slide-out-widget-area-toggle .lines,
#header-outer .slide-out-widget-area-toggle .lines::before,
#header-outer .slide-out-widget-area-toggle .lines::after {
	background-color: var(--voy-text-invert) !important;
}

/* voy-round13-2026-08-17 -- the magnifier is a CHILD span with its own colour
   (`.mobile-search .icon-salient-search { color: rgb(169,169,169) }` in
   Salient's style.css), so recolouring the anchor in round 11 left the glyph
   grey next to an off-white burger -- 169,169,169 against 244,242,237, measured
   off the rendered pixels, not from getComputedStyle on the anchor (which read
   correct and hid the bug). Name the glyph itself. */
#header-outer a.mobile-search .nectar-icon,
#header-outer a.mobile-search i,
#header-outer a.mobile-search [class*="icon-salient"],
#header-outer .mobile-user-account [class*="icon-salient"],
#header-outer #mobile-cart-link i {
	color: var(--voy-text-invert) !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) {
	/* voy-round4-2026-08-14 -- the floor here used to be ~36px while the fixed
	   header is a CONSTANT 48px, so below ~480px the title slid under the
	   header (measured: header bottom 48, h1 top 38 at 390px). 88px = the
	   48px header plus 40px of breathing room, so clearance stays positive at
	   any width. */
	/* voy-round4b-2026-08-14 -- !important is load-bearing. Salient's
	   `body:not(.single-post) #page-header-bg:not(.fullscreen-header)` is
	   (1,2,2) against this rule's (1,2,0) and sets `padding-top: 10%`, which on
	   a 390px viewport is 39px -- under the 48px fixed header, so the title was
	   clipped by it. 88px = header + 40px breathing room. */
	body.voy-interior #page-header-bg,
	body.voy-interior .voy-page-head {
		padding: max(88px, 8vw) 0 clamp(1.75rem, 6vw, 2.5rem) !important;
	}
	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; }


/* voy-offcanvas-widget-2026-08-14
   No widgets are assigned to any sidebar (verified with `wp widget list`), but
   Salient renders the wrapper anyway. An empty widget must not draw a box. */
.widget:empty { display: none !important; }
#slide-out-widget-area .widget:empty,
#slide-out-widget-area .widget:not(:has(*)):not(:has(:not(:empty))) { display: none !important; }


/* =============================================================================
   voy-round4-2026-08-14
   ============================================================================= */

/* (2) The page-header subheader rendered 28px against a 36px h1 and wrapped to
   three lines at 390 — it read as a second title. The archive templates use
   20px for the same element; match them on small screens. */
@media (max-width: 1000px) {
	body.voy-interior #page-header-bg .subheader,
	body.voy-interior .voy-page-head .subheader {
		font-size: 18px !important;
		line-height: 26px !important;
		margin-top: 10px;
		display: block;
	}
}

/* (4) First and last post: Salient marks the absent side `.hidden` and the
   surviving one `.only`. In a 1fr 1fr grid that left a blank half — let the
   single card span the full width instead. Uses Salient's own class rather
   than :has(), so it does not depend on selector support. */
body.voy-interior .blog_next_prev_buttons ul.controls > li.only {
	grid-column: 1 / -1;
}
body.voy-interior .blog_next_prev_buttons ul.controls > li.hidden {
	display: none !important;
}
/* The band supplies its own bottom rhythm, so the container must not add a
   second helping underneath it. */
body.single-post .container-wrap,
body.single .container-wrap {
	padding-bottom: 0 !important;
}

/* (5) The listing date is now a link to its day archive (child override of
   post-bottom-meta.php). Two things are needed for it to work as one:
   Salient's `.entire-meta-link` is an absolutely positioned overlay covering
   the whole card, so the date has to sit above it to be clickable at all; and
   it needs an affordance, or it looks exactly like the plain text it replaced. */
body.voy-interior .grav-wrap .text .voy-card-date-link {
	position: relative;
	z-index: 5;
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid rgba(26, 37, 54, .25);
	transition: color .2s ease, border-color .2s ease;
}
body.voy-interior .grav-wrap .text .voy-card-date-link:hover,
body.voy-interior .grav-wrap .text .voy-card-date-link:focus-visible {
	color: var(--voy-navy);
	border-bottom-color: var(--voy-navy);
}


/* =============================================================================
   voy-archive-header-2026-08-14
   Archive (category / tag / date / author) page header.
   Salient uses `.section-title` here instead of the `#page-header-bg` block the
   page, blog and search templates use, so none of the page-header styling
   reached it: light background, 84.96px near-black title against the site's
   navy / 60px / white. Bring it into line.
   ============================================================================= */

body.voy-interior .container > .col.span_12.section-title {
	position: relative;
	background: var(--voy-navy);
	/* Bleed the BACKGROUND to the viewport edges without moving the text: the
	   element already sits on the content column inside Salient's .container.
	   clip-path trims the spread vertically so it stays inside this band. */
	box-shadow: 0 0 0 100vmax var(--voy-navy);
	clip-path: inset(0 -100vmax);
	padding: 86.4px 0 64px;
	margin: 0;
	box-sizing: border-box;
}
body.voy-interior .container > .col.span_12.section-title .subheader {
	display: block;
	font-family: var(--voy-font-body);
	font-size: 28px;
	font-weight: 300;
	line-height: 36.4px;
	color: #fff;
	margin: 0 0 15px;
	text-transform: none;
	letter-spacing: normal;
	opacity: 1;
}
body.voy-interior .container > .col.span_12.section-title h1 {
	font-family: var(--voy-font-heading);
	font-size: 60px;
	font-weight: 400;
	line-height: 64.8px;
	letter-spacing: -0.6px;
	color: #fff;
	margin: 0;
}

@media (max-width: 1000px) {
	/* Same 88px floor as #page-header-bg: the header is a constant 48px and does
	   not scale, so a viewport-relative padding alone lets the title slide under
	   it on a phone. */
	body.voy-interior .container > .col.span_12.section-title {
		padding: max(88px, 8vw) 0 clamp(1.75rem, 6vw, 2.5rem);
	}
	body.voy-interior .container > .col.span_12.section-title .subheader {
		font-size: 18px;
		line-height: 26px;
		margin-bottom: 10px;
	}
	body.voy-interior .container > .col.span_12.section-title h1 {
		font-size: clamp(2rem, 7vw, 3rem);
		line-height: 1.12;
	}
}


/* =============================================================================
   voy-round5-2026-08-14
   Search overlay: the close control was anchored to the wrong edge.

   Salient's markup is `#search > .container > #close > a`, where `#close` is a
   0x0 anchor pinned `right: -5px` -- five pixels OUTSIDE the container -- and
   the `a` hangs off it at `right: 8px`. Settled measurements of the painted
   disc, per viewport width:

       390    361.0 .. 389.0     1.0px from the screen edge, +29px past the field
       768    739.0 .. 767.0     1.0px from the screen edge, +29px past the field
      1024    889.0 .. 931.0      93px clear,                -63px short of it
      1440   1297.5 ..1339.5     100.5px clear,              -63px short of it
      1920   1537.5 ..1579.5     340.5px clear,              -63px short of it

   So on phone and tablet it renders sliced against the right edge (the
   client's screenshot), and on desktop it floats 63px inboard of the content
   column. Vertically it sat 3-3.5px above the field's centre at every width.

   Re-anchor it to the field's own column. `.container` here IS the field row --
   its height equals the input's height at both breakpoints (41px / 76px) -- so
   `top: 50%` centres on the field with no media query, and the field's gutter
   is 30px inside that container at all five widths above, so `right: 30px`
   lands the control on the field's right edge everywhere.
   ============================================================================= */

#search-outer #search #close {
	position: absolute !important;
	top: 50% !important;
	right: 30px !important;
	left: auto !important;
	bottom: auto !important;
	width: 0 !important;
	height: 0 !important;
	/* Salient adds `margin: -28px 0 0` to this anchor above 1000px only. Without
	   resetting it, `top: 50%` still lands 28px high on desktop while being
	   exact on mobile -- precisely the kind of half-fixed result that passes a
	   phone check and fails on a laptop. */
	margin: 0 !important;
}
/* 24x17 -> 44x44. Salient centres both the `::before` disc and the `.close-wrap`
   X with top/left:50%, so a square box makes all three concentric -- and 44px
   is a real tap target where 17px tall was not. The negative top margin hangs
   the box symmetrically off the anchor point. */
#search-outer #search #close a {
	position: absolute !important;
	top: 0 !important;
	right: 0 !important;
	left: auto !important;
	width: 44px !important;
	height: 44px !important;
	margin: -22px 0 0 !important;
	padding: 0 !important;
	transform: none !important;
}

/* The mobile field was 16px against the desktop's 48px -- the same component,
   reading as a stray unstyled input inside a 200px navy panel. 28px stays
   clear of the 16px iOS zoom threshold and matches the interior mobile
   heading scale. Height/line-height have to come with it: Salient fixes the
   input at 41px, which would clip a 28px glyph. */
@media (max-width: 1000px) {
	#search-outer #search input[type="text"],
	#search-outer input[type="text"] {
		font-size: 28px !important;
		line-height: 1.35 !important;
		height: auto !important;
		padding: 0 56px 8px 0 !important;
	}
}

/* voy-round5c-2026-08-14
   The X glyph is a `.close-wrap` span that Salient pins with a LITERAL offset
   (`top: 6px` mobile / `8.5px` desktop, `right: -8px`) rather than centring it
   -- numbers tuned to the original 24x17 anchor. Growing the anchor to 44x44
   for the tap target therefore left the X floating ~20px above its own disc
   (measured: disc centre y99, glyph centre y79 at 390). Centre it properly so
   the two stay concentric whatever the box size. */
#search-outer #search #close a .close-wrap {
	top: 50% !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	margin: 0 !important;
	transform: translate(-50%, -50%) !important;
}