/**
 * The restriction notice.
 *
 * Shown in place of a page or a section that the visitor may not see. It is
 * rendered by mu-plugins/vanshap-access — logic there, presentation here, the
 * same division as the portal blocks.
 *
 * Deliberately quiet. This is not an error and not a sales prompt: it is a
 * statement that something exists and is not for this reader. The firm's own
 * panel treatment, an eyebrow, and a rule — no lock icons, no warning colours,
 * nothing that reads as a paywall.
 *
 * Loaded on every front-end view rather than conditionally, because a notice can
 * appear inside any page the moment a section is restricted, and a stylesheet
 * that arrives one render behind that decision would ship an unstyled block of
 * text to an investor.
 */

.vc-access-notice {
	background: var(--surface-panel);
	border-left: var(--rule-accent-h) solid var(--rule-accent);
	padding: var(--space-5) var(--space-6);
	margin-block: var(--space-5);
}

.vc-access-notice__eyebrow {
	font-family: var(--font-text);
	font-size: var(--size-eyebrow);
	font-weight: var(--weight-regular);
	letter-spacing: var(--track-eyebrow);
	text-transform: uppercase;
	color: var(--text-label);
	margin: 0 0 var(--space-3);
}

.vc-access-notice__body {
	font-family: var(--font-text);
	font-size: var(--size-body-lg);
	font-weight: var(--weight-light);
	line-height: var(--lh-body-lg);
	color: var(--text-body);
}

.vc-access-notice__body > p {
	margin: 0;
}

.vc-access-notice__body > p + p {
	margin-top: var(--space-4);
}

.vc-access-notice__action {
	margin: var(--space-5) 0 0;
}

.vc-access-notice__link {
	font-family: var(--font-text);
	font-size: var(--size-nav);
	font-weight: var(--weight-semibold);
	letter-spacing: var(--track-nav);
	text-transform: uppercase;
	color: var(--text-display);
	text-decoration: none;
	border-bottom: 1px solid var(--rule-accent);
	padding-bottom: 2px;
}

.vc-access-notice__link:hover,
.vc-access-notice__link:focus-visible {
	color: var(--ocean);
}

/* A page restricted whole gets the notice as its entire body, so it needs the
   section rhythm around it that a page's own sections would have provided. */
.vc-access-notice--page {
	max-width: var(--wrap);
	margin-inline: auto;
	margin-block: var(--section-y-sm);
}

/* On an Ocean ground the panel fill and the ink both invert. Scoped to the
   utility class the section patterns already carry, so a notice inside a dark
   band is legible without the pattern having to know it is there. */
.vc-on-ocean .vc-access-notice {
	background: var(--ocean-panel);
	border-left-color: var(--sky);
}

.vc-on-ocean .vc-access-notice__eyebrow {
	color: var(--text-label-on-ocean);
}

.vc-on-ocean .vc-access-notice__body,
.vc-on-ocean .vc-access-notice__link {
	color: var(--text-on-ocean);
}

.vc-on-ocean .vc-access-notice__link {
	border-bottom-color: var(--sky);
}

@media (max-width: 600px) {
	.vc-access-notice {
		padding: var(--space-4) var(--space-5);
	}
}