@use "sass:list";
@use "../partials/palette";

.Cards--noscript.Faq,
.Cards.Faq {
  margin: 0 auto;
}

.Faq--Nav {
  display: none;
  width: 100%;
  margin-bottom: 0.25rem;
  h6 {
    padding: 0.5rem 1rem;
    border-radius: 0.125rem;
    background-color: list.nth(palette.$purple, 1);
    color: list.nth(palette.$purple, 6);
    border-left: 0.1875rem solid list.nth(palette.$purple, 6);
  }
  ul {
    padding: 0 0 1.5rem 3rem;
    a {
      display: block;
      text-decoration: none;
      color: palette.$black;
      padding: 0.75rem 1rem 0;
      background: none;
      border: none;
      font: inherit;
      cursor: pointer;
      outline: inherit;
      &:hover,
      &:active {
        text-decoration: underline;
      }
    }
  }
  .btn {
    width: 100%;
    text-align: left;
    padding: 0.5rem 1.5rem;

    i {
      font-size: 1.5rem;
      float: right;
    }
  }
}

.Faq--Content {
  width: 100%;
  p.large {
    border-bottom: 0.1875rem solid list.nth(palette.$green, 6);
    display: inline-block;
  }
  h1 {
    margin-bottom: 3rem;
  }
  h5 {
    color: palette.$accentDeEmphasized;
    margin-bottom: 1rem;

    a {
      text-decoration: none;
    }
  }

  dl {
    margin-bottom: 4rem;
  }

  dt {
    cursor: pointer;
  }

  dd {
    cursor: default;
    ul,
    ol {
      padding-left: 1rem;
      margin-bottom: 1rem;
    }
    :last-child {
      margin-bottom: 0;
    }
    ul {
      li::before {
        content: "\2022";
        color: list.nth(palette.$purple, 6);
        display: inline-block;
        width: 0.75rem;
      }
    }
  }

  dt {
    color: list.nth(palette.$purple, 6);
  }

  dd + dt {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 0.125rem solid palette.$borderNeutral;
  }

  dl + dl {
    margin-top: 5rem;
  }
}
