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

/* UTILS ----------------------------------------- */

.hide-imp { display: none !important; }
.show-imp { display: block !important; }


/* COMMON ----------------------------------------- */
/* low specificity so it can be overridden */



/* VIDEOs ----------------------------------------- */

.avvio-unmute-button {
  position: absolute;
  top: 3%;
  left: 2%;
  z-index: 1;
  background: none;
  border: none;
  mix-blend-mode: difference;
}

/* SHORTCODES ----------------------------------------- */

/* [avvio-featured-img-w-fallback id="" size=""] */
.avvio-feat-img {
  aspect-ratio: 1 / 1;
  background: #84D9A8;
  display: grid;
  place-content: center;
}
.avvio-feat-img img {
  object-fit: cover;
  aspect-ratio: 1 / 1;
}
.avvio-feat-img svg {
  width: 100%;
  height: auto;
  max-width: 120px;
  padding: 10px;
}


/* CUSTOM ANIMATIONS (added via functions.php) ----------------------------------------- */

/* Custom fadeInUp */
.brx-animate-customFadeInUp {
  animation-name: custom-fade-in-up;
}

@keyframes custom-fade-in-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* GRAVITY FORMS ----------------------------------------- */
/* Note styling defaults set via gform_default_styles in functions.php */

.gform-theme--framework * {
  --gf-form-gap-y: 20px;
  --gf-ctrl-shadow: none;
  --gf-label-req-gap: 1px;
  --gf-ctrl-btn-bg-color-hover-primary: var(--gf-color-primary);
}

:root .gform_wrapper label.gfield_label {
  font-weight: 400;
}

.gform_required_legend {
  font-size: 12px;
  padding-bottom: 20px;
}
.gform_wrapper.gravity-theme .gfield_required {
  padding-inline-start: 1px;
}

/* override for bricks css */
body.bricks-is-frontend :focus-visible {
  outline: solid var(--gf-ctrl-outline-color-focus) 3px;
}

:root .gform_button {
  box-shadow: none !important;
  font-family: "Onsite Extended" !important;
  letter-spacing: .05rem !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  min-width: 120px !important;
}

.ginput_recaptcha {
  zoom: 0.9 !important;
}

:root .gform_confirmation_message {
  background: #9FB8AC2E;
  padding: 4vw;
}


/* HERO BUBBLE ANIM ----------------------------------------- */

.bubbles {
  position: absolute;
  inset: 0;
  background-color: #1D423B;
}

.bubbles-inner {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  animation: fadeInBubbles 2000ms linear forwards;
}

@keyframes fadeInBubbles {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

.bubble {
  position: absolute;
  bottom: -60px;
  animation-name: rise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  opacity: 0.5;
}

.bubble-inner {
  width: 100%;
  height: 100%;
  border: 2px solid #84D9A8;
  border-radius: 50%;
  background: transparent;
  pointer-events: none;
  animation-name: sway;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

@keyframes rise {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  10% {
    opacity: 0.4;
  }
  100% {
    transform: translateY(-400px);
    opacity: 0;
  }
}

@keyframes sway {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(5px); }
  50%  { transform: translateX(-5px); }
  75%  { transform: translateX(5px); }
  100% { transform: translateX(0); }
}

.bub1  { left: 5%;   width: 30px; height: 30px; animation-duration: 12s; animation-delay: -2s; }
.bub2  { left: 12%;  width: 40px; height: 40px; animation-duration: 14s; animation-delay: -6s; }
.bub3  { left: 20%;  width: 25px; height: 25px; animation-duration: 10s; animation-delay: -4s; }
.bub4  { left: 28%;  width: 50px; height: 50px; animation-duration: 16s; animation-delay: -8s; }
.bub5  { left: 36%;  width: 20px; height: 20px; animation-duration: 12s; animation-delay: -1s; }
.bub6  { left: 44%;  width: 55px; height: 55px; animation-duration: 15s; animation-delay: -9s; }
.bub7  { left: 52%;  width: 35px; height: 35px; animation-duration: 11s; animation-delay: -5s; }
.bub8  { left: 60%;  width: 45px; height: 45px; animation-duration: 13s; animation-delay: -3s; }
.bub9  { left: 68%;  width: 22px; height: 22px; animation-duration: 14s; animation-delay: -7s; }
.bub10 { left: 76%;  width: 60px; height: 60px; animation-duration: 12s; animation-delay: -10s; }
.bub11 { left: 84%;  width: 25px; height: 25px; animation-duration: 11s; animation-delay: -6.5s; }
.bub12 { left: 92%;  width: 38px; height: 38px; animation-duration: 13s; animation-delay: -2.5s; }
.bub13 { left: 15%;  width: 28px; height: 28px; animation-duration: 10s; animation-delay: -1.5s; }
.bub14 { left: 33%;  width: 34px; height: 34px; animation-duration: 14s; animation-delay: -4.2s; }
.bub15 { left: 48%;  width: 46px; height: 46px; animation-duration: 12s; animation-delay: -3.3s; }

.sway1  { animation-duration: 4s; animation-delay: 0s; }
.sway2  { animation-duration: 5s; animation-delay: 0.5s; }
.sway3  { animation-duration: 6s; animation-delay: 1s; }
.sway4  { animation-duration: 4.8s; animation-delay: 0.2s; }
.sway5  { animation-duration: 5.5s; animation-delay: 1.5s; }
.sway6  { animation-duration: 4.2s; animation-delay: 0.8s; }
.sway7  { animation-duration: 6.2s; animation-delay: 0.3s; }
.sway8  { animation-duration: 5.7s; animation-delay: 1.2s; }
.sway9  { animation-duration: 4.5s; animation-delay: 0.9s; }
.sway10 { animation-duration: 6s; animation-delay: 1.7s; }
.sway11 { animation-duration: 5.2s; animation-delay: 0.6s; }
.sway12 { animation-duration: 4.3s; animation-delay: 1.1s; }
.sway13 { animation-duration: 5.8s; animation-delay: 1.4s; }
.sway14 { animation-duration: 6.5s; animation-delay: 0.4s; }
.sway15 { animation-duration: 4.6s; animation-delay: 1.3s; }


/* WP ADMIN ----------------------------------------- */

:root {
  --wp-admin--admin-bar--height: 0;
}
html {
  margin-top: 0 !important;
}
#wpadminbar {
  opacity: 0;
  transition: opacity 0.2s;
}
#wpadminbar:hover {
  opacity: 1;
}
@media screen and (max-width: 782px) {
  #wpadminbar { display: none; }
}