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

html {
	scroll-behavior: smooth;
}

/*
 * CSS scroll-snap was removed here — it fought with GSAP ScrollTrigger's
 * own scroll-position tracking (used sitewide for reveal animations):
 * the browser could snap-correct scroll position mid-scroll while
 * ScrollTrigger was still acting on the pre-snap position, producing
 * visible jumps/stutters and half-finished reveal animations, worse on
 * trackpads (many small momentum-scroll events) than mouse wheels.
 */

body {
	margin: 0;
	font-family: var(--font-family-base);
	color: var(--color-text-dark);
	background: var(--color-white);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img {
	max-width: 100%;
	display: block;
}

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

h1,
h2,
h3,
h4,
p {
	margin: 0;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

button {
	font-family: inherit;
	cursor: pointer;
}

svg {
	display: block;
}

/* Layout helpers */
.container {
	/* Explicit width (never auto) so this stays correct even as a flex/grid
	   item — an implicit auto width on a flex item shrink-wraps to content
	   instead of filling the available space, which silently breaks any
	   section whose section-level wrapper is display:flex/grid. */
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/*
 * Desktop: no internal padding — the gap from the viewport edge comes
 * entirely from the box being narrower than 100% (matching .site-header's
 * own left/right:32px + padding-inline:32px, layout.css), not from padding
 * squeezing the content inside an already-full-width box.
 */
@media (min-width: 769px) {
	.container {
		width: calc(100% - 128px);
		padding-inline: 0;
	}
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* Hides a section without removing its markup/data — e.g. Key Benefits
   and Applications on premix product pages (their copy now surfaces
   inside the hero instead, see product/hero.php), kept in the DOM so
   re-enabling them later is just removing this class. */
.is-hidden {
	display: none !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-4);
	z-index: 9999;
	background: var(--color-white);
	color: var(--color-text-dark);
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	transition: top .2s var(--ease-out);
}

.skip-link:focus {
	top: var(--space-4);
	width: auto;
	height: auto;
	clip: auto;
	overflow: visible;
}

.section-eyebrow {
	font-size: clamp(26px, 2.4vw, 48px);
	font-weight: 400;
	color: var(--color-text-dark);
	margin-bottom: var(--space-6);
	line-height: 105%;
	letter-spacing: 0%;

}

.section-eyebrow--on-dark {
	color: var(--color-white);
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-full);
	font-weight: 600;
	font-size: 14px;
	transition: background .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .2s var(--ease-out);
	border: 1.5px solid transparent;
	/* .btn now also lands on real <button> elements (Contact Us modal
	   triggers) — unstyled buttons get a UA background/appearance that
	   anchors never had, so reset it here rather than per modifier. */
	background: transparent;
	appearance: none;
	-webkit-appearance: none;
	color: inherit;
	font-family: inherit;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn--outline {
	border-color: rgba(255, 255, 255, 0.5);
	color: var(--color-white);
	background: transparent;
}

.btn--outline:hover {
	border-color: var(--color-white);
	background: rgba(255, 255, 255, 0.08);
}

.btn--outline-light {
	color: var(--color-white);
	border-radius: 0;
	border-width: 1px;
	border-color: rgba(255, 255, 255, 0.7);
	font-weight: 400;
	padding: var(--space-3) var(--space-6);
	font-size: 16px;
	line-height: 105%;
	letter-spacing: -3%;
}

.btn--outline-light:hover {
	background: rgba(255, 255, 255, 0.1);
}

.btn--solid {
	background: var(--color-white);
	color: var(--color-navy);
}

.btn--solid:hover {
	background: var(--color-light-bg);
}

/* Progressive-enhancement reveal states — only take effect once JS confirms
   GSAP loaded (html.js-anim-ready). Without JS, everything stays visible.
   Scroll-triggered reveals are opacity-only, deliberately no transform: a
   translateY-based reveal reads as a "jump"/shift the moment a frame drops
   mid-scroll, a pure fade can't produce that spatial jolt. */
html.js-anim-ready [data-reveal],
html.js-anim-ready [data-reveal-item],
html.js-anim-ready [data-reveal-dir] {
	opacity: 0;
}

/* Hero load-time intro keeps its slide-up entrance — page-load only, not
   scroll-driven, not part of the reported scroll-jank. */
html.js-anim-ready [data-intro],
html.js-anim-ready [data-intro-item] {
	opacity: 0;
	transform: translateY(28px);
}

/* /bulk-ingredients/ hub page: scroll effects removed entirely per explicit
   request — content is visible immediately, no reveal-on-scroll at all. */
html.js-anim-ready body.page-template-page-bulk-ingredients-php [data-reveal],
html.js-anim-ready body.page-template-page-bulk-ingredients-php [data-reveal-item] {
	opacity: 1;
}

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

	html.js-anim-ready [data-reveal],
	html.js-anim-ready [data-reveal-item],
	html.js-anim-ready [data-intro],
	html.js-anim-ready [data-intro-item] {
		opacity: 1;
		transform: none;
	}

	html {
		scroll-behavior: auto;
	}
}

@media (max-width: 768px) {
	.section-eyebrow {
	margin-bottom: var(--space-7);	
	}
}