.faq {
  padding-top: initial;
  padding-bottom: 96px;
  padding-inline: 0;
  row-gap: 0;

  .faq-description {
    margin-bottom: 2rem;
  }

  .faq-items {
    display: flex;
    flex-direction: column;
    row-gap: 1.5em;
  }

  .faq-item[open] {
    padding-bottom: 0;
  }

  .faq-categories .faq-items {
    padding: 2rem 0 2rem 2rem;
    background: rgb(var(--gray));
  }

  .faq-category {
    &:not(:last-of-type) {
      margin-bottom: 2rem;
    }

    &[open] .faq-category-name {
      &::before {
        transform: rotateZ(90deg);
      }
    }
  }

  .faq-category-name {
    position: relative;
    display: flex;
    align-items: center;
    border-top: 2px solid rgb(var(--blue-light));
    padding-block: 0.5rem;
    padding-left: 2rem;
    background: rgb(var(--gray));
    font-size: 20px;
    font-weight: normal;

    &::before {
      position: absolute;
      display: inline-block;
      left: 0.75rem;
      content: "\276f";
      line-height: 0;
      font-size: 14px;
      transition: 300ms;
    }
  }

  .faq-item-question {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    padding: 0.5em;
    padding-left: 1em;
    padding-right: 2em;
    margin: 0;
    line-height: 100%;
    font-size: 20px;
    font-weight: normal;
    border: 2px solid rgb(var(--gray-light));
    border-top: 2px solid rgb(var(--blue-light));
    background-color: rgb(var(--gray-light));
    color: black;

    &::after {
      position: absolute;
      display: inline-block;
      right: 1em;
      text-align: center;
      content: "\002b";
      line-height: 100%;
    }
  }

  @media (min-width: 720px) {
    .faq-item-question {
      padding-left: 3rem;
      background: rgb(var(--blue-light));
      border: none;
    }
    .faq-item-question::before {
      position: absolute;
      content: "";
      display: block;
      top: 2px;
      left: 1px;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      background: rgb(var(--gray-light));
      z-index: -1;
    }

    .faq-item-question, .faq-item-question::before {
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 40px 0);
    }
  }

  .faq-category-name, .faq-item-question {
    &:hover {
      color: rgb(var(--blue-light));
      font-weight: normal;
    }
  }

  .faq-category[open] .faq-category-name,
  .faq-item[open] .faq-item-question {
    color: rgb(var(--blue-light));
    font-weight: normal;
  }

  .faq-item[open] .faq-item-question {
    &::after {
      content: "\2212";
    }
  }

  .faq-item-answer {
    padding: 2em 1em 2em 2em;
    color: black;
    background: transparent;

    a {
      color: black;
      font-style: italic;
      font-weight: bold;

      &:hover {
        color: rgb(var(--blue-light));
      }
    }

    h4 {
      font-size: 20px;
    }

    :is(ul,p) {
      font-size: 16px;
      margin-top: 0;
    }

    table thead tr {
      background: #e6e7e8;
    }

    table tbody tr {
      background: #f3f3f3;
    }
  }

  table:last-of-type {
    margin-bottom: 0;
  }

  summary {
    &::marker,
    &::-webkit--details-marker {
      content: "";
      display: none;
    }
  }
}