/*
 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 {
  --h-title: clamp(3rem, 2.4355rem + 2.2582vw, 4.242rem);
}

.h-title {
    font-size: var(--h-title);
    line-height: 1.05;
}

.woocommerce-info {margin: 1em;}

.bg--glow {
    position: relative
}

:where(.bg--glow > *) {
    position: relative
}

.bg--glow::before {
    background-image: radial-gradient(circle at top center, var(--neutral-dark), transparent 600px);
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none
}

.bg--glow {
    border-block-start: 1px solid;border-image: linear-gradient(to left, transparent, var(--neutral-dark-trans-80), transparent) 1;
}

.grecaptcha-badge {visibility: hidden;}

/* Products */

  /*-- Styles applied to the "price" class that don't have a child element with the "del" tag, in this way, you can give styles to the regular price without applying to those with sale prices. --*/
.card-shop-grid__price{
  .price:not(:has(del)) bdi {
    color: var(--white);
    font-weight: 700;
  }
}

/* ---- ADDITIONAL INFORMATION FOR SALE TAG ----
- The element in the "Sale container" structure, which is the sale tag, needs to have a "Dynamic data" condition added, and the dynamic data field should be "{woo_product_sale_price}" and not equal (!=). This way, the tag will only be displayed when it has a sale price.
- */

/* Contact */
.contact__form{
  /* Styles applied to all checkboxes */
  & .options-wrapper{
    & li{
      display: flex;
      align-items: start;
      flex-wrap:nowrap;
    }

    /* Unique styles for privacy policy checkboxes */
    & label[for="form-field-vmwaoi-0"] {
      font-size: var(--text-s);
      line-height: 100%;
    }
  }
}

/* Footer */
.footer__menu-columns{
  ul.bricks-nav-menu{
    columns: var(--width-xs) 3;
    display: block;

    /* - Number of columns for mobile versions -*/
    @media(max-width: 767px){
      columns: 2;
    }

    /* - Top margin of each menu item - */
    li.menu-item:not(:first-child){
      margin-top: var(--space-xs);
    }
  }
}

.footer__form{
  /* Important style for the terms and conditions field to be after the button. */
  & .form-group:has(.footer__form-terms){
    order:3;
  }

  /* Styles terms and conditions */
  & .footer__form-terms{
    margin-top: var(--space-xs);
    font-size: var(--text-xs);

    /* Styles anchor link terms and conditions */
    & a{
      color:var(--neutral);
      font-weight: 600;
    }
  }
}