/*
 * Reset + base typography (matches the Bricks/ACSS computed values).
 * Element rules are wrapped in :where() (zero specificity) so any class selector
 * in a block/component wins without fighting the reset.
 */
*,
*::before,
*::after { box-sizing: border-box; }

html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	font-family: var(--font-sans);
	font-size: var(--text-m);
	font-weight: 400;
	line-height: var(--body-line-height);
	color: var(--base-ultra-dark);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty; /* ACSS default */
	overflow-wrap: break-word; /* Bricks/ACSS default */
}

:where(button, input, select, textarea) { font: inherit; }

::selection { background-color: #b5d7fe; color: #000; }

:where(img, svg, video) { max-width: 100%; height: auto; display: block; }

/* Bricks site: links keep their colour on hover unless a component says otherwise. */
:where(a) { color: inherit; text-decoration: none; }

:where(button) { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:where(h1, h2, h3, h4, h5, h6) {
	margin: 0;
	font-family: var(--font-sans); /* ACSS heading font; headings never inherit e.g. the blockquote serif */
	font-weight: 700;
	line-height: var(--heading-line-height);
	color: var(--secondary);
	text-wrap: pretty;
}
:where(h1) { font-size: var(--h1); }
:where(h2) { font-size: var(--h2); }
:where(h3) { font-size: var(--h3); }
:where(h4) { font-size: var(--h4); }

:where(p) { margin: 0; }
:where(ul, ol) { margin: 0; padding: 0; }

:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

.skip-link {
	position: absolute;
	left: -9999px;
	top: 1rem;
	z-index: 3000;
	padding: 1rem 2rem;
	background: var(--white);
	border-radius: var(--radius-s);
}
.skip-link:focus { left: 1rem; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}