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

	--min-screen-width: 320px;
	--max-screen-width: 1280px;
	
	--clr-primary: hsla(214, 19%, 36%, 1);
	--clr-primary-5: hsla(214, 19%, 36%, 0.05);
	--clr-primary-10: hsla(214, 19%, 36%, 0.1);
	--clr-primary-20: hsla(214, 19%, 36%, 0.2);
	--clr-primary-30: hsla(214, 19%, 36%, 0.3);
	--clr-primary-40: hsla(214, 19%, 36%, 0.4);
	--clr-primary-50: hsla(214, 19%, 36%, 0.5);
	--clr-primary-60: hsla(214, 19%, 36%, 0.6);
	--clr-primary-70: hsla(214, 19%, 36%, 0.7);
	--clr-primary-80: hsla(214, 19%, 36%, 0.8);
	--clr-primary-90: hsla(214, 19%, 36%, 0.9);
	--clr-primary-d-1: hsla(215, 18%, 29%, 1);
	--clr-primary-d-2: hsla(215, 17%, 22%, 1);
	--clr-primary-d-3: hsla(218, 14%, 15%, 1);
	--clr-primary-d-4: hsla(220, 13%, 9%, 1);
	--clr-primary-l-1: hsla(215, 12%, 48%, 1);
	--clr-primary-l-2: hsla(217, 11%, 61%, 1);
	--clr-primary-l-3: hsla(216, 11%, 73%, 1);
	--clr-primary-l-4: hsla(218, 11%, 86%, 1);
	
	--clr-accent: hsla(3, 56%, 57%, 1);
	--clr-accent-5: hsla(3, 56%, 57%, 0.05);
	--clr-accent-10: hsla(3, 56%, 57%, 0.1);
	--clr-accent-20: hsla(3, 56%, 57%, 0.2);
	--clr-accent-30: hsla(3, 56%, 57%, 0.3);
	--clr-accent-40: hsla(3, 56%, 57%, 0.4);
	--clr-accent-50: hsla(3, 56%, 57%, 0.5);
	--clr-accent-60: hsla(3, 56%, 57%, 0.6);
	--clr-accent-70: hsla(3, 56%, 57%, 0.7);
	--clr-accent-80: hsla(3, 56%, 57%, 0.8);
	--clr-accent-90: hsla(3, 56%, 57%, 0.9);
	--clr-accent-d-1: hsla(4, 41%, 45%, 1);
	--clr-accent-d-2: hsla(4, 39%, 34%, 1);
	--clr-accent-d-3: hsla(6, 37%, 23%, 1);
	--clr-accent-d-4: hsla(6, 30%, 13%, 1);
	--clr-accent-l-1: hsla(5, 60%, 66%, 1);
	--clr-accent-l-2: hsla(6, 65%, 75%, 1);
	--clr-accent-l-3: hsla(7, 70%, 83%, 1);
	--clr-accent-l-4: hsla(8, 76%, 92%, 1);
	
	--bg-light: hsla(0, 0%, 93%, 1);
	--bg-ultra-light: hsla(0, 0%, 95%, 1);
	--bg-dark: hsla(214, 19%, 36%, 1);
	--bg-dark-gradient: linear-gradient(180deg, #728296 0%, var(--clr-primary) 100%);
	
	--text-dark-muted: hsla(0, 0%, 64%, 1);
	--text-dark: hsla(0, 0%, 0%, 1);
	--text-light: hsla(0, 0%, 100%, 1);
	--heading-color: hsla(214, 19%, 36%, 1);
	
	--space-2xs: clamp(1.51rem, calc(-0.25vw + 1.58rem), 1.27rem);
	--space-xs: clamp(1.81rem, calc(-0.12vw + 1.84rem), 1.69rem);
	--space-s: clamp(2.17rem, calc(0.09vw + 2.14rem), 2.25rem);
	--space-m: clamp(2.6rem, calc(0.42vw + 2.47rem), 3rem);
	--space-l: clamp(3.12rem, calc(0.92vw + 2.83rem), 4rem);
	--space-xl: clamp(3.74rem, calc(1.65vw + 3.21rem), 5.33rem);
	--space-2xl: clamp(4.49rem, calc(2.72vw + 3.62rem), 7.11rem);
	--space-3xl: clamp(5.39rem, calc(4.25vw + 4.03rem), 9.47rem);
	--space-4xl: clamp(6.47rem, calc(6.41vw + 4.42rem), 12.63rem);

	--text-xs: clamp(1.41rem, calc(-0.16vw + 1.46rem), 1.25rem);
	--text-s: clamp(1.5rem, calc(0vw + 1.5rem), 1.5rem);
	--text-m: clamp(1.6rem, calc(0.21vw + 1.53rem), 1.8rem);
	--text-l: clamp(1.71rem, calc(0.47vw + 1.56rem), 2.16rem);
	--text-xl: clamp(1.82rem, calc(0.8vw + 1.56rem), 2.59rem);
	--text-2xl: clamp(1.94rem, calc(1.22vw + 1.56rem), 3.11rem);
	--text-3xl: clamp(2.07rem, calc(1.73vw + 1.52rem), 3.73rem);
	--text-4xl: clamp(2.21rem, calc(2.36vw + 1.46rem), 4.48rem);

	--h1: clamp(2.7648rem, calc(1.7708695652vw + 2.1272869565rem), 4.394rem);
	--h2: clamp(2.304rem, calc(1.1695652174vw + 1.8829565217rem), 3.38rem);
	--h3: clamp(1.92rem, calc(0.7391304348vw + 1.6539130435rem), 2.6rem);
	--h4: clamp(1.6rem, calc(0.4347826087vw + 1.4434782609rem), 2rem);
	--h5: clamp(1.3rem, calc(0.2591973244vw + 1.2066889632rem), 1.5384615385rem);
	--h6: clamp(1.2rem, calc(-0.0180087471vw + 1.206483149rem), 1.1834319527rem);

	--section-space-l: calc(var(--space-4xl)* 1.3);
	--section-space-m: var(--space-4xl);
	--section-space-s: var(--space-3xl);
	--gutter: var(--space-m);
	--card-padding: var(--space-m);
	--content-gap: var(--space-m);
	--container-gap: var(--space-l);
	--grid-gap: var(--content-gap);
	--radius: 16px;
	--radius-circle: 50vw;
	--btn-radius: 50vw;
	--box-shadow-light: 0px 24px 50px 0px #4343431F;
	--box-shadow-dark: 0px 28px 36px 0px #00000040;
}

/* Focus style */
body.bricks-is-frontend :focus-visible {
	box-shadow: 0 0 0 var(--focus-width, .1rem) var(--focus-color);
}

/** bricks button primary outline hover **/
:root .bricks-button[class*="primary"].outline:hover {
	background-color: var(--clr-accent);
	color: var(--white);
}

/** bricks button light outline hover **/
:root .bricks-button[class*="light"].outline:hover {
    background-color: var(--white);
    color: var(--text-dark);
}

/* Hidden accessible */
.hidden-accessible {
  position: absolute !important;
  inline-size: 1px !important;
  block-size: 1px !important;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: rect(0, 0, 0, 0);
  white-space: nowrap;
  /* added line */
  border: 0;
}

.bricks-area .hidden-accessible {
  position: relative !important;
  inline-size: 2ch !important;
  block-size: 2ch !important;
  margin: 0;
  line-height: 1;
  visibility: hidden;
}
.bricks-area .hidden-accessible::before {
  content: "A";
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: absolute;
  background: #111;
  color: #f5f5f5;
  font-size: max(60%, 13px);
  padding: 0.5em;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 20px;
  block-size: 20px;
  visibility: visible;
  border-radius: 50%;
}

.bricks-button {
  min-width: 20rem;
}

/* Avoid FUC on frontend*/
.bricks-is-frontend .animation-trigger{
  opacity:0;
}
 
/* Animated Class*/
.animate{
  animation-name: fadeAnimation;
  animation-delay: calc(var(--delay, 0) * 800ms);
  animation-duration: var(--duration, 800ms);
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
 
/* Change translate Origin*/
.animation--left-to-right{
  --translate: -30px,0,0;
}
.animation--right-to-left{
  --translate: 30px,0,0;
}
.animation--top-to-bottom{
  --translate: 0,-30px,0;
}
.animation--bottom-to-top{
  --translate: 0,30px,0;
}
 
/* Keyframes */
@keyframes fadeAnimation{
  from{
    transform: translate3d(var(--translate));
  }
  to{
    opacity: 1;
    transform: translate3d(0,0,0);
  }
}