/*!
Theme Name: GCA
Theme URI: https://www.kadencewp.com/kadence-theme/
Template: kadence
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: A child theme for the Kadence Theme for use on the GCA website.
Version: 1.0.0
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

:root body {
    --very-near: -1.5rem;
    --near: -2.5rem;
    --far: -8rem;
    --px10: 10px;
}


/* Decorations
----------------------------------------------------------------*/
/* Underline */
.gca-underline {
    position: relative;
}
.gca-underline::after {
    content: url('svg/underline.svg');
    width: 95%;
    position: absolute;
    bottom: -1.9rem;
    left: 0.5rem;
}

/* Squiggle */
.gca-squiggle {
    position: relative;
}
.gca-squiggle::after {
    position: absolute;
    display: inline-block;
    content: '';
    width: 120px;
    height: 30px;
    mask: url('svg/squiggle.svg') no-repeat 50% 50%;
    -webkit-mask: url('svg/squiggle.svg') no-repeat 50% 50%;
    mask-size: contain;
    -webkit-mask-size: contain;
    bottom: -1.4rem;
    right: 2rem;
    background-color: #b1945f;
}


/******** DECORATIONS ***********/
.gca-decoration, .gca-decoration-after { 
    position: relative;
}
.gca-decoration.gca-transform-180::before { transform: rotate(180deg);}
.gca-decoration.gca-transform-90::before  { transform: rotate(90deg); }


.gca-decoration::before {
    position: absolute;
    display: inline-block;
    content: '';
    width: 48px;
    height: 48px;
    background-color: rgba(205, 103, 47, 0.5);
}
.gca-decoration-after::after {
    position: absolute;
    display: inline-block;
    content: '';
    width: 48px;
    height: 48px;
    background-color: rgba(205, 103, 47, 0.5);
}
    
.gca-decoration.top::before         { top:      var(--near);       }
.gca-decoration.left::before        { left:     var(--near);       }
.gca-decoration.right::before       { right:    var(--near);       }
.gca-decoration.far-top::before     { top:      var(--far);        }
.gca-decoration.far-left::before    { left:     var(--far);        }
.gca-decoration.far-right::before   { right:    var(--far);        }
.gca-decoration.near-top::before    { top:      var(--very-near);  }
.gca-decoration.near-left::before   { left:     var(--very-near);  }
.gca-decoration.near-right::before  { right:     var(--very-near); }
.gca-decoration.middle::before      { top:      calc( 50% - 24px );}
.gca-decoration.top10::before       { top:      var(--px10);       }
.gca-decoration.left10::before      { left:      var(--px10);      }

.gca-decoration.gca-star::before {
    mask: url('svg/star.svg') no-repeat 50% 50%;
    -webkit-mask: url('svg/star.svg') no-repeat 50% 50%;
    mask-size: contain;
    -webkit-mask-size: contain;
}

.gca-decoration.gca-heart::before {
    mask: url('svg/heart.svg') no-repeat 50% 50%;
    -webkit-mask: url('svg/heart.svg') no-repeat 50% 50%;
    mask-size: contain;
    -webkit-mask-size: contain;
}

.gca-decoration.gca-three-stars::before {
    mask: url('svg/three-stars.svg') no-repeat 50% 50%;
    -webkit-mask: url('svg/three-stars.svg') no-repeat 50% 50%;
    mask-size: contain;
    -webkit-mask-size: contain;
}
.gca-decoration.gca-shooting-star::before {
    mask: url('svg/shooting-star.svg') no-repeat 50% 50%;
    -webkit-mask: url('svg/shooting-star.svg') no-repeat 50% 50%;
    mask-size: contain;
    -webkit-mask-size: contain;
    width: 70px;
}

.gca-decoration.gca-add-leaves::before {
    mask: url('svg/three-leaves.svg') no-repeat 50% 50%;
    -webkit-mask: url('svg/three-leaves.svg') no-repeat 50% 50%;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--global-palette1);
  }
/* Three arrows, expected to be used with a single advanced button */
.gca-decoration.gca-three-arrows {
    width: fit-content;
}
.gca-decoration.gca-three-arrows::before {
    mask: url('svg/three-arrows.svg') no-repeat 50% 50%;
    -webkit-mask: url('svg/three-arrows.svg') no-repeat 50% 50%;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--global-palette2);
    top: calc( var(--very-near) - 4px );
    right: calc( var(--very-near) - 4px );
    transition: all 0.15s ease-in-out;
}
.gca-decoration.gca-three-arrows:hover::before {
    top: var(--very-near);
    right: var(--very-near);
}
.gca-decoration-after.gca-pencil::after {
    mask: url('svg/pencil.svg') no-repeat 50% 50%;
    -webkit-mask: url('svg/pencil.svg') no-repeat 50% 50%;
    mask-size: contain;
    -webkit-mask-size: contain;
    width:100px;
    height: 50px;
    margin-left: 15px;
}

/* Spiral arrow - expected to be used with a section 
 * Used with Why Join section on homepage
 */
.gca-spiral-arrow-before {
    position: relative;
}
.gca-spiral-arrow-before::before {
    position: absolute;
    content: url(svg/spiral-arrow.svg);
    left: -55px;
    top: 40px;
    width: 30px;
}
@media (max-width:1340px) {
    .gca-spiral-arrow-before::before {
        left: 21rem;
        top: -2rem;
    }
}

.two-balloons {
    position: relative;
}
.two-balloons::after {
    position: absolute;
    content: url('svg/balloons.svg');
    width: 100px;
    top: -160px;
    left: clamp(925px, 65vw, 1920px);
}
.gca-xoxo {
    position: relative;
}
.gca-xoxo::after {
    position: absolute;
    content: url('svg/xoxo.svg');
    width: 100px;
    top: -10px;
    right: 0;
}

/* MENUS */
.gca-decoration.gca-add-leaves.about-us-menu::before {
    right: 20px;
    top: 0px;
    transform: scaleX(-1) rotate(84deg);
}