/**
 * Vanshap Capital — global element defaults.
 *
 * Only element-level resets and defaults belong here. Section and component
 * styles live in sections.css. Every value comes from tokens.css — if you find
 * yourself typing a hex code or a px size in this file, add a token instead.
 */

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

body {
	background: var(--surface-page);
	color: var(--text-body);
	font-family: var(--font-text);
	font-weight: var(--weight-light);
	font-size: var(--size-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* The display serif is used at regular and italic only — never bold.
   GeneratePress sets its own heading weights; these override them. */
h1, h2, h3,
.vc-display {
	font-family: var(--font-display);
	font-weight: var(--weight-regular);
	color: var(--text-display);
	line-height: var(--lh-display);
	text-wrap: pretty;
}

h4, h5, h6 {
	font-family: var(--font-text);
	font-weight: var(--weight-semibold);
	color: var(--text-display);
}

p {
	text-wrap: pretty;
}

a {
	color: var(--ocean);
	text-decoration: none;
}

a:hover,
a:focus-visible {
	color: var(--vanshap-navy);
}

/* Visible focus is a WCAG 2.2 AA requirement (2.4.11 Focus Not Obscured,
   2.4.13 Focus Appearance). Never remove this. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	/* ⚠️ --ocean, not --signal-blue. WCAG 2.2 SC 1.4.11 wants 3:1 for a focus
	   indicator against what is adjacent to it, and --signal-blue #5297F2 on the
	   white ground is 2.97:1 — under the bar by a hair, and computed rather than
	   eyeballed, which is why it survived a visual review. --ocean is 6.74:1 on
	   white, is already the link colour, and needs no new value in the palette.
	   The Ocean-ground override below is unchanged and already passes. */
	outline: 2px solid var(--ocean);
	outline-offset: 3px;
}

/* On Ocean grounds the accent has too little contrast against the field;
   switch to white. */
.vc-on-ocean a:focus-visible,
.vc-on-ocean button:focus-visible {
	outline-color: var(--paper);
}

img {
	max-width: 100%;
	height: auto;
}

::selection {
	background: var(--sky);
	color: var(--vanshap-navy);
}

/* Square corners are a brand rule. Applied to the elements that actually ship
   with a radius by default rather than with a universal selector, which would
   fight any component that legitimately needs one. */
input,
textarea,
select,
button,
.wp-block-button__link,
.gb-button {
	border-radius: var(--radius);
	box-shadow: var(--shadow);
}

/* Screen-reader-only utility, used for section labels the design shows
   visually through typography alone. */
.vc-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}