/* WP Agent Theme base: gutter token, reset and content flow. Components are
 * styled by the WP Agent Builder blocks; colours and fonts come from
 * theme.json / Global Styles. Breakpoints: md 768px, lg 1025px. */
:root {
	--wpab-gutter: var(--wp--custom--gutter--base, 16px);
}
@media (min-width: 768px) {
	:root {
		--wpab-gutter: var(--wp--custom--gutter--md, 24px);
	}
}
@media (min-width: 1025px) {
	:root {
		--wpab-gutter: var(--wp--custom--gutter--lg, 24px);
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	/* A sticky header publishes its height here (wpagent/header). */
	scroll-padding-top: var(--wpab-header-offset, 0px);
}
body {
	margin: 0;
	/* Browser default like the designs; a design that antialiases opts in with
	 * Global Styles settings.custom.fontSmoothing = "antialiased". */
	-webkit-font-smoothing: var(--wp--custom--font-smoothing, auto);
	text-rendering: optimizeLegibility;
}
img,
video {
	max-width: 100%;
	height: auto;
}

/* Header, main and footer touch: sections own their spacing. */
.wp-site-blocks > * {
	margin-block: 0;
}

/* The footer part paints above page content: fixed floats placed in it
 * (call / Zalo / Messenger buttons) sit inside section inners, which are
 * stacking contexts at z-index 1, so without this a later page band or
 * section edge (z-index 2) painted over them. Below the header (100). */
.wp-site-blocks > footer.wp-block-template-part {
	position: relative;
	z-index: 50;
}

/* Post content: wpagent/* sections are full width and contain themselves;
 * anything else (core paragraphs, images…) is held to the content width. */
.wpab-content > :not(.wpab):not(.alignfull):not(.alignwide) {
	max-width: min(var(--wp--style--global--content-size, 1152px), 100% - 2 * var(--wpab-gutter));
	margin-inline: auto;
}
.wpab-content > .alignwide {
	max-width: min(var(--wp--style--global--wide-size, 1392px), 100% - 2 * var(--wpab-gutter));
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* Template groups with constrained content (titles, archives, 404) keep the
 * gutter on the sides; theme.json has no root padding so wpagent sections
 * stay full width. */
.wpab-gutter {
	padding-inline: var(--wpab-gutter);
}

/* Type tokens (theme.json settings.custom.type.<preset>, read by the
 * heading, text and button blocks as --wp--custom--type--<preset>--*).
 * :root:root outranks the global-styles :root rule whatever the stylesheet
 * order. WordPress kebab-cases the keys h1–h4 to h-1–h-4; the blocks read
 * h1–h4, so those are aliased here (Global Styles edits still flow through). */
:root:root {
	--wp--custom--type--h1--font: var(--wp--custom--type--h-1--font);
	--wp--custom--type--h1--size: var(--wp--custom--type--h-1--size);
	--wp--custom--type--h1--weight: var(--wp--custom--type--h-1--weight);
	--wp--custom--type--h1--style: var(--wp--custom--type--h-1--style);
	--wp--custom--type--h1--line-height: var(--wp--custom--type--h-1--line-height);
	--wp--custom--type--h1--tracking: var(--wp--custom--type--h-1--tracking);
	--wp--custom--type--h1--transform: var(--wp--custom--type--h-1--transform);
	--wp--custom--type--h2--font: var(--wp--custom--type--h-2--font);
	--wp--custom--type--h2--size: var(--wp--custom--type--h-2--size);
	--wp--custom--type--h2--weight: var(--wp--custom--type--h-2--weight);
	--wp--custom--type--h2--style: var(--wp--custom--type--h-2--style);
	--wp--custom--type--h2--line-height: var(--wp--custom--type--h-2--line-height);
	--wp--custom--type--h2--tracking: var(--wp--custom--type--h-2--tracking);
	--wp--custom--type--h2--transform: var(--wp--custom--type--h-2--transform);
	--wp--custom--type--h3--font: var(--wp--custom--type--h-3--font);
	--wp--custom--type--h3--size: var(--wp--custom--type--h-3--size);
	--wp--custom--type--h3--weight: var(--wp--custom--type--h-3--weight);
	--wp--custom--type--h3--style: var(--wp--custom--type--h-3--style);
	--wp--custom--type--h3--line-height: var(--wp--custom--type--h-3--line-height);
	--wp--custom--type--h3--tracking: var(--wp--custom--type--h-3--tracking);
	--wp--custom--type--h3--transform: var(--wp--custom--type--h-3--transform);
	--wp--custom--type--h4--font: var(--wp--custom--type--h-4--font);
	--wp--custom--type--h4--size: var(--wp--custom--type--h-4--size);
	--wp--custom--type--h4--weight: var(--wp--custom--type--h-4--weight);
	--wp--custom--type--h4--style: var(--wp--custom--type--h-4--style);
	--wp--custom--type--h4--line-height: var(--wp--custom--type--h-4--line-height);
	--wp--custom--type--h4--tracking: var(--wp--custom--type--h-4--tracking);
	--wp--custom--type--h4--transform: var(--wp--custom--type--h-4--transform);
}

/* Per breakpoint: each preset holds size (base), sizeMd and sizeLg; from
 * md/lg the size var the blocks read switches, so Global Styles can retune
 * every breakpoint without theme edits. */
@media (min-width: 768px) {
	:root:root {
		--wp--custom--type--display--size: var(--wp--custom--type--display--size-md);
		--wp--custom--type--h1--size: var(--wp--custom--type--h-1--size-md);
		--wp--custom--type--h2--size: var(--wp--custom--type--h-2--size-md);
		--wp--custom--type--h3--size: var(--wp--custom--type--h-3--size-md);
		--wp--custom--type--h4--size: var(--wp--custom--type--h-4--size-md);
		--wp--custom--type--statement--size: var(--wp--custom--type--statement--size-md);
		--wp--custom--type--quote--size: var(--wp--custom--type--quote--size-md);
		--wp--custom--type--number--size: var(--wp--custom--type--number--size-md);
		--wp--custom--type--body--size: var(--wp--custom--type--body--size-md);
		--wp--custom--type--lead--size: var(--wp--custom--type--lead--size-md);
		--wp--custom--type--eyebrow--size: var(--wp--custom--type--eyebrow--size-md);
		--wp--custom--type--small--size: var(--wp--custom--type--small--size-md);
		--wp--custom--type--caption--size: var(--wp--custom--type--caption--size-md);
		--wp--custom--type--crumbs--size: var(--wp--custom--type--crumbs--size-md);
	}
}
@media (min-width: 1025px) {
	:root:root {
		--wp--custom--type--display--size: var(--wp--custom--type--display--size-lg);
		--wp--custom--type--h1--size: var(--wp--custom--type--h-1--size-lg);
		--wp--custom--type--h2--size: var(--wp--custom--type--h-2--size-lg);
		--wp--custom--type--h3--size: var(--wp--custom--type--h-3--size-lg);
		--wp--custom--type--h4--size: var(--wp--custom--type--h-4--size-lg);
		--wp--custom--type--statement--size: var(--wp--custom--type--statement--size-lg);
		--wp--custom--type--quote--size: var(--wp--custom--type--quote--size-lg);
		--wp--custom--type--number--size: var(--wp--custom--type--number--size-lg);
		--wp--custom--type--body--size: var(--wp--custom--type--body--size-lg);
		--wp--custom--type--lead--size: var(--wp--custom--type--lead--size-lg);
		--wp--custom--type--eyebrow--size: var(--wp--custom--type--eyebrow--size-lg);
		--wp--custom--type--small--size: var(--wp--custom--type--small--size-lg);
		--wp--custom--type--caption--size: var(--wp--custom--type--caption--size-lg);
		--wp--custom--type--crumbs--size: var(--wp--custom--type--crumbs--size-lg);
	}
}