/* =========================================================================
   FitStream — site.css
   Design layer on top of theme.json tokens. Palette: "Karoo Sage".
   ========================================================================= */

:root {
	--fs-shadow: 0 4px 24px rgba(31, 42, 46, 0.06);
	--fs-shadow-lg: 0 12px 40px rgba(31, 42, 46, 0.10);
	--fs-radius: 16px;
	--fs-radius-sm: 10px;
	--fs-header-h: 76px;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }

/* Headings: tighten measure, balance wraps */
h1, h2 { text-wrap: balance; letter-spacing: -0.015em; }
h1 { line-height: 1.04; }
p { text-wrap: pretty; }

/* ----- Eyebrow / kicker ----- */
.fs-eyebrow {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--brand);
	margin: 0 0 0.5rem;
}

/* ----- Buttons ----- */
.wp-block-button__link { transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.wp-block-button__link:hover { transform: translateY(-1px); }

/* Secondary / WhatsApp ghost button */
.is-style-fs-ghost .wp-block-button__link,
.fs-btn-ghost .wp-block-button__link {
	background: transparent !important;
	color: var(--wp--preset--color--brand-deep) !important;
	border: 1.5px solid var(--wp--preset--color--brand) !important;
}
.is-style-fs-ghost .wp-block-button__link:hover,
.fs-btn-ghost .wp-block-button__link:hover {
	background: var(--wp--preset--color--brand) !important;
	color: var(--wp--preset--color--white) !important;
}
/* Ghost on dark bands */
.fs-cta .is-style-fs-ghost .wp-block-button__link,
.fs-cta .fs-btn-ghost .wp-block-button__link {
	color: #fff !important;
	border-color: rgba(255,255,255,.6) !important;
}
.fs-cta .is-style-fs-ghost .wp-block-button__link:hover,
.fs-cta .fs-btn-ghost .wp-block-button__link:hover {
	background: #fff !important;
	color: var(--wp--preset--color--brand-deep) !important;
}

.fs-wa-inline { display: inline-flex; align-items: center; gap: .4rem; }

/* ----- Header ----- */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
	transition: background-color .25s ease, box-shadow .25s ease, border-color .25s ease;
	border-bottom: 1px solid transparent;
}
header.wp-block-template-part.is-scrolled {
	background: var(--wp--preset--color--white);
	box-shadow: var(--fs-shadow);
	border-bottom-color: var(--wp--preset--color--border-mist);
}
.fs-header { padding-block: 0; min-height: var(--fs-header-h); }
.fs-logo img, .fs-logo svg { display: block; height: 34px; width: auto; }
.wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--wp--preset--color--brand-ink);
	text-decoration: none;
}
.wp-block-navigation .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--brand-deep); }

/* ----- Section rhythm ----- */
.fs-section { padding-block: clamp(3rem, 7vw, 6rem); }
.fs-section--tight { padding-block: clamp(2rem, 4vw, 3rem); }
.fs-lede { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--brand-ink); line-height: 1.55; }
.fs-muted { color: var(--wp--preset--color--slate); }

/* ----- Hero ----- */
.fs-hero { position: relative; overflow: hidden; padding-top: calc(var(--fs-header-h) + clamp(1.5rem,4vw,3rem)); padding-bottom: clamp(3rem,6vw,5.5rem); }
.fs-hero h1 { font-size: var(--wp--preset--font-size--xx-large); margin: 0 0 1rem; }
.fs-hero .fs-hero__sub { font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--brand-ink); max-width: 34ch; }
.fs-hero__micro { font-size: 0.8125rem; color: var(--wp--preset--color--slate); margin-top: 1rem; }
.fs-hero__media img { border-radius: var(--fs-radius); box-shadow: var(--fs-shadow-lg); object-fit: cover; width: 100%; }
.fs-hero__media { position: relative; }
.fs-hero__media::after {
	content: ""; position: absolute; inset: auto -8% -10% auto; width: 60%; height: 60%;
	background: radial-gradient(closest-side, rgba(62,124,113,.18), transparent 70%); z-index: -1;
}

/* ----- Trust band ----- */
.fs-trust { background: var(--wp--preset--color--white); border-block: 1px solid var(--wp--preset--color--border-mist); }
.fs-trust__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.fs-trust__item { display: flex; align-items: center; gap: .6rem; font-weight: 600; font-size: .95rem; color: var(--wp--preset--color--brand-ink); }
.fs-tick { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--wp--preset--color--check); position: relative; }
.fs-tick::after { content: ""; position: absolute; left: 7px; top: 4px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@media (max-width: 781px) { .fs-trust__grid { grid-template-columns: repeat(2, 1fr); } }

/* ----- Cards (steps / benefits) ----- */
.fs-cards { display: grid; gap: 1.5rem; }
.fs-cards--3 { grid-template-columns: repeat(3, 1fr); }
.fs-cards--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1023px) { .fs-cards--3, .fs-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .fs-cards--3, .fs-cards--4 { grid-template-columns: 1fr; } }

.fs-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-mist);
	border-radius: var(--fs-radius);
	padding: 1.75rem;
	box-shadow: var(--fs-shadow);
	height: 100%;
}
.fs-card h3 { margin: .25rem 0 .5rem; font-size: 1.25rem; }
.fs-card p { margin: 0; color: var(--wp--preset--color--slate); }
.fs-step__num {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 50%;
	background: var(--wp--preset--color--brand); color: #fff; font-weight: 700; font-family: var(--wp--preset--font-family--body);
	margin-bottom: .75rem;
}

/* ----- Reassurance / panels ----- */
.fs-panel {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-mist);
	border-radius: var(--fs-radius);
	padding: clamp(1.75rem, 4vw, 3rem);
	box-shadow: var(--fs-shadow);
}

/* ----- FAQ accordion ----- */
.fs-faq { display: grid; gap: .75rem; }
.fs-faq__item {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-mist);
	border-radius: var(--fs-radius-sm);
	overflow: hidden;
}
.fs-faq__item summary {
	list-style: none; cursor: pointer; padding: 1.1rem 1.35rem;
	font-weight: 600; font-size: 1.05rem; color: var(--wp--preset--color--brand-ink);
	display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.fs-faq__item summary::-webkit-details-marker { display: none; }
.fs-faq__item summary::after {
	content: "+"; font-size: 1.5rem; font-weight: 400; color: var(--wp--preset--color--brand); transition: transform .2s ease; line-height: 1;
}
.fs-faq__item[open] summary::after { transform: rotate(45deg); }
.fs-faq__item .fs-faq__body { padding: 0 1.35rem 1.25rem; color: var(--wp--preset--color--slate); }
.fs-faq__group-title { margin: 1.5rem 0 .5rem; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--brand); font-weight: 600; }

/* ----- CTA band ----- */
.fs-cta {
	background: linear-gradient(135deg, var(--wp--preset--color--brand-deep), var(--wp--preset--color--brand));
	border-radius: var(--fs-radius);
	color: #fff;
	padding: clamp(2.25rem, 5vw, 3.75rem);
	text-align: center;
}
.fs-cta h2 { color: #fff; margin: 0 0 1.25rem; }
.fs-cta p { color: rgba(255,255,255,.85); }

/* ----- Forms ----- */
.fs-form { display: grid; gap: 1.1rem; }
.fs-form .fs-field { display: grid; gap: .35rem; }
.fs-form label { font-weight: 600; font-size: .95rem; color: var(--wp--preset--color--brand-ink); }
.fs-form .fs-req { color: var(--wp--preset--color--accent-deep); }
.fs-form input[type="text"],
.fs-form input[type="email"],
.fs-form input[type="tel"],
.fs-form select,
.fs-form textarea {
	width: 100%;
	font: inherit;
	padding: .8rem .9rem;
	border: 1.5px solid var(--wp--preset--color--border-mist);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--brand-ink);
	transition: border-color .15s ease, box-shadow .15s ease;
}
.fs-form input:focus, .fs-form select:focus, .fs-form textarea:focus {
	outline: none; border-color: var(--wp--preset--color--brand);
	box-shadow: 0 0 0 3px rgba(62,124,113,.15);
}
.fs-form textarea { min-height: 96px; resize: vertical; }
.fs-form .fs-hint { font-size: .8125rem; color: var(--wp--preset--color--slate); }
.fs-consent { display: flex; gap: .65rem; align-items: flex-start; font-size: .9rem; color: var(--wp--preset--color--brand-ink); line-height: 1.5; }
.fs-consent input[type="checkbox"] { margin-top: .2rem; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--wp--preset--color--brand); }
.fs-form button[type="submit"] {
	justify-self: start;
	font: inherit; font-weight: 600; cursor: pointer;
	background: var(--wp--preset--color--accent); color: #fff; border: none;
	padding: .95rem 2rem; border-radius: 999px;
	transition: background-color .18s ease, transform .18s ease;
}
.fs-form button[type="submit"]:hover { background: var(--wp--preset--color--accent-deep); transform: translateY(-1px); }
.fs-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.fs-form-note { font-size: .8125rem; color: var(--wp--preset--color--slate); }
.fs-form-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border-mist);
	border-radius: var(--fs-radius);
	padding: clamp(1.5rem, 4vw, 2.5rem);
	box-shadow: var(--fs-shadow);
}

/* ----- Footer ----- */
footer.wp-block-template-part { background: var(--wp--preset--color--brand-deep); color: var(--wp--preset--color--surface); }
footer.wp-block-template-part a { color: var(--wp--preset--color--surface); text-decoration: none; opacity: .9; }
footer.wp-block-template-part a:hover { opacity: 1; text-decoration: underline; }
.fs-footer h3, .fs-footer h4 { color: #fff; }
.fs-foot-fine { color: rgba(250,247,241,.6); font-size: .8125rem; line-height: 1.6; }
.fs-foot-fine strong { color: rgba(255,255,255,.85); }

/* ----- Footer newsletter (on dark sage) ----- */
.fs-newsletter input[type="email"] {
	background: #fff !important;
	color: var(--wp--preset--color--brand-ink) !important;
	border: 1px solid rgba(255,255,255,.25) !important;
}
.fs-newsletter input[type="email"]::placeholder { color: var(--wp--preset--color--slate); opacity: 1; }
.fs-newsletter button[type="submit"] {
	background: var(--wp--preset--color--accent) !important;
	color: #fff !important;
	border: none !important;
}
.fs-newsletter button[type="submit"]:hover { background: var(--wp--preset--color--accent-deep) !important; }
.fs-newsletter .fs-consent { color: rgba(250,247,241,.9); }
.fs-newsletter .fs-consent input[type="checkbox"] { accent-color: var(--wp--preset--color--accent); }

/* ----- Form success / WhatsApp CTA / error ----- */
.fs-form-success h3 { margin: 0 0 .5rem; font-family: var(--wp--preset--font-family--heading); }
.fs-form-success p { margin: 0 0 1rem; color: var(--wp--preset--color--slate); }
.fs-wa-cta {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: #fff !important;
	padding: .85rem 1.6rem;
	border-radius: 999px;
	text-decoration: none !important;
	font-weight: 600;
}
.fs-wa-cta:hover { background: var(--wp--preset--color--accent-deep); }
.fs-newsletter-success { color: var(--wp--preset--color--surface); }
.fs-newsletter-success .fs-wa-cta { margin-top: .5rem; }
.fs-form-error { color: var(--wp--preset--color--accent-deep); font-weight: 600; margin-bottom: 1rem; }

/* ----- Mobile header: keep it on one tidy row ----- */
@media (max-width: 781px) {
	.fs-header { min-height: 64px; }
	.fs-logo img, .fs-logo svg { height: 30px; }
	.fs-header .wp-block-button__link { white-space: nowrap; padding: 0.55rem 1rem; font-size: 0.9rem; }
	/* Hide the secondary "Join the list" chip on small screens to save room (WhatsApp group is primary) */
	.fs-header .fs-btn-ghost { display: none; }
	.wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--brand-ink); }

	/* Mobile nav overlay: clean left-aligned column, fully contained in the viewport */
	.wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--surface) !important;
		padding: 1.5rem !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
		width: 100% !important;
		padding-top: 3.5rem;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		text-align: left !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 1.4rem !important;
		width: 100% !important;
		text-align: left !important;
	}
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { width: 100%; text-align: left !important; justify-content: flex-start !important; }
	.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
		font-size: 1.3rem;
		color: var(--wp--preset--color--brand-ink);
		text-align: left !important;
	}
}

/* ----- Reveal animation ----- */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ----- Mobile hero stacking ----- */
@media (max-width: 781px) {
	.fs-hero .fs-hero__sub { max-width: none; }
	.fs-hero__media { margin-top: 2rem; }
}

/* ===== Wellness brand additions ===== */

/* Cover hero with lifestyle photo */
.fs-cover.wp-block-cover { min-height: clamp(520px, 78vh, 760px); align-items: center; }
/* Flex column with a single left edge: eyebrow, heading, subhead, buttons + micro all align left. */
.fs-cover .wp-block-cover__inner-container {
	box-sizing: border-box;
	width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem;
	display: flex; flex-direction: column; align-items: flex-start; text-align: left;
}
.fs-cover .wp-block-cover__inner-container > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 640px; width: auto; }
.fs-cover .wp-block-buttons { justify-content: flex-start; max-width: none; }
.fs-cover h1 { color: #fff; font-size: var(--wp--preset--font-size--xx-large); margin: 0 0 1rem; }
.fs-cover .fs-cover__sub { color: rgba(255,255,255,.94); font-size: var(--wp--preset--font-size--large); }
.fs-cover .fs-hero__micro { color: rgba(255,255,255,.8); }
/* Hero secondary (ghost) button: white outline so it reads on the photo. */
.fs-cover .fs-btn-ghost .wp-block-button__link { background: transparent !important; color: #fff !important; border: 1.5px solid rgba(255,255,255,.8) !important; }
.fs-cover .fs-btn-ghost .wp-block-button__link:hover { background: #fff !important; color: var(--wp--preset--color--brand-deep) !important; border-color: #fff !important; }

/* Image feature cards (lifestyle pillars) */
.fs-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .fs-pillars { grid-template-columns: 1fr; } }
.fs-pillar { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--border-mist); border-radius: var(--fs-radius); overflow: hidden; box-shadow: var(--fs-shadow); }
.fs-pillar img { display: block; width: 100%; height: 210px; object-fit: cover; }
.fs-pillar__body { padding: 1.5rem; }
.fs-pillar__body h3 { margin: 0 0 .5rem; font-size: 1.25rem; }
.fs-pillar__body p { margin: 0; color: var(--wp--preset--color--slate); }

/* Split image + text band */
.fs-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (max-width: 900px) { .fs-split { grid-template-columns: 1fr; } }
.fs-split img { width: 100%; border-radius: var(--fs-radius); box-shadow: var(--fs-shadow-lg); object-fit: cover; }

/* Shop / catalog placeholder */
.fs-shop-soon {
	background: var(--wp--preset--color--white);
	border: 1px dashed var(--wp--preset--color--brand);
	border-radius: var(--fs-radius);
	padding: clamp(2rem, 5vw, 3.5rem);
	text-align: center;
}
.fs-shop-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; margin-top: 2rem; }
@media (max-width: 781px) { .fs-shop-grid { grid-template-columns: repeat(2,1fr); } }
.fs-shop-card { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border-mist); border-radius: var(--fs-radius-sm); aspect-ratio: 3/4; display: flex; align-items: center; justify-content: center; color: var(--wp--preset--color--slate); font-weight: 600; }
.fs-disclaimer { font-size: .8125rem; color: rgba(250,247,241,.6); line-height: 1.6; }