/*
Theme Name: WCKD UI 
Theme URI: https://wckd.ca/ui/
Author: Cory Marazzo
Author URI: https://marazzo.ca
Description: Custom WordPress Theme using WCKD UI Frontend Design System
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wckd
*/

.menu-style{	
	background: rgba(255, 255, 255, 0.8);
	box-sizing: border-box;
	backdrop-filter: blur(10px);
	border-radius: 40px 0 0 40px;
}

.wckd-overlay-nav {
	position: fixed;
	top: auto;
	display: block;
	bottom: 20px;
	right: 10px;
	display: flex;
	gap: 10px;
}

.date-range-select label{display: flex;	align-items: center;margin:0;padding:0}
.date-range-select input{height: 24px}

.date-range-select .active{background: var(--background-color)}
.blur {backdrop-filter: blur(7px);}
.ctc-menu{padding: 16px!important;margin:0}
.ctc-menu >li a{display: block;padding: 8px;border-top: 1px solid #f1f1f1}
.ctc-menu >li a.is-active{	background: var(--background-color);}
/* Make iframe take full width and height of flyout */
.wckd-overlay-content.flyout .iframe-wrapper {
	flex: 1; /* take all remaining space */
	height: 100%; /* fallback */
	display: flex; /* enable flex for iframe inside */
}

/* Make iframe fill wrapper */
.wckd-overlay-content.flyout .iframe-wrapper iframe {
	width: 100%;
	height: 100%;
	border: none;
	flex: 1;
}

.rounded-tops > .column, .round-tops{
	-webkit-border-top-left-radius: 30px;
	-webkit-border-top-right-radius: 30px;
	-moz-border-radius-topleft: 30px;
	-moz-border-radius-topright: 30px;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
	overflow: hidden;
}


.font-weight-normal{font-weight: 400}
.font-weight-strong{font-weight: 700}
.border-thick{border: 4px solid #ffffff}
.fit-content{width: fit-content}
.background-color-fade2{background-color: rgba(255 255 255 / 60%)}

.bronze{background:#CD7F32}
.silver{background:#C0C0C0}
.gold{background:#D4AF37}

.round-icon{display:block;max-width: 44px;max-height: 44px;overflow: hidden;border-radius: 90px;overflow: hidden;margin-right: var(--large)}
.image-icon{display:block;max-width: 44px;max-height: 44px;overflow: hidden;border-radius: 90px;overflow: hidden;}
.pad-extra-large{padding: var(--extra-large)}
.layer-2{position: absolute;top:0;left: 0;right: 0}
.my-shape {
	display: block;
overflow: hidden;
overflow: hidden;
  border-top-left-radius: 50% 100%;
  border-top-right-radius: 50% 100%;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
	}
	.my-shape::after {
	  content: "";
	  position: absolute;
	  inset: 0; /* cover entire shape */
	  background: linear-gradient(to bottom, transparent 0%, white 100%);
	  pointer-events: none; /* let clicks pass through */
	}

:root {
	--orange: #EF4523;
	--blue: #0058a9;
	--green: #919E44;
	--red: #EF4523;
	--button-color: #919E44;
	--max-width: 1440px;
	--round-corners: 50px;
	--background-color:#FFF6E5;
	
	--link-color:var(--green);
	--link-color-hover:#5f682b;

}


body {
	background-color: #FFF6E5;
	background-image: url('assets/images/bg-04.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-attachment: fixed;
}



h1,
h2,
h3 {
	font-optical-sizing: auto;
	letter-spacing: 1px;
	font-family: cabin, sans-serif;
	font-weight: 700;
}

header {
	height: 100px;
	padding-top: 20px
}

.margin-0{margin:0px!important}

.highlight{color: var(--orange);font-weight: bold;display: block;font-size: var(--extra-large);}

.orange{color: var(--orange);}
.button.full-width{
	width: 100%;
	text-align: center;
	display: block;
}

.thick-border{border: 4px solid #ffffff}

.green2{
	background: rgba(145, 158, 68, 0.68);
	display: inline;
	padding: 4px;
	backdrop-filter: blur(10px);
}
.logo-icon svg {
	width: 60px;
	height: 60px;
	max-width: 100%;
	max-height: 100%;
}

#where-to-find-me.column{z-index: 1}
#alert-bar{border: 1px solid var(--red);}
#alert-bar p{color: var(--red)}
#alert-bar svg{stroke: var(--red);stroke-width:1px}
input, textarea{border-radius: var(--feather)}
a.button.red{
	line-height: 1px;
	height: auto;
	height: 44px;
	align-self: center;
	background: var(--red);
	border: 1px solid var(--red);
}
a.button.red:hover{color: var(--red);background: transparent}
.profile-preview .plus .image-icon{text-align: center;background: var(--background-color-fade);	line-height: 22px;}
.profile-preview .image-icon{height: 24px;width: 24px;overflow: hidden;border: 2px solid #ffffff;}
.profile-preview {margin:0 0 8px; transition: margin-left 0.3s ease-in-out, transform 0.3s ease;}
.profile-preview:hover {margin-left: 0;}
.profile-preview > li{margin-left: -5px !important;transition: margin-left 0.3s ease-in-out;}
.profile-preview:hover li{margin-left: 3px !important;}
.profile-preview + p {margin-left: -5px !important;transition: margin-left 0.3s ease-in-out;}
.profile-preview + p{
	margin: 0;
	text-transform: uppercase;
	line-height: 1;
}
.profile-preview:hover + p {margin-left: 5px !important;}

.background-image{overflow: hidden;border: 4px solid #ffffff}
.background-image img {
	z-index: 1;
	display: block;
}
.background-image + .columns {
	position: absolute;
	transform: translateY(-50%);
	top: 50%;
	z-index: 2;
}
.columns + .contrast {
	position: absolute;
	height: 100%;
	top: 0;
	z-index: -1;
}

ul.checkmarks{
	list-style-type: none;
	padding-left: 0;
	margin-left: 12px;
}
ul.checkmarks li::before {
	content: "✔";
	margin: 0 0 0 -20px;
	position: absolute;
}
.contrast{
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.1);
	z-index: -1;
}

.contact-list {
	display: flex;
	flex-direction: column;
	gap: 8px; /* Adjust spacing as needed */
}

.contact-item {
	display: flex;
	align-items: center;
	margin: 0 0 var(--small);
}

.contact-item .label {
	min-width: 80px; /* Set a fixed width for consistency */
	font-weight: bold;
	display: inline-block;
}
.contact-item a{color: var(--font-color)}


.wckd-gallery.round-thumbs a {
	max-width: 36px;
	overflow: hidden;
	display: block;
	float: left;
	margin: 12px -8px 12px 0;
	transition: 0.2s;
	padding: 0;
	border-radius: var(--border-radius);
	border: 3px solid var(--background-color-x);
}


header nav {
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
	width: 95%;
	/* Adjust width */
	padding: var(--small) var(--small) var(--small) var(--spacing);
	background: rgba(255, 255, 255, 0.8);
	border-radius: var(--round-corners);
	position: fixed;
	z-index: 999;
	margin: 20px var(--spacing) auto;
	left: 0;
	right: 0;
	box-sizing: border-box;
	box-shadow: var(--shadow);
	backdrop-filter: blur(10px);
}

header .button {
	border-radius: var(--round-corners) !important
}

.availability {
	background: var(--background-color);
	text-align: center;
	color: var(--font-color);
	border-radius: var(--feather);
	font-weight: bold;
}
.availability.available {
	background: var(--button-color);
	color: var(--button-text-color);
}

.mobile-only {
	display: none
}

.text-shadow {
	text-shadow: rgba(0, 0, 0, 0.1) 1px 1px 20px;
}

.overlay {
	position: absolute;
	width: 100%;
	height: 100%;
	/* backdrop-filter: blur(10px); */
	background: rgba(0, 0, 0, 0.1);
	z-index: 2;
}

.dark-theme {
	--button-color: #EF4523;
}

.headline {
	font-size: 2.2em;
	line-height: 1.1;
	font-weight: normal;
	letter-spacing: 1px
}

h3 {
	font-size: 1.2em;
	line-height: 1.4;
	font-weight: normal;
	letter-spacing: 1px
}
.menu a.button.text {
	margin-right: 30px
}
.wckd-menu li>a {
	border-radius: var(--round-corners);
}
.current-menu-item a {
	background: var(--background-color-dark)
}
.wckd-menu a .wckd-icon svg {
	stroke: var(--font-color);
}
.wckd-menu li>ul {
	background-color: var(--background-color-light);
	border-radius: var(--feather);
}
.wckd-menu li li:hover a {
	color: var(--font-color)
}

.wckd-checkers .column > .group{height:100%}
.button.text .image-border{min-width:90px}
.wckd-cards a.outline{width: 100%;border-radius:0}
#profile .image-border, #profile .round-thumbnail{	width: auto;}
#profile h2{
	z-index: 2;
	position: relative;
	margin-bottom: var(--extra-large);
	font-style: italic;
}
.wckd-gallery {
	overflow: hidden;
	margin: 0;
	padding: 0
}
.wckd-gallery{margin-bottom: 0}
.wckd-gallery.round-thumbs:hover a {
	margin-right: 0px
}
.wckd-gallery.round-thumbs button {
	max-width: 45px;
	overflow: hidden;
	margin: 12px -8px 12px 0;
	transition: 0.2s;
	padding: 0;
	border-radius: var(--round-corners);
	border: 3px solid var(--background-color-light);
}
.wckd-gallery.round-thumbs button:hover {
	border: none;
	max-width: 45px
}


.flat{margin:0}
.flat + p{margin:0 0 var(--medium)}

.round-corners-top {
	-webkit-border-top-left-radius: 40px;
	-webkit-border-top-right-radius: 40px;
	-moz-border-radius-topleft: 40px;
	-moz-border-radius-topright: 40px;
	border-top-left-radius: 40px;
	border-top-right-radius: 40px;
}

.round-corners-bottom {
	-webkit-border-bottom-right-radius: 40px;
	-webkit-border-bottom-left-radius: 40px;
	-moz-border-radius-bottomright: 40px;
	-moz-border-radius-bottomleft: 40px;
	border-bottom-right-radius: 40px;
	border-bottom-left-radius: 40px;
}


.overline {
	font-size: 90%;
	background: #EF4523;
	display: block;
	width: fit-content;
	padding: 2px 5px;
	color: #ffffff;
	margin-bottom: 0;
	border-radius: var(--round-corners);
}

.overline {
	line-height: 1.3;
	letter-spacing: 2px;
	text-transform: uppercase;
	font-size: 75%;
	font-weight: 500;
	display: block;
}

.wckd-slides .column {
	border: 4px solid #ffffff;
	border-radius: var(--round-corners);
	z-index: 1
}

.sticky {
	top: 140px
}
.text-shadow {
	text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 20px;
}

.round-thumbnail {
	display: block;
	height: auto
}
.image-border {
	display: block;
	border: 1px solid #919E44;
	padding: 4px 4px 4px;
	width: fit-content;
	border-radius: 90px;
	height: auto;
	width: 90px;
	float: left;
}
.image-icon {
	display: block;
	width: fit-content;
	border-radius: 90px;
	height: auto;
	width: 50px;
	float: left;
}
.image-icon-small {
	display: block;
	width: fit-content;
	border-radius: 90px;
	height: auto;
	width: 30px;
	float: left;
	margin: var(--spacing) 1px 4px;
	border: 2px solid #fff;
}

.quote-text {
	background: #FFF6E5;
	float: left;
	width: calc(100% - 150px);
	margin: 15px 0 0 15px;
	padding: 15px;
	border-radius: var(--feather);
}
.quote-text::after {
	content: "";
	position: absolute;
	bottom: 10px;
	left: -15px;
	width: 0;
	height: 0;
	border-left: none;
	border-right: 15px solid #FFF6E5;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}
.locations li {
	padding: 8px 0;
	border-top: 1px solid var(--border-color)
}
ul.service-area {
	margin: 0;
	padding: 0;
	font-size: 85%
}
ul.service-area>li {
	padding: 0;
	border-top: 1px solid var(--border-color);
	gap: 4px;
	display: flex;
	gap: 10px;
	padding: 4px 0;
	align-items: center;
}
ul.service-area ul {
	margin: 4px 0 0 24px;
	padding: 0
}
.service-address {
	margin: 4px 0 4px 32px;
	padding: 0;
}

/* Animations */
.animate.in-view>img {
	-webkit-animation: zoomIn 10s;
	-moz-animation: zoomIn 10s;
	-ms-animation: zoomIn 10s;
	-o-animation: zoomIn 10s;
	animation: zoomIn 10s;
}
.animate.fade-in {
	opacity: 0;
}
.animate.in-view.fade-in {
	animation: fade_In 1.5s forwards;
}
@keyframes fade_In {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.zoom-in{-webkit-animation: zoomIn 8s;-moz-animation: zoomIn 8s;-ms-animation: zoomIn 8s;-o-animation: zoomIn 8s;animation: zoomIn 8s;}
@-webkit-keyframes zoomIn {
  0% {-webkit-transform: scale(1.05)} 
  100% {-webkit-transform: scale(1)}
}

.animate.in-view.delay-1 {
	animation-delay: 0.25s;
}
.animate.in-view.delay-2 {
	animation-delay: 0.5s;
}
.animate.in-view.delay-3 {
	animation-delay: 1s;
}
.animate.in-view.delay-4 {
	animation-delay: 1.5s;
}


button.plate{background:none;border:none;position:absolute;right:30px;top: -55px}
.plate svg{position: absolute;height: 60px;width: 60px;top: -5px;max-width:initial;max-height:initial}
.plate .burger{filter: url(#eat-hamburger)}
.plate .x{opacity: 0;transform: scale(0);transition: transform 400ms}
.plate .line{fill: none;stroke: var(--font-color);stroke-width: 6px;stroke-linecap: round;stroke-linejoin: round;transform-origin: 50%;transition: stroke-dasharray 500ms 200ms, stroke-dashoffset 500ms 200ms, transform 500ms 200ms}
.plate .x .line{stroke-width: 4px;stroke: var(--font-color)}
.plate .active .line{transition: stroke-dasharray 500ms, stroke-dashoffset 500ms, transform 500ms}
.plate.active .x{opacity: 1;transform: scale(0.7);transition: transform 400ms 350ms}
.plate .line1{stroke-dasharray: 21 185.62753295898438;transition-delay: 0}
.plate .line2{stroke-dasharray: 21 178.6514129638672;transition-delay: 30ms}
.plate .line3{stroke-dasharray: 21 197.92425537109375;transition-delay: 60ms}
.plate .line4{stroke-dasharray: 21 190.6597137451172;transition-delay: 90ms}
.plate .line5{stroke-dasharray: 21 208.52874755859375;transition-delay: 120ms}
.plate .line6{stroke-dasharray: 21 186.59703063964844;transition-delay: 150ms}
.active.plate .line1{stroke-dasharray: 5 185.62753295898438;stroke-dashoffset: -141px}
.active.plate .line2{stroke-dasharray: 5 178.6514129638672;stroke-dashoffset: -137px}
.active.plate .line3{stroke-dasharray: 5 197.92425537109375;stroke-dashoffset: -176px}
.active.plate .line4{stroke-dasharray: 5 190.6597137451172;stroke-dashoffset: -159px}
.active.plate .line5{stroke-dasharray: 5 208.52874755859375;stroke-dashoffset: -139px}
.active.plate .line6{stroke-dasharray: 5 186.59703063964844;stroke-dashoffset: -176px}
.active.plate .x{transition: transform 400ms 250ms}
.desktop-only{display:flex}
.mobile-only{display:none!important}
.hamburger-btn{display: none}

@media (max-width: 768px){	
	
	.remove-background-on-mobile {background: none!important;}
	.center-on-mobile{text-align: center}
	:root {
		--spacing: var(--medium);
		--round-corners: 24px;
		--font-size-xxl: 230%;
}
#alert-bar,
#alert-bar p{display: block; text-align: center}
#alert-bar .group .wckd-icon{display: none}

#profile h2{width: auto}
.head .span-2{grid-column: auto}

.menu-container {position: absolute;right: 140px;top: 56px;}
.menu-container .wckd-menu{display: none;background: var(--background-color-light);border-radius: var(--round-corners)}
.hamburger-btn{display: block;background: none;border: none;font-size: 24px;cursor: pointer}
.menu-container.active .wckd-menu{display: block}

#hero,
.background-image img{border-radius: 0;}
.background-image{
		border-radius: 0;
		border: 0;
		display: block;
	}
	.background-image + .columns{
			position: relative;
			transform: none;
			top: auto;
			background-color: var(--green);
		}
		.column-image.pad-left{padding:0}
		
		img.width-50{width: 100%}
.wckd-checkers .column{display: block}		
.wckd-menu.horizontal.align-right li{width: 33.33%}
#legal .column ul,
#legal .column.right{text-align: center;margin:0 auto}
}

 .logomark{display: block; max-width: 80%; width:100%;height:40px}
@media (max-width: 540px){	
#for-practitioners > div{background: none!important;}

}