/*
 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 {
	
	/* Site content */
	--content-width: 1280px; /* site content width */
	--content-gap: var(--space-m);
	--container-gap: var(--space-xl);
	
	/* Colors */
	--clr-primary: hsl(341, 81%, 48%);
	--clr-primary-d-1: hsl(344, 71%, 40%);
	--clr-primary-d-2: hsl(346, 63%, 31%);
	--clr-primary-d-3: hsl(349, 54%, 22%);
	--clr-primary-d-4: hsl(352, 42%, 13%);
	--clr-primary-l-1: hsl(349, 78%, 64%);
	--clr-primary-l-2: hsl(353, 84%, 75%);
	--clr-primary-l-3: hsl(355, 92%, 84%);
	--clr-primary-l-4: hsl(356, 100%, 92%);
	
	--clr-primary: hsl(210, 95%, 29%);
	--clr-primary-d-1: hsl(214, 74%, 26%);
	--clr-primary-d-2: hsl(217, 61%, 21%);
	--clr-primary-d-3: hsl(219, 48%, 15%);
	--clr-primary-d-4: hsl(225, 35%, 9%);
	--clr-primary-l-1: hsl(220, 37%, 48%);
	--clr-primary-l-2: hsl(223, 33%, 61%);
	--clr-primary-l-3: hsl(225, 33%, 74%);
	--clr-primary-l-4: hsl(226, 33%, 87%);
	
	--clr-header-sticky:  var(--white);  /* Sticky header background color */
	
	--clr-secondary: hsl(53, 99%, 52%);
	--clr-secondary-d-1: hsl(52, 78%, 44%);
	--clr-secondary-d-2: hsl(51, 69%, 34%);
	--clr-secondary-d-3: hsl(50, 59%, 23%);
	--clr-secondary-d-4: hsl(48, 46%, 13%);
	--clr-secondary-l-1: hsl(51, 100%, 67%);
	--clr-secondary-l-2: hsl(51, 100%, 76%);
	--clr-secondary-l-3: hsl(50, 100%, 84%);
	--clr-secondary-l-4: hsl(50, 100%, 92%);
	
	--clr-base: hsl(249, 24%, 74%);
	--clr-base-d-1: hsl(249, 12%, 58%);
	--clr-base-d-2: hsl(247, 8%, 42%);
	--clr-base-d-3: hsl(245, 8%, 28%);
	--clr-base-d-4: hsl(240, 6%, 15%);
	--clr-base-l-1: hsl(251, 25%, 79%);
	--clr-base-l-2: hsl(249, 24%, 84%);
	--clr-base-l-3: hsl(249, 25%, 89%);
	--clr-base-l-4: hsl(250, 23%, 95%);

	--white: hsl(0, 0%, 100%);
	--white-5: hsla(0, 0%, 100%, 0.05);
	--white-10: hsla(0, 0%, 100%, 0.1);
	--white-20: hsla(0, 0%, 100%, 0.2);
	--white-30: hsla(0, 0%, 100%, 0.3);
	--white-40: hsla(0, 0%, 100%, 0.4);
	--white-50: hsla(0, 0%, 100%, 0.5);
	--white-60: hsla(0, 0%, 100%, 0.6);
	--white-70: hsla(0, 0%, 100%, 0.7);
	--white-80: hsla(0, 0%, 100%, 0.8);
	--white-90: hsla(0, 0%, 100%, 0.9);
	
	--black: black;
	--neutral-light: hsl(210, 38%, 90%);
	--bg-light: hsl(0, 0%, 97%);
	--header-bg: unset;
	
	/* Spacing */
	--space-4xs: clamp(0.49rem, calc(-0.27vw + 0.55rem), 0.33rem);
	--space-3xs: clamp(0.61rem, calc(-0.25vw + 0.66rem), 0.47rem);
	--space-2xs: clamp(0.77rem, calc(-0.18vw + 0.8rem), 0.66rem);
	--space-xs: clamp(0.96rem, calc(-0.04vw + 0.97rem), 0.94rem);
	--space-s: clamp(1.2rem, calc(0.22vw + 1.16rem), 1.33rem);
	--space-m: clamp(1.5rem, calc(0.65vw + 1.37rem), 1.88rem);
	--space-l: clamp(1.88rem, calc(1.34vw + 1.61rem), 2.65rem);
	--space-xl: clamp(2.34rem, calc(2.42vw + 1.86rem), 3.75rem);
	--space-2xl: clamp(2.93rem, calc(4.08vw + 2.11rem), 5.3rem);
	--space-3xl: clamp(3.66rem, calc(6.6vw + 2.34rem), 7.5rem);
	--space-4xl: clamp(4.58rem, calc(10.36vw + 2.51rem), 10.6rem);
	
	--gutter: var(--space-m);
	--section-padding-x: var(--space-m);
	--section-padding-y: var(--space-4xl);
	--card-padding: var(--space-s);
	--heading-spacing: 1.5em;
	--paragraph-spacing: 1em;
	--header-height: 120px;
	
	--width-xs: calc(var(--content-width) * 0.1);
	--width-s: calc(var(--content-width) * 0.2);
	--width-m: calc(var(--content-width) * 0.4);
	--width-l: calc(var(--content-width) * 0.6);
	--width-xl: calc(var(--content-width) * 0.8);
	--width-xxl: calc(var(--content-width) * 0.9);
	
	/* Text size */			
	--text-s: clamp(1.42rem, calc(-0.07vw + 1.45rem), 1.35rem);
	--text-m: clamp(1.6rem, calc(0.21vw + 1.53rem), 1.8rem);
	--text-l: clamp(1.8rem, calc(0.62vw + 1.6rem), 2.4rem);
	--text-xl: clamp(2.02rem, calc(1.22vw + 1.63rem), 3.2rem);
	--text-2xl: clamp(2.28rem, calc(2.07vw + 1.62rem), 4.26rem);
	--text-3xl: clamp(2.56rem, calc(3.25vw + 1.52rem), 5.68rem);
	--text-4xl: clamp(2.88rem, calc(4.89vw + 1.32rem), 7.58rem);
	
	/* Heading */
	--h1: clamp(2.8rem, calc(3.21vw + 1.77rem), 6.4rem);
	--h2: clamp(2.4rem, calc(3.21vw + 1.37rem), 6rem);
	--h3: clamp(2.4rem, calc(2.86vw + 1.49rem), 5.6rem);
	--h4: clamp(2rem, calc(1.07vw + 1.66rem), 3.2rem);
	--h5: var(--text-l);
	--h6: var(--text-m);
	
	/* Radius */
	--radius-xs: 0.5rem;
	--radius-s: 0.9375rem;
	--radius: 1.2rem;
	--radius-l: 50vw;
	
	/* Grid */
	--grid-1: repeat(1, minmax(0, 1fr));
	--grid-2: repeat(2, minmax(0, 1fr));
	--grid-3: repeat(3, minmax(0, 1fr));
	--grid-4: repeat(4, minmax(0, 1fr));
	--grid-5: repeat(5, minmax(0, 1fr));
	--grid-6: repeat(6, minmax(0, 1fr));
	--grid-7: repeat(7, minmax(0, 1fr));
	--grid-8: repeat(8, minmax(0, 1fr));
	--grid-9: repeat(9, minmax(0, 1fr));
	--grid-10: repeat(10, minmax(0, 1fr));
	--grid-11: repeat(11, minmax(0, 1fr));
	--grid-12: repeat(12, minmax(0, 1fr));
	--grid-1-2: minmax(0, 1fr) minmax(0, 2fr);
	--grid-1-3: minmax(0, 1fr) minmax(0, 3fr);
	--grid-2-1: minmax(0, 2fr) minmax(0, 1fr);
	--grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
	--grid-3-1: minmax(0, 3fr) minmax(0, 1fr);
	--grid-3-2: minmax(0, 3fr) minmax(0, 2fr);

	--grid-gap: var(--content-gap);
	
	--grid-auto-2: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.7, (100% - (2 - 1) * var(--grid-gap)) / 2)), 1fr));
	--grid-auto-3: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.7, (100% - (3 - 1) * var(--grid-gap)) / 3)), 1fr));
	--grid-auto-4: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((4 - 1) * var(--grid-gap))) / 4) * 0.7, (100% - (4 - 1) * var(--grid-gap)) / 4)), 1fr));
	--grid-auto-5: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((5 - 1) * var(--grid-gap))) / 5) * 0.7, (100% - (5 - 1) * var(--grid-gap)) / 5)), 1fr));
	--grid-auto-6: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((6 - 1) * var(--grid-gap))) / 6) * 0.7, (100% - (6 - 1) * var(--grid-gap)) / 6)), 1fr));
	--grid-auto-7: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((7 - 1) * var(--grid-gap))) / 7) * 0.7, (100% - (7 - 1) * var(--grid-gap)) / 7)), 1fr));
	--grid-auto-8: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((8 - 1) * var(--grid-gap))) / 8) * 0.7, (100% - (8 - 1) * var(--grid-gap)) / 8)), 1fr));
	--grid-auto-9: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((9 - 1) * var(--grid-gap))) / 9) * 0.7, (100% - (9 - 1) * var(--grid-gap)) / 9)), 1fr));
	--grid-auto-10: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((10 - 1) * var(--grid-gap))) / 10) * 0.7, (100% - (10 - 1) * var(--grid-gap)) / 10)), 1fr));
	--grid-auto-11: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((11 - 1) * var(--grid-gap))) / 11) * 0.7, (100% - (11 - 1) * var(--grid-gap)) / 11)), 1fr));
	--grid-auto-12: repeat(auto-fit, minmax(min(100%, max(calc((var(--content-width) - ((12 - 1) * var(--grid-gap))) / 12) * 0.7, (100% - (12 - 1) * var(--grid-gap)) / 12)), 1fr));
	
	/** Buttons */
	--btn-padding-block: .75em;
	--btn-padding-inline: 1.5em;
	--btn-min-width: 9rem;
	--btn-background: black;
	--btn-backgroud-hover: var(--clr-primary);
	--btn-outline-backgroud-hover: var(--clr-primary);
	--btn--radius: var(--radius-l);
	--btn-text-color: white;
	
	/* Focus */
	--focus-width: .15rem;
	--focus-color: #fd0;
	
	/* miscellaneou */
	--link-underline-offset: .3em;
	--transition: all .2s ease-in-out;
	--btn-transition: all .2s ease-in-out;
	--text-shadow: 1px 1px 1px var(--black);
	--box-shadow: 0px 60px 68px 0px rgba(0,0,0,0.25); /* box shadow */
	--box-shadow-button: 0px 5px 40px 5px rgba(0,0,0,0.2); /* box shadow */
  
  --scroll-offset: 200px;
}

/** Scroll offset **/
[id] {
  scroll-margin-top: var(--scroll-offset, 200px);
}

/** Custom cursor **/
.bricks-is-frontend {
	cursor: url('/wp-content/uploads/cursor_arrow.svg'), auto;
}

.flex-grid--3:not(.brxe-container), .brxe-container.flex-grid--3 {
  --gap: var(--grid-gap);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center;
}
.flex-grid--3:not(.brxe-container).gap--xs, .brxe-container.flex-grid--3.gap--xs {
  --gap: var(--space-xs);
}
.flex-grid--3:not(.brxe-container).gap--s, .brxe-container.flex-grid--3.gap--s {
  --gap: var(--space-s);
}
.flex-grid--3:not(.brxe-container).gap--m, .brxe-container.flex-grid--3.gap--m {
  --gap: var(--space-m);
}
.flex-grid--3:not(.brxe-container).gap--l, .brxe-container.flex-grid--3.gap--l {
  --gap: var(--space-l);
}
.flex-grid--3:not(.brxe-container).gap--xl, .brxe-container.flex-grid--3.gap--xl {
  --gap: var(--space-xl);
}
.flex-grid--3:not(.brxe-container).gap--xxl, .brxe-container.flex-grid--3.gap--xxl {
  --gap: var(--space-xxl);
}
.flex-grid--3:not(.brxe-container) > *, .brxe-container.flex-grid--3 > * {
  flex-basis: calc((100% - (var(--gap) * 2)) / 3);
}

@media (max-width: 768px) {
  .flex-grid--m-1:not(.brxe-container), .brxe-container.flex-grid--m-1 {
    --gap: var(--grid-gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }
  .flex-grid--m-1:not(.brxe-container) > *, .brxe-container.flex-grid--m-1 > * {
    width: 100%;
    max-width: 100%;
    flex-basis: auto;
  }
  .flex-grid--m-2:not(.brxe-container), .brxe-container.flex-grid--m-2 {
    --gap: var(--grid-gap);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: center;
  }
  .flex-grid--m-2:not(.brxe-container).gap--m-xs, .brxe-container.flex-grid--m-2.gap--m-xs {
    --gap: var(--space-xs);
  }
  .flex-grid--m-2:not(.brxe-container).gap--m-s, .brxe-container.flex-grid--m-2.gap--m-s {
    --gap: var(--space-s);
  }
  .flex-grid--m-2:not(.brxe-container).gap--m-m, .brxe-container.flex-grid--m-2.gap--m-m {
    --gap: var(--space-m);
  }
  .flex-grid--m-2:not(.brxe-container).gap--m-l, .brxe-container.flex-grid--m-2.gap--m-l {
    --gap: var(--space-l);
  }
  .flex-grid--m-2:not(.brxe-container).gap--m-xl, .brxe-container.flex-grid--m-2.gap--m-xl {
    --gap: var(--space-xl);
  }
  .flex-grid--m-2:not(.brxe-container).gap--m-xxl, .brxe-container.flex-grid--m-2.gap--m-xxl {
    --gap: var(--space-xxl);
  }
  .flex-grid--m-2:not(.brxe-container) > *, .brxe-container.flex-grid--m-2 > * {
    flex-basis: calc((100% - (var(--gap) * 1)) / 2);
  }
}

@media (max-width: 479px) {
  .flex-grid--s-1:not(.brxe-container), .brxe-container.flex-grid--s-1 {
    --gap: var(--grid-gap);
    display: flex;
    flex-direction: column;
    gap: var(--gap);
  }
  .flex-grid--s-1:not(.brxe-container) > *, .brxe-container.flex-grid--s-1 > * {
    width: 100%;
    max-width: 100%;
    flex-basis: auto;
  }
  .flex-grid--s-2:not(.brxe-container), .brxe-container.flex-grid--s-2 {
    --gap: var(--grid-gap);
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--gap);
    justify-content: center;
  }
  .flex-grid--s-2:not(.brxe-container).gap--s-xs, .brxe-container.flex-grid--s-2.gap--s-xs {
    --gap: var(--space-xs);
  }
  .flex-grid--s-2:not(.brxe-container).gap--s-s, .brxe-container.flex-grid--s-2.gap--s-s {
    --gap: var(--space-s);
  }
  .flex-grid--s-2:not(.brxe-container).gap--s-m, .brxe-container.flex-grid--s-2.gap--s-m {
    --gap: var(--space-m);
  }
  .flex-grid--s-2:not(.brxe-container).gap--s-l, .brxe-container.flex-grid--s-2.gap--s-l {
    --gap: var(--space-l);
  }
  .flex-grid--s-2:not(.brxe-container).gap--s-xl, .brxe-container.flex-grid--s-2.gap--s-xl {
    --gap: var(--space-xl);
  }
  .flex-grid--s-2:not(.brxe-container).gap--s-xxl, .brxe-container.flex-grid--s-2.gap--s-xxl {
    --gap: var(--space-xxl);
  }
  .flex-grid--s-2:not(.brxe-container) > *, .brxe-container.flex-grid--s-2 > * {
    flex-basis: calc((100% - (var(--gap) * 1)) / 2);
  }
}