/**
 * Foundation.
 *
 * Values come from theme.json presets. This file does not restate palette hexes.
 */

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

:root {
	--br-motion-duration: 150ms;

	/*
	 * Structural canvas shared by Page 01 and Pages 02–07.
	 * This is not a Figma variable and must not be added to theme.json.
	 * Gutters stay on each section. The container only caps and centers.
	 */
	--br-layout-max: 1280px;
}

.br-layout-container {
	width: 100%;
	max-width: var(--br-layout-max);
	margin-inline: auto;
}

body {
	margin: 0;
	background: var(--wp--preset--color--surface-base);
	color: var(--wp--preset--color--text-primary);
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	font-size: var(--wp--custom--type--body-base--font-size);
	font-weight: var(--wp--custom--type--body-base--font-weight);
	letter-spacing: var(--wp--custom--type--body-base--letter-spacing);
	line-height: var(--wp--custom--type--body-base--line-height);
}

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

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

a {
	color: var(--wp--preset--color--brand-primary);
}

a:hover {
	color: var(--wp--preset--color--brand-accent);
}

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

.br-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.br-type-display,
.br-type-h1,
.br-type-h2,
.br-type-h3,
.br-type-body-large,
.br-type-body-base,
.br-type-body-small,
.br-type-label-large,
.br-type-label-small,
.br-type-label-overline {
	font-family: var(--wp--preset--font-family--plus-jakarta-sans);
	margin: 0;
}

.br-type-display {
	font-size: var(--wp--custom--type--display--font-size);
	font-weight: var(--wp--custom--type--display--font-weight);
	letter-spacing: var(--wp--custom--type--display--letter-spacing);
	line-height: var(--wp--custom--type--display--line-height);
}

.br-type-h1 {
	font-size: var(--wp--custom--type--h-1--font-size);
	font-weight: var(--wp--custom--type--h-1--font-weight);
	letter-spacing: var(--wp--custom--type--h-1--letter-spacing);
	line-height: var(--wp--custom--type--h-1--line-height);
}

.br-type-h2 {
	font-size: var(--wp--custom--type--h-2--font-size);
	font-weight: var(--wp--custom--type--h-2--font-weight);
	letter-spacing: var(--wp--custom--type--h-2--letter-spacing);
	line-height: var(--wp--custom--type--h-2--line-height);
}

.br-type-h3 {
	font-size: var(--wp--custom--type--h-3--font-size);
	font-weight: var(--wp--custom--type--h-3--font-weight);
	letter-spacing: var(--wp--custom--type--h-3--letter-spacing);
	line-height: var(--wp--custom--type--h-3--line-height);
}

.br-type-body-large {
	font-size: var(--wp--custom--type--body-large--font-size);
	font-weight: var(--wp--custom--type--body-large--font-weight);
	letter-spacing: var(--wp--custom--type--body-large--letter-spacing);
	line-height: var(--wp--custom--type--body-large--line-height);
}

.br-type-body-base {
	font-size: var(--wp--custom--type--body-base--font-size);
	font-weight: var(--wp--custom--type--body-base--font-weight);
	letter-spacing: var(--wp--custom--type--body-base--letter-spacing);
	line-height: var(--wp--custom--type--body-base--line-height);
}

.br-type-body-small {
	font-size: var(--wp--custom--type--body-small--font-size);
	font-weight: var(--wp--custom--type--body-small--font-weight);
	letter-spacing: var(--wp--custom--type--body-small--letter-spacing);
	line-height: var(--wp--custom--type--body-small--line-height);
}

.br-type-label-large {
	font-size: var(--wp--custom--type--label-large--font-size);
	font-weight: var(--wp--custom--type--label-large--font-weight);
	letter-spacing: var(--wp--custom--type--label-large--letter-spacing);
	line-height: var(--wp--custom--type--label-large--line-height);
}

.br-type-label-small {
	font-size: var(--wp--custom--type--label-small--font-size);
	font-weight: var(--wp--custom--type--label-small--font-weight);
	letter-spacing: var(--wp--custom--type--label-small--letter-spacing);
	line-height: var(--wp--custom--type--label-small--line-height);
}

.br-type-label-overline {
	font-size: var(--wp--custom--type--label-overline--font-size);
	font-weight: var(--wp--custom--type--label-overline--font-weight);
	letter-spacing: var(--wp--custom--type--label-overline--letter-spacing);
	line-height: var(--wp--custom--type--label-overline--line-height);
}

.br-icon {
	display: inline-block;
	flex: 0 0 auto;
	color: var(--wp--preset--color--icon-default);
	vertical-align: middle;
}

@media (prefers-reduced-motion: reduce) {

	:root {
		--br-motion-duration: 0.01ms;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto;
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
	}
}