/*
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
*/

:root {
--brown: #C89F74;
--orange: #D87D0D;
--yellow: #E1A851;
--blue: #4A5A7D;

--font: 300 1.25em/1.4 "Cormorant Garamond", serif;
--font-2: Arial, sans-serif;
--font-size-xxs: 0.512rem;
--font-size-xs: 0.8rem;
--font-size-s: 1rem;
--font-size-m: 1.1rem;
--font-size-l: 1.3rem;
--font-size-xl: 1.5rem;
--font-size-xxl: 1.7rem;
--font-size-xxxl: 3rem;
--font-size-xxxxl: 3.4rem;
--font-size-display: clamp(3.3em, 5vw, 7rem);
--font-color: #ffffff;
--header-font-color: var(--orange);
--header-font-color2: var(--yellow);

--background-color: #332421;
--background-color-light: rgb(255 255 255 / 0.5);
--background-color-dark: #3D3532;
--background-color-fade: rgba(0, 0, 0, 0.2);

--shadow: 0 0 #0000, 0 0 #0000, 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--strong: 400;

--link-color: #E1A851;
--link-color-hover: #ffffff;
--button-color: #366FB9;
--button-color-hover: #366FB9;
--button-color-active: #366FB9;
--button-text-color: #ffffff;
--button-text-color-hover: #ffffff;
--button-text-color-active: #ffffff;
--border-color: rgba(255,255,255,0.4);

}

.screen-reader-text{display: none;}

.dark-theme {
--background-color: #3D3532;
--font-color: #F5F1E9;
--header-font-color: #D87D0D;
--button-color: #E1A851;
--button-color-hover: rgb(61 53 50 / var(--tw-text-opacity, 1));
--button-color-active: rgb(61 53 50 / var(--tw-text-opacity, 1));
--button-text-color: rgb(61 53 50 / var(--tw-text-opacity, 1));
--button-text-color-hover: var(--button-color);
--button-text-color-active: var(--button-color);
}

.fill, .filled > .column, .filled > li {
background-color: var(--background-color);
}

a{color: var(--yellow);text-decoration: none}
.search-submit.icon-button{
position: absolute;
right: 5px;
top: 5px;
left: auto;
width: 44px;
height: 44px;
background: none;
}
h2 > a{text-decoration: none; text-align: center;display: block;margin:0 auto;color: var(--yellow)}
.entry-header::after {
content: "";
display: block;
width: 20px;
height: 4px;
background-color: var(--background-color-fade);
margin: var(--size-m) auto;
vertical-align: middle;
}
figure{padding:0;margin:0}

.header-tag {background:#fff;color: var(--background-color);font-size: var(--font-size-l);border-radius: var(--round-corners);padding: var(--size-s);}

.font-size-display {line-height: 1;letter-spacing: -0.02em;font-weight: 300;}

#site-logo{height:124px;width:auto;display: block}

.wckd-menu.secondary li > a{font-size: 1em}
.phone{font-family: var(--font-2)}

.wckd-form.size-s label{top:4px}
.wckd-form.size-s input{font-size:var(--font-size-xs)}

.wckd-menu2 {margin: 0;
padding: 0}

.wckd-menu2>li {margin: 0;
padding: 0;
list-style: none;
display: inline-block;
padding: var(--size-s) var(--size-m)}

.wckd-menu2 a {text-decoration: none}

ul.checkmarks {
list-style: none;
padding-left: 0;
margin: 0;
}
ul.checkmarks li {
position: relative;
padding-left: 25px;
}
ul.checkmarks li::before {
content: '✔';
position: absolute;
left: 0;
top: 8px;
color: var(--orange);
font-size: var(--font-size-xs);
line-height: 1;
}


button,
.button {font-weight: 500}

.css-bg-image {width: 100%;
height: 100%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;}

.hero {background: #ffffff}

.hero h1,
.hero h2,
.hero p {text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);}

.hero {position: relative;
overflow: hidden;}

.hero-bg {position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.page-2 .hero-bg{
object-position: 35% center;
}

.fade-test::before {content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0));
z-index: 2;
pointer-events: none;}

a.wckd-card {text-decoration: none;
column-gap: var(--space-m);
display: flex;}

.nav-links {
	display: flex;
	gap: 0.5rem; /* spacing between links */
	justify-content: center; /* center the pagination */
	align-items: center;
	margin: 2rem 0; /* spacing above/below pagination */
	font-family: Arial, sans-serif;
}

.nav-links a,
.nav-links span {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	border-radius: 0.25rem;
	text-decoration: none;
}

.nav-links a {
	background-color: transparent;
}

.nav-links a:hover {
	background-color: var(--button-color-hover);
}

.nav-links span.current {
	background-color: var(--button-color-active);
	cursor: default;
}

/* Optional: style prev/next differently */
.nav-links a.prev,
.nav-links a.next {
	font-weight: bold;
}



.mobile-only {display: none}

.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)}
.button,
button {font-size: var(--font-size-s)}

.block-on-desktop {display: block}

@media (max-width: 900px) {
.block-on-desktop {	display: initial}
.width-60{width: 90%;}
.menu-container br{display: none}
}
@media (max-width: 900px) {
.pad-xl{	padding: var(--size-m);}
}