/*
 * Base: reset, elements, typography utilities.
 * Tokens come from theme.json (--wp--preset--* / --wp--custom--*).
 */

*,
*::before,
*::after {
	box-sizing: border-box;
}

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

body {
	margin: 0;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
ul,
ol,
dl,
dd {
	margin: 0;
}

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

a {
	color: inherit;
	text-decoration: none;
}

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

:focus-visible {
	outline: 2px solid var(--wp--preset--color--black);
	outline-offset: 3px;
}

/* Typography utilities, mirroring the Figma text styles. */

.u-heading-xl,
.u-heading-l,
.u-heading-m,
.u-heading-s {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--heading);
}

.u-heading-xl { font-size: var(--wp--preset--font-size--heading-xl); }
.u-heading-l  { font-size: var(--wp--preset--font-size--heading-l); }
.u-heading-m  { font-size: var(--wp--preset--font-size--heading-m); }
.u-heading-s  { font-size: var(--wp--preset--font-size--heading-s); }

/* CTA title: Firs Regular 32 / 1.5, no tracking. */
.u-cta-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--heading-m);
	font-weight: 400;
	line-height: var(--wp--custom--line-height--body);
}

/* Project intro: Firs Light 26 / 1.26. */
.u-intro {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--intro);
	font-weight: 300;
	line-height: var(--wp--custom--line-height--intro);
}

.u-lead {
	font-size: var(--wp--preset--font-size--lead);
}

/* Uppercase labels: Eudoxus 10–13px, 6% tracking. */
.u-label {
	font-family: var(--wp--preset--font-family--text);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--heading);
	letter-spacing: var(--wp--custom--letter-spacing--label);
	text-transform: uppercase;
}

/* Underlined text link (Bellen / Mailen / Alle projecten). */
.u-link {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	line-height: var(--wp--custom--line-height--heading);
	padding-bottom: 8px;
	border-bottom: 1px solid currentColor;
}

.screen-reader-text,
.skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 8px 16px;
	background: var(--wp--preset--color--white);
}