/*
Theme Name: Healthy Foundations
Theme URI: https://wckd.ca/
Author: WCKD Marketing
Author URI: https://wckd.marketing/
Description: Custom website using WCKD UI + WCKD Forms based on original theme by Frolic Design, enhanced by WCKD Marketing.
Version: 2.0.1
Text Domain: wckd
*/
:root{

    --yellow: #FBCB34;
    --pink:   #E58A9B;
    --blue:   #6FA8DC;
    --orange: #df7558;
    --green:  #7FB77E;
    --purple: #A084CA;
    --red:    #D65A5A;
    --brown:  #868079;
    --beige:#A1887F;
    --white:  #FFFFFF;
    --black:#24292E;

	--brand-color:var(--orange);
	--link-color: var(--orange);
    --button-bg: var(--brand-color);
    --header-height:90px;
    --line-color:#999999 ;
}
[data-theme="light"]{
--font-color:#454545;
	--background-color: #ffffff;
	--font-color:#444444;
	--font-color-header: #121212;
  	--button-bg: var(--brand-color);
  	--brand-primary:var(--orange);
	--button-bg-hover: #D95D39;
	--button-bg-active: #D95D39;
	--button-bg-focus:#D95D39;
	--button-bg-disabled:  var(--background-color-fade);
	--button-text: var(--white);
	--button-text-hover: var(--white);
	--button-text-active: var(--white);
	--button-text-focus: var(--white);
	--button-text-disabled:  var(--font-color);
	--brand-color:var(--orange);
	--link-color: var(--orange);

}
a.card:hover{text-decoration: none;}
.wf-honeypot {
	position: absolute;
	left: -9999px;
	height: 0;
}
.wckd-carousel.borders{    border-top-right-radius: 100px;}

.admin-bar #site-header{height: calc(var(--header-height) + 32px);}
.admin-bar #site-header nav{margin-top:32px}


svg{fill: var(--brown);}

/* WCKD UI v2: legacy flex utility names still used in parts/templates */
.flex.items-center,
a.flex.items-center {
	align-items: center;
}
.flex.align-middle {
	align-items: center;
}
.overlay.align-middle {
	align-items: center;
	justify-content: center;
}
#site-header .site-header-cta {
	flex-shrink: 0;
	order: 3;
}
.shadow{box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}

h1,
h2,
.ws-title,
.alternativeHeadline {
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

/* Blockquotes (page builder + content): handwriting face; normal style reads clearer than faux-italic on Caveat */
blockquote,
.quote {
	font-family: "Caveat", cursive;
	font-style: normal;
	font-weight: 500;
	border: none;	
}
blockquote p {
    font-size: var(--text-5xl);
    max-width: var(--width-m);
    text-align: center;
    line-height: 1;
	margin: 0 auto;
}

.button, button{border-radius: var(--size-xs);border-color: var(--white);box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.16);}
.hamburger-btn,
.accordion-toggle,
.carousel-dot{box-shadow: none;}


h3 a{color: var(--font-color);font-size: var(--text-xl);}

.default-page h2:first-of-type {text-align: center;margin: 0 auto var(--size-xl);max-width: var(--width-s);;}

.ticker{color: #ffffff;z-index: 3}

.order-1{order: 1}
.order-2{order: 2}

.wckd-slides > .column{border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;}

.wckd-section-zoom {display: flex;justify-content: center;align-items: center;overflow: hidden;margin: 0 auto;}
.animate.in-view > img {animation: zoomIn 10s;}
.zoom-in.in-view{transition: transform 10s ease; transform: scale(1.025);}

/* Opacity gate only for non-lists; ul/ol.animate.fade-in never get this (their > li stagger instead). */
.animate.fade-in:not(:is(ul, ol)) {
	opacity: 0;
}
/* Only lists that have both .animate and .fade-in on the same node; IO adds .in-view on that list. */
:is(ul, ol).animate.fade-in > li {
	opacity: 0;
	transform: translateY(8px);
}
.animate.in-view.fade-in:not(:is(ul, ol)) {
	animation: fade_In 0.9s ease-in-out forwards;
}
:is(ul, ol).animate.fade-in.in-view > li {
	animation: fade_In 0.55s ease-in-out forwards;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(1) {
	animation-delay: 0s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(2) {
	animation-delay: 0.08s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(3) {
	animation-delay: 0.16s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(4) {
	animation-delay: 0.24s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(5) {
	animation-delay: 0.32s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(6) {
	animation-delay: 0.4s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(7) {
	animation-delay: 0.48s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(8) {
	animation-delay: 0.56s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(9) {
	animation-delay: 0.64s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(10) {
	animation-delay: 0.72s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(11) {
	animation-delay: 0.8s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(12) {
	animation-delay: 0.88s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(13) {
	animation-delay: 0.96s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(14) {
	animation-delay: 1.04s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(15) {
	animation-delay: 1.12s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(16) {
	animation-delay: 1.2s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(17) {
	animation-delay: 1.28s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(18) {
	animation-delay: 1.36s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(19) {
	animation-delay: 1.44s;
}
:is(ul, ol).animate.fade-in.in-view > li:nth-child(20) {
	animation-delay: 1.52s;
}
@media (prefers-reduced-motion: reduce) {
	:is(ul, ol).animate.fade-in.in-view > li {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

@keyframes fade_In {
  0% {
	opacity: 0;
	transform: translateY(8px);
  }
  100% {
	opacity: 1;
	transform: translateY(0);
  }
}
.animate.in-view.fade-in.delay-1 { animation-delay: 0.2s; }
.animate.in-view.fade-in.delay-2 { animation-delay: 0.4s; }
.animate.in-view.fade-in.delay-3 { animation-delay: 0.6s; }
.animate.in-view.fade-in.delay-4 { animation-delay: 0.8s; }
.animate.in-view.fade-in.delay-5 { animation-delay: 1s; }


.wckd-maps-hours > .wckd-toggle {
	appearance: none;
	border: 0;
	margin: 0;
	font: inherit;
	text-align: inherit;
	cursor: pointer;
	display: flex;
	width: 100%;
	align-items: flex-start;
	box-sizing: border-box;
	padding: var(--size-xs) var(--size-s);
	border-radius: var(--size-xs);
	text-decoration: none;
	color: inherit;
}
.wckd-maps-hours > .wckd-toggle:hover,
.wckd-maps-hours > .wckd-toggle:focus-visible {
	text-decoration: none;
}
.wckd-maps-hours .wckd-maps-hours__toggle-body {
	flex: 1;
	min-width: 0;
}
.wckd-maps-hours .wckd-icon {
	margin-inline-start: auto;
}
.wckd-post-toc .wckd-icon {
	margin-inline-start: auto;
}

.title-block {
    position: relative;
    background-color: #FBEFEB;
    text-align: center;
    padding: 20px;
    margin: -40px 5% 0;
    z-index: 2;
	box-shadow: var(--shadow);
}

/* Titlebar heroes: ::before fades in; content stays above (fully opaque text). */
@keyframes wckd-bg-titlebar-fade-in {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.bg-image-1,
.bg-image-2 {
	position: relative;
	isolation: isolate;
}
.bg-image-1::before,
.bg-image-2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0;
	animation: wckd-bg-titlebar-fade-in 0.9s ease-in-out forwards;
	pointer-events: none;
}
.bg-image-1::before {
	background: url("assets/bg-titlebar.webp") center / cover no-repeat;
}
.bg-image-2::before {
	background: url("assets/bg-titlebar2.webp") center / cover no-repeat;
}
.bg-image-1 > *,
.bg-image-2 > * {
	position: relative;
	z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
	.bg-image-1::before,
	.bg-image-2::before {
		animation: none;
		opacity: 1;
	}
}

.bg-titlebar {background: url("assets/bg-repeat.webp") center repeat;}
.banner{background-color: rgba(216, 212, 212, 0.43);overflow: hidden;}
.banner > div{z-index: 2;position: relative;}
.banner:after {
    width: 414px;
    height: 515px;
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%) rotateZ(20deg);
    background-image: url("assets/leaves-decor.webp");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;
    z-index: 1;
    right: -10%;
}

/* Fade auto-truncated excerpt copy (excerpt_more is empty); no “…” suffix. */
.entry-excerpt-fade{
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.35em), transparent 100%);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 1.35em), transparent 100%);

	margin-bottom: var(--size-m);

}
.banner-image img {
    border-top-right-radius: 100px;
    border-bottom-left-radius: 100px;
}
.wckd-card a{color: var(--font-color);}
/* Leaf tile: sharp TL + BR, heavy round TR + BL; soft shadow; grey artwork inside */
.service-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	box-sizing: border-box;
	width:100px;
	height: 100px;
	padding:20px;
	margin-inline: auto;
	margin-bottom: var(--size-l);
	text-align: center;
	background-color: var(--white);
	border-radius: 0 50% 0 50%;
	box-shadow:var(--shadow);
	color: #999999;
}
.service-icon--svg svg * {
	fill: currentColor;
	stroke: currentColor;
}
.service-icon--svg svg [fill="none"] {
	fill: none;
}
.service-icon--svg svg [stroke="none"] {
	stroke: none;
}

.service-icon--img img {
	display: block;
	width: 100%;
	max-width: 3rem;
	height: auto;
	object-fit: contain;
	flex-shrink: 0;
}

/* Featured services: equal-height columns + full-height clickable card */
.columns.match-height > .column.wckd-card {
	display: flex;
	flex-direction: column;
}

.columns.match-height > .column.wckd-card > a {
	flex: 1 1 auto;
	align-self: stretch;
	box-sizing: border-box;
}

/*
 * Horizontal carousels: slides already share one row height via flex align-items: stretch,
 * but the slide must be a column flex container for margin-top: auto on the CTA to work.
 */
.wckd-carousel.match-height > .column {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-height: 0;
}

.wckd-carousel.match-height > .column > a.button {
	margin-top: auto;
}

.team-profile-portrait {
    z-index: 2;
    max-height: 90vh;
	max-width: 80%;
    border-radius: 255px;
    overflow: hidden;
    margin: 0 auto;
}

/* .wckd-journey: styles + scroll behaviour live in includes/wckd-ui.css + wckd-ui.js (WCKD UI Journey component). */
.sticky{top:var(--size-l)}