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


/****** FULL SITE ******/

	/** Secondary Emphasis Font on H2 Headlines **/

	.emphasis {
		font-family: "Bellota Text";
		font-size: 49px;
		font-weight: 700;
		font-style: italic;
	}

	@media only screen and (max-width: 990px) {
		.emphasis {
			font-family: "Bellota Text";
			font-size: 41px;
			font-weight: 700;
			font-style: italic;
	}
}
	@media only screen and (max-width: 767px) {
		.emphasis {
			font-family: "Bellota Text";
			font-size: 38px;
			font-weight: 700;
			font-style: italic;
	}
}
	@media only screen and (max-width: 480px) {
		.emphasis {
			font-family: "Bellota Text";
			font-size: 36px;
			font-weight: 700;
			font-style: italic;
	}
}

	/** Video Animation CSS - Javascript Lives On-page **/

	.video-wrapper {
	  width: 100%;     
	  transform: scale(0.1);
 	  transform-origin: center center;

	}

	.video-wrapper video {
	  width: 100%;
	  display: block;
	}

	/** Accordion - remove weird middle line **/

	#brxe-rinfop .accordion-title-wrapper {
		border-bottom: 0px !important;
	}

	/** Accordion - add in buttons on expand **/

	p.txt-right {
		text-align: right; 
		margin: 0; 
		padding: 0;
	}

	a .cta-0 { 
		border: 3px solid #FF2125;
		background-color: rgba(234, 245, 255, 0.1); 
		color: #FF2125; 
		font-size: 17px; 
		font-weight: 800;
		letter-spacing: 3px;
		line-height: 25px; 
		width: auto; 
		height: 45px;
		padding: 8px 21px 12px 22px; 
		-webkit-border-radius: 30px; 
		-moz-border-radius: 30px; 
		border-radius: 30px; 
		display: inline-block; 
	}

	.cta-0:hover { 
		border: 3px solid #FF2125;
		background-color: #FF2125; 
		color: #FFF; 
	}




/****** HOMEPAGE ******/

	/** Secondary Emphasis Font on Top Section Sub Headline **/

	.emphasis2 {
		font-family: "Bellota Text";
		font-size: 27px;
		font-style: italic;
		font-weight: 700;
	}

	/** Homepage Header Underline **/

	.underline-main {
	  display: inline-block;
	  position: relative;
	}

	.underline-main::after {
	  content: "";
	  position: absolute;
	  left: -4px;
	  bottom: -2.3em;
	  width: 92%;
	  height: 3em;
	  background: url('/wp-content/uploads/2025/09/Home-Underline.svg') no-repeat center;
	  background-size: contain;
	  z-index: -1;

		  /* Animation setup */
		  clip-path: inset(0 100% 0 0);
		  animation: underline-reveal 1s ease-out forwards;
		  animation-delay: 0.9s;
		}

		/* Keyframes */
		@keyframes underline-reveal {
		  to {
			clip-path: inset(0 0 0 0);
		  }
		}


	/** Accordion Buttons - Rotate **/

	#brxe-rinfop .accordion-title .icon {
		rotate: 315deg;
	}

	/** Homepage TV Mock **/

	.mock-tv {
	  display: inline-block;
	  position: relative;
	}

	.mock-tv::after {
	  content: "";
	  position: absolute;
	  left: -10%;
	  top: -1%;
	  width: 119.9%;
	  height: 119.5%;
	  background: url('/wp-content/uploads/2025/10/tv-frame-2-min.png') no-repeat center;
	  background-size: contain;
	  z-index: 1;
	}

	/** Homepage Small Header Underlines **/

	.red-sml {
	  display: inline-block;
	  position: relative;
	}

	.red-sml::after {
	  content: "";
	  position: absolute;
	  left: 37%;
	  bottom: -0.7em;
	  width: 20%;
	  height: 1em;
	  background: url('/wp-content/uploads/2025/09/red-small-underline.svg') no-repeat center;
	  background-size: contain;
	  z-index: -1;
	}

		.red-sml2 {
		  display: inline-block;
		  position: relative;
		}

		.red-sml2::after {
		  content: "";
		  position: absolute;
		  left: 66%;
		  bottom: -0.7em;
		  width: 37%;
		  height: 1em;
		  background: url('/wp-content/uploads/2025/09/red-small-underline.svg') no-repeat center;
		  background-size: contain;
		  z-index: -1;
	}

	.blue-mark-below {
		display: inline-block;
		position: relative;
	}

	.blue-mark-below:after {
		content: "";
		position: absolute;
		left: -46%;
		bottom: -1.2em;
		width: 100%;
		height: 8em;
		background: url('/wp-content/uploads/2025/10/Viden-Mark-LBlue.svg') no-repeat center;
		background-size: contain;
		z-index: 1;
	}

	.blue-underscore {
		display: inline-block;
		position: relative;
	}

	.blue-underscore::after {
		content: "";
		position: absolute;
		left: 1%;
		bottom: -2.2em;
		width: 100%;
		height: 2.7em;
		background: url('/wp-content/uploads/2025/10/second-blue-underline.svg') no-repeat center;
		background-size: contain;
		z-index: -1;
	}



@media only screen and (max-width: 766px) {
		.blue-underscore::after {
			bottom: -1.8em;
			height: 2.5em;
		}
		.blue-mark-below:after {
			left: 54%;
			width: 45%;
		}

		.underline-main::after {
		  content: "";
		  position: absolute;
		  left: 24%;
		  bottom: -1.7em;
		  width: 56%;
		  height: 2.5em;
		  background: url('/wp-content/uploads/2025/09/Home-Underline.svg') no-repeat center;
		  background-size: contain;
	}
}

	@media only screen and (max-width: 480px) {

		.red-sml2 {
		  display: inline-block;
		  position: relative;
		}

		.red-sml2::after {
		  content: "";
		  position: absolute;
		  left: 5%;
		  bottom: -0.7em;
		  width: 37%;
		  height: 1em;
		  background: url('/wp-content/uploads/2025/09/red-small-underline.svg') no-repeat center;
		  background-size: contain;
		}
		
		.underline-main::after {
		  left: 5%;
		  bottom: -1.7em;
		  width: 90%;
		  height: 2.5em;
	}
		
	}



	/** Homepage Results Cards - Hover **/ 
		/* 1) Stack the two text elements in the same spot without layout shift */ 
				.parent1 { display: grid; /* stacks children in the same cell */ 
						 	position: relative; /* safe for future tweaks */ } 

				.text-default, .text-hover { 
					grid-area: 1 / 1; /* both occupy the same grid cell */ 
					transition: opacity .25s ease; /* smooth fade */ } 

				/* default state: show normal text, hide hover text */ 
				.text-default { 
					opacity: 1; } 
				.text-hover { 
					opacity: 0; } 

		/* 2) Make the WHOLE column/card trigger the swap on hover */ 
				.flip:hover .text-default { 
					opacity: 0; } 
				.flip:hover .text-hover { 
					opacity: 1; } 

		/* 3) Active state (simulates hover for default/slider use) */ 
				.flip.active .text-default { 
					opacity: 0; } 
				.flip.active .text-hover { 
					opacity: 1; } 

		/* 4) Move your background hover to fire from the column hover */ 
				.flip .parent1 { 
					transition: background-color .25s ease, color .25s ease, border-color .25s ease; }



	/** Homepage Last Section 'Huge' text **/
		.go-huge {
			font-family: "Figtree";
			font-size: 2.8em;
			line-height: 0.85em;
			font-weight: 800;
			letter-spacing: -3px;
			margin-left: -4px;
		}


/** Footer Styling **/

	.lets-talk {
		font-family: "Bellota Text";
		font-size: 30px;
		font-style: italic;
		font-weight: 700;
		color: #2797FF;
	}


	.lets-talk:hover {
		color: #FF2125;
	}


	/*** SERVICES Page ***/

		/** Services Page Underline **/

		.attach-under {
			display: inline-block;
			position: relative;
		}


		.attach-under:after {
			content: "";
			position: absolute;
			left: 5px;
			bottom: -1.7em;
			width: 95%;
			height: 3em;
			background: url('/wp-content/uploads/2025/10/Light-blue-line.svg') no-repeat center;
			background-size: contain;
			z-index: 1;
		}

		/** Services Growth Wheel **/
		.vm-blue {
			fill: #2797FF;
		}

			/*** Hover Tooltip Specific ***/
			svg g.create path, svg g.connect path, svg g.optimize path {
				fill: #020917;
				stroke: #ff2125;
  				stroke-width: 0;
  				transition: stroke-width 0.05s ease, fill 0.05s ease;
			}

			svg g.create:hover path, svg g.connect:hover path, svg g.optimize:hover path { 
				fill: #ff2125;
				stroke-width: 1.5;
			}



				/* ================================
				   SVG Tooltip System
				   ================================ */

				#svg-tooltip {
				  position: absolute;
				  display: none;
				  pointer-events: none;
				  z-index: 99999;
				  background: rgba(255,255,255,1);
				  color: #353944;
				  font-size: 20px;
				  padding: 35px 35px;
				  border-radius: 15px;
				  border: 3px solid #bbc2cc;
				  max-width: 435px;
				  word-break: normal;
				  white-space: normal;
				  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
				}

				/* Optional: fade-in/fade-out animation */
				#svg-tooltip.show {
				  display: block;
				  opacity: 1;
				}

				#svg-tooltip.hide {
				  opacity: 0;
				}






		.next-step-1 {
			display: inline-block;
			position: relative;
		}

		.next-step-1::after {
			content: "";
			position: absolute;
			left: 95.5%;
			bottom: 35%;
			width: 22%;
			height: 3em;
			background: url('/wp-content/uploads/2025/10/Next-Step-Arrow.svg') no-repeat center;
			background-size: contain;
			z-index: -1;
		}

		.next-step-2 {
			display: inline-block;
			position: relative;
		} 

		.next-step-2::after {
			content: "";
			position: absolute;
			left: 95%;
			bottom: 35%;
			width: 17.5%;
			height: 3em;
			background: url('/wp-content/uploads/2025/10/Next-Step-Arrow_End.svg') no-repeat center;
			background-size: contain;
			z-index: -1;
		}

		@media only screen and (max-width: 990px) {
				.next-step-1::after {
					left: 96%;
					bottom: 37%;
					width: 30%;
					height: 4em;
					background: url('/wp-content/uploads/2025/10/Next-Step-Arrow.svg') no-repeat center;
				}
				.next-step-2::after {
					left: 95.5%;
					bottom: 37%;
					width: 25%;
					height: 4em;
					background: url('/wp-content/uploads/2025/10/Next-Step-Arrow_End.svg') no-repeat center;
				}
		}

		@media only screen and (max-width: 766px) {

		.next-step-1::after {
			content: "";
			position: absolute;
			left: 39.5%;
			bottom: -3%;
			width: 20%;
			height: 3em;
			rotate: 90deg;
			background: url('/wp-content/uploads/2025/10/Next-Step-Arrow.svg') no-repeat center;
			background-size: contain;
			z-index: -1;
		}

		.next-step-2::after {
			content: "";
			position: absolute;
			left: 41%;
			bottom: 5%;
			width: 15.5%;
			height: 3em;
			rotate: 90deg;
			background: url('/wp-content/uploads/2025/10/Next-Step-Arrow_End.svg') no-repeat center;
			background-size: contain;
			z-index: -1;
		}
				#svg-tooltip {
					display: none;
					opacity: 0;
			}
				svg g.create:hover path, svg g.connect:hover path, svg g.optimize:hover path { 
					fill: #020917;
					stroke-width: 0;
			}
		}


		@media only screen and (max-width: 480px) {

		.next-step-1::after {
			content: "";
			position: absolute;
			left: 39.5%;
			bottom: -3%;
			width: 22%;
			height: 3em;
			rotate: 90deg;
			background: url('/wp-content/uploads/2025/10/Next-Step-Arrow.svg') no-repeat center;
			background-size: contain;
			z-index: -1;
		}

		.next-step-2::after {
			content: "";
			position: absolute;
			left: 40.5%;
			bottom: 5%;
			width: 17.5%;
			height: 3em;
			rotate: 90deg;
			background: url('/wp-content/uploads/2025/10/Next-Step-Arrow_End.svg') no-repeat center;
			background-size: contain;
			z-index: -1;
		}
		}


	/** Services Cards - Hover **/ 
		/* 1) Stack the two text elements in the same spot without layout shift */ 
				.parental1 { display: grid;
						 	position: relative;
				} 

				.default-1, .on-hover { 
					grid-area: 1 / 1;  
					transition: opacity .25s ease; 
					} 

				/* default state: show normal text, hide hover text */ 
				.default-1 { 
					opacity: 1; } 
				.on-hover { 
					opacity: 0; } 

		/* 2) Make the WHOLE column/card trigger the swap on hover */ 
				.flippy:hover .default-1 { 
					opacity: 0; } 
				.flippy:hover .on-hover { 
					opacity: 1; } 

		/* 3) Active state (simulates hover for default/slider use) */ 
				.flippy.active .default-1 { 
					opacity: 0; } 
				.flippy.active .on-hover { 
					opacity: 1; } 

		/* 4) Move your background hover to fire from the column hover */ 
				.flippy .parental1 { 
					transition: background-color .25s ease, color .25s ease, border-color .25s ease; 
				}

html {
  scroll-behavior: smooth;
}
form.post-password-form {
    padding-top: 200px;
    padding-bottom: 200px;
}