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

@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/white-alpha.css';
@import 'https://cdn.jsdelivr.net/npm/@radix-ui/colors@latest/black-alpha.css';

/*////////////////////////////////////////////////////////////////////////
OVERRIDES
////////////////////////////////////////////////////////////////////////*/

body {
    position: relative;
}

/*////////////////////////////////////////////////////////////////////////
LENIS
////////////////////////////////////////////////////////////////////////*/

html.lenis {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

.lenis.lenis-scrolling iframe {
    pointer-events: none;
}

:root {

/*////////////////////////////////////////////////////////////////////////
VARS
////////////////////////////////////////////////////////////////////////*/

    /*/// Colors ///*/

    /* Blue */

    --blue-50: hsl(213.75, 100%, 96.86%);
    --blue-100: hsl(214.29, 94.59%, 92.75%);
    --blue-200: hsl(213.33, 96.92%, 87.25%);
    --blue-300: hsl(211.7, 96.36%, 78.43%);
    --blue-400: hsl(213.12, 93.9%, 67.84%);
    --blue-500: hsl(217.22, 91.22%, 59.8%);
    --blue-600: hsl(221.21, 83.19%, 53.33%);
    --blue-700: hsl(224.28, 76.33%, 48.04%);
    --blue-800: hsl(225.93, 70.73%, 40.2%);
    --blue-900: hsl(224.44, 64.29%, 32.94%);
    --blue-950: hsl(226.23, 57.01%, 20.98%);

    /* Neutrals */

    --slate-50: hsl(210, 40%, 98.04%);
    --slate-100: hsl(210, 40%, 96%);
    --slate-200: hsl(214.29, 31.82%, 91.37%);
    --slate-300: hsl(212.73, 26.83%, 83.92%);
    --slate-400: hsl(215, 20.22%, 65.1%);
    --slate-500: hsl(215.38, 16.32%, 46.86%);
    --slate-600: hsl(215.29, 19.32%, 34.51%);
    --slate-700: hsl(215.29, 25%, 26.67%);
    --slate-800: hsl(217.24, 32.58%, 17.45%);
    --slate-900: hsl(222.22, 47.37%, 11.18%);
    --slate-950: hsl(228.57, 84%, 4.9%);


/*////////////////////////////////////////////////////////////////////////*/


    /*/// Branding ///*/

    --c-primary: var(--blue-500);
    --c-secondary: var(--blue-600);

    --c-accent: var(--blue-700);

    --c-headline: var(--slate-900);
    --c-body: var(--slate-600);

    --c-neutral-dark: var(--slate-900);
    --c-neutral-light: var(--slate-50);
    --c-blue-light: var(--blue-100);
    --c-white: white;

    /*/// Interactive ///*/

    --c-button-bg: var(--c-primary);
    --c-button-bg-hover: var(--c-secondary);

    --c-link: var(--c-headline);
    --c-link-hover: var(--c-secondary);

    /*/// UI Elements ///*/

    --c-border-ui: var(--slate-400);
    --c-border-neutral: var(--slate-600);
    --c-border-primary: var(--c-primary);



/*////////////////////////////////////////////////////////////////////////*/


    /*/// Text Sizes ///*/
 
  --step--2: clamp(0.64rem, 0.597rem + 0.1459vw, 0.7387rem);
  --step--1: clamp(0.8rem, 0.7195rem + 0.273vw, 0.9846rem);
  --step-0: clamp(1rem, 0.8637rem + 0.4621vw, 1.3125rem);
  --step-1: clamp(1.25rem, 1.0321rem + 0.7387vw, 1.7496rem);
  --step-2: clamp(1.5625rem, 1.2267rem + 1.1381vw, 2.3322rem);
  --step-3: clamp(1.9531rem, 1.449rem + 1.7089vw, 3.1088rem);
  --step-4: clamp(2.4414rem, 1.6987rem + 2.5177vw, 4.144rem);
  --step-5: clamp(3.0518rem, 1.9733rem + 3.6557vw, 5.524rem);
  --step-6: clamp(3.8147rem, 2.2666rem + 5.2477vw, 7.3634rem);
  
    /* Title Sizes */
    --t-title-xl: var(--step-6);
    --t-title-l: var(--step-5);
    --t-title-m: var(--step-4);
    --t-title: var(--step-3);
	  --t-title-s: var(--step-2);

    /* Card and Body Sizes */
    --t-text-l: var(--step-1);
    --t-text: var(--step-0);
    --t-text-s:var(--step--1);

    /* 16-18px Label for Links and Buttons */   
    --t-label: clamp(1rem, 0.9222rem + 0.2639vw, 1.125rem);


/*////////////////////////////////////////////////////////////////////////*/

    /*/// Font Styles ///*/

    /* Font-Family */
    --t-font-family: inter;

    /* Font Weight */   
    --t-weight-title: 600;
    --t-weight-text: 400; 

    /* Text Spacing */
    --t-letter-spacing: -0.0125em;
    --t-word-spacing: -0.02em;

    /* line-heights */  
    --t-line-height-xl: 1;
    --t-line-height-l: 1.5lh;
    --t-line-height-m: 1.75lh;
    --t-line-height: calc(5px + 2ex + 5px);


/*////////////////////////////////////////////////////////////////////////*/


    /*/// Icon Styles ///*/

    --icon-xl: 3em;
    --icon-l: 2em;
    --icon: 1.5em;
    --icon-s: 1em; 


/*////////////////////////////////////////////////////////////////////////*/


  --space-3xs: clamp(0.25rem, 0.2227rem + 0.0924vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4182rem + 0.2773vw, 0.6875rem);
  --space-xs: clamp(0.75rem, 0.6409rem + 0.3697vw, 1rem);
  --space-s: clamp(1rem, 0.8637rem + 0.4621vw, 1.3125rem);
  --space-m: clamp(1.5rem, 1.2819rem + 0.7394vw, 2rem);
  --space-l: clamp(2rem, 1.7274rem + 0.9242vw, 2.625rem);
  --space-xl: clamp(2.5rem, 2.1456rem + 1.2015vw, 3.3125rem);
  --space-2xl: clamp(3rem, 2.591rem + 1.3863vw, 3.9375rem);
  --space-3xl: clamp(3.5rem, 3.0092rem + 1.6636vw, 4.625rem);
  --space-4xl: clamp(4rem, 3.4547rem + 1.8484vw, 5.25rem);
  --space-5xl: clamp(5rem, 4.3184rem + 2.3105vw, 6.5625rem);
  --space-6xl: clamp(6rem, 5.1821rem + 2.7726vw, 7.875rem);
  --space-7xl: clamp(7rem, 6.0457rem + 3.2348vw, 9.1875rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.0591rem + 0.647vw, 0.6875rem);
  --space-2xs-xs: clamp(0.5rem, 0.2819rem + 0.7394vw, 1rem);
  --space-xs-s: clamp(0.75rem, 0.5046rem + 0.8318vw, 1.3125rem);
  --space-s-m: clamp(1rem, 0.5638rem + 1.4787vw, 2rem);
  --space-m-l: clamp(1.5rem, 1.0092rem + 1.6636vw, 2.625rem);
  --space-l-xl: clamp(2rem, 1.4274rem + 1.9409vw, 3.3125rem);
  --space-xl-2xl: clamp(2.5rem, 1.8729rem + 2.1257vw, 3.9375rem);
  --space-2xl-3xl: clamp(3rem, 2.2911rem + 2.403vw, 4.625rem);
  --space-3xl-4xl: clamp(3.5rem, 2.7366rem + 2.5878vw, 5.25rem);
  --space-4xl-5xl: clamp(4rem, 2.8822rem + 3.7893vw, 6.5625rem);
  --space-5xl-6xl: clamp(5rem, 3.7458rem + 4.2514vw, 7.875rem);
  --space-6xl-7xl: clamp(6rem, 4.6095rem + 4.7135vw, 9.1875rem);

  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.2911rem + 2.403vw, 2.625rem);
  --space-3xs-2xl: clamp(0rem, -2.4974rem + 8.4656vi, 4rem);
  --space-3xs-l: clamp(0rem, -1.4048rem + 4.7619vi, 2.25rem);
  --space-3xs-xl: clamp(0rem, -2.1071rem + 7.1429vi, 3.375rem);

/*////////////////////////////////////////////////////////////////////////*/

    /*/// Gap, Padding and Margin Vars ///*/

    /* Padding Block */
    --p-block: var(--space-m-l);
    --p-block-section: var(--space-5xl-6xl);
    --p-block-section-large: calc(var(--space-5xl-6xl) * 2);
    --p-block-container: var(--p-block-section);
    --p-block-column: var(--space-m-l);
    --p-block-card: var(--gap);

    /* Padding Inline */
    --p-inline: var(--grid-gutter);
    --p-inline-m: var(--space-m-l);
    --p-inline-l: var(--space-l-xl);

    /* Padding Inline Boxed Container */
    --p-inline-Boxed: var(--space-col-min-max);

    /* Gap */
    --gap-section: var(--space-2xl-3xl);
    --gap-container-large: var(--space-5xl-6xl);
    --gap-container: var(--gap-l);
    --gap-column: var(--gap);

    --gap-xs: calc(var(--gap)/2);
    --gap-s: calc(var(--gap)/1.25);
    --gap: var(--grid-gutter);
    --gap-m: calc(var(--gap)*1.25);
    --gap-l: calc(var(--gap)*2);
	
	--gap-3xs-l: var(--space-3xs-l);
	

        /* Heights */
        --height-header: calc(3rem + calc(var(--gap)*2));
        --height-hero: calc(100vh - calc(var(--height-header) + calc(var(--gap) * 5)));
        /*--height-hero: calc(100vh - var(--height-header));*/
    
        /* Widths */
        --max-width: 45ch;
        --width-hero: calc(100% - calc(var(--gap)*2));


/*////////////////////////////////////////////////////////////////////////*/


    /*/// Grid Vars ///*/
  --grid-max-width: 97.13rem;
  --grid-gutter: var(--space-s-l, clamp(1rem, 0.2911rem + 2.403vw, 2.625rem));
  --grid-columns: 12;

    --grid-col-start: 1;
    --grid-col-end: -1; 


/*////////////////////////////////////////////////////////////////////////*/


    /*/// Border ///*/
    --radius-xs: 0.25rem;
    --radius-s: 0.5rem;
    --radius-m: 1rem;
    --radius-l: 2rem;
    --radius-full: 999rem;

    --radius-s-inner: var(--radius-xs);
    --radius-s-outer: var(--gap-s);

    --radius-m-inner: var(--radius-m);
    --radius-m-outer: calc(var(--radius-m-inner) + var(--gap));

    --radius-l-inner: var(--radius-l);
    --radius-l-outer: calc(var(--radius-l-inner) + var(--gap));

    --border-style-ui: 2px solid var(--neutral-text-contrast);


/*////////////////////////////////////////////////////////////////////////*/

}


/*////////////////////////////////////////////////////////////////////////
BRICKS OVERRIDES
////////////////////////////////////////////////////////////////////////*/


.brxe-block {
    padding-block: var(--p-block);
    padding-inline: var(--p-inline);
}


/*////////////////////////////////////////////////////////////////////////
LAYOUT
////////////////////////////////////////////////////////////////////////*/

    /* Section Classes */

.u-section {
    /*--color-bg: var(--c-neutral-light);
    background-color: var(--color-bg);*/
    padding-block: var(--p-block-section);
}
.u-section--bg-100 {
    --color-bg: var(--c-neutral-light);
}
.gradient-bg--light {
    background-image: linear-gradient(to bottom, #ffffff, #fdfdfe, #fbfbfd, #f8f9fc, #f5f7fb, #f2f5fa, #f0f4f8, #edf2f7, #eaf0f5, #e7edf3, #e5ebf2, #e2e8f0);
}
.u-section--pb-end-0 {
    padding-block-end: 0px;
}

/*////////////////////////////////////////////////////////////////////////
Section Grid Stack and Hero Grid Stack
////////////////////////////////////////////////////////////////////////*/


:where(.u-section--stack, .hero--video) {
    display: grid;
    grid-template-areas: "stack";
    padding-block: 0px;
}
.hero--video {
    padding-block: 0px;
}

:where(.u-section--stack, .hero--video) > * {
    grid-area: stack;
}
:where(.hero--video) > .u-container {
    grid-area: stack;
    padding-block: var(--p-block-section);
    z-index: 1;
}

:where(.u-section--stack, .hero--video) > :where(.u-container--image, .hero__video) {
    --background-img-brightness: 0.5;
    --background-img-saturate: 1.2;

    grid-area: stack;
    padding-block: 0px;
    padding-inline: 0px;
    z-index: 1;
    height: 100%;
    max-width: 100%;
    align-self: end;
    justify-self: start;
    overflow: clip;

  filter: 
    brightness(var(--background-img-brightness)) 
    saturate(var(--background-img-saturate))
    contrast(1);
}
.hero__video {
    --background-img-brightness: 0.5;
    --background-img-saturate: 1.2;

    filter: 
    brightness(var(--background-img-brightness)) 
    saturate(var(--background-img-saturate))
    contrast(1)
    opacity(0.95);
}

:where(.u-section--stack, .hero--video) [class^="u-grid--"] {
    height: 100%;
}


/*////////////////////////////////////////////////////////////////////////
Container Classes
////////////////////////////////////////////////////////////////////////*/

.u-container, [class*="u-container--"] {
    max-width: var(--grid-max-width);
    padding-inline: calc(var(--grid-gutter)*1.5);
    margin-inline: auto;
}

    /* Grid Classes */

.u-grid, [class*="u-grid--"] {
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), 1fr);
    gap: var(--grid-gutter);
    width: 100%;
}

.u-grid--1cols {
    --grid-columns: 1;
}
.u-grid--2cols {
    --grid-columns: 2;
}
.u-grid--3cols {
    --grid-columns: 3;
}
.u-grid--4cols {
    --grid-columns: 4;
}
.u-grid--5cols {
    --grid-columns: 5;
}
.u-grid--6cols {
    --grid-columns: 6;
}

:where(.u-grid--1cols, .u-grid--2cols, .u-grid--3cols, .u-grid--4cols, .u-grid--5cols, .u-grid--6cols)> * {
    --grid-columns: 1;
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.u-grid__item--span1 {
    grid-column: span 1;
}
.u-grid__item--span2 {
    grid-column: span 2;
}
.u-grid__item--span3 {
    grid-column: span 3;
}
.u-grid__item--span4 {
    grid-column: span 4;
}
.u-grid__item--span5 {
    grid-column: span 5;
}
.u-grid__item--span6 {
    grid-column: span 6;
}
.u-grid__item--span7 {
    grid-column: span 7;
}
.u-grid__item--span8 {
    grid-column: span 8;
}
.u-grid__item--span9 {
    grid-column: span 9;
}




    /* Sticky Classes */

.u-sticky__container {
    align-items: start;
}

.u-sticky__item {
    position: sticky;
    top: var(--p-block-section);
}


/*////////////////////////////////////////////////////////////////////////
Type Styles
////////////////////////////////////////////////////////////////////////*/


[class*="t-title"] {
    --max-width: 30ch;
    --t-letter-spacing:-0.0375em;
    color: var(--c-headline);
    font-family: var(--t-font-family);
    font-weight: var(--t-weight-title);
    max-width: var(--max-width);
}

.t-title-xl, .t-title-inline-xl {
    font-size: var(--t-title-xl);
    letter-spacing: var(--t-letter-spacing);
    line-height: var(--t-line-height);
}
.t-title-l, .t-title-inline-l {
    font-size: var(--t-title-l);
    letter-spacing: var(--t-letter-spacing);
    line-height: var(--t-line-height);
    max-width: var(--max-width);
}
.t-title-inline-xl, .t-title-inline-l {
    --max-width: 100%;
}

.t-title-m {
    font-size: var(--t-title-m);
    letter-spacing: var(--t-letter-spacing);
    line-height: var(--t-line-height);
    max-width: var(--max-width);
}
.t-title {
    --max-width: 30ch;
    font-size: var(--t-title);
    letter-spacing: var(--t-letter-spacing);
    line-height: var(--t-line-height);
}

.t-title--light {
    --c-headline: var(--slate-50);
}

.t-title__span {
    --c-headline: var(--blue-800);
    color: var(--c-headline);
}

.t-title--light :where(.t-title__span) {
    --c-headline: var(--blue-600);
    color: var(--c-headline);
}


/*////////////////////////////////////////////////////////////////////////*/

[class*="t-text"] {
    --max-width: 46ch;
    --t-letter-spacing: -0.0125em;
    color: var(--c-body);
    font-family: var(--t-font-family);
    font-weight: var(--t-weight-text);
    letter-spacing: var(--t-letter-spacing);
    max-width: var(--max-width);
    word-spacing: var(--t-letter-spacing);
    line-height: var(--t-line-height);
}

.t-text-l{
    --max-width: 35ch;
    font-size: var(--t-text-l);
    line-height: var(--t-line-height);
}
.t-text {
    font-size: var(--t-text);
    line-height: var(--t-line-height);
}
.t-text-s {
    font-size: var(--t-text-s);
    letter-spacing: var(--t-letter-spacing);
    line-height: var(--t-line-height);
}

.t-title-overline {
    color: var(--c-primary);
    font-size: var(--t-text-s);
    letter-spacing: var(--t-letter-spacing);
    line-height: var(--t-line-height);
}

.t-label {
    font-size: var(--step-0);
    color: var(--c-headline);
    font-family: var(--t-font-family);
    font-weight: var(--t-weight-text);
    letter-spacing: var(--t-letter-spacing);
    line-height: var(--t-line-height);
}

.t--bold {
    --t-weight-text: 600;
    color: var(--c-headline);
}

.t--align-center {
    text-align: center;
}

.t-text--light {
    --c-body: var(--slate-200);
}


/*////////////////////////////////////////////////////////////////////////*/

.button {
    font-size: 1rem;
    line-height: 1;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 1.25ch;
    background-color: var(--clr);
    color: var(--c-white);
    border-radius: var(--radius-s);
    font-weight: 500;
    padding-inline-start: 2ch;
    padding-inline-end: 1.5ch;
    padding-block: 1.5ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: background-color .3s;
  }
  
  .button__icon-wrapper {
    flex-shrink: 0;
    width: 1.5ch;
    height: 1.5ch;
    position: relative;
    color: var(--clr);
    background-color: var(--c-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
  }
  
  .button:hover {
    background-color:var(--c-secondary);
  }
  
  .button:hover .button__icon-wrapper {
    color: var(--c-secondary);
  }
  
  .button__icon-svg--copy {
    position: absolute;
    transform: translate(-150%, 150%);
  }
  
  .button:hover .button__icon-svg:first-child {
    transition: transform .3s ease-in-out;
    transform: translate(150%, -150%);
  }
  
  .button:hover .button__icon-svg--copy {
    transition: transform .3s ease-in-out .1s;
    transform: translate(0);
  }
  
  /*
  .stars {
    position: absolute;
    opacity: 0;
    top: -.3em;
    right: -.3em;
    height: 100%;
    transition: transform 300ms,opacity 150ms;
  }
  
  .stars :nth-child(n) {
    fill: #999;
  }
  
  .button--2 {
    position: relative;
    cursor: pointer;
    padding: 1em 2em;
    border: 0;
    border-radius: .5em;
    font-weight: bolder;
    transition: transform 150ms, box-shadow 150ms;
    box-shadow: 0 0 #999;
    background-color: #f1f1f1;
    color: #333;
  }
  
  .button--2:hover {
    transform: translate(.3em,-.3em);
    box-shadow: -.3em .3em #999;
  }
  
  .button--2:hover > .stars {
    opacity: 1;
    transform: translate(.2em,-.2em);
  }
  
  .button--2:active > .stars :nth-child(n) {
    fill: #ccc;
  }*/

.content-column--left {
  padding-inline-end: var(--space-3xs-xl);
}
.content-column--right {
  padding-inline: var(--space-3xs-xl);
}