/*
 * Food Sock brand: fonts, colours and the shared header pieces.
 * Values come from the Food Sock Creative Framework v1.0, section 2.
 * Loaded on every page. Meant to be reused on reseller.foodsock.co.za and
 * the Become a Reseller course so all three look like one family.
 */

/* Poppins (Open Font License, from the asset pack), latin subset */
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/poppins-500.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-700.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-800.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 900; font-display: swap; src: url("../fonts/poppins-900.woff2") format("woff2"); }

:root {
	/* Core colours */
	--fs-orange: #DB7300;       /* burnt orange: highlights, 2nd headline line, buttons */
	--fs-orange-dark: #B35E00;  /* hover/pressed for orange buttons */
	--fs-olive: #435818;        /* headlines, end cards, openers */
	--fs-olive-dark: #2F3F10;   /* text on cream, outlines, shadows */
	--fs-cream: #F9D89E;        /* outlines, cards */
	--fs-page: #FFF4DD;         /* page cream */
	--fs-plant: #3E8E2E;        /* plant-based pill ONLY */
	--fs-heartfelt: #D2373C;    /* Heartfelt Foods ONLY */
	--fs-white: #FFFFFF;

	--fs-text: var(--fs-olive-dark);
	--fs-muted: #5E6648;
	--fs-line: #EADBB9;

	--fs-font: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--fs-radius: 22px;
	--fs-radius-sm: 14px;
	--fs-shadow: 0 2px 4px rgba(47, 63, 16, .06), 0 10px 28px rgba(47, 63, 16, .10);
	--fs-shadow-lg: 0 8px 16px rgba(47, 63, 16, .10), 0 24px 56px rgba(47, 63, 16, .16);
	--fs-wrap: 1240px;
	--fs-gutter: clamp(16px, 4vw, 32px);
	--fs-ease-pop: cubic-bezier(.34, 1.56, .64, 1); /* slight overshoot */
}

/* ---------- Utility bar (above the Blocksy header) ---------- */

.fs-utility {
	background: var(--fs-olive-dark);
	color: var(--fs-cream);
	font: 500 13px/1.3 var(--fs-font);
	position: relative;
	z-index: 60;
}
.fs-utility__inner {
	max-width: var(--fs-wrap);
	margin: 0 auto;
	padding: 8px var(--fs-gutter);
	display: flex;
	justify-content: space-between;
	gap: 16px;
}
.fs-utility__link {
	color: var(--fs-white);
	text-decoration: none;
	display: inline-flex;
	gap: 6px;
	align-items: baseline;
	padding: 4px 0;
}
.fs-utility__link strong { font-weight: 700; color: var(--fs-cream); }
.fs-utility__link:hover strong,
.fs-utility__link:focus-visible strong { text-decoration: underline; text-underline-offset: 3px; }
.fs-utility__link:focus-visible { outline: 2px solid var(--fs-cream); outline-offset: 2px; border-radius: 4px; }
.fs-utility__muted { color: rgba(249, 216, 158, .78); }

@media (max-width: 720px) {
	.fs-utility__inner { justify-content: center; }
	.fs-utility__link--join { display: none; } /* shown in the hero and the reseller band instead */
}

/* Poppins everywhere: Blocksy's base font (set to Noto Sans in the Customizer) still showed in
   anything not styled by us, e.g. blog card summaries. */
body { --theme-font-family: var(--fs-font); }
/* Same for headings: the Customizer still sets h1–h6 to Staatliches (old brand), which showed on the
   Become a Reseller course. */
:is(h1, h2, h3, h4, h5, h6) { --theme-font-family: var(--fs-font); --theme-font-weight: 800; }

/* ---------- Header: brand font and orange Buy Now ---------- */

#header,
#offcanvas { font-family: var(--fs-font); }

#header .ct-header-cta .ct-button {
	background: var(--fs-orange);
	border-color: var(--fs-orange);
	color: var(--fs-white);
	font-family: var(--fs-font);
	font-weight: 700;
	border-radius: 999px;
	padding-inline: 22px;
	box-shadow: 0 2px 0 var(--fs-orange-dark);
	transition: background .15s, transform .15s;
}
#header .ct-header-cta .ct-button:hover,
#header .ct-header-cta .ct-button:focus-visible {
	background: var(--fs-orange-dark);
	border-color: var(--fs-orange-dark);
	transform: translateY(-1px);
}

#header .site-logo-container { display: flex; align-items: center; }
#header .site-logo-container img { width: auto; height: auto; max-height: 56px; }

/* ---------- Footer: olive-dark, cream headings, logo on a white card ---------- */

[data-footer*="type-1"] .ct-footer {
	background: var(--fs-olive-dark);
	border-top: 6px solid var(--fs-orange);
	font-family: var(--fs-font);
}
[data-footer*="type-1"] .ct-footer [data-row*="middle"] > div { --container-spacing: 72px; --columns-gap: 48px; }
[data-footer*="type-1"] .ct-footer [data-row*="bottom"] > div { --container-spacing: 24px; }
[data-footer*="type-1"] .ct-footer .ct-widget {
	--theme-text-color: rgba(255, 255, 255, .88);
	--theme-link-initial-color: #FFFFFF;
	--theme-link-hover-color: var(--fs-cream);
	font-family: var(--fs-font);
	font-weight: 500;
}
[data-footer*="type-1"] .ct-footer :is(p, a, li, span, div, h2, h3, h4) { font-family: var(--fs-font); }
[data-footer*="type-1"] .ct-footer .ct-widget { --theme-heading-color: var(--fs-cream); }
/* The Customizer's Additional CSS relabels the third footer heading "Details" with an overlay pinned
   to the left, which sat off-centre on phones. Let the label follow the heading's own alignment. */
[data-footer*="type-1"] #block-14 h4.wp-block-heading::after { left: 0; right: 0; text-align: inherit; }
[data-footer*="type-1"] .ct-footer .widget-title {
	color: var(--fs-cream);
	font-family: var(--fs-font);
	font-weight: 800;
	font-size: 17px;
	letter-spacing: .02em;
}
[data-footer*="type-1"] [data-id="copyright"] { --theme-text-color: rgba(249, 216, 158, .75); font-family: var(--fs-font); }
.ct-back-to-top {
	--top-button-background-color: var(--fs-orange);
	--top-button-background-hover-color: var(--fs-orange-dark);
	--theme-icon-color: #FFFFFF;
	--theme-icon-hover-color: #FFFFFF;
	border-radius: 999px !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.fs-logo-card {
	display: inline-block;
	background: var(--fs-white);
	border-radius: 18px;
	padding: 18px 22px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
}
.fs-logo-card img { display: block; width: 200px; height: auto; }

@media (prefers-reduced-motion: reduce) {
	#header .ct-header-cta .ct-button { transition: none; }
}

/* Popup Maker popups stay hidden until opened (its own stylesheet is dropped on the
   lean Food Sock templates, which left the HelderbergFM EFT popup showing as text).
   Popup Maker sets display inline when a popup opens, so this doesn't block it. */
.pum-overlay { display: none; }