
/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
:root {
	/* border radius variables */
	--radius-tiny: 3px;
	--radius-xsmall: 3vw;
	--radius-small: 5vw;
	/* 100px */
	--radius-med: 10vw;
	/* 150px */
	--radius-large: 15vw;
	/* 200px */
	--radius-xl: 25vw;
	/* 300px */
	--radius-xxl: 35vw;
	/* 400px */
	--button-radius: 5rem;
	--search-radius: clamp(2rem, 4.78vw + .47rem, 7rem);
	/* spacing */
	--section-block-padding: clamp(4rem, 5.736vw + 2.164rem, 10rem);
	/* top + bottom */
	--section-inline-padding: clamp(2.4rem, 3.442vw + 1.299rem, 6rem);
	/* left + right */
	--half-block-padding: calc(var(--section-block-padding) / 2);
	--container-gap: clamp(3rem, .956vw + 2.694rem, 4rem);
	--grid-gap: clamp(4rem, 1.912vw + 3.388rem, 6rem);
	/* ex: 3-up related resources */
	--wide-grid-gap: clamp(6rem, 1.912vw + 5.388rem, 8rem);
	/* ex: 2-up section */
	--content-gap: clamp(2rem, .956vw + 1.694rem, 3rem);
	/* ex: between header + text */
	--card-gap: clamp(2rem, .956vw + 1.694rem, 3rem);
	--card-padding: clamp(3rem, 4.78vw + 1.47rem, 8rem);
	/* hero card, footer card */
	--mini-gap: clamp(1rem, .956vw + .694rem, 2rem);
	--product-inner-padding: calc(var(--section-inline-padding) + var(--card-padding));
	--menu-card-padding: clamp(3rem, .956vw + 2.694rem, 4rem);
	/* typography */
	--h1: clamp(3.2rem, 1.338vw + 2.772rem, 4.6rem);
	--h2: clamp(2.4rem, 1.147vw + 2.033rem, 3.6rem);
	--h3: clamp(1.8rem, .382vw + 1.678rem, 2.2rem);
	--h4: clamp(1.6rem, .191vw + 1.539rem, 1.8rem);
	--h5: clamp(1.6rem, .191vw + 1.539rem, 1.8rem);
	--body-font-size: clamp(1.5rem, .191vw + 1.439rem, 1.7rem);
	--body-s: clamp(1.2rem, .287vw + 1.108rem, 1.5rem);
	--nav-button: clamp(1.3rem, .287vw + 1.208rem, 1.6rem);
	--display: clamp(2rem, .574vw + 1.816rem, 2.6rem);
	--grid-2: repeat(2, minmax(0, 1fr));
	--grid-3: repeat(3, minmax(0, 1fr));
	--grid-4: repeat(4, minmax(0, 1fr));
	/* color */
	
	/* primary (green) */
	--primary-h: 153;
	--primary-s: 100%;
	--primary-l: 31%;
	--primary-hsl: var(--primary-h) var(--primary-s) var(--primary-l);
	--primary: hsl(var(--primary-hsl));
	--primary-light-35: hsl(var(--primary-h), var(--primary-s), 35%);
	--primary-light-40: hsl(var(--primary-h), var(--primary-s), 40%);
	--primary-trans-40: hsla(var(--primary-h), var(--primary-s), var(--primary-l), .4);
	/* base (navy) */
	--base-h: 219;
	--base-s: 70%;
	--base-l: 12%;
	--base-hsl: var(--base-h) var(--base-s) var(--base-l);
	--base: hsl(var(--base-hsl));
	--base-light: hsl(var(--base-h), var(--base-s), 20%);
	/* primary-pale (light green) */
	--primary-pale-h: 143;
	--primary-pale-s: 42%;
	--primary-pale-l: 93%;
	--primary-pale-hsl: var(--primary-pale-h) var(--primary-pale-s) var(--primary-pale-l);
	--primary-pale: hsl(var(--primary-pale-hsl));
	--primary-pale-trans-60: hsla(var(--primary-pale-h), var(--primary-pale-s), var(--primary-pale-l), .6);
	/* secondary-pale (light blue) */
	--secondary-pale-h: 208;
	--secondary-pale-s: 76%;
	--secondary-pale-l: 93%;
	--secondary-pale-hsl: var(--secondary-pale-h) var(--secondary-pale-s) var(--secondary-pale-l);
	--secondary-pale: hsl(var(--secondary-pale-hsl));
	--secondary-pale-trans-60: hsla(var(--secondary-pale-h), var(--secondary-pale-s), var(--secondary-pale-l), .6);
	/* misc */
	--logo-size: clamp(16rem, 6.692vw + 13.859rem, 23rem);
}

html {
	scroll-behavior: smooth;
}

body, html {
	overflow-x: hidden;
}

.button {
	padding: 1.4rem 2.4rem;
}

.bg--primary {
	background-color: var(--primary);
}

.bg--primary-pale {
	background-color: var(--primary-pale);
}

.bg--secondary-pale {
	background-color: var(--secondary-pale);
}

.bg--action {
	background-color: var(--action);
}

.bg--base {
	background-color: var(--base);
}

.nav-text {
	font-size: var(--nav-button);
	font-weight: 800;
	text-transform: uppercase;
}

.body-s {
	font-size: var(--body-s);
}

.text--primary {
	color: var(--primary);
}

/* duotone images */
.duotone {
	background-color: #5aa884;
}

.duotone img {
	filter: grayscale(100%);
	mix-blend-mode: multiply;
	transform: translate3d(0, 0, 0);
	width: 100%;
}

.bg-duotone {
	position: relative;
	filter: grayscale(100%);
}

/* mobile menu button */
.brxe-nav-menu .bricks-mobile-menu-wrapper .bricks-mobile-menu {
	width: 90%;
}

@media ( min-width:479px) {
	.bricks-mobile-menu li.mobile-cta {
		display: none;
	}
}

.bricks-mobile-menu li.mobile-cta a {
	background-color: var(--primary);
	color: #fff !important;
	text-transform: uppercase;
	transition: all .5s;
	border-radius: 50px;
	width: 300px !important;
	margin: 3rem auto 2rem auto;
	display: block;
}

.bricks-mobile-menu li.mobile-cta a:after {
	font-family: "Font Awesome 6 Solid";
	content: "";
	font-weight: 900;
	font-size: 20px;
	margin-left: 1em;
	position: relative;
	top: 2px;
	display: inline-block;
}

.bricks-mobile-menu li.mobile-cta a:hover {
	background-color: var(--primary-light-35);
}

@media (max-width: 478px) {
	.header__nav-wrapper.brxe-nav-menu .bricks-mobile-menu-wrapper {
		top: 0px;
		padding-bottom: 140px;
	}
}

@media (min-width: 478px) and (max-width: 991px) {
	.header__nav-wrapper.brxe-nav-menu .bricks-mobile-menu-wrapper {
		padding-top: 30px;
	}
}

/* arrow list */
.arrow-list-wrapper ul {
	list-style-type: none;
	margin: 0px;
}

.arrow-list-wrapper ul.space-above {
	margin-top: var(--content-gap);
}

.arrow-list-wrapper ul li {
	text-align: left;
	margin-bottom: .75em;
}

.arrow-list-wrapper ul li:before {
	font-family: "Font Awesome 6 Solid";
	content: "";
	font-weight: 900;
	font-size: 20px;
	color: var(--primary);
	margin: 2px 1em 0 -2em;
	display: inline-block;
}

.overview__content.arrow-list-wrapper ul {
	width: 75%;
	transform: translate(50%);
	margin-left: -25%;
}

/* custom textarea */

/* two-column */
.custom-textarea .two-column {
	display: grid;
	grid-template-columns: var(--grid-2);
	column-gap: 2rem;
}

.custom-textarea .two-column.space-above > * {
	margin-top: var(--content-gap);
}

.custom-textarea .two-column > * {
	text-align: left;
}

.custom-textarea .two-column ul {
	width: 100%;
	margin-left: 0;
	transform: none;
}

/* headings */
.custom-textarea h2, .custom-textarea h3, .custom-textarea h4, .custom-textarea h5 {
	margin-bottom: 1em;
}

/* links */
.custom-textarea a {
	color: var(--primary);
	font-weight: 600;
	text-decoration: underline;
	transition: .5s all;
}

.custom-textarea a:hover {
	color: var(--primary-light-35);
}

/* media queries */
@media (max-width: 991px) {
	.flexi-full-width__text.custom-textarea .two-column {
		grid-template-columns: repeat(1, minmax(0, 1fr));
	}
}

@media (min-width: 991px) {
	.overview__content.arrow-list-wrapper ul.arrow-list--width-50 {
		width: 50%;
		margin-left: 2.5%;
	}
}

@media (max-width: 767px) {
	.overview__content.arrow-list-wrapper ul {
		width: 100%;
		margin-left: -50%;
	}
	
	.custom-textarea .two-column {
		grid-template-columns: var(--grid-1);
	}
	
	.overview__content.arrow-list-wrapper ul {
		width: 100%;
		transform: none;
		margin-left: 0px;
	}
}

/* Gutenberg styling */
blockquote.wp-block-quote {
	border-left: 0px;
	padding: var(--half-block-padding);
	font-family: Poppins;
	font-size: var(--display);
	font-weight: 800;
	text-align: center;
}

blockquote.wp-block-quote cite {
	font-family: Poppins;
	font-size: var(--body-s);
	text-transform: uppercase;
	font-weight: 700;
	color: #000;
	margin-top: 3rem;
}

.brxe-post-content.custom-textarea h2 {
	font-size: clamp(2rem, .956vw + 1.694rem, 3rem);
}

.brxe-post-content.custom-textarea h3 {
	font-size: var(--h4);
}

.wp-block-columns {
	margin: 2em 0;
}

.wp-block-column .wp-block-image {
	margin: 0px;
}

/* Hubspot form styling */
.hbspt-form * {
	border-color: transparent;
}

.hbspt-form .input {
	padding: 0px;
}

.hbspt-form .input input, .hbspt-form .input textarea {
	background-color: var(--primary-pale);
	border-radius: 0px;
	padding: 4px 15px;
}

.hbspt-form .input textarea {
	padding: 15px 15px;
	line-height: 1.4 !important;
}

.hbspt-form input[type="checkbox"] {
	margin: 0 1.25rem 0 0;
	transform: scale(1.25);
}

.hbspt-form .input input::placeholder, .hbspt-form .input textarea::placeholder {
	color: #919191;
	opacity: 1;
	/* Firefox */
	line-height: 1.4;
}

.hbspt-form .actions {
	text-align: center;
}

.hbspt-form input[type=submit] {
	padding: 1.4rem 3rem;
	background-color: var(--primary);
	color: #fff;
	border-radius: 50px;
	font-family: Poppins, sans-serif;
	text-transform: uppercase;
	font-weight: 800;
	font-size: var(--nav-button);
	line-height: 1.2;
	border-bottom-style: none;
	border-bottom-width: 0px;
	border-right-style: none;
	border-right-width: 0px;
	transition: all .5s;
}

.hbspt-form input[type=submit]:hover {
	background-color: var(--primary-light-35);
}

.hbspt-form ul {
	list-style-type: none;
	padding-inline-start: 0;
}

.hbspt-form .hs-error-msgs {
	font-size: var(--body-s);
}

.hbspt-form ul.hs-error-msgs {
	list-style: none;
	padding-left: 2px;
}

.hbspt-form .hs-error-msgs label {
	color: var(--primary);
	font-weight: 600;
}

/* full-width form */
.hbspt-form--full-width .hbspt-form .form-columns-2, .hbspt-form--full-width .hbspt-form .form-columns-1, .hbspt-form--full-width .hbspt-form .hs_error_rollup {
	max-width: 800px;
	margin-left: auto;
	margin-right: auto;
}

.hbspt-form--full-width .hbspt-form .form-columns-2 .hs-form-field {
	width: 49.5%;
}

.hbspt-form--full-width .hbspt-form .form-columns-2 .hs-form-field:first-child {
	margin-right: 1%;
}

.hbspt-form--full-width .hbspt-form fieldset.form-columns-1 .hs-input.hs-fieldtype-textarea {
	width: 100%;
}

@media (max-width:400px) {
	.hbspt-form--full-width .hbspt-form .form-columns-2 .hs-form-field .hs-input {
		width: 100% !important;
	}
}

/* white fields */
.hbspt-form--white .hbspt-form .input input, .hbspt-form--white .hbspt-form .input textarea {
	background-color: #fff;
}

/* calendar */
p.simcal-align-right {
	display: none;
}

.simcal-events-list-container {
	display: grid;
	grid-template-columns: var(--grid-3);
	grid-gap: 2rem;
}

@media (max-width:991px) {
	.simcal-events-list-container {
		grid-template-columns: var(--grid-2);
	}
}

@media (max-width:767px) {
	.simcal-events-list-container {
		display: flex;
		flex-flow: column;
	}
}

.simcal-day {
	display: block;
	background-color: #fff;
	border-radius: var(--radius-xsmall);
}

.simcal-default-calendar-list .simcal-day ul.simcal-events {
	margin: 0px;
	padding: var(--menu-card-padding);
}

li.simcal-event .ss-event-subhead {
	color: var(--primary);
	font-weight: 900;
	text-transform: uppercase;
	margin-bottom: var(--content-gap);
	letter-spacing: .2px;
	font-size: var(--body-s);
}

li.simcal-event .simcal-event-details {
	font-size: var(--body);
}

li.simcal-event .ss-event-title {
	display: block;
	font-weight: 800;
	font-size: var(--h3);
	margin-bottom: 1em;
}

li.simcal-event .ss-event-date, li.simcal-event .ss-event-location {
	margin-bottom: 1em;
}

li.simcal-event .ss-event-link a {
	padding: 1.4rem 3rem;
	background-color: var(--primary);
	color: #fff;
	border-radius: 50px;
	margin-top: var(--content-gap);
	display: inline-block;
	text-transform: uppercase;
	font-weight: 800;
	transition: all .5s;
}

li.simcal-event .ss-event-link a:hover {
	background-color: var(--primary-light-35);
}

li.simcal-event .ss-event-description a {
	text-decoration: underline;
	font-weight: 600;
	color: var(--primary);
	transition: all .5s;
}

li.simcal-event .ss-event-description a:hover {
	color: var(--primary-light-35);
}
