/**
 SASS files that don't get compiled into CSS. Do not put element selectors in here.
 Every file not starting with '_' should import this file if you want to use functions and mixins.
 */
/**
 * SASS variables
 *
 These are only used in the properties and abstract SASS files.
 */
/**
 Breakpoints and columns
 */
/**
 Text
 */
/**
Fill in the header styles, only write the properties you want to override.
 */
/**
 Form
 */
/**
  Buttons
 */
/**
 Breakpoints

 @param {Keyword} $breakpoint - The breakpoint name of the minimum width. Can be any of the names in the $breakpoint variable
 */
/**
  Custom column size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size in columns or 'expand'/'shrink'.
  @param {number} $total - the total size in columns. Ignored when size is 'expand'/'shrink'
 */
/**
  Custom offset size.
  Especially handy inside other columns.

  @param {Number|string} $size - the size of the offset.
  @param {number} $total - the total size in columns.
  @param {string} - the side from the offset.
 */
.paragraph--type--faq {
  --accent-color:var(--primary-light-color);
  --title-color:var(--secondary-color);
  --text-color: var(--secondary-color);
}
.paragraph--type--faq .field--name-field-faq-question {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 65px;
}
@media (min-width: 992px) {
  .paragraph--type--faq .field--name-field-faq-question {
    margin-bottom: 110px;
  }
}
.paragraph--type--faq .field--name-field-faq-question div {
  width: 100%;
}
.paragraph--type--faq .contextual {
  display: none !important;
}
.paragraph--type--faq h3 {
  text-align: center;
  margin-bottom: 30px;
}
.paragraph--type--faq .faq-element {
  list-style-type: none;
  margin: 0;
  padding: 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 10px;
}
.paragraph--type--faq .faq-element > li {
  padding: 32px;
  cursor: pointer;
  background-color: var(--light-gray);
  border-radius: 32px;
  position: relative;
  padding-right: 45px;
  margin: 0;
}
@media (min-width: 992px) {
  .paragraph--type--faq .faq-element > li {
    padding-right: 50px;
  }
}
.paragraph--type--faq .faq-element > li::after {
  content: "";
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.6 0C4.2975 0 0 4.2975 0 9.6C0 14.9025 4.2975 19.2 9.6 19.2C14.9025 19.2 19.2 14.9025 19.2 9.6C19.2 4.2975 14.9025 0 9.6 0ZM5.0625 9.0375C4.71 8.685 4.71 8.115 5.0625 7.76625C5.415 7.4175 5.985 7.41375 6.33375 7.76625L9.59625 11.0288L12.8588 7.76625C13.2113 7.41375 13.7812 7.41375 14.13 7.76625C14.4788 8.11875 14.4825 8.68875 14.13 9.0375L10.2375 12.9375C9.885 13.29 9.315 13.29 8.96625 12.9375L5.0625 9.0375Z' fill='%23212E54'/%3E%3C/svg%3E%0A");
  background-size: cover;
  background-position: center;
  width: 20px;
  height: 20px;
  transition: var(--transition);
  background-repeat: no-repeat;
  position: absolute;
  top: 0px;
  bottom: 0;
  left: auto;
  margin: auto;
  right: 16px;
}
@media (min-width: 992px) {
  .paragraph--type--faq .faq-element > li::after {
    right: 32px;
  }
}
.paragraph--type--faq .faq-element > li.is-open::after {
  transform: scaleY(-1);
}
.paragraph--type--faq .faq-element .field--name-field-text {
  display: none;
  margin-top: 30px;
}
.paragraph--type--faq {
  /* When li is open: show answer */
}
.paragraph--type--faq .faq-element li.is-open .field--name-field-text {
  display: block;
}
.paragraph--type--faq {
  /* Optional: make the title feel clickable */
}
.paragraph--type--faq .faq-element .field--name-field-text-plain-long {
  overflow-wrap: break-word;
  font-weight: 700;
  letter-spacing: 0px;
  font-size: 1.125rem;
  line-height: 110%;
  font-family: var(--header-font-family-expanded);
  font-style: italic;
  color: var(--title-color);
  text-transform: uppercase;
}
@media (min-width: 1440px) {
  .paragraph--type--faq .faq-element .field--name-field-text-plain-long {
    font-size: 1.5rem;
    line-height: 110%;
  }
}
.paragraph--type--faq h2 {
  margin-bottom: 50px;
  text-align: center;
  font-weight: 700;
  font-weight: 700;
  letter-spacing: 0px;
  font-size: 1.875rem;
  line-height: 110%;
  font-family: var(--header-font-family-expanded);
  font-style: italic;
  color: var(--title-color);
  text-transform: uppercase;
}
@media (min-width: 1440px) {
  .paragraph--type--faq h2 {
    font-size: 2.5rem;
    line-height: 110%;
  }
}