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

    --text-xs: clamp(0.79rem, -0.01vw + 0.79rem, 0.78rem);
    --text-s: clamp(0.89rem, 0.08vw + 0.87rem, 0.94rem);
    --text-m: clamp(1rem, 0.21vw + 0.96rem, 1.13rem);
    --text-l: clamp(1.13rem, 0.37vw + 1.05rem, 1.35rem);
    --text-xl: clamp(1.27rem, 0.59vw + 1.15rem, 1.62rem);


    /* HEADING SIZE SCALE */

    --h6: clamp(0.8rem, -0.04vw + 0.81rem, 0.77rem);
    --h5: clamp(1rem, 0.05vw + 0.99rem, 1.03rem);
    --h4: clamp(1.25rem, 0.21vw + 1.21rem, 1.38rem);
    --h3: clamp(1.56rem, 0.45vw + 1.47rem, 1.83rem);
    --h2: clamp(1.95rem, 0.82vw + 1.79rem, 2.44rem);
    --h1: clamp(2.44rem, 1.36vw + 2.17rem, 3.26rem);
    --h-title: clamp(3.05rem, 2.15vw + 2.62rem, 4.34rem);
}


/* TEXT SIZE UTILITY CLASSES */

.text-xl {
    font-size: var(--text-xl);
    line-height: 1.4;
}
.text-l {
    font-size: var(--text-l);
    line-height: 1.5;
}
body, .text-m {
    font-size: var(--text-m);
    line-height: 1.5;
}
.text-s {
    font-size: var(--text-s);
    line-height: 1.6;
}
.text-xs {
    font-size: var(--text-xs);
    line-height: 1.7;
}


/* HEADING SIZE UTILITY CLASSES */

.h-title {
    font-size: var(--h-title);
    line-height: 1.05;
}
h1, .h1 {
    font-size: var(--h1);
    line-height: 1.1;
}
h2, .h2 {
    font-size: var(--h2);
    line-height: 1.2;
}
h3, .h3 {
    font-size: var(--h3);
    line-height: 1.3;
}
h4, .h4 {
    font-size: var(--h4);
    line-height: 1.4;
}
h5, .h5 {
    font-size: var(--h5);
    line-height: 1.5;
}
h6, .h6 {
    font-size: var(--h6);
    line-height: 1.6;
}

.grecaptcha-badge {visibility: hidden;}

/* Contact */
/* -- The root styles must go in the element of the structure with the name "Form". --*/ 

.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%;
    }
  }
}

  /* Styles applied to the first card */
  .card-news-archive__wrapper:not(:last-child){
    .card-news-archive{
    	border-bottom: 1px solid var(--neutral-trans-20);
    }
  }

  /* Rsources */
  .resource-single__content{
  /* -- Heading styles -- */
  h2, h3, h4, h5, h6{
    font-weight: 600;
    color: var(--neutral);
    margin-bottom: var(--space-s);
  }

  h2{
    font-size: var(--text-xl);
  }

  h3{
    font-size: var(--text-l);
  }

  h4, h5, h6{
    font-size: var(--text-m);
  }

  /* -- Content paragraphs styles -- */
  p {

    /* - Bold text styles - */
    strong{
      color: var(--neutral);
    }

    /* - Anchor text styles - */
    a{
      color: var(--neutral);
      text-decoration: underline;
      font-weight: 500;
      transition: color .2s ease;

      &:hover, &:focus{
        color: var(--primary);
      }
    }

  }

  /* -- List styles -- */
  ul, ol{
    margin:var(--space-m) 0;

    li:not(:last-child){
      margin-bottom: 8px;
    }
  }

  /* -- Image styles -- */
  figure{
    margin-bottom: var(--space-l);


    &:has(figcaption) {


      figcaption{
        margin-top: var(--space-xs);
        color: var(--neutral);
      }
    }
  }

  /* -- Blockquote styles -- */
  blockquote.wp-block-quote{
    font-family:inherit;
    text-align:center;
    font-weight: 600;
    color: var(--white);
    border:none;
    background-color:var(--neutral);
    padding:var(--section-space-m) var(--space-xxl);
    margin-bottom: var(--space-l);

    @media (max-width: 767px) {
      padding: var(--section-space-m) var(--space-l);
    }

    cite{
      margin:0;
      font-size: var(--text-l);
      color: var(--neutral);
      opacity: 1;
      text-align:center;
      text-transform: inherit;
    }
  }
}

/* News */
.news-single__content{
  /* -- Heading styles -- */
  h2, h3, h4, h5, h6{
    font-weight: 600;
    color: var(--neutral);
    margin-bottom: var(--space-s);
  }

  h2{
    font-size: var(--text-xl);
  }

  h3{
    font-size: var(--text-l);
  }

  h4, h5, h6{
    font-size: var(--text-m);
  }

  /* -- Content paragraphs styles -- */
  p {

    /* - Bold text styles - */
    strong{
      color: var(--neutral);
    }

    /* - Anchor text styles - */
    a{
      color: var(--neutral);
      text-decoration: underline;
      font-weight: 500;
      transition: color .2s ease;

      &:hover, &:focus{
        color: var(--primary);
      }
    }

  }

  /* -- List styles -- */
  ul, ol{
    margin:var(--space-m) 0;

    li:not(:last-child){
      margin-bottom: 8px;
    }
  }

  /* -- Image styles -- */
  figure{
    margin-bottom: var(--space-l);


    &:has(figcaption) {


      figcaption{
        margin-top: var(--space-xs);
        color: var(--neutral);
      }
    }
  }

  /* -- Blockquote styles -- */
  blockquote.wp-block-quote{
    font-family:inherit;
    text-align:center;
    font-weight: 600;
    color: var(--white);
    border:none;
    background-color:var(--neutral);
    padding:var(--section-space-m) var(--space-xxl);
    margin-bottom: var(--space-l);

    @media (max-width: 767px) {
      padding: var(--section-space-m) var(--space-l);
    }

    cite{
      margin:0;
      font-size: var(--text-l);
      color: var(--neutral);
      opacity: 1;
      text-align:center;
      text-transform: inherit;
    }
  }
}

/* Header */
.header__menu {
  /* Selecting only the children of "bricks-nav-menu". */
  .bricks-nav-menu > .menu-item {
    /* The styles will apply only to the child of the last element with the class "menu-item".  */
    &:last-child a {
      background-color: var(--primary);
      color: var(--white);
      padding: var(--space-xs) var(--space-m);
      border-radius: var(--radius-xs);

      /* Button hover style */
      &:hover {
        background-color: var(--primary-trans-70);
        color: var(--white);
      }
    }
  }
}