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

.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(--dark);
      color: var(--light);
      padding: var(--space-xs) var(--space-m);
      border-radius: var(--radius-xs);

      /* Button hover style */
      &:hover {
        background-color: var(--dark-90);
        color: var(--light);
      }
    }
  }
}

html.cf-theme-dark body.bricks-is-frontend .hide-on-dark {
  display: none;
}

html.cf-theme-light body.bricks-is-frontend .hide-on-light {
  display: none;
}

.hero-section__list {
  /* Update these variables with the background color and border radius variables you are using. */
  --radius-value: var(--radius-xl);
  --color-background: var(--bg-body);

  &:before {
    content: '';
    width: calc(2 * var(--radius-value));
    height: calc(2 * var(--radius-value));
    background-color: transparent;
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    transform: translateY(-100%);
    border-radius: 50%;
    box-shadow: calc(-1 * var(--radius-value)) var(--radius-value) var(--bg-body);
    transition: all .3s ease-in-out;
  }

  &:after {
    content: '';
    width: calc(2 * var(--radius-value));
    height: calc(2 * var(--radius-value));
    background-color: transparent;
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    transform: translateX(100%);
    border-radius: 50%;
    box-shadow: calc(-1 * var(--radius-value)) var(--radius-value) var(--bg-body);
    transition: all .3s ease-in-out;
  }
}

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

.login-page__form {

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

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

  /* Style link forgot your password */
  & .login-page__form-forgot-password{
    text-align: end;
    font-size: var(--text-s);
    font-weight: 600;
    color: var(--primary);
    line-height:100%;
  }

  /* Additional styles in inputs with redirection bug in Bricks version 1.10. */
  /* Width styles in inputs */
  .form-group {
    /* 100% width inputs */
    &:nth-of-type(1), &:nth-of-type(2) {
      width: 100% !important;
    }

    /* 50% width inputs */
    &:nth-of-type(3), &:nth-of-type(4) {
      width: 50% !important;
    }
  }
}










/* BLOG SINGLE */

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

.single-post-7__content{
  /* -- Heading styles -- */
  h2, h3, h4, h5, h6{
    font-weight: 700;
    color: var(--dark);
    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(--dark);
    }

    /* - Anchor text styles - */
    a{
      color: var(--dark);
      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(--dark);
      }
    }
  }

  /* -- Blockquote styles -- */
  blockquote.wp-block-quote{
    font-family:inherit;
    font-size:var(--text-l);
    text-align:center;
    font-weight: 600;
    color: var(--dark);
    border: none;
    background-color: var(--dark-5);
    padding: var(--space-3xl) var(--space-xl);
    margin-bottom: var(--space-l);

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

    cite{
      margin:0;
      color: var(--dark);
      opacity: 1;
      text-align:center;
      text-transform: inherit;
    }
  }
}












/* CONTACT PAGE */

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

.contact-28__form {
  /* Styles applied to all checkboxes */
  & .options-wrapper{
    & li{
      display: flex;
      align-items: center;
      flex-wrap:nowrap;
      gap: var(--space-3xs);

      /* Unique styles for privacy policy checkboxes */
      & label {
        font-size: var(--text-s);
        line-height: 1.2;

        /* Color link */
        & a{
          color: var(--primary);
        }
      }
    }
  }
}


/* -- Fluent Form CSS --*/

.ff-btn-submit {
  background-color: var(--primary) !important;
  transition: all .1s ease-in-out !important;
  font-weight: 600 !important;
  color: var(--light) !important;
  font-size: var(--text-m) !important;
}

.ff-btn-submit:hover {
  background-color: var(--dark) !important;
}

.ff-el-input--label label {
  color: var(--text-body) !important;
  font-weight: 600 !important;
  font-size: var(--text-m) !important;
}

.ff_t_c {
  color: var(--text-body) !important;
  font-size: var(--text-s) !important;
}


/* CONTACT PAGE */

/* Fix placeholder overlapping flag in Fluent Forms phone field */
.iti input[type="tel"] {
  padding-left: 58px !important;
  /* Add enough space for the flag */
  box-sizing: border-box;
}

/* Fix oversized checkbox on mobile in Fluent Forms GDPR field & other checkbox fields */
@media (max-width: 768px) {
  .ff_tc_checkbox, .ff-el-form-check > label {
    display: flex;
    align-items: center;
    gap: 8px; /* space between checkbox and label text */
  }

  .ff_tc_checkbox, .ff-el-form-check input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    transform: scale(1) !important;
    -webkit-transform: scale(1) !important;
    appearance: auto !important;
    -webkit-appearance: checkbox !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}