/* Career Voyage — base resets. Ported from the design system's tokens/base.css. */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--surface-page);
	color: var(--text-on-paper);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	line-height: var(--lh-heading);
	color: var(--text-heading);
	margin: 0;
}

p { margin: 0; }

a {
	color: var(--link-on-paper);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
a:hover { color: var(--teal-deep-hover); }

button, input, select, textarea { font: inherit; }

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

/* Focus: a visible 3px turquoise ring, always, never colour alone. */
:focus-visible {
	outline: none;
	box-shadow: var(--ring-focus-light);
}
.cv-on-navy :focus-visible,
.cv-navy :focus-visible {
	box-shadow: var(--ring-focus);
}

::selection { background: rgba(0, 108, 132, .22); }

/* Skip link. */
.cv-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 999;
	background: var(--teal-deep);
	color: var(--paper);
	padding: 12px 18px;
	border-radius: var(--radius-sm);
	font-family: var(--font-heading);
	font-weight: var(--weight-semibold);
	text-decoration: none;
}
.cv-skip:focus { left: var(--space-4); top: var(--space-4); }

.wp-site-blocks > main,
main#main { display: block; }

/*
 * Every section is its own full-bleed block with its own background and vertical
 * padding, so they should butt up against each other with no visible seam. Override
 * core's global styles blockGap margin (applied to every top-level .wp-site-blocks
 * child, and to every child of #main's flow layout) which otherwise leaves the page's
 * paper background showing as a thin band between adjacent sections/header/footer.
 */
.wp-site-blocks > *,
#main > * { margin-block-start: 0; }

/*
 * The same blockGap margin applies again one level in, to the children of each
 * section. That one is worse than a stray gap: the hero's scrims are positioned
 * inset:0 over the photo, so a 24px top margin slides them down and leaves an
 * unshaded strip of bare photo under the header. Every component here sets its own
 * spacing in CSS, so clear it inside our own wrappers. Doubled-up class selectors
 * keep this above core's `:root :where(.is-layout-flow) > *`, which has the same
 * specificity as a single class and would otherwise win on source order alone.
 */
.wp-block-group.cv-site-header > *,
.wp-block-group.cv-site-footer > *,
.wp-block-group.cv-hero > *,
.wp-block-group.cv-section > *,
.wp-block-group.cv-cta-band > *,
.wp-block-group.cv-credibility-strip > * { margin-block-start: 0; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Editor parity: the block editor canvas doesn't load body's own styles by default,
   so give the same base to the canvas when this file is enqueued there too. */
.editor-styles-wrapper {
	background: var(--surface-page);
	color: var(--text-on-paper);
	font-family: var(--font-body);
	font-size: var(--text-body);
	line-height: var(--lh-body);
}