/*
 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 {
    --color-blue-two: #81ECFF;
    --color-blue: #2FDDFB;
    --color-black: #000000;
    --color-offblack: #131313;
    --color-gray: #1F1F1F;
    --color-white: #ffffff;

    --font-heading: "Space Grotesk", sans-serif;
    --font-body: "General Sans", system-ui, sans-serif;
    --font-buttons: "Space Mono", system-ui, sans-serif;
    --font-labels: "Space Mono", system-ui, sans-serif;

    --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
    --text-h1: clamp(2.5rem, calc(1.676rem + 3.518vw), 5rem);
    --text-h2: clamp(2.5rem, calc(2.005rem + 2.111vw), 4rem);
    --text-h3: clamp(2.5rem, calc(2.335rem + 0.704vw), 3rem);
    --text-h4: 2.5rem;
    --text-h5: 1.25rem;
    --text-h6: 1rem;

    --text-body: clamp(0.8rem, calc(0.835rem + 0.704vw), 1rem);
    --text-body-small: 0.9rem;
    --text-labels: 0.8rem;
    --text-cta: 0.75rem;
    --text-pre-header: 0.75rem;
}

* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--font-body);
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

button,
input,
textarea,
select {
    font: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
}

h1 {
    font-size: var(--text-h1);
    font-weight: 700;
    line-height: 1;
    em {
        color: var(--color-blue);
        font-style: normal;
    }
}

h2 {
    font-size: var(--text-h2);
    font-weight: 600;
    line-height: 1;
    em {
        color: var(--color-blue);
        font-style: normal;
    }
}

h3 {
    font-size: var(--text-h3);
    font-weight: 600;
    line-height: 1;
    em {
        color: var(--color-blue);
        font-style: normal;
    }
}

h4 {
    font-size: var(--text-h4);
    font-weight: 600;
    line-height: 1;
    em {
        color: var(--color-blue);
        font-style: normal;
    }
}

h5 {
    font-size: var(--text-h5);
    font-weight: 600;
    line-height: 1.2;
    em {
        color: var(--color-blue);
        font-style: normal;
    }
}

h6 {
    font-size: var(--text-h6);
    font-weight: 600;
    line-height: 1.2;
    em {
        color: var(--color-blue);
        font-style: normal;
    }
}

p, .brxe-text-basic {
    font-size: var(--text-body);
    opacity: 0.9;
    line-height: 1.5;
}

ul, ol {
    color: var(--color-white);
    opacity: 0.9;
    line-height: 1.4;
}

.cta {
    font-family: var(--font-labels);
    font-size: var(--text-cta);
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

a {

}

label {
    display: grid;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 1rem;
    span {
        font-family: var(--font-labels);
        font-size: var(--text-labels);
        text-transform: uppercase;
        line-height: 1.5;
        letter-spacing: 2px;
        color: var(--color-blue);
    }
}

.cog-label {
    font-family: var(--font-labels) !important;
    font-size: var(--text-cta) !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    letter-spacing: 1.2px !important;
    text-transform: uppercase !important;
    color: var(--color-blue) !important;
}

.cog-asterisk {
    color: var(--color-blue) !important;
}

.cog-content {
    p {
        font-family: var(--font-labels) !important;
        font-size: var(--text-cta) !important;
        font-weight: 400 !important;
        line-height: 1.5 !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
        color: var(--color-blue) !important;
    }
}

input {
    background-color: var(--color-offblack);
    border-radius: 2px;
    border: 1px solid #494847;
    padding: 0.8rem 0.75rem;
}

input::placeholder {
    color: rgba(255, 255, 255, 0.50);
}

textarea {
    background-color: var(--color-offblack);
    border-radius: 2px;
    border: 1px solid #494847;
    padding: 0.8rem 0.75rem;
}

textarea::placeholder {
    color: rgba(255, 255, 255, 0.50);
}

.button,
.brxe-button,
.site-header__nav .bricks-nav-menu > .menu-item:last-child > a {
    font-family: var(--font-buttons);
    font-size: 1rem;
    line-height: 1.5;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-blue);
    border-radius: 2px;
    border: 0.5px solid var(--color-blue);
    padding: 0.5rem 1rem;
    transition: 0.25s;
}

.button:hover,
.brxe-button:hover,
.site-header__nav .bricks-nav-menu > .menu-item:last-child > a:hover {
    background-color: var(--color-blue-two);
    border: 0.5px solid var(--color-blue-two);
    color: var(--color-black);
    box-shadow: 0 0 10px 0 #2FDDFB;
    transition: 0.25s;
}

.button.btn-outline,
.brxe-button.btn-outline {
    background-color: transparent;
    color: var(--color-blue);
    border: 0.5px solid var(--color-blue);
}

.button.btn-outline:hover,
.brxe-button.btn-outline:hover {
    background-color: var(--color-blue-two);
    border: 0.5px solid var(--color-blue-two);
    color: var(--color-black);
    box-shadow: 0 0 10px 0 #2FDDFB;
}

.button.btn-filled,
.brxe-button.btn-filled {
    background-color: var(--color-blue);
    color: var(--color-black);
    border: 0.5px solid var(--color-blue);
}

.button.btn-filled:hover,
.brxe-button.btn-filled:hover {
    background-color: var(--color-white);
    border: 0.5px solid var(--color-white);
    color: var(--color-black);
    box-shadow: 0 0 10px 0 #2FDDFB;
}

.button.btn-text,
.brxe-button.btn-text {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-width: 0px;
    padding: 0px;
}

.button.btn-text::after,
.brxe-button.btn-text::after {
    content: "";
    width: 0.9rem;
    height: 0.9rem;
    flex: 0 0 auto;
    background-color: var(--color-blue);
    mask-image: url("data:image/svg+xml,%3Csvg width='9' height='9' viewBox='0 0 9 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M6.68067 2.276L0.942667 8.014L0 7.07133L5.73733 1.33333H0.680667V0H8.014V7.33333H6.68067V2.276V2.276Z' fill='%232FDDFB'/%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
}

.button.btn-text:hover,
.brxe-button.btn-text:hover {
    background-color: transparent;
    color: var(--color-blue-two);
    box-shadow: 0 0 0 0;
    text-decoration: underline;
}

.button.btn-text:hover::after,
.brxe-button.btn-text:hover::after {
    background-color: var(--color-blue-two);
}

.button.btn-outline-white,
.brxe-button.btn-outline-white {
    color: var(--color-black);
    border: 0.5px solid var(--color-black);
}

.button.btn-outline-white:hover,
.brxe-button.btn-outline-white:hover {
    background-color: var(--color-white);
    border: 0.5px solid var(--color-white);
    box-shadow: 0 0 0 0;
}

.button.btn-filled-white,
.brxe-button.btn-filled-white {
    background-color: var(--color-black);
    color: var(--color-blue);
    border: 0.5px solid var(--color-black);
}

.button.btn-filled-white:hover,
.brxe-button.btn-filled-white:hover {
    background-color: var(--color-white);
    border: 0.5px solid var(--color-white);
    color: var(--color-black);
    box-shadow: 0 0 0 0;
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}