/*
 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 {
    
    /* TEXT SIZE SCALE - VARIABLES */
    --text-xs:  clamp(1.19rem, 0.2vw + 1.12rem, 1.46rem); /* mono text size - modified from URL */
    /* For sizes below: https://www.fluid-type-scale.com/calculate?minFontSize=14&minWidth=320&minRatio=1.125&maxFontSize=23.4&maxWidth=1700&maxRatio=1.2&steps=xs%2Cs%2Cm%2Cl%2Cxl&baseStep=m&prefix=text&decimals=2&useRems=on&remValue=10&previewFont=Chivo&previewText=Preview&previewWidth=1920 */
    --text-s:   clamp(1.24rem, 0.51vw + 1.08rem, 1.95rem);
    --text-m:   clamp(1.4rem, 0.68vw + 1.18rem, 2.34rem); /* standard text size */
    --text-l:   clamp(1.57rem, 0.89vw + 1.29rem, 2.81rem);
    --text-xl:  clamp(1.77rem, 1.16vw + 1.4rem, 3.37rem);

    /* HEADING SIZE SCALE - VARIABLES */
    /* For h2/h3: https://www.fluid-type-scale.com/calculate?minFontSize=12&minWidth=320&minRatio=1.618&maxFontSize=20&maxWidth=1700&maxRatio=2.25&steps=6%2C5%2C4%2C3%2C2%2C1%2Ctitle&baseStep=4&prefix=h&decimals=2&useRems=on&remValue=10&previewFont=Chivo&previewText=Preview&previewWidth=1912 */
    --h3:       clamp(1.94rem, 1.85vw + 1.35rem, 4.5rem); /* Looks like h1-hero & text-lead */
    --h2:       clamp(3.14rem, 5.06vw + 1.52rem, 10.13rem); /* most headings */
    /* For h-title (using h1 size): https://www.fluid-type-scale.com/calculate?minFontSize=18&minWidth=320&minRatio=1.2&maxFontSize=1006&maxWidth=1700&maxRatio=0.7&steps=6%2C5%2C4%2C3%2C2%2C1%2Ctitle&baseStep=4&prefix=h&decimals=2&useRems=on&remValue=10&previewFont=Chivo&previewText=Preview&previewWidth=1912 */
    --h-title:  clamp(3.14rem, 22.75vw + -4.17rem, 34.51rem); /* using h1-ish from calculator */



    /* SPACING SIZE SCALE - VARIABLES */
    --space-xxxs:   clamp(0.1rem, 0.362vw - 0.016rem, 0.6rem); /* just added for left-aligning h2 s */
    --space-xxs:    clamp(0.4rem, 0.667vw - 0.133rem, 1rem); /* using for vert spacing */
    --space-xs:     clamp(1.5rem, 0.362vw + 1.384rem, 2rem); 
    --space-s:      clamp(2rem, 0.725vw + 1.768rem, 3rem);
    --space-m:      clamp(2rem, 1.449vw + 1.536rem, 4rem);
    --space-l:      clamp(3rem, 2.174vw + 2.304rem, 6rem); /* newly added 3-11-24 */
    --space-xl:     clamp(5rem, 3.623vw + 3.841rem, 10rem);
    --space-xxl:    13rem;

    --space-title:  clamp(0.1rem, 2.1vw + -0.57rem, 3rem); /* only used for left-aligning the h-title, calculated using h-title spacing scale */

    /* COLOR VARIABLES - so far just for the CSS file */
    --primary: #ebff00;
    --primary-overlay: rgba(235,255,0,0.5);
    --darkest: #010101;

}

/* necessary hack because mobile browser don't handle fixed background images correctly */ 
html {
    overflow-x: hidden; /* necessary for sliders to work right in safari */
}

body {
    position: relative;
    overflow-x: hidden; /* adding this for the sliders to work right */
}

body::before {
    content: '';
    position: fixed;
    z-index: -1;
    display: block;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-image: url("/wp-content/uploads/aura-bg-2048-noise3.webp");
    background-size: cover;
    background-repeat: repeat;
    background-position: right top;
}
/* end hack */

.text-emphasis {
    color: var(--primary);
    font-weight: 400;
}

.blackletter {
    color: var(--primary);
    font-family: 'Pirata One', 'Chivo', 'Arial', sans-serif; /* needs to be defined both here and in the builder for all scenarios */
    font-size: var(--h2);
    letter-spacing: -.02em;
}

h1, h2, h3, .h1, .h2, .h3 {
    text-wrap: balance;
}

p { 
    text-wrap: pretty;
}

.wrap-balance { /* utility class */
    text-wrap: balance;
}

.wrap-normal {
    text-wrap: unset;
}

h2, .h2 {
    margin-left: calc(var(--space-xxxs) * -1); /* to align left side */
}

.h3 { /* also a bricks class, but added here to be able to use within gutenberg */
    font-size: var(--h3);
    letter-spacing: -.04em;
    font-weight: 100;
    line-height: 1.1;
}

.fancy-indent {
    text-indent: -3rem;
    padding-left: 3rem;
}

.brxe-logo img {
    height: 15vw;
    max-height: 212px;
}

@media screen and (max-width: 767px) {
    .brxe-logo img {
        max-height: 26px;
    }
}

.iridescent {
    mix-blend-mode: color-dodge;
}

/* custom styles for sliders */
.splide__track {
    overflow: visible !important;
}

.splide__pagination .splide__pagination__page {
    border-radius: 1px !important;
}

.splide .bricks-image-caption {
    background: var(--primary-overlay);
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transition: opacity 0.3s ease-out;
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    transform: translate3d(0,0,0); /* Safari */
    color: var(--darkest);
    display: flex;
    align-items: end;
    text-align: left;
    padding: var(--space-s);
    border-radius: 3px;
    text-wrap: pretty;
}

.splide__slide figure:hover .bricks-image-caption {
    opacity: 1;
}

.splide__slide img {
    filter: drop-shadow(0 0 16px rgba(15,28,8,0.9)) drop-shadow(0 0 36px rgba(74,148,39,0.2));
    transform: translate3d(0,0,0); /* Safari */
}

.splide__slide {
    transform: translate3d(0,0,0); /* Safari */
}

/* end - custom styles for sliders */

.card .icon {
    position: absolute;
    right: var(--space-xs);
    top: calc(var(--space-xs) - 1px);
}

.card h3 {
    margin-bottom: var(--space-xs);
    max-width: 84%;
}

.icon svg {
    transform: scale(0.88); /* scale all icons to ~28px */
}

.footer-menu .icon svg {
    transform: scale(0.55);
}

.card-border-fade {
    border: 1px solid transparent;
    border-radius: 3px;
    background: linear-gradient(var(--bricks-color-nwjhcc), var(--bricks-color-nwjhcc)), linear-gradient(rgb(235 255 0 / 12%), rgb(235 255 0 / 5%));
    background-origin: border-box;
    background-clip: padding-box, border-box;
}

.btn-primary-border-fade {
    border: 1px solid transparent !important;
    border-radius: 3px;
    background: linear-gradient(var(--primary), var(--primary)), linear-gradient(rgb(255 255 255 / 86%), rgb(255 255 255 / 0%));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    z-index: 1;
    position: relative;
}

.btn-primary-border-fade::before {
    border: 1px solid transparent;
    border-radius: 3px;
    background: linear-gradient(#808c05 0%, #c1d807 30%, #f1ff4e 100%), linear-gradient(#acbb00c4, rgb(255 255 255 / 86%));
    background-origin: border-box;
    background-clip: padding-box, border-box;
    position: absolute;
    content: '';
    top: -1px;
    right: -1px;
    bottom: -1px;
    left: -1px;
    z-index: -1;
    opacity: 0;
    transition: all 150ms ease-out;
}

.btn-primary-border-fade:hover::before {
    opacity: 1;
}

.btn-secondary:hover {
    background-color: unset !important;
    background: radial-gradient(ellipse at center top, #ebff0038 0%, transparent 60%);
    background-clip: padding-box;
}

#brx-footer {
    background: linear-gradient(0deg, #424c1f6e 50%, transparent); /* helps with visibility of footer logo bg */
}

#brxe-icctly { /* footer container */
    background: left bottom -0.2em / contain no-repeat url(/wp-content/uploads/lasting-logo-title-footer-3.min_.svg);
}

:where(.brxe-nav-menu) .bricks-nav-menu li:not(.brx-has-megamenu)>a {
    display: inline;
    transition: all 0.12s ease-out;
}

:where(a):not(.bricks-button):hover {
    text-decoration: underline;
    text-underline-offset: 0.6rem;
    text-decoration-thickness: 0.1rem;
}

.brxe-nav-nested li > a:hover {
    text-decoration: none;
}

.bricks-nav-menu > li > a:hover,
.brxe-nav-nested li > a:hover .text {
    /* text-decoration: underline;
    text-underline-offset: 0.6rem;
    text-decoration-color: var(--primary); */
    text-decoration: none;
    background-color: var(--primary);
    color: var(--bricks-color-uualqk);
}

.brxe-nav-nested .menu-item {
    height: 1.5em; /* fix for Safari */ 
}

.brxe-nav-menu .bricks-mobile-menu-wrapper .bricks-mobile-menu {
    padding-right: 7rem;
}

.bricks-mobile-menu-toggle {
    mix-blend-mode: difference;
    position: fixed;
    right: var(--space-m);
    top: calc(var(--space-m) + 4px);
    z-index: 999;
}

/* BEGIN - Custom tasteful animations (based on animate.css) */

.tst-animate-fadeInUp {
    animation: tst-fadeinup auto linear both;
    animation-timeline: view();
    animation-range: entry contain;
}

@keyframes tst-fadeinup {
    from {
      opacity: 0;
      transform: translateY(200px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
}

/* END - Custom tasteful animations (based on animate.css) */