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

/* Text elements */
:root {
    --h1: clamp(3.2rem, 2.677vw + 2.343rem, 6rem);
    --h2: clamp(2.6rem, 2.103vw + 1.927rem, 4.8rem);
    --h3: clamp(2.2rem, 0.765vw + 1.955rem, 3rem);
    --h4: clamp(1.8rem, 0.382vw + 1.678rem, 2.2rem);
    --h5: clamp(1.4rem, 0.287vw + 1.308rem, 1.7rem);
    --h6: clamp(1.3rem, 0.096vw + 1.269rem, 1.4rem);
    --text-line-height: 1.7;
    --h1-line-height: 1.2;
    --text-xs: clamp(0.8rem, 0.191vw + 0.739rem, 1rem);
    --text-s: clamp(1rem, 0.287vw + 0.908rem, 1.3rem);
    --text-m: clamp(1.3rem, 0.191vw + 1.239rem, 1.5rem);
    --text-l: clamp(1.5rem, 0.287vw + 1.408rem, 1.8rem);
    --text-xl: clamp(1.8rem, 0.765vw + 1.555rem, 2.6rem);
}

/* Grids */
:root {
    --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-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);
}

/* Spacing */
:root {
    --section-block-padding: clamp(3.6rem, 3.728vw + 2.407rem, 7.5rem);
    --gutter: clamp(2rem, 4.207vw + 0.654rem, 6.4rem);
    --grid-gap: clamp(2rem, 1.147vw + 1.633rem, 3.2rem);
    --content-gap: clamp(2rem, 1.147vw + 1.633rem, 3.2rem);
    --container-gap: clamp(4rem, 1.912vw + 3.388rem, 6rem);
    --card-gap: clamp(1.6rem, 0.382vw + 1.478rem, 2rem);
    --card-padding: clamp(1rem, 0.382vw + 0.878rem, 1.4rem);
    --section-header-gap: clamp(2rem, 1.147vw + 1.633rem, 3.2rem);
    --space-xs: clamp(1rem, 0.382vw + 0.878rem, 1.4rem);
    --space-s: clamp(1.6rem, 0.765vw + 1.355rem, 2.4rem);
    --space-m: clamp(2rem, 1.147vw + 1.633rem, 3.2rem);
    --space-l: clamp(2.6rem, 1.147vw + 2.233rem, 3.8rem);
    --space-xl: clamp(3.2rem, 1.147vw + 2.833rem, 4.4rem);
}

/* Colors */
:root {
    /* Base color */
    --base-h: 260;
    --base-s: 30%;
    --base-l: 10%;
    --base-hsl: var(--base-h) var(--base-s) var(--base-l);
    --base: hsl(var(--base-hsl));

    /* Base variations */
    --base-trans-20: hsl(var(--base-h) var(--base-s) var(--base-l) / .2);
    --base-trans-80: hsl(var(--base-h) var(--base-s) var(--base-l) / .8);
    --base-light-trans-20: hsl(var(--base-h) var(--base-s) 95% / .2);
    --base-dark-trans-80: hsl(var(--base-h) var(--base-s) 5% / .8);
    --base-light-20: hsl(var(--base-h) var(--base-s) 20%);
    --base-light: hsl(var(--base-h) var(--base-s) 75%);
    --base-ultra-light: hsl(var(--base-h) var(--base-s) 90%);
    --base-medium: hsl(var(--base-h) var(--base-s) 55%);

    /* Action color */
    --action-h: 35;
    --action-s: 93%;
    --action-l: 77%;
    --action-hsl: var(--action-h) var(--action-s) var(--action-l);
    --action: hsl(var(--action-hsl));

    /* Action variations */
    --action-trans-10: hsl(var(--action-h) var(--action-s) var(--action-l) / .1);
    --action-trans-40: hsl(var(--action-h) var(--action-s) var(--action-l) / .4);

    /* Neutral color */
    --neutral-h: 345;
    --neutral-s: 17%;
    --neutral-l: 91%;
    --neutral-hsl: var(--neutral-h) var(--neutral-s) var(--neutral-l);
    --neutral: hsl(var(--neutral-hsl));

    /* Neutral variations */
    --neutral-trans-10: hsl(var(--neutral-h) var(--neutral-s) var(--neutral-l) / .1);

    /* Primary color */
    --primary-h: 253;
    --primary-s: 17%;
    --primary-l: 43%;
    --primary-hsl: var(--primary-h) var(--primary-s) var(--primary-l);
    --primary: hsl(var(--primary-hsl));

    /* Primary variations */
    --primary-trans-10: hsl(var(--primary-h) var(--primary-s) var(--primary-l) / .1);

    /* Secondary color */
    --secondary-h: 311;
    --secondary-s: 10%;
    --secondary-l: 66%;
    --secondary-hsl: var(--secondary-h) var(--secondary-s) var(--secondary-l);
    --secondary: hsl(var(--secondary-hsl));

    /* Secondary variations */
    --secondary-trans-10: hsl(var(--secondary-h) var(--secondary-s) var(--secondary-l) / .1);

    /* Text */
    --text-color: var(--base-ultra-light);
}

/* Transitions */
:root {
    --transition-duration: 0.3s;
    --transition-timing: ease-in-out;
    --transition-delay: 0s;
    --transition: background var(--transition-duration) var(--transition-timing) var(--transition-delay), color var(--transition-duration) var(--transition-timing) var(--transition-delay), border var(--transition-duration) var(--transition-timing) var(--transition-delay);
}

/* Buttons */

/* Links */

/* Animations */
@keyframes pulseBox {
    0% {
        box-shadow: 0 0 0 0 var(--pulse-color);
    }
    100% {
        box-shadow: 0 0 2rem 1rem transparent;
    }
}

@keyframes pulseScale {
  0% {
    transform: translate(0%, -50%) scale(1); /* No scaling, keeps vertical centering */
    opacity: 1;
  }
  50% {
    transform: translate(0%, -50%) scale(1.25); /* Adjust horizontal translation to account for scaling */
    opacity: 0.5;
  }
  100% {
    transform: translate(0%, -50%) scale(1); /* Returns to normal size */
    opacity: 1;
  }
}

.text--emphasis {
    font-family: "PlayfairDisplay";
    font-style: italic;
    font-size: calc(1.5*var(--text-l));
    line-height: 1.2
}

strong {
    font-weight: 600;
}

:root {
    scroll-behavior: smooth;
}