@import url('../../colors.css');
@import url('../../variables.css');

.heading-extra-big {
  font-family: var(--header-font-family);
  font-size: 2.8rem !important;
  font-weight: normal !important;

  a {
    font-family: var(--header-font-family);
  }
}

.heading-big {
  font-family: var(--header-font-family);
  font-size: 1.5rem !important;
  font-weight: bold !important;

  a {
    font-family: var(--header-font-family);
  }
}

.heading-normal {
  font-family: var(--header-font-family);
  font-size: 1.4rem !important;
  font-weight: bold !important;

  a {
    font-family: var(--header-font-family);
  }
}

.heading-small {
  font-family: var(--header-font-family);
  font-size: 1.3rem !important;
  font-weight: bold !important;

  a {
    font-family: var(--header-font-family);
  }
}

.text-bigger {
  font-family: var(--general-font-family);
  font-size: 1.4rem !important;
}

.text-big {
  font-family: var(--general-font-family);
  font-size: 1.2rem !important;
}

.text-normal {
  font-family: var(--general-font-family);
  font-size: 1.1rem !important;
}

.text-small {
  font-family: var(--general-font-family);
  font-size: 0.8rem !important;
}

.hide-on-desktop {
  @media only screen and (min-width: 1024px) {
    display: none !important;
  }
}

.hide-on-tablet {
  /* @media only screen and (min-width: 768px) and (max-width: 1023px) { */
  @media only screen and (min-width: 801px) and (max-width: 1023px) {
    display: none !important;
  }
}

.hide-on-mobile {
  /* @media only screen and (max-width: 767px) { */
  @media only screen and (max-width: 800px) {
    display: none !important;
  }
}

.clamp-one-line {
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 1;
}

.clamp-two-line {
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
}

.clamp-three-line {
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
}

@media only screen and (min-width: 768px) {
  .heading-big {
    font-size: 1.6rem !important;
  }

  .heading-normal {
    font-size: 1.3rem !important;
  }

  .heading-small {
    font-size: 1.2rem !important;
  }

  .text-bigger {
    font-size: 1.3rem !important;
  }

  .text-big {
    font-size: 1.1rem !important;
  }

  .text-normal {
    font-size: 1rem !important;
  }

  .text-small {
    font-size: 0.9rem !important;
  }
}

@media only screen and (min-width: 1024px) {
  .heading-big {
    font-size: 1.6rem !important;
  }

  .heading-normal {
    font-size: 1.4rem !important;
  }

  .heading-small {
    font-size: 1.3rem !important;
  }

  .text-bigger {
    font-size: 1.4rem !important;
  }

  .text-big {
    font-size: 1.1rem !important;
  }

  .text-normal {
    font-size: 1rem !important;
  }

  .text-small {
    font-size: 0.9rem !important;
  }
}

* {
  font-family: var(--general-font-family);
}

figcaption {
  font-size: 0.8rem !important;
  margin-top: 0.2em !important;
}

.wp-block-separator {
  border-width: 1px;
  margin: 16px 0 !important;
}


.wp-block-separator {
  border-width: 1px;
  margin: 16px 0 !important;
}

hr.is-style-wide {
    width: clamp(300px, 60%, 400px);
    color: #6A6390;
    
    @media only screen and (max-width: 768px) {
        width: 100%;
    }
}

/* Form styles */
.wpcf7 {
  background-color: #EBECED;

  .wpcf7-form {
    padding: 6px 6px 6px 6px !important;
  }

  .area-code {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: clamp(200px, 80%, 80%) !important;

    @media screen and (max-width: 500px) {
      flex-direction: column;
      align-items: flex-start;
      
    }

    span:last-child {
      width: 100% !important;

      .wpcf7-tel {
        width: 100% !important;
      }
    }
  }

  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="number"],
  input[type="password"] {
    max-width: none !important;
    width: clamp(200px, 80%, 80%) !important;
  }

  select {
    width: fit-content !important;
    display: inline-block !important;
    margin-right: 6px !important;
    padding-top: 11px !important;
    padding-bottom: 10px !important;
  }

  .wpcf7-radio {
    width: 98% !important;
  }

  textarea {
    width: 100% !important;
  }

  .wpcf7-submit {
    width: 150px;
    border: none;
    background-color: #414051;
    color: white;
    padding: 3px 20px;
    border-radius: 0px;

    &:hover,
    &:focus,
    &:active {
      background-color: #414051;
      color: var(--agenda-color);
      cursor: pointer;
    }
  }
}