/* Shared components: one button system (primary, secondary, dark), one link behaviour. Prefix: xz- */

/* Base typography and links, applied on every page */
.wrapper,
.inner-wrapper,
#main {
	background: var(--color-cream);
}

body {
	background: var(--color-cream);
	color: var(--color-black);
	font-family: var(--font-body);
}

body p {
	font-size: var(--text-base);
	font-weight: var(--font-regular);
	line-height: 1.7;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
	color: var(--color-black);
	font-family: var(--font-display) !important;
}

body h1 {
	font-size: var(--text-h1);
	font-weight: var(--font-bold);
	letter-spacing: -.035em;
	line-height: .98;
}

body h2 {
	font-size: var(--text-h2);
	font-weight: var(--font-bold);
	letter-spacing: -.025em;
	line-height: 1.05;
}

body h3 {
	font-size: var(--text-h3);
	font-weight: var(--font-semibold);
	line-height: 1.15;
}

.dt-sc-dark-bg h1,
.dt-sc-dark-bg h2,
.dt-sc-dark-bg h3,
.dt-sc-dark-bg h4,
.xz-s--dark h1,
.xz-s--dark h2,
.xz-s--dark h3 {
	color: var(--color-white);
}

/* Plain content links. Links with a class (menu, buttons, cards) carry their own colors. */
body a:not([class]) {
	color: var(--color-black);
	transition: color var(--transition-fast);
}

body a:not([class]):hover {
	color: var(--color-orange);
}

.xz-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 24px;
	border: 1px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: var(--font-semibold);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color 250ms ease,
		color 250ms ease,
		transform 250ms ease,
		border-color 250ms ease;
}

.xz-btn:focus-visible {
	outline: 3px solid var(--color-orange);
	outline-offset: 3px;
}

.xz-btn--primary {
	background: var(--color-orange);
	color: var(--color-white);
}

.xz-btn--primary:hover {
	background: var(--color-orange-dark);
	color: var(--color-white);
	transform: translateY(-2px);
}

.xz-btn--secondary {
	border-color: var(--color-black);
	background: transparent;
	color: var(--color-black);
}

.xz-btn--secondary:hover {
	background: var(--color-black);
	color: var(--color-white);
	transform: translateY(-2px);
}

.xz-btn--dark {
	background: var(--color-black);
	color: var(--color-white);
}

.xz-btn--dark:hover {
	background: var(--color-orange);
	color: var(--color-white);
	transform: translateY(-2px);
}

.xz-btn__arrow {
	display: inline-flex;
}

.xz-btn__arrow svg {
	width: 18px;
	height: 18px;
	transition: transform var(--transition-base);
}

.xz-btn:hover .xz-btn__arrow svg {
	transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
	.xz-btn,
	.xz-btn__arrow svg {
		transition: none;
	}

	.xz-btn:hover,
	.xz-btn:hover .xz-btn__arrow svg {
		transform: none;
	}
}

/* Interior pages: headings written in the page builder follow the same system (no inline colors or fonts). */
.wpb-content-wrapper :is(h1, h2, h3, h4):not(.xz-title):not([class*="xz-"]) {
	color: var(--color-black) !important;
	font-family: var(--font-display) !important;
	font-style: normal !important;
	font-weight: var(--font-bold) !important;
	letter-spacing: -.02em;
	line-height: 1.15 !important;
	text-align: left !important;
}

.wpb-content-wrapper h2:not(.xz-title):not([class*="xz-"]) {
	font-size: clamp(30px, 3.4vw, 46px) !important;
}

.wpb-content-wrapper h3:not(.xz-title):not([class*="xz-"]) {
	font-size: var(--text-h3) !important;
	font-weight: var(--font-semibold) !important;
}

.wpb-content-wrapper .dt-sc-dark-bg :is(h1, h2, h3, h4):not(.xz-title):not([class*="xz-"]) {
	color: var(--color-white) !important;
}

.main-title-section h1 {
	font-family: var(--font-display) !important;
	font-weight: var(--font-bold) !important;
	letter-spacing: -.02em;
}

/* Titles the page builder renders with gradient text or oversized drop caps */
.dt-sc-title.with-sub-title h3 {
	background: none !important;
	-webkit-text-fill-color: currentColor !important;
	color: var(--color-black) !important;
	font-family: var(--font-display);
	font-weight: var(--font-bold);
}

.wpb-content-wrapper .dt-sc-dropcap {
	color: var(--color-black) !important;
	font-family: var(--font-display) !important;
	font-weight: var(--font-bold) !important;
	line-height: 1.15 !important;
}

/* The page banner keeps its own spacing: sections below bring their own padding */
.main-title-section-wrapper {
	margin-bottom: 0 !important;
}

/* Page banner title: deep orange on the light orange pattern */
.main-title-section h1,
.main-title-section-wrapper h1 {
	color: var(--color-orange-dark) !important;
	-webkit-text-fill-color: var(--color-orange-dark) !important;
	background: none !important;
}

@media (max-width: 767px) {
	.main-title-section h1 {
		font-size: clamp(28px, 8.4vw, 40px) !important;
		line-height: 1.1 !important;
	}
}