/*
 * Food Sock shared components: used by the homepage and the Food Sock Page
 * template (any wrapper with class .fs-ui). Creative Framework building
 * blocks: two-line headlines, buttons, pills, olive rays, cream pattern,
 * pop-in motion, the two reseller paths band.
 */

.fs-ui {
	font-family: var(--fs-font);
	color: var(--fs-text);
	background: var(--fs-page);
	overflow-x: clip;
}
/* Resets use :where() so they add no specificity and component rules win. */
:where(.fs-ui) *,
:where(.fs-ui) *::before,
:where(.fs-ui) *::after { box-sizing: border-box; }
:where(.fs-ui) img { max-width: 100%; height: auto; display: block; }
/* Lists need one class of weight to beat Blocksy's `ul, ol { padding-inline-start: 2.5em }` (it pushed
   every card list 40px right on phones). Editor lists (.wp-block-list) keep their bullets and indent. */
:where(.fs-ui) :where(ul, ol):not(.wp-block-list) { list-style: none; margin: 0; padding: 0; }
:where(.fs-ui) :where(h1, h2, h3, p) { margin: 0; }
/* Blocksy sets its own heading font; the framework says Poppins for everything. */
.fs-ui :is(h1, h2, h3, h4, p, a, button, blockquote) { font-family: var(--fs-font); }

.fs-wrap {
	position: relative;
	max-width: var(--fs-wrap);
	margin: 0 auto;
	padding: 0 var(--fs-gutter);
}
.fs-section { position: relative; padding: clamp(56px, 8vw, 104px) 0; }
.fs-section__head { text-align: center; max-width: 760px; margin: 0 auto clamp(32px, 5vw, 56px); }
.fs-center { text-align: center; }
.fs-lead { font-size: clamp(16px, 1.6vw, 18px); line-height: 1.6; font-weight: 500; margin-top: 14px; color: var(--fs-muted); }

/* ---------- Headlines: Poppins 800/900, line 1 olive, line 2 orange ---------- */

.fs-h {
	font-family: var(--fs-font);
	font-weight: 900;
	font-size: clamp(32px, 5vw, 56px);
	line-height: 1.08;
	letter-spacing: -.01em;
}
.fs-h__1, .fs-h__2 { display: block; }
.fs-h__1 { color: var(--fs-olive); }
.fs-h__2 { color: var(--fs-orange); }
/* On colour backgrounds: white, with the second line in cream. */
.fs-h--on-olive .fs-h__1 { color: var(--fs-white); }
.fs-h--on-olive .fs-h__2 { color: var(--fs-cream); }

.fs-eyebrow {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--fs-orange);
	margin-bottom: 10px;
}
.fs-eyebrow--cream { color: var(--fs-cream); }

/* ---------- Buttons and pills ---------- */

.fs-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.fs-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 52px;
	padding: 14px 26px;
	border-radius: 999px;
	border: 2px solid transparent;
	font: 700 16px/1.2 var(--fs-font);
	text-decoration: none;
	cursor: pointer;
	transition: background .15s, color .15s, transform .15s, box-shadow .15s;
}
.fs-btn:hover { transform: translateY(-2px); }
.fs-btn:focus-visible { outline: 3px solid var(--fs-cream); outline-offset: 3px; }
.fs-btn--orange { background: var(--fs-orange); color: var(--fs-white); box-shadow: 0 3px 0 var(--fs-orange-dark); }
.fs-btn--orange:hover { background: var(--fs-orange-dark); color: var(--fs-white); }
.fs-btn--white { background: var(--fs-white); color: var(--fs-olive); box-shadow: 0 3px 0 rgba(0, 0, 0, .18); }
.fs-btn--white:hover { color: var(--fs-olive-dark); }
.fs-btn--olive { background: var(--fs-olive); color: var(--fs-white); box-shadow: 0 3px 0 var(--fs-olive-dark); }
.fs-btn--olive:hover { background: var(--fs-olive-dark); color: var(--fs-white); }
.fs-btn--red { background: var(--fs-heartfelt); color: var(--fs-white); box-shadow: 0 3px 0 #A52A2E; }
.fs-btn--red:hover { background: #B82E33; color: var(--fs-white); }
.fs-btn--ghost { background: transparent; color: var(--fs-olive); border-color: var(--fs-olive); }
.fs-btn--ghost:hover { background: var(--fs-olive); color: var(--fs-white); }

.fs-pill {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font: 800 12px/1.2 var(--fs-font);
	letter-spacing: .08em;
	text-transform: uppercase;
}
.fs-pill--step { background: var(--fs-orange); color: var(--fs-white); }
.fs-pill--olive { background: var(--fs-olive); color: var(--fs-cream); }

/* ---------- Backgrounds: olive rays and cream pattern (asset-pack files) ---------- */

.fs-rays {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: radial-gradient(ellipse at 50% 45%, #557024 0%, var(--fs-olive) 45%, var(--fs-olive-dark) 100%);
	z-index: 0;
}
/* The supplied ray artwork, oversized and slowly turning. */
/* will-change keeps the slow turn on the GPU */
.fs-rays::before {
	will-change: rotate;
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: max(180vmax, 1800px);
	aspect-ratio: 16 / 9;
	translate: -50% -50%;
	background: url("../img/bg-olive-rays.webp") center / cover no-repeat;
	animation: fs-spin 140s linear infinite;
	opacity: .9;
}
.fs-rays::after { /* soft vignette so edges stay dark */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 50%, transparent 40%, rgba(31, 42, 10, .55) 100%);
}
.fs-rays--soft::before { opacity: .55; }

.fs-cream-pattern {
	background: var(--fs-page) url("../img/bg-cream-pattern.webp") center / cover no-repeat;
}

@keyframes fs-spin { to { rotate: 360deg; } }

/* ---------- Pop-in motion ---------- */

.fs-js [data-pop] { opacity: 0; transform: scale(.6) translateY(16px); }
.fs-js [data-pop].is-in {
	opacity: 1;
	transform: none;
	transition: opacity .3s ease-out, transform .42s var(--fs-ease-pop);
	transition-delay: calc(var(--i, 0) * .14s);
}

.fs-flag { width: 36px; height: 24px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); flex: none; }

/* ---------- Two reseller paths ---------- */

.fs-paths { isolation: isolate; }
.fs-paths__grid { z-index: 1; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.fs-path {
	background: var(--fs-page);
	border-radius: var(--fs-radius);
	padding: clamp(28px, 4vw, 44px);
	box-shadow: var(--fs-shadow-lg);
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.fs-path h2 { font-size: clamp(26px, 3vw, 34px); font-weight: 900; color: var(--fs-olive); line-height: 1.1; }
.fs-path p:not(.fs-eyebrow) { font-size: 16px; line-height: 1.6; font-weight: 500; color: var(--fs-muted); margin-bottom: 8px; }
.fs-path--portal { background: var(--fs-white); }


/* Site-wide Elementor and Popup Maker popups print their markup on Food Sock templates too; their CSS/JS isn't loaded there. */
.elementor-location-popup,
.pum-overlay { display: none !important; }

@media (prefers-reduced-motion: reduce) {
	.fs-js [data-pop] { opacity: 1; transform: none; }
	.fs-rays::before { animation: none; }
	.fs-btn { transition: none; }
}