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

/*Mobile Menu*/

.bricks-mobile-menu-wrapper {
	padding-bottom: 30px;
}

/*Hamburger */

.bar-center {
	top: 10px !important;
	display: none !important;
}

.bar-bottom {
	top: 8px !important;
}

/*Global Styles*/

/*Link styles*/

.brxe-text a:hover {
	text-decoration: underline;
}


/*Button*/

.button-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: color 0.3s ease;
}

.button-arrow::after {
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url("https://camprodev.wpenginepowered.com/wp-content/uploads/2026/10/campro-arrow-button-mid-grey-right.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
	transition: transform 0.3s ease, filter 0.3s ease;
}

.button-arrow:hover {
	color: var(--gold) !important;
}

.button-arrow:hover::after {
	transform: translateX(4px);
	background-image: url("https://camprodev.wpenginepowered.com/wp-content/uploads/2026/07/campro-arrow-button-gold-right.svg");
}

@media only screen and (max-width: 676px) {
	.button-arrow::after {
		background-image: url("https://camprodev.wpenginepowered.com/wp-content/uploads/2026/07/campro-arrow-button-gold-right.svg") !important;
	}
}

/* Light Arrow Button */

.light-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
}

.light-arrow::after {
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url("https://camprodev.wpenginepowered.com/wp-content/uploads/2026/07/campro-arrow-button-white-right.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	transition: transform 0.3s ease, filter 0.3s ease;
}

.light-arrow:hover::after {
	background-image: url("https://camprodev.wpenginepowered.com/wp-content/uploads/2026/07/campro-arrow-button-gold-right.svg");
}

.light-arrow:hover {
	background-color: white !important;
	color: var(--gold) !important;
}

/* Dark Arrow Button */

.dark-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: color 0.3s ease;
}

.dark-arrow::after {
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url("https://camprodev.wpenginepowered.com/wp-content/uploads/2026/07/campro-arrow-button-charcoal-right.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
	transition: transform 0.3s ease, filter 0.3s ease;
}

.dark-arrow.big-arrow::after {
	width: 50px;
	height: 50px;
}

/*Mobile*/

@media only screen and (max-width: 767px) {
	.dark-arrow.big-arrow::after {
	width: 65px !important;
	align-self: end;
}
}

.dark-arrow:hover {
	background-color: #D9D9D9 !important;
}


/* Special Grey Arrow Button */

.grey-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: color 0.3s ease;
}

.grey-arrow::after {
	content: "";
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url("https://camprodev.wpenginepowered.com/wp-content/uploads/2026/07/campro-arrow-button-charcoal-right.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	
	transition: 0.3s;
}

.grey-arrow.big-arrow::after {
	width: 50px !important;
	height: 50px !important;
}

.grey-arrow:hover {
	background-color: var(--off-white) !important;
}

/*White Arrow*/

.white-arrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	transition: color 0.3s ease;
}

.white-arrow a::after {
	content: "";
	display: inline-block;
	width: 40px;
	height: 40px;
	background-image: url("https://camprodev.wpenginepowered.com/wp-content/uploads/2026/08/campro-start-your-build-arrow.svg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	left: 10px;
    top: 10px;
    position: relative;
	transition: transform 0.3s ease, filter 0.3s ease;
}

.white-arrow:hover a::after {
	transform: translateX(10px);
}

/*Slideshow button*/

.slide-show-arrow-bg {
	transition: 0s !important;
}

.slide-show-arrow:hover .slide-show-arrow-bg {
	fill: #d9d9d9;
	transition: 0s !important;
}

/*Card GreyScale Style*/

@media only screen and (min-width: 767px) {
	

.card h3, .card .brxe-text-basic{
	transition: 0.5s;
}

.card img{
	filter: grayscale(100%);
	transition: 0.5s;
}

.card:hover img {
	filter: grayscale(0%);
}

.card:hover h3{
	color: white !important;
}

.card:hover .brxe-text-basic {
    color: #ffffff !important;
}

.card:hover .button-arrow {
    color: var(--gold) !important;
}
	
	.card:hover .button-arrow::after {
		background-image: url("https://camprodev.wpenginepowered.com/wp-content/uploads/2026/07/campro-arrow-button-gold-right.svg");
		transform: translateX(4px);
	}

.card:hover .brxe-text-basic.button-arrow {
    color: var(--gold) !important;
}

.card {
	transition: 0.5s;
}

.card:hover {
	border-color: var(--gold) !important;
}
	
}


@media only screen and (min-width: 767px) {
	.is-driving {
  		animation: driveRight 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  		animation-delay: 0.5s;
		}	
}

@media only screen and (min-width: 767px) {
  .start-build-text {
    animation: fadeInSlideRight 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.5s;
    opacity: 0;
  }
}

@keyframes fadeInSlideRight {
  0% {
    opacity: 0;
    transform: translateX(calc(-33vw - 150px)); 
  }
  10% {
    opacity: 1;
  }
  100% {
    opacity: 1;
    transform: translateX(0px); 
  }
}

@media only screen and (max-width: 766px) {
	.start-build-text {
  		animation: fadeInSlideRightMobile 2s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  		animation-delay: 0.5s;
		}	
}


/* Smooth, unbroken keyframes */
@keyframes driveRight {
  0% {
    transform: translateX(-33vw);
  }
  100% {
    transform: translateX(300px);
  }
}

/* Smooth, unbroken keyframes */


/*Global Card Border Decoration*/

.card-border::before {
	content: "";
	position: absolute;
	top: 0px;
	left: -3.5px;
	width: 6px;
	height: 1px;
	background-color: #AFACAC;
}

.card-border::after {
	content: "";
	position: absolute;
	bottom: 0px;
	left: -3.5px;
	width: 6px;
	height: 1px;
	background-color: #AFACAC;
}

.card-border-last::before {
	content: "";
	position: absolute;
	top: 0px;
	right: -3.5px;
	width: 6px;
	height: 1px;
	background-color: #AFACAC;
}

.card-border-last::after {
	content: "";
	position: absolute;
	bottom: 0px;
	right: -3.5px;
	width: 6px;
	height: 1px;
	background-color: #AFACAC;
}

/*Mobile Global Card Border Decoration*/

@media only screen and (max-width: 991px) {
	.card-border::before {
		top: -3px;
		left: 0px;
		width: 1px;
		height: 6px;
	}
	
	.card-border::after {
		bottom: auto;
		left: auto;
		width: 1px;
		height: 6px;
		right: 0px;
		top: -3px;
	}
	
	.card-border-last::before {
    top: auto;
    left: 0;
    width: 1px;
    height: 6px;
    bottom: -3px;
}
	
	.card-border-last::after {
    right: 0;
    width: 1px;
    height: 6px;
    bottom: -3px;
	}

}


/*Post navigation*/


/*Slider Buttons*/

.custom-arrow-icon {
	overflow: visible;
}

/*White button style*/
.custom-arrow-icon circle {
	stroke-width: 10px !important;
}

.custom-arrow-icon g {
	stroke-width: 10px !important;
}

/*Dark button style*/

.custom-dark-arrow-icon {
	overflow: visible;
}

.custom-dark-arrow-icon circle {
	stroke-width: 8px !important;
}

.custom-dark-arrow-icon g {
	stroke-width: 8px !important;
}

/*Slider button hover states*/

.custom-arrow-icon:hover .arrow-circle {
	fill: white !important;
}

.custom-arrow-icon:hover .arrow-stem {
	stroke: var(--gold) !important;
}

.custom-dark-arrow-icon:hover .arrow-circle {
	fill: var(--light-grey) !important;
}

/*Slider Bug Fix*/

/* 1. Force the Splide track and list flex containers to stretch height */
%root% .splide__track,
%root% .splide__list {
  display: flex !important;
  align-items: stretch !important;
}

/* 2. Force every individual slide wrapper to take full available height */
%root% .splide__slide {
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
}

/* 3. Force the first element inside your slide (your card/block) to fill the empty space */
%root% .splide__slide > * {
  flex-grow: 1 !important;
  height: 100% !important;
}

/* .splide__slide--clone {
	height: 100% !important;
} */

.carousel.brxe-slider-nested {
	height: 100% !important;
}

.brxe-csauqy .splide__list { align-items: stretch; }
.brxe-csauqy .splide__slide { height: auto; }
.brxe-csauqy .splide__slide > :last-child { margin-top: auto; }

/*Ninja Forms*/

.nf-form-fields-required {
	display: none !important;
}

.nf-field-element input::placeholder, .nf-field-element textarea::placeholder {
	font-family: "Schibsted Grotesk" !important;
}

.nf-form-content input:focus,
.nf-form-content textarea:focus,
.nf-form-content select:focus {
	outline: none !important;
	box-shadow: none !important;
	border-color: inherit; /* Keeps your default border color instead of browser default */
}

.nf-field-element input::placeholder {
	color: #AFACAC !important;
	opacity: 1;
}

.nf-field-element textarea::placeholder {
	font-family: "Schibsted Grotesk" !important;
	color: #AFACAC !important;
	opacity: 1;
}

.nf-field-element input[type="submit"] {
	transition: 0.3s;
}

.nf-field-element input[type="submit"]:hover {
	background-color: #D9D9D9 !important;
}

.nf-error-msg {
	color: #3A3B3D !important;
	font-size: 12px !important;
}

/*Logo slider*/

.brxe-carousel .image {
	height: 100px !important;
	background-size: contain !important;
	background-repeat: no-repeat !important;
}

.swiper-wrapper {
	transition-timing-function: linear !important;
	pointer-events: none;
}

/*New arrow color state logic*/

.arrow-fill-white .slider-arrow-button__circle {
  transition: 0s;
}

.arrow-fill-white .slider-arrow-button:hover .slider-arrow-button__circle,
.arrow-fill-white :is(a, button):hover .slider-arrow-button__circle {
  fill: #fff;
}

/* Keep the arrow lines unfilled and dark in every state */
.arrow-fill-white .slider-arrow-button__arrow,
.arrow-fill-white .slider-arrow-button__arrow * {
  fill: none !important;
  stroke: #3a3b3d !important;
}


/*Ninja form submit button*/ 

.submit-button {
	margin-bottom: 0px !important;
}

.dark-arrow-link { display: inline-flex; align-items: center; gap: 8px; }

.dark-arrow-link a::after {
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 231.01 231.01'%3E%3Cg fill='none' stroke='%233a3b3d' stroke-width='15' stroke-miterlimit='10'%3E%3Cpolyline points='121.19 180.55 186.23 115.51 121.19 50.46'/%3E%3Cline x1='44.78' y1='115.51' x2='186.23' y2='115.51'/%3E%3C/g%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
  left: 10px;
  top: 10px;
  transition: transform 0.3s;
}
.dark-arrow-link:hover a::after { transform: translateX(10px); }

/* Match homepage heading line-height */
#brxe-arulbs { line-height: 33px; }
@media (max-width: 767px) {
  #brxe-arulbs { line-height: 42px; }
}