/**
  * @file
  * Details (aka accordions)
  **/
details {
  width: 100%;
  margin-bottom: 0.5em;
}

details > summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  column-gap: 1em;
  flex-direction: row;
  margin: 0;
  padding: 20px;
  background-color: var(--laurier-purple);
  color: var(--white);
  list-style: none;
  text-transform: uppercase;
}

/**
  * I can't tell if this is still doing anything, but it might be necessary in some browsers
  * so I am not deleting until I can test everywhere.
  **/
details summary::-webkit-details-marker,
details summary::marker {
  display: none;
}

details > summary:is(:hover, :focus) {
  background-color: var(--grey);
  color: var(--laurier-purple);
  outline: 2px dotted var(--laurier-purple);
}

details > summary::before {
  font: var(--fa-font-solid);
  content: "\f055";
  fill: var(--white);
  width: 1em;
  height: 1em;
}

.js details:not([open]) .details-wrapper {
  display: block;
}

details[open] > summary::before {
  content: "\f056";
}

details[open] .details-wrapper {
  border: 3px solid var(--laurier-blue);
  border-top: none;
  border-radius: 0 0 10px 10px;
  padding: 30px 20px;
  background-color: var(--light-grey);
}

details[open] .details-wrapper p:last-child {
  margin-bottom: 0;
}

/** CAPTCHA Details block doesn't need to be full width **/
details.captcha {
  width: 500px;
}