/**
 * Vanshap Capital — site chrome.
 *
 * FRONT END ONLY. Everything here styles furniture that the block editor never
 * renders: the fixed nav, GeneratePress's page containers, and the PHP-rendered
 * footer. It is deliberately kept out of the editor stylesheet because it
 * contains rules — a flex `body` for the sticky footer, container resets keyed
 * to GP's wrappers — that would be rewritten onto the editor canvas and fight
 * it.
 *
 * Block and section styles live in sections.css, which IS loaded in the editor
 * so the design renders there as it does on the page.
 */

/* ════ Navigation ══════════════════════════════════════════════════════ */

.vc-nav {
	position: fixed;
	inset: 0 0 auto;
	z-index: 50;
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background 0.25s ease, border-color 0.25s ease;
}

.vc-nav.is-solid {
	background: var(--ocean);
	border-bottom-color: rgba(255, 255, 255, 0.25);
}

.vc-nav__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-6);
	max-width: var(--wrap-nav);
	height: var(--nav-height);
	margin: 0 auto;
	padding: 0 var(--gutter-page);
}

.vc-nav__logo {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.vc-nav__logo img {
	display: block;
	width: auto;
}

.vc-nav__links {
	display: flex;
	align-items: center;
	gap: 28px;
}

.vc-nav__menu {
	display: flex;
	align-items: center;
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-nav__menu a,
.vc-nav__login {
	font-size: var(--size-nav);
	letter-spacing: var(--track-nav);
	text-transform: uppercase;
	color: var(--paper);
	/* The bar is a fixed 76px. A wrapped link would push it taller and the
	   fixed header would start covering content. */
	white-space: nowrap;
}

.vc-nav__menu a:hover,
.vc-nav__menu a:focus-visible {
	color: var(--sky);
}

.vc-nav__login {
	border: 1px solid rgba(255, 255, 255, 0.7);
	padding: 10px 20px;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vc-nav__login:hover,
.vc-nav__login:focus-visible {
	background: var(--paper);
	color: var(--vanshap-navy);
	border-color: var(--paper);
}

/* Signed in, the same slot holds a link to the portal rather than a way in, so
   it drops the outline and behaves like the rest of the menu.

   Placed AFTER the rules it undoes and not before: .vc-nav__login--plain:hover
   and .vc-nav__login:hover are both one class and one pseudo-class, so they
   carry identical specificity and source order is the only thing separating
   them. Moving this block up would silently restore the white fill on hover. */
.vc-nav__login--plain {
	border: 0;
	padding: 0;
}

.vc-nav__login--plain:hover,
.vc-nav__login--plain:focus-visible {
	background: none;
	border-color: transparent;
	color: var(--sky);
}

/* The toggle is the design's one genuine omission — it has no mobile state.
   Hidden on desktop, where the links sit inline. */
.vc-nav__toggle {
	display: none;
	background: none;
	border: 0;
	padding: var(--space-3);
	margin-right: calc( var(--space-3) * -1 );
	cursor: pointer;
}

.vc-nav__toggle-bars,
.vc-nav__toggle-bars::before,
.vc-nav__toggle-bars::after {
	display: block;
	width: 22px;
	height: 1px;
	background: var(--paper);
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.vc-nav__toggle-bars::before,
.vc-nav__toggle-bars::after {
	content: '';
	position: relative;
}

.vc-nav__toggle-bars::before {
	top: -7px;
}

.vc-nav__toggle-bars::after {
	top: 6px;
}

.vc-nav.is-open .vc-nav__toggle-bars {
	background: transparent;
}

.vc-nav.is-open .vc-nav__toggle-bars::before {
	top: 1px;
	transform: rotate(45deg);
}

.vc-nav.is-open .vc-nav__toggle-bars::after {
	top: 0;
	transform: rotate(-45deg);
}

/* Five uppercase links at 0.18em tracking plus the bordered login button
   need ~1024px before they start crowding the wordmark. */
@media (max-width: 1024px) {
	.vc-nav__toggle {
		display: block;
		order: 3;
	}

	/* Open the panel as a full-width sheet under the bar. It needs its own
	   ground because the bar above it may still be transparent over the hero. */
	.vc-nav__links {
		display: none;
		position: absolute;
		inset: var(--nav-height) 0 auto;
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		background: var(--ocean);
		border-bottom: 1px solid rgba(255, 255, 255, 0.25);
		padding: var(--space-4) var(--gutter-page) var(--space-6);
	}

	.vc-nav.is-open .vc-nav__links {
		display: flex;
	}

	.vc-nav__menu {
		flex-direction: column;
		align-items: flex-start;
		gap: 0;
		width: 100%;
	}

	.vc-nav__menu li {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.18);
	}

	.vc-nav__menu a {
		display: block;
		padding: var(--space-4) 0;
	}

	.vc-nav__login {
		margin-top: var(--space-5);
	}

	/* Stacked, the plain variant is one of the links rather than a button
	   below them, so it takes their spacing and loses the separating margin. */
	.vc-nav__login--plain {
		display: block;
		padding: var(--space-4) 0;
		margin-top: 0;
	}
}


/* ════ GeneratePress container reset ═══════════════════════════════════ */

/* Pages built from Vanshap patterns supply their own measure and padding, so
   GP's content container is flattened rather than fought with negative
   margins — which is what avoids the 100vw-vs-scrollbar overflow bug. */
.vc-full-bleed .site-content,
.vc-full-bleed .content-area,
.vc-full-bleed .site-main,
.vc-full-bleed .inside-article,
.vc-full-bleed .entry-content {
	max-width: none;
	margin: 0;
	padding: 0;
}

.vc-full-bleed .entry-content > * {
	margin-block: 0;
}

/* Only the front page opens with a hero for the nav to sit over. Every other
   view starts with the bar already solid and must clear its 76px. Declared
   after the reset above so it wins the tie on equal specificity. */
.vc-nav-solid .site-content {
	padding-top: var(--nav-height);
}

/* ...unless the view opens with the Ocean header band, which clears the bar
   itself: it pads its own top by the nav height so the Ocean runs unbroken
   behind it and the two read as one field. A page with both offsets is offset
   twice, which is what put 152px of empty blue above the Thoughts eyebrow where
   76px was intended.

   Two selectors because there are two ways to open with the band. .vc-header-band
   is set by sniffing the content, which is every page that carries the band in
   post_content. .vc-portal covers the portal's PHP templates — the portfolio
   grid, a company page — which render the band directly and so have nothing in
   post_content to sniff.

   This lives in chrome.css rather than portal.css, where the portal half of it
   used to live, because it is a statement about the fixed nav and it has to hold
   on pages that never load portal.css.

   ⚠️ It must stay BELOW the rule it undoes. Both are two classes, so specificity
   is identical and source order is the only thing separating them — the move out
   of portal.css is what made that a within-file concern rather than a
   between-file one, and moving this block up would silently restore the double
   offset. */
.vc-header-band .site-content,
.vc-portal .site-content {
	padding-top: 0;
}


/* Short pages — the investor login holding page, a thin legal page — otherwise
   end the footer mid-viewport with a band of white beneath it. GeneratePress
   puts .site-footer directly on <body>, so the footer can be pushed down with
   a body-level flex column. The fixed nav is out of flow and unaffected. */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

/* GP's footer wrapper is kept (it is part of its template chain) but must not
   contribute a ground or spacing of its own. */
.site-footer {
	margin-top: auto;
	background: none;
	padding: 0;
}


/* ════ Footer ══════════════════════════════════════════════════════════ */

.vc-footer {
	padding: var(--space-7) var(--gutter-page) 56px;
	border-top: var(--rule);
	background: var(--surface-page);
}

.vc-footer__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-5);
	flex-wrap: wrap;
}

.vc-footer__logo img {
	display: block;
	width: auto;
}

/* The footnote step, not the eyebrow one, and the same token the policy links
   below read from rather than a second 12px of its own: the notice and the
   links are the two halves of one block at the foot of the page, and sizing
   them apart is what made the notice look like a caption for the wordmark. */
.vc-footer__meta {
	font-weight: var(--weight-regular);
	font-size: var(--size-footnote);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--text-label);
	margin: 0;
}

.vc-footer__links {
	margin: 20px 0 0;
}

.vc-footer__links-list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 var(--space-4);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Tracked caps, at the 0.2em the copyright line beside them uses rather than
   the 0.24em of an eyebrow: these two rows are one register at the foot of the
   page, and a link that set its own tracking would read as a third thing. The
   size stays at the footnote step — caps at 12px against the notice's 10.5px is
   what keeps the links findable rather than filed as more small print. */
.vc-footer__links-item {
	font-size: var(--size-footnote);
	line-height: 1.6;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

/* Separator between links, suppressed on the first item and when the list wraps
   to a new line is not detectable in CSS — the gap alone carries it there. */
.vc-footer__links-item + .vc-footer__links-item {
	position: relative;
	padding-left: var(--space-4);
}

.vc-footer__links-item + .vc-footer__links-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 1px;
	height: 0.9em;
	transform: translateY(-50%);
	background: var(--text-muted);
	opacity: 0.4;
}

/* Graphite, the same as the notice above them: the two rows are one block and
   were reading as two, the links the paler half. --text-label rather than the
   literal token, because this is the tracked-caps label role that alias names
   — and the pairing that role carries, caps in Regular at 8.4:1, is exactly
   what these are now. Hover still darkens to ink, but the underline is what
   actually answers the pointer; the colour step is a second, quieter signal. */
.vc-footer__links-item a {
	font-weight: var(--weight-regular);
	color: var(--text-label);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.vc-footer__links-item a:hover,
.vc-footer__links-item a:focus-visible {
	color: var(--text-body);
	border-bottom-color: currentColor;
}

/* .vc-footer__disclosure and its --todo variant lived here until 21 Sep 2026,
   when the footer disclosure was removed from the site (mu-plugins/vanshap-core/
   disclosures.php says why). Nothing emits either class now.

   The rule they carried is still the right one and is worth keeping written
   down, because it applies to .vc-portfolio-disclaimer today and to any
   disclosure added later: under the Marketing Rule a required statement is the
   one paragraph that must NOT be styled to look like fine print. Small, yes —
   faint, no. portfolio.css sets its disclaimer from the same tokens. */

/* Phone: stack the policy links instead of wrapping them.
   The separator is a ::before on every item but the first, so a wrapped list
   starts its second line with a hanging rule — the flaw the comment above the
   separator already names. It was invisible while the three links fit one line
   at 375px; setting them in caps took that margin away. Stacking removes the
   separator's job rather than trying to detect the wrap, which CSS cannot do.
   Matches the 600px step-down in tokens.css. */
@media (max-width: 600px) {
	.vc-footer__links-list {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-2) 0;
	}

	.vc-footer__links-item + .vc-footer__links-item {
		padding-left: 0;
	}

	.vc-footer__links-item + .vc-footer__links-item::before {
		content: none;
	}
}