/*
 * SoySourceGlobal homepage stylesheet.
 * Enqueued by calmes-child/functions.php (soysource_enqueue_assets) after
 * the parent Calmes theme's real style.css. Consumes the --soysource-*
 * tokens below, which alias the parent theme's installed Unyson palette.
 * Organised: tokens -> base/layout -> section-head -> cards -> buttons ->
 * per-section -> preserved functional overrides -> reduced-motion guard.
 */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
	--soysource-green:  var(--main,   #275c53);
	--soysource-second: var(--second, #e2bb53);
	--soysource-gold:   var(--second, #e2bb53);
	--soysource-cream:  var(--gray,   #f5f0ea);
	--soysource-ink:    var(--black,  #565656);
	--soysource-white:  #fff;

	--soysource-maxw: 1200px;
	--soysource-pad-inline: clamp(1rem, 5vw, 2rem);
	--soysource-section-y: clamp(3.5rem, 8vw, 6rem);
	--soysource-radius: 16px;
	--soysource-card-shadow: 0 2px 12px rgba(0, 0, 0, .06);
	--soysource-card-shadow-hover: 0 12px 32px rgba(0, 0, 0, .12);
}

/* 2. BASE / LAYOUT ------------------------------------------------------- */
.soysource-container {
	max-width: var(--soysource-maxw);
	margin-inline: auto;
	padding-inline: var(--soysource-pad-inline);
}
.soysource-section {
	padding-block: var(--soysource-section-y);
}
.soysource-section--tint { background: var(--soysource-cream); }
.soysource-section--dark {
	background: var(--soysource-green);
	color: var(--soysource-white);
}
.soysource-section--dark :is(h2, h3, p, li, cite) { color: var(--soysource-white); }

/* 3. SECTION HEADER ---------------------------------------------------------- */
.soysource-section-head {
	text-align: center;
	margin-bottom: clamp(2rem, 5vw, 3.25rem);
}
.soysource-eyebrow {
	margin: 0 0 .5rem;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--soysource-gold);
}
.soysource-section-head h2 {
	margin: 0 auto .75rem;
	/* Parent theme's default h2 is 60px with no rule here setting font-size,
	   which made section heads render larger than the hero's own clamped
	   52px h1. 2.5rem (40px) keeps it in family with the promo banner's
	   clamped 48px h2 while staying clearly smaller than the hero h1. */
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	line-height: 1.15;
}
.soysource-rule {
	width: 48px;
	height: 3px;
	margin: 0 auto;
	border: 0;
	background: var(--soysource-gold);
	/* Parent theme's bare `hr { opacity: 0.15 }` otherwise fades this to a smudge. */
	opacity: 1;
}

/* 4. CARD SYSTEM ----------------------------------------------------------- */
.soysource-card {
	background: var(--soysource-white);
	border-radius: var(--soysource-radius);
	box-shadow: var(--soysource-card-shadow);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.soysource-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--soysource-card-shadow-hover);
}
.soysource-card img { transition: transform .35s ease; }
.soysource-card:hover img { transform: scale(1.04); }
/* .soysource-testimonial is also a .soysource-card, so the hover-zoom above
   (meant for product/blog thumbnails) would otherwise unintentionally zoom
   the 48px round avatar too. */
.soysource-testimonial:hover .soysource-testimonial__person img { transform: none; }

/* 5. BUTTON SYSTEM ------------------------------------------------------- */
.soysource-btn {
	display: inline-block;
	border-radius: 999px;
	padding: .7em 1.75em;
	font-weight: 600;
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.soysource-btn--primary {
	background: var(--soysource-gold);
	color: var(--soysource-green);
}
.soysource-btn--primary:hover,
.soysource-btn--primary:focus {
	background: var(--soysource-white);
	color: var(--soysource-green);
}
.soysource-btn--outline {
	background: transparent;
	border-color: var(--soysource-green);
	color: var(--soysource-green);
}
.soysource-btn--outline:hover,
.soysource-btn--outline:focus {
	background: var(--soysource-green);
	color: var(--soysource-white);
}
.soysource-btn--link {
	padding: .4em 0;
	border: 0;
	color: var(--soysource-green);
	font-weight: 600;
	text-decoration: none;
}
.soysource-btn--link::after {
	content: " \2192";
	display: inline-block;
	transition: transform .2s ease;
}
.soysource-btn--link:hover { text-decoration: underline; }
.soysource-btn--link:hover::after { transform: translateX(4px); }

/* dark-context button variants (hero, promo, newsletter) */
.soysource-section--dark .soysource-btn--outline,
.soysource-hero .soysource-btn--outline {
	border-color: var(--soysource-white);
	color: var(--soysource-white);
}
.soysource-section--dark .soysource-btn--outline:hover,
.soysource-hero .soysource-btn--outline:hover {
	background: var(--soysource-white);
	color: var(--soysource-green);
}
.soysource-section--dark .soysource-btn--link,
.soysource-hero .soysource-btn--link { color: var(--soysource-white); }

/* 6. HERO --------------------------------------------------------------- */
.soysource-hero {
	background: var(--soysource-green);
	color: var(--soysource-white);
	/* The floating nav overlays the hero via the parent theme's own
	   transparent-nav mechanism (#lte-nav-wrapper.lte-layout-transparent-full
	   collapses its own 100px flow height with a negative bottom margin, so
	   the hero starts at y:0 underneath it -- by design, that's what makes
	   the hero's color/photo visible behind the nav). .soysource-section's
	   padding-block (clamp(3.5rem, 8vw, 6rem) = 56px at its floor) isn't
	   reliably >= the nav's real 100px height at every viewport width, so
	   on narrower screens the H1 rendered up under/behind the logo instead
	   of clearing it. Force enough top clearance regardless of viewport. */
	padding-top: max(var(--soysource-section-y), 130px);
	/* Full-bleed: the parent theme wraps page content in a centered
	   .container.main-wrapper (max-width: 1570px), so without this the
	   section's own background stops short of the real viewport edges
	   on wide screens. Break out to 100vw while .soysource-container
	   inside still centers the actual copy/media at the usual width. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.soysource-hero__copy,
.soysource-hero__copy a,
.soysource-hero__copy h1 { color: var(--soysource-white); }
.soysource-hero__copy .soysource-btn--primary { color: var(--soysource-green); }
.soysource-hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
}
.soysource-hero h1 {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 5vw, 3.25rem);
	line-height: 1.1;
}
.soysource-hero__lead {
	margin: 0 0 1.25rem;
	font-size: 1.1rem;
	max-width: 46ch;
}
.soysource-hero__points {
	list-style: none;
	padding: 0;
	margin: 0 0 1.75rem;
	display: grid;
	gap: .4rem;
}
.soysource-hero__points li { position: relative; padding-left: 1.6rem; }
.soysource-hero__points li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: var(--soysource-gold);
	font-weight: 700;
}
.soysource-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 0;
}
.soysource-hero__media {
	position: relative;
	border-radius: var(--soysource-radius);
	overflow: hidden;
	min-height: clamp(260px, 40vw, 460px);
}
.soysource-hero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1.2s ease;
}
.soysource-hero__slide.is-active { opacity: 1; }

@media (max-width: 900px) {
	.soysource-hero__inner { grid-template-columns: 1fr; }
	.soysource-hero__media { order: 2; }
	.soysource-hero__copy  { order: 1; }
}

/* 7. CATEGORY CARDS --------------------------------------------------------- */
.soysource-categories__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 640px) { .soysource-categories__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .soysource-categories__grid { grid-template-columns: repeat(3, 1fr); } }

.soysource-category-card {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	border-radius: var(--soysource-radius);
	overflow: hidden;
	background-size: cover;
	background-position: center;
	text-decoration: none;
	isolation: isolate;
}
.soysource-category-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .1) 55%, rgba(0, 0, 0, 0) 100%);
	transition: background .25s ease;
}
.soysource-category-card:hover::after {
	background: linear-gradient(to top, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .25) 60%, rgba(0, 0, 0, .05) 100%);
}
.soysource-category-card__label {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	padding: 1.1rem 1.25rem 1.25rem;
	color: var(--soysource-white);
	display: flex;
	flex-direction: column;
	gap: .15rem;
}
.soysource-category-card__name { font-size: 1.15rem; font-weight: 700; }
.soysource-category-card__cta { font-size: .85rem; font-weight: 600; opacity: .9; }
.soysource-category-card__cta::after {
	content: " \2192";
	display: inline-block;
	transition: transform .2s ease;
}
.soysource-category-card:hover .soysource-category-card__cta::after { transform: translateX(4px); }

/* 8. ABOUT-SPLIT SECTION -------------------------------------------------- */
.soysource-about-split__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 5vw, 3.5rem);
	align-items: center;
}
@media (min-width: 900px) {
	.soysource-about-split__inner { grid-template-columns: 1fr 1fr; }
}
.soysource-about-split__media img {
	width: 100%;
	height: auto;
	border-radius: var(--soysource-radius);
	display: block;
}
.soysource-about-split__copy h2 { margin: 0 0 .75rem; line-height: 1.15; }
.soysource-about-split__copy p { margin: 0 0 1rem; }
.soysource-about-split__facts {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	list-style: none;
	margin: 0 0 .25rem !important; /* same !important reasoning as .soysource-about-split__actions below */
	padding: 0;
}
.soysource-about-split__facts li { color: var(--soysource-green); }
.soysource-about-split__facts strong { color: var(--soysource-ink); }
.soysource-about-split__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	/* This element is itself a <p>, so without !important the sibling rule
	   above (`.soysource-about-split__copy p`, specificity 0,1,1) would beat
	   this plain class selector (0,1,0) and collapse the top margin to 0,
	   pulling the buttons flush up against the last paragraph. */
	margin: 1.25rem 0 0 !important;
}

/* 9. PRODUCT GRID + CARDS ------------------------------------------------- */
/* .soysource-product-card by Task 2; grids/tabs by Task 6; grid by Task 8 */
.soysource-product-card { display: flex; flex-direction: column; }
.soysource-product-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--soysource-cream);
}
.soysource-product-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}
.soysource-product-card__body {
	padding: 1rem 1.1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: .4rem;
	flex: 1;
}
.soysource-product-card__title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.3;
}
.soysource-product-card__title a { color: var(--soysource-green); text-decoration: none; }
.soysource-product-card__title a:hover { text-decoration: underline; }
.soysource-product-card .price { color: var(--soysource-ink); font-weight: 600; }
/* Note: there is no `.lte-btn`/`.add_to_cart_button` margin-top/align-self
   rule here. WooCommerce's [add_to_cart] shortcode always wraps its output
   in `<p class="add_to_cart_inline">` (see class-wc-shortcodes.php), so the
   actual flex item in .soysource-product-card__body is that <p>, never the
   <a class="add_to_cart_button"> nested inside it -- a rule targeting the
   button directly can never take effect. The <p>'s own spacing is handled
   by the .soysource-product-card p.add_to_cart_inline override below. */

.soysource-product-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
}
.soysource-tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .5rem;
	margin-bottom: 2rem;
}
.soysource-tab-btn {
	border: 1px solid var(--soysource-green);
	border-radius: 999px;
	padding: .4em 1.1em;
	background: transparent;
	color: var(--soysource-green);
	font-weight: 600;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}
.soysource-tab-btn.is-active {
	background: var(--soysource-gold);
	border-color: var(--soysource-gold);
	color: var(--soysource-green);
}
.soysource-popular-products__all { text-align: center; margin: 2rem 0 0; }

/* 10. PROMO BANNER ------------------------------------------------------- */
.soysource-promo-banner {
	position: relative;
	background-color: var(--soysource-green); /* fallback if the SLIDE_04 background-image fails to load */
	background-size: cover;
	background-position: center;
	color: var(--soysource-white);
	text-align: center;
	/* Full-bleed, same reasoning as .soysource-hero above. */
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}
.soysource-promo-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(39, 92, 83, .82); /* var(--soysource-green) @ 82% -- literal because rgba() needs channels */
}
.soysource-promo-banner__inner { position: relative; z-index: 1; }
.soysource-promo-banner .soysource-eyebrow { color: var(--soysource-gold); }
.soysource-promo-banner h2 {
	margin: 0 0 .5rem;
	font-size: clamp(2rem, 6vw, 3rem);
	color: var(--soysource-white);
}
.soysource-promo-banner__copy {
	margin: 0 auto 1.5rem;
	max-width: 44ch;
}

/* 11. TESTIMONIALS ------------------------------------------------------- */
.soysource-testimonials__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
}
@media (min-width: 900px) {
	.soysource-testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}
.soysource-testimonial {
	margin: 0;
	padding: 1.75rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: .9rem;
}
.soysource-testimonial__stars { color: var(--soysource-gold); letter-spacing: .1em; }
.soysource-testimonial__quote {
	margin: 0;
	/* Reset the parent theme's bare `blockquote` box (background-color,
	   border-radius, padding, font-style, text-align) -- this <blockquote>
	   should read as plain text inside the card's own padding, not a
	   nested inset box, and left-aligned to match the stars/person row
	   in the same card. */
	padding: 0;
	background: none;
	border-radius: 0;
	font-style: normal;
	text-align: left;
	font-size: 1.05rem;
	line-height: 1.5;
	color: var(--soysource-ink);
	position: relative;
}
.soysource-testimonial__person {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin-top: auto;
}
.soysource-testimonial__person img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}
.soysource-testimonial__person > span { display: flex; flex-direction: column; }
.soysource-testimonial__name { font-weight: 700; color: var(--soysource-green); }
.soysource-testimonial__role { font-size: .85rem; color: var(--soysource-ink); }

/* 12. BLOG TEASER ------------------------------------------------------- */
.soysource-blog-teaser__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	/* With a single post, auto-fit gives one wide track and the
	   max-width'd card (below) would otherwise sit stranded at its left
	   edge; centering it in the track fixes that. With enough posts to
	   fill a row, each track is already close to the card's max-width
	   (~363px vs 360px), so centering is imperceptible there. */
	justify-items: center;
}
/* max-width caps a lone auto-fit'd 1fr track (with no featured image, the
   placeholder otherwise stretches to a page-wide, mostly-empty block) while
   a real multi-post grid still wraps normally within each ~280-360px track. */
.soysource-blog-card { display: flex; flex-direction: column; max-width: 360px; }
.soysource-blog-card__media {
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--soysource-cream);
}
.soysource-blog-card__media img,
.soysource-blog-card__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.soysource-blog-card__placeholder { background: var(--soysource-cream); }
.soysource-blog-card__body {
	padding: 1.1rem 1.25rem 1.4rem;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	flex: 1;
}
.soysource-blog-card__date {
	margin: 0;
	font-size: .8rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--soysource-ink);
}
.soysource-blog-card__title { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.soysource-blog-card__title a { color: var(--soysource-green); text-decoration: none; }
.soysource-blog-card__title a:hover { text-decoration: underline; }
.soysource-blog-card__excerpt { margin: 0; color: var(--soysource-ink); }
.soysource-blog-card .soysource-btn--link { margin-top: auto; align-self: flex-start; }

/* 13. NEWSLETTER ------------------------------------------------------- */
.soysource-newsletter__inner { text-align: center; }
.soysource-newsletter h2 { margin: 0 0 .5rem; color: var(--soysource-white); }
.soysource-newsletter p { margin: 0 0 1.5rem; color: var(--soysource-white); }

/* Parent theme's `.mc4wp-form { max-width: 530px; margin: 0; text-align: start; }`
   is never otherwise overridden, which leaves the whole form (not just the
   inner fields row already centered below) flush-left inside this section. */
.soysource-newsletter .mc4wp-form {
	max-width: 520px;
	margin-inline: auto;
	text-align: center;
}
.soysource-newsletter .mc4wp-form-fields {
	display: flex;
	flex-direction: column;
	gap: .6rem;
	max-width: 520px;
	margin-inline: auto;
}
.soysource-newsletter .mc4wp-form-fields p { margin: 0; }
.soysource-newsletter .mc4wp-form label { display: block; }
/* Parent theme's `form input:not([type="submit"])...` chain (4 :not() clauses
   -> specificity 0,4,2) beats a plain `.soysource-newsletter .mc4wp-form
   input[type="email"]` rule (0,3,1) for background-color/color/padding/border,
   leaving the field transparent with black-on-transparent text on this dark
   section. Chain the real ancestor classes already in the markup
   (.soysource-newsletter__inner, .mc4wp-form-fields) to reach 0,5,1 and win
   on specificity alone -- no !important needed. */
.soysource-newsletter .soysource-newsletter__inner .mc4wp-form .mc4wp-form-fields input[type="email"] {
	width: 100%;
	background: var(--soysource-white);
	color: var(--soysource-ink);
	border: 0;
	border-radius: 999px;
	padding: .8em 1.25em;
	font: inherit;
}
.soysource-newsletter .mc4wp-form input[type="submit"] {
	width: 100%;
	border: 2px solid transparent;
	border-radius: 999px;
	padding: .7em 1.75em;
	font-weight: 600;
	cursor: pointer;
	background: var(--soysource-gold);
	color: var(--soysource-green);
	transition: background-color .2s ease, color .2s ease;
}
.soysource-newsletter .mc4wp-form input[type="submit"]:hover,
.soysource-newsletter .mc4wp-form input[type="submit"]:focus {
	background: var(--soysource-white);
	color: var(--soysource-green);
}
.soysource-newsletter .mc4wp-response { color: var(--soysource-white); margin-top: .75rem; }

@media (min-width: 640px) {
	.soysource-newsletter .mc4wp-form-fields {
		flex-direction: row;
		align-items: center;
	}
	.soysource-newsletter .mc4wp-form-fields > p:first-child { flex: 1; }
	.soysource-newsletter .mc4wp-form input[type="submit"] { width: auto; white-space: nowrap; }
}

/* 14. PRESERVED FUNCTIONAL OVERRIDES ---------------------------------------- */

/* WooCommerce's [add_to_cart] shortcode wraps its output in an element with
   a hardcoded `border:4px solid #ccc; padding:12px` inline style (a
   core placeholder meant to be styled over). Strip it. */
.soysource-product-card p.add_to_cart_inline {
	border: none !important;
	padding: 0 !important;
	margin: 0.5rem 0 0 !important;
}

/* Text wordmark logo. calmes_get_the_logo() is overridden in functions.php
   to emit <a class="lte-logo soysource-logo-text">SoySourceGlobal</a> in
   the same navbar slot the parent's <img> logo used (parent caps that
   slot at max-height:27px). --white variant + .lte-nav-color-white match
   the parent's own navbar colour-scheme convention. */
.lte-logo.soysource-logo-text {
	display: inline-block;
	font-size: 22px;
	font-weight: 700;
	line-height: 27px;
	letter-spacing: 0.02em;
	white-space: nowrap;
	color: var(--soysource-ink, #565656);
}
#lte-nav-wrapper.lte-nav-color-white .lte-logo.soysource-logo-text,
.lte-logo.soysource-logo-text.soysource-logo-text--white {
	color: var(--soysource-white, #fff);
}

/* Floating nav: the theme's own sticky/"affix" mechanism (navbar-affix
   Unyson option, set via scripts/apply-calmes-options.php) already
   handles position:fixed, top:0, z-index and the scroll-triggered
   .affix-top <-> .affix toggle -- it just ships with no shadow for the
   fixed state, so the nav has no visual separation from the page content
   scrolling underneath it. */
.lte-navbar.affix {
	box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}

/* 15. ABOUT US PAGE (page-about.php) --------------------------------------- */
.soysource-about-page__inner {
	max-width: 760px;
}
.soysource-about-page h1 {
	margin: 0 0 1rem;
	line-height: 1.15;
}
.soysource-about-page__lead {
	font-size: 1.15rem;
	color: var(--soysource-ink);
	margin: 0 0 2rem;
}
.soysource-about-page__media {
	width: 100%;
	height: auto;
	border-radius: var(--soysource-radius);
	display: block;
	margin: 0 0 2rem;
}
.soysource-about-page h2 {
	margin: 2rem 0 .75rem;
	line-height: 1.2;
}
.soysource-about-page p {
	margin: 0 0 1rem;
}
.soysource-about-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin: 2rem 0 0 !important; /* same reasoning as .soysource-about-split__actions: beats the sibling `p` margin rule above at equal specificity */
}

/* 16. CONTENT PAGE (page-legal.php: Privacy/FAQ/Shipping/Terms/Refund) ----- */
.soysource-content-page__inner {
	max-width: 760px;
}
.soysource-content-page__inner h1,
.soysource-content-page__inner h2,
.soysource-content-page__inner h3 {
	color: var(--soysource-green);
	line-height: 1.25;
	margin: 2rem 0 .75rem;
}
.soysource-content-page__inner h1:first-child,
.soysource-content-page__inner h2:first-child,
.soysource-content-page__inner h3:first-child {
	margin-top: 0;
}
.soysource-content-page__inner p,
.soysource-content-page__inner ul,
.soysource-content-page__inner ol {
	margin: 0 0 1rem;
	line-height: 1.6;
}
.soysource-content-page__inner ul,
.soysource-content-page__inner ol {
	padding-left: 1.5rem;
}
.soysource-content-page__inner strong { color: var(--soysource-ink); }
.soysource-content-page__inner a { color: var(--soysource-green); }
.soysource-content-page__inner table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.5rem;
}
.soysource-content-page__inner table th,
.soysource-content-page__inner table td {
	text-align: left;
	padding: .6rem .75rem;
	border-bottom: 1px solid var(--soysource-cream);
}

/* Mobile header: the parent theme centers the whole .container (logo +
   nav items) once #lte-nav-wrapper picks up .lte-navwrapper-mobile
   (style.css ~3218: `justify-content: center`), pairing it with a
   `.lte-navbar-toggle { position: absolute; right: 25px }` hamburger that
   floats independently of that flex alignment -- so centering only ever
   moves the logo, not the toggle. Keep the logo pinned to the left on
   mobile/tablet instead, matching the desktop layout. */
#lte-nav-wrapper.lte-navwrapper-mobile .container {
	justify-content: flex-start;
}

/* 17. CONTACT PAGE (page-contact-us.php) ----------------------------------- */
.soysource-contact__inner {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1.75rem, 5vw, 3.5rem);
	align-items: start;
}
@media (min-width: 900px) {
	.soysource-contact__inner { grid-template-columns: 1fr 1.2fr; }
}
.soysource-contact__details h1 { margin: 0 0 1rem; line-height: 1.15; }
.soysource-contact__lead { color: var(--soysource-ink); margin: 0 0 2rem; font-size: 1.1rem; }
.soysource-contact__block { margin: 0 0 1.5rem; }
.soysource-contact__block h3 {
	margin: 0 0 .35rem;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--soysource-gold);
}
.soysource-contact__block p { margin: 0; color: var(--soysource-ink); }
.soysource-contact__block a { color: var(--soysource-green); font-weight: 600; text-decoration: none; }
.soysource-contact__block a:hover { text-decoration: underline; }
.soysource-contact__form {
	background: var(--soysource-white);
	border-radius: var(--soysource-radius);
	box-shadow: var(--soysource-card-shadow);
	padding: clamp(1.5rem, 4vw, 2.5rem);
}
.soysource-contact__form h2 { margin: 0 0 1.25rem; }
.soysource-contact__form .wpcf7-form p { margin: 0 0 1rem; }
.soysource-contact__form .wpcf7-form label { display: block; font-weight: 600; margin-bottom: .35rem; color: var(--soysource-ink); }
.soysource-contact__form .wpcf7-form input[type="text"],
.soysource-contact__form .wpcf7-form input[type="email"],
.soysource-contact__form .wpcf7-form textarea {
	width: 100%;
	border: 1px solid rgba(0, 0, 0, .3) !important; /* a plain 1px border at low opacity rendered as visible on one edge only in testing -- force it unambiguous and rule out any competing rule */
	border-radius: 8px;
	padding: .7em .9em;
	font: inherit;
	background: var(--soysource-white);
	color: var(--soysource-ink);
}
.soysource-contact__form .wpcf7-form textarea { min-height: 140px; resize: vertical; }
.soysource-contact__form .wpcf7-form input[type="submit"] {
	border: 2px solid transparent;
	border-radius: 999px;
	padding: .7em 1.75em;
	font-weight: 600;
	cursor: pointer;
	background: var(--soysource-gold);
	color: var(--soysource-green);
	transition: background-color .2s ease, color .2s ease;
}
.soysource-contact__form .wpcf7-form input[type="submit"]:hover,
.soysource-contact__form .wpcf7-form input[type="submit"]:focus {
	background: var(--soysource-green);
	color: var(--soysource-white);
}
.soysource-contact__form .wpcf7-not-valid-tip { color: #c0392b; font-size: .85rem; margin-top: .25rem; }
.soysource-contact__form .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: .85em 1.1em;
	border-radius: 8px;
	border: 1px solid rgba(0, 0, 0, .3) !important; /* a plain 1px border at low opacity rendered as visible on one edge only in testing -- force it unambiguous and rule out any competing rule */
}

/* 18. FOOTER WIDGET COLUMNS ------------------------------------------------- */
/* .lte-footer-widget-area is the light/cream section above the dark
   copyright bar (confirmed live: no dark background here, unlike
   .lte-footer-wrapper which also wraps that darker bar below it -- an
   earlier version of this rule scoped to .lte-footer-wrapper and used
   white text, which was then unreadable on this actual light background). */
.lte-footer-widget-area .widget_text ul,
.lte-footer-widget-area .soysource-footer-links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.lte-footer-widget-area .widget_text li,
.lte-footer-widget-area .soysource-footer-links li {
	margin: 0 0 .6rem;
}
.lte-footer-widget-area .widget_text p {
	color: var(--soysource-ink);
}
.lte-footer-widget-area .widget_text a,
.lte-footer-widget-area .soysource-footer-links a {
	color: var(--soysource-green);
	text-decoration: none;
}
.lte-footer-widget-area .widget_text a:hover,
.lte-footer-widget-area .soysource-footer-links a:hover {
	text-decoration: underline;
}

/* 19. REDUCED-MOTION GUARD (keep last) ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.soysource-card,
	.soysource-card img,
	.soysource-btn,
	.soysource-btn--link::after,
	.soysource-category-card::after,
	.soysource-category-card__cta::after,
	.soysource-tab-btn,
	.soysource-hero__slide,
	.soysource-newsletter .mc4wp-form input[type="submit"] {
		transition: none !important;
	}
	.soysource-hero__slide { opacity: 0; }
	.soysource-hero__slide:first-child { opacity: 1; }
}