@import "variables";
@import "mixins";

.faq {
  margin-bottom: (4rem * 1.6);
  .faq-hero {
    margin-top: $space-md;
  }
  .faq-container {
    position: relative;
    .visually-hidden {
      position: fixed;
      top: 0;
      right: 100%;
      visibility: hidden;
    }
    .targets {
      position: absolute;
      top: 0;
    }
    .faq-content {
      .switch-button-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-content: center;
        justify-content: space-between;
        align-items: stretch;
        margin-bottom: (4rem * 1.6);
        gap: 3rem;
        @include bp("md") {
          margin-bottom: $space-xs;
          justify-content: space-between;
          gap: 1rem;
        }
        .switch-button {
          background: $white;
          box-shadow: 0 0.5rem 1.5rem #00000012;
          padding: (2rem * 1.6);
          border-radius: 1rem;
          display: flex;
          align-items: center;
          flex-direction: column;
          justify-content: center;
          align-content: center;
          flex-wrap: wrap;
          margin: (1rem * 1.6) 0;
          flex: 1 0 calc(25% - (3rem));
          max-width: calc(25% - (3rem));
          @include bp("md") {
            flex: 1 0 calc(50% - (0.5rem * 1.6));
            max-width: calc(50% - (0.5rem * 1.6));
            margin: 0 0 (1rem * 1.6);
            padding: (1rem * 1.6);
            text-align: center;
          }
          img {
            margin-bottom: (1rem * 1.6);
            @include bp("md") {
              max-width: 40%;
            }
          }
          &.active,
          &:hover {
            background: $col-prm;
            span {
              color: $white;
            }
            text-decoration: none;
          }
        }
      }
      .faq-list {
        list-style: none;
        margin: 0;
        box-shadow: 0 0.5rem 1.5rem #00000012;
        padding: (2rem * 1.6);
        border-radius: 1rem;
        background: $white;
        .faq-item + .faq-item {
          margin-top: 1em;
        }
        .faq-item {
          border-bottom: 1px solid $gray200;
          &:last-child {
            border-bottom: none;
          }
          [type="checkbox"]:checked ~ .faq-answer {
            height: auto;
            opacity: 1;
            padding-bottom: (1rem * 1.6);
            transition: 0.4s;
          }
          [type="checkbox"]:checked ~ .faq-question:after {
            content: "⌄" !important;
            position: absolute;
            right: 3rem;
            transform: scaleY(-1) translate(0, -1.2rem) !important;
          }
          .faq-question {
            display: block;
            padding: 0.5em;
            font-weight: $fw-bold;
            cursor: pointer;
            &:before {
              content: none !important;
            }
            &::after {
              content: "⌄" !important;
              opacity: 1 !important;
              transform: none !important;
              font-size: 2.4rem;
              font-weight: normal;
              position: absolute;
              right: 3rem;
            }
          }
          .faq-answer {
            height: 0;
            display: block;
            padding: 0 0.5em 0.5em;
            overflow: hidden;
            opacity: 0;
            transition: 0.3s;
          }
        }
      }
    }
  }
}
