/**
 * Global base styles for the approved visual system.
 * Component chrome, header, footer, and page templates are later slices.
 */

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

body {
	margin: 0;
	background: var(--pb-white);
	color: var(--pb-navy);
	font-family: var(--font-sans);
	font-size: var(--pb-text-body);
	font-weight: var(--pb-weight-regular);
	line-height: var(--pb-leading-body);
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-display);
	font-weight: var(--pb-weight-medium);
	line-height: var(--pb-leading-display);
}

a {
	color: inherit;
}

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

:focus-visible {
	outline: 2px solid var(--pb-red);
	outline-offset: 3px;
}

.pb-canvas {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--pb-max);
	margin-inline: auto;
	padding-inline: var(--pb-gutter);
}

.pb-display {
	font-family: var(--font-display);
	font-weight: var(--pb-weight-medium);
	letter-spacing: var(--pb-tracking-display);
	line-height: var(--pb-leading-display);
	text-transform: uppercase;
}

.pb-eyebrow {
	font-family: var(--font-sans);
	font-size: var(--pb-text-eyebrow);
	font-weight: var(--pb-weight-semibold);
	letter-spacing: var(--pb-tracking-eyebrow);
	line-height: 1;
	text-transform: uppercase;
}

/*
 * One visible gap between an eyebrow and the heading it introduces.
 * Page styles load later and often zero the eyebrow margin, so this
 * outranks them. Tight display line-heights spill above the line box;
 * the padding puts that spill back inside the heading.
 */
p.pb-eyebrow.pb-eyebrow:has(+ :is(h1, h2, h3).pb-display),
p.pb-home-eyebrow.pb-home-eyebrow:has(+ :is(h1, h2, h3)) {
	margin-bottom: 0;
}

p.pb-eyebrow.pb-eyebrow + :is(h1, h2, h3).pb-display,
p.pb-home-eyebrow.pb-home-eyebrow + :is(h1, h2, h3) {
	margin-top: 16px;
	padding-top: max(0px, calc((1em - 1lh) / 2));
}

.pb-eyebrow-dense {
	font-size: var(--pb-text-eyebrow-dense);
}

.pb-nav-label {
	font-family: var(--font-sans);
	font-size: var(--pb-text-nav);
	font-weight: var(--pb-weight-semibold);
	letter-spacing: var(--pb-tracking-nav);
	line-height: 1;
	text-transform: uppercase;
}

.pb-control-text {
	font-family: var(--font-sans);
	font-size: var(--pb-text-control);
	font-weight: var(--pb-weight-semibold);
	letter-spacing: var(--pb-tracking-control);
	line-height: 1;
	text-transform: uppercase;
}

.pb-price,
.pb-price .amount,
.pb-price .woocommerce-Price-amount {
	font-family: var(--font-sans);
	font-weight: var(--pb-weight-medium);
	letter-spacing: var(--pb-tracking-price);
	line-height: 1;
	text-transform: none;
}

.pb-price {
	font-size: var(--pb-text-price);
}

.pb-price .amount,
.pb-price .woocommerce-Price-amount {
	font-size: inherit;
}

.pb-menu-label {
	font-family: var(--font-display);
	font-size: var(--pb-text-menu);
	font-weight: var(--pb-weight-medium);
	letter-spacing: var(--pb-tracking-menu);
	line-height: 1;
	text-transform: uppercase;
}

.pb-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (min-width: 640px) {
	.pb-price {
		font-size: var(--pb-text-price-sm);
	}

	.pb-menu-label {
		font-size: var(--pb-text-menu-sm);
	}
}

@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;
	}
}