/*
 * Structural styles only.
 *
 * Anything with a colour, font or spacing value waits for phase 2, when
 * tokens.css is generated from Figma. Nothing here hard-codes a brand value.
 */

/*
 * The browser's own rule for the hidden attribute is display: none, but it
 * loses to any author rule that sets display. Several components here set
 * display: flex, so anything marked hidden went on showing: error messages
 * that were meant to be silent, and the apply form to people who were not
 * signed in. Marking it important is the standard fix and is what the spec
 * expects a stylesheet to do.
 */
[hidden] {
	display: none !important;
}

/*
 * Padding counts inside an element's width, not on top of it. Without this a
 * container set to 100% wide with 24px of side padding measures 48px wider
 * than its parent, and every page scrolls sideways by exactly that much.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * The content column is 1280 wide, with the page margins from Figma around it:
 * 80 on a desktop, 32 on a tablet, 16 on a phone.
 *
 * It used to be a 1280 box with 24px of padding inside it, which left every
 * page 1232 wide at desktop and 342 on a phone — 48px and 16px narrower than
 * the design, everywhere, and the reason the home page search box was cutting
 * off its own placeholder.
 *
 * Capping the box at 1280 plus the tablet margin gives all three frames
 * exactly, with no jump in between: at 1440 the column is 1280 and the gap each
 * side works out at 80; at 768 it is 704 with 32; at 390 it is 358 with 16.
 */
.vj-container {
	width: 100%;
	max-width: calc(var(--vj-layout-container) + 2 * var(--vj-layout-page-margin-tablet));
	margin-inline: auto;
	padding-inline: var(--vj-layout-page-margin-tablet);
}

@media (max-width: 767px) {
	.vj-container {
		padding-inline: var(--vj-layout-page-margin-mobile);
	}
}

/* Keyboard users must always be able to jump past the header. */
.vj-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 12px 16px;
}

.vj-skip-link:focus {
	left: 0;
}

/*
 * Focus ring, built on the designed colour: state/focus-ring is brand sky.
 *
 * Sky on its own is too light for the light surfaces this site is built from,
 * measuring 2.5 to 2.9 against card, page, footer and soft blue, where WCAG
 * 1.4.11 asks for 3. So the sky ring carries a navy outer edge. Whichever
 * surface focus lands on, one of the two tones does the work: navy gives 15
 * to 17 on the light surfaces, sky gives 6 on the navy button, and both clear
 * 3 on orange. The two tones sit 6:1 apart, so it still reads as a sky ring.
 */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: none;
	box-shadow:
		0 0 0 2px var(--vj-surface-card),
		0 0 0 4px var(--vj-state-focus-ring),
		0 0 0 6px var(--vj-brand-navy);
}

/* Windows high contrast mode replaces colours with the user's own, where a
   box-shadow is not painted at all. Fall back to a plain thick outline. */
@media (forced-colors: active) {
	:where(a, button, input, select, textarea, [tabindex]):focus-visible {
		outline: 3px solid CanvasText;
		box-shadow: none;
	}
}

/* WCAG 2.2: touch targets of at least 44px. */
.vj-header__nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.vj-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 64px;
}

.vj-header__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.vj-main {
	display: block;
	padding-block: 32px;
}

/* Text that only screen readers should hear, e.g. the label on an icon-only
   button. Matches the WordPress core class name so core markup works too. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}