@layer base, components, pages, utilities;

@layer base {
	/* Modern reset */
	*,
	*::before,
	*::after {
		box-sizing: border-box;
	}

	* {
		margin: 0;
	}

	[hidden] {
		display: none !important;
	}

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

	body {
		min-height: 100vh;
		line-height: 1.6;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		font-family: var(--wp--preset--font-family--sans);
		font-size: var(--wp--preset--font-size--body);
		color: var(--wp--preset--color--navy);
		background-color: var(--wp--preset--color--ivory);
	}

	img,
	picture,
	video,
	canvas,
	svg {
		display: block;
		max-width: 100%;
	}

	img,
	video {
		height: auto;
	}

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

	p,
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		overflow-wrap: break-word;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--wp--preset--font-family--serif);
		color: var(--wp--preset--color--navy);
		font-weight: 600;
		line-height: 1.25;
	}

	h1 {
		font-size: var(--wp--preset--font-size--heading-1);
	}

	h2 {
		font-size: var(--wp--preset--font-size--heading-2);
	}

	h3 {
		font-size: var(--wp--preset--font-size--heading-3);
	}

	a {
		color: var(--wp--preset--color--navy);
		text-decoration: underline;
	}

	/* Content rhythm */
	.entry-content > * + * {
		margin-block-start: var(--wp--preset--spacing--40);
	}

	.entry-content > * + h2,
	.entry-content > * + h3 {
		margin-block-start: var(--wp--preset--spacing--60);
	}

	/*
	 * Block layout rhythm (R41): theme.json sets blockGap null, so WordPress prints no
	 * unlayered flow margins; these layered defaults replace them and grids can reset them.
	 */
	:where(.is-layout-flow, .is-layout-constrained) > * + * {
		margin-block-start: var(--wp--preset--spacing--40);
	}

	/* Skip link */
	.skip-link {
		position: absolute;
		top: -9999px;
		left: -9999px;
		z-index: 999999;
		padding: 12px 20px;
		background: var(--wp--preset--color--navy);
		color: var(--wp--preset--color--white);
		text-decoration: none;
		font-weight: 600;
		font-size: var(--wp--preset--font-size--body);
	}

	.skip-link:focus,
	.skip-link:focus-visible {
		top: 16px;
		left: 16px;
		outline: 2px solid var(--wp--preset--color--white);
		outline-offset: -3px;
		box-shadow: 0 0 0 2px var(--wp--preset--color--navy);
	}

	/* Screen reader text */
	.screen-reader-text {
		border: 0;
		clip: rect(1px, 1px, 1px, 1px);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		word-wrap: normal !important;
	}

	.screen-reader-text:focus {
		background-color: var(--wp--preset--color--ivory);
		clip: auto !important;
		clip-path: none;
		color: var(--wp--preset--color--navy);
		display: block;
		font-size: var(--wp--preset--font-size--body);
		height: auto;
		left: 5px;
		line-height: normal;
		padding: 15px 23px 14px;
		text-decoration: none;
		top: 5px;
		width: auto;
		z-index: 100000;
	}

	/* Centred container */
	.container {
		max-width: var(--wp--style--global--wide-size);
		margin-inline: auto;
		padding-inline: clamp(20px, 4vw, 40px);
	}

	/* Focus visible */
	:focus-visible {
		outline: 2px solid var(--wp--preset--color--navy);
		outline-offset: 2px;
	}

	.is-style-cng-navy :focus-visible,
	.is-style-cng-navy:focus-visible,
	.cng-on-navy :focus-visible,
	.cng-on-navy:focus-visible {
		outline-color: var(--wp--preset--color--gold);
	}

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