/* FAQ: one question per row, the answer opens below it */
.faq-list { border-top: 1px solid rgba(69,48,46,0.14); }
.faq-item { border-bottom: 1px solid rgba(69,48,46,0.14); }
.faq-item summary {
  position: relative;
  padding: 20px 40px 20px 0;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--chocolate);
  list-style: none;
  cursor: pointer;
}
.faq-item summary::-webkit-details-marker { display: none; }
/* A plus that turns into a minus */
.faq-item summary::before,
.faq-item summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--red);
  transition: transform var(--ease-normal);
}
.faq-item summary::after { transform: rotate(90deg); }
.faq-item[open] summary::after { transform: rotate(0deg); }
.faq-item p, .faq-item > div { padding: 0 40px 22px 0; }
/* The open question turns Emmental; closed ones stay snow */
.faq-item {
  margin: 0 -12px;
  padding: 0 12px;
  border-bottom: 0;
  /* The divider stays on the text column, the Emmental reaches 12px past it */
  background: linear-gradient(rgba(69,48,46,0.14), rgba(69,48,46,0.14)) 12px 100% / calc(100% - 24px) 1px no-repeat;
  transition: background-color var(--ease-normal);
}
.faq-item[open] { background: var(--emmental); border-radius: 6px; }
/* Two open questions in a row stay two cards, with a thin snow line between them */
.faq-item[open] + .faq-item[open] { margin-top: 3px; }
.faq-item b { color: var(--chocolate); font-weight: 600; }

@media (min-width: 1100px) {
  .faq { max-width: 880px; }
  .faq-item summary { padding: 24px 48px 24px 0; font-size: 19px; }
  .faq-item p { font-size: 17px; }
}